@shadng/sng-ui 1.0.0

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

@@ -0,0 +1,65 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed } from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * Progress bar for displaying completion status.
+ * Uses semantic `role="progressbar"` with proper ARIA attributes.
+ * Supports horizontal and vertical orientations.
+ *
+ * @example
+ * ```html
+ * <sng-progress [value]="33" />
+ * <sng-progress [value]="66" orientation="vertical" class="h-48" />
+ * ```
+ */
+@Component({
+  selector: 'sng-progress',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'role': 'progressbar',
+    '[attr.aria-valuemin]': '0',
+    '[attr.aria-valuemax]': '100',
+    '[attr.aria-valuenow]': 'clampedValue()',
+    '[attr.aria-orientation]': 'orientation()',
+    '[class]': 'hostClasses()',
+  },
+  template: `
+    <div
+      [class]="indicatorClasses()"
+      [style.transform]="indicatorTransform()">
+    </div>
+  `,
+})
+export class SngProgress {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /** Current progress value (0-100). */
+  value = input<number>(0);
+
+  /** Orientation of the progress bar. */
+  orientation = input<'horizontal' | 'vertical'>('horizontal');
+
+  hostClasses = computed(() =>
+    cn(
+      'relative block overflow-hidden rounded-full bg-current/20 text-primary',
+      this.orientation() === 'vertical' ? 'w-2 h-full' : 'h-2 w-full',
+      this.class()
+    )
+  );
+
+  indicatorClasses = computed(() =>
+    cn('h-full w-full flex-1 bg-current transition-transform')
+  );
+
+  clampedValue = computed(() => Math.max(0, Math.min(100, this.value())));
+
+  indicatorTransform = computed(() => {
+    const remaining = 100 - this.clampedValue();
+    return this.orientation() === 'vertical'
+      ? `translateY(${remaining}%)`
+      : `translateX(-${remaining}%)`;
+  });
+}

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

@@ -0,0 +1,5 @@
+export { SngRadio } from './sng-radio';
+export { SngRadioItem } from './sng-radio-item';
+
+// Backwards compatibility aliases (deprecated)
+export { SngRadio as SngRadioGroup } from './sng-radio';

package/src/lib/radio/sng-radio-item.ts

@@ -0,0 +1,100 @@
+import {
+  Component,
+  computed,
+  input,
+  inject,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  booleanAttribute,
+  forwardRef,
+} from '@angular/core';
+import { SngRadio } from './sng-radio';
+import { cn } from './cn';
+
+const TRANSITION_SHADOW = 'transition-[color,box-shadow] outline-none';
+const FOCUS_RING = 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]';
+
+/**
+ * An individual radio button within a radio group.
+ * Must be used inside a `sng-radio` container.
+ *
+ * @example
+ * ```html
+ * <sng-radio [(value)]="selected">
+ *   <sng-radio-item value="option1">Option 1</sng-radio-item>
+ *   <sng-radio-item value="option2">Option 2</sng-radio-item>
+ * </sng-radio>
+ * ```
+ */
+@Component({
+  selector: 'sng-radio-item',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'hostClasses()',
+    '(click)': 'select()',
+    '[attr.role]': '"radio"',
+    '[attr.aria-checked]': 'isChecked()',
+    '[attr.aria-disabled]': 'isDisabled()',
+    '[attr.tabindex]': '_tabindex()',
+    '[attr.data-state]': 'isChecked() ? "checked" : "unchecked"',
+  },
+  template: `
+    @if (isChecked()) {
+      <svg
+        [class]="dotClasses()"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="12" cy="12" r="12"/>
+      </svg>
+    }
+  `,
+})
+export class SngRadioItem {
+  private group = inject(forwardRef(() => SngRadio), { optional: true });
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /** The value associated with this radio item. */
+  value = input.required<string>();
+
+  /** Whether this radio item is disabled. */
+  disabled = input(false, { transform: booleanAttribute });
+
+  isDisabled = computed(() => this.disabled() || (this.group?.disabled() ?? false));
+
+  isChecked = computed(() => {
+    if (!this.group) return false;
+    return this.group.value() === this.value();
+  });
+
+  /** @internal */
+  _tabindex = computed(() => {
+    return this.isDisabled() ? -1 : 0;
+  });
+
+  hostClasses = computed(() =>
+    cn(
+      'aspect-square shrink-0 rounded-full border shadow-xs',
+      'size-4',
+      'cursor-pointer flex items-center justify-center text-primary',
+      TRANSITION_SHADOW,
+      FOCUS_RING,
+      'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+      'aria-disabled:cursor-not-allowed aria-disabled:opacity-50',
+      'border-input dark:bg-input/30',
+      this.class()
+    )
+  );
+
+  /** @internal */
+  dotClasses = computed(() => cn('fill-primary', 'size-1/2'));
+
+  select() {
+    if (this.isDisabled()) return;
+    this.group?._selectValue(this.value());
+  }
+}

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

@@ -0,0 +1,54 @@
+import {
+  Component,
+  model,
+  computed,
+  ChangeDetectionStrategy,
+  input,
+  booleanAttribute,
+} from '@angular/core';
+import { cn } from './cn';
+
+/**
+ * A radio group container that manages selection state for radio items.
+ * Uses Angular's model() for two-way binding, compatible with Signal Forms.
+ *
+ * @example
+ * ```html
+ * <sng-radio [(value)]="selectedPlan">
+ *   <sng-radio-item value="free">Free</sng-radio-item>
+ *   <sng-radio-item value="pro">Pro</sng-radio-item>
+ * </sng-radio>
+ * ```
+ */
+@Component({
+  selector: 'sng-radio',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.role]': '"radiogroup"',
+    '[attr.aria-disabled]': 'disabled()',
+    '[class]': 'hostClasses()',
+  },
+  template: `<ng-content />`,
+})
+export class SngRadio {
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /** The selected value. Supports two-way binding. */
+  value = model<string>('');
+
+  /** Name attribute for the radio group. */
+  name = input<string>('');
+
+  /** Whether the entire radio group is disabled. */
+  disabled = input(false, { transform: booleanAttribute });
+
+  hostClasses = computed(() => cn('grid gap-3', this.class()));
+
+  /** @internal Called by radio items when selected. */
+  _selectValue(value: string) {
+    if (this.disabled()) return;
+    this.value.set(value);
+  }
+}

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

@@ -0,0 +1,3 @@
+export { SngResizableGroup, type ResizableDirection } from './sng-resizable-group';
+export { SngResizablePanel } from './sng-resizable-panel';
+export { SngResizableHandle } from './sng-resizable-handle';

package/src/lib/resizable/sng-resizable-group.ts

@@ -0,0 +1,188 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  input,
+  computed,
+  contentChildren,
+  signal,
+  effect,
+  untracked,
+  AfterContentInit,
+  ElementRef,
+  inject,
+  PLATFORM_ID,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { cn } from './cn';
+import { SngResizablePanel } from './sng-resizable-panel';
+
+export type ResizableDirection = 'horizontal' | 'vertical';
+
+/**
+ * A container component that manages a group of resizable panels.
+ *
+ * @example
+ * ```html
+ * <sng-resizable-group direction="horizontal" class="min-h-[200px] max-w-md rounded-lg border">
+ *   <sng-resizable-panel [defaultSize]="50">
+ *     <div class="flex h-full items-center justify-center p-6">One</div>
+ *   </sng-resizable-panel>
+ *   <sng-resizable-handle [withHandle]="true" />
+ *   <sng-resizable-panel [defaultSize]="50">
+ *     <div class="flex h-full items-center justify-center p-6">Two</div>
+ *   </sng-resizable-panel>
+ * </sng-resizable-group>
+ * ```
+ */
+@Component({
+  selector: 'sng-resizable-group',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': 'hostClasses()',
+    '[attr.data-panel-group]': '"true"',
+    '[attr.data-direction]': 'direction()',
+  },
+  template: `<ng-content />`,
+})
+export class SngResizableGroup implements AfterContentInit {
+  private elementRef = inject(ElementRef);
+  private platformId = inject(PLATFORM_ID);
+  private _lastPanelCount = 0;
+
+  /** The direction in which the panels are laid out. */
+  direction = input<ResizableDirection>('horizontal');
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  /** @internal */
+  _panels = contentChildren(SngResizablePanel);
+
+  /** @internal */
+  _panelSizes = signal<number[]>([]);
+
+  hostClasses = computed(() =>
+    cn(
+      'flex h-full w-full',
+      this.direction() === 'horizontal' ? 'flex-row' : 'flex-col',
+      this.class()
+    )
+  );
+
+  constructor() {
+    // Re-initialize when panels are added or removed dynamically (e.g. via @if)
+    effect(() => {
+      const count = this._panels().length;
+      if (this._lastPanelCount > 0 && count !== this._lastPanelCount) {
+        this._lastPanelCount = count;
+        untracked(() => this.initializePanelSizes());
+      }
+    });
+  }
+
+  ngAfterContentInit() {
+    this._lastPanelCount = this._panels().length;
+    this.initializePanelSizes();
+  }
+
+  /** @internal Returns the container size in pixels along the layout axis. */
+  _getContainerSize(): number {
+    const el = this.elementRef.nativeElement;
+    return this.direction() === 'horizontal' ? el.offsetWidth : el.offsetHeight;
+  }
+
+  private initializePanelSizes() {
+    const panelArray = this._panels();
+    if (panelArray.length === 0) return;
+
+    const sizes: number[] = [];
+    let totalDefault = 0;
+    let panelsWithoutDefault = 0;
+
+    // First pass: collect default sizes
+    panelArray.forEach((panel) => {
+      const defaultSize = panel.defaultSize();
+      if (defaultSize !== undefined) {
+        sizes.push(defaultSize);
+        totalDefault += defaultSize;
+      } else {
+        sizes.push(-1); // Mark for later
+        panelsWithoutDefault++;
+      }
+    });
+
+    // Second pass: distribute remaining space
+    if (panelsWithoutDefault > 0) {
+      const remainingSpace = 100 - totalDefault;
+      const sizePerPanel = remainingSpace / panelsWithoutDefault;
+      for (let i = 0; i < sizes.length; i++) {
+        if (sizes[i] === -1) {
+          sizes[i] = sizePerPanel;
+        }
+      }
+    }
+
+    this._panelSizes.set(sizes);
+
+    panelArray.forEach((panel, index) => {
+      panel._setSize(sizes[index]);
+    });
+  }
+
+  /** @internal Called by handles to resize adjacent panels. */
+  _resizePanel(panelIndex: number, delta: number) {
+    if (!isPlatformBrowser(this.platformId)) return;
+
+    const sizes = [...this._panelSizes()];
+    const panelArray = this._panels();
+
+    // Safety checks
+    if (panelIndex < 0 || panelIndex >= panelArray.length - 1) return;
+    if (sizes.length !== panelArray.length) return;
+
+    const currentPanel = panelArray[panelIndex];
+    const nextPanel = panelArray[panelIndex + 1];
+    if (!currentPanel || !nextPanel) return;
+
+    const containerSize = this._getContainerSize();
+
+    // Convert pixel delta to percentage
+    const deltaPercent = (delta / containerSize) * 100;
+
+    const currentMin = currentPanel.minSize() ?? 0;
+    const currentMax = currentPanel.maxSize() ?? 100;
+    const nextMin = nextPanel.minSize() ?? 0;
+    const nextMax = nextPanel.maxSize() ?? 100;
+
+    // Calculate new sizes
+    let newCurrentSize = sizes[panelIndex] + deltaPercent;
+    let newNextSize = sizes[panelIndex + 1] - deltaPercent;
+
+    // Apply constraints
+    if (newCurrentSize < currentMin) {
+      newCurrentSize = currentMin;
+      newNextSize = sizes[panelIndex] + sizes[panelIndex + 1] - currentMin;
+    } else if (newCurrentSize > currentMax) {
+      newCurrentSize = currentMax;
+      newNextSize = sizes[panelIndex] + sizes[panelIndex + 1] - currentMax;
+    }
+
+    if (newNextSize < nextMin) {
+      newNextSize = nextMin;
+      newCurrentSize = sizes[panelIndex] + sizes[panelIndex + 1] - nextMin;
+    } else if (newNextSize > nextMax) {
+      newNextSize = nextMax;
+      newCurrentSize = sizes[panelIndex] + sizes[panelIndex + 1] - nextMax;
+    }
+
+    sizes[panelIndex] = newCurrentSize;
+    sizes[panelIndex + 1] = newNextSize;
+
+    this._panelSizes.set(sizes);
+
+    // Update panels
+    currentPanel._setSize(newCurrentSize);
+    nextPanel._setSize(newNextSize);
+  }
+}

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

@@ -0,0 +1,236 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  input,
+  computed,
+  inject,
+  ElementRef,
+  PLATFORM_ID,
+  OnInit,
+  OnDestroy,
+  signal,
+  booleanAttribute,
+} from '@angular/core';
+import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { cn } from './cn';
+import { SngResizableGroup } from './sng-resizable-group';
+
+const FOCUS_RING = 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1';
+
+/**
+ * A draggable handle for resizing adjacent panels within a resizable group.
+ * Supports mouse and touch interactions.
+ *
+ * @example
+ * ```html
+ * <sng-resizable-group direction="horizontal" class="min-h-[200px] rounded-lg border">
+ *   <sng-resizable-panel [defaultSize]="50">Left panel</sng-resizable-panel>
+ *   <sng-resizable-handle [withHandle]="true" />
+ *   <sng-resizable-panel [defaultSize]="50">Right panel</sng-resizable-panel>
+ * </sng-resizable-group>
+ * ```
+ */
+@Component({
+  selector: 'sng-resizable-handle',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    '[class]': 'hostClasses()',
+    '[attr.data-panel-resize-handle]': '"true"',
+    '[attr.data-direction]': 'direction()',
+    '[attr.data-dragging]': 'isDragging()',
+    '[attr.tabindex]': '"0"',
+    '[attr.role]': '"separator"',
+    '[attr.aria-orientation]': 'direction() === "horizontal" ? "vertical" : "horizontal"',
+    '[attr.aria-valuenow]': '_ariaValueNow()',
+    '[attr.aria-valuemin]': '_ariaValueMin()',
+    '[attr.aria-valuemax]': '_ariaValueMax()',
+    '(mousedown)': 'onMouseDown($event)',
+    '(touchstart)': 'onTouchStart($event)',
+  },
+  template: `
+    @if (withHandle()) {
+      <div [class]="gripClasses()">
+        @if (direction() === 'horizontal') {
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/>
+            <circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/>
+          </svg>
+        } @else {
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="9" r="1"/><circle cx="5" cy="9" r="1"/><circle cx="19" cy="9" r="1"/>
+            <circle cx="12" cy="15" r="1"/><circle cx="5" cy="15" r="1"/><circle cx="19" cy="15" r="1"/>
+          </svg>
+        }
+      </div>
+    }
+  `,
+})
+export class SngResizableHandle implements OnInit, OnDestroy {
+  private group = inject(SngResizableGroup, { optional: true });
+  private elementRef = inject(ElementRef);
+  private document = inject(DOCUMENT);
+  private platformId = inject(PLATFORM_ID);
+
+  /** Whether to display a visible grip icon on the handle. */
+  withHandle = input(false, { transform: booleanAttribute });
+
+  /** Custom CSS classes. */
+  class = input<string>('');
+
+  isDragging = signal(false);
+
+  private _panelIndex = signal(0);
+  private startPosition = 0;
+
+  direction = computed(() => this.group?.direction() ?? 'horizontal');
+
+  /** @internal */
+  _ariaValueNow = computed(() => {
+    if (!this.group) return 0;
+    const sizes = this.group._panelSizes();
+    const index = this._panelIndex();
+    return Math.round(sizes[index] ?? 0);
+  });
+
+  /** @internal */
+  _ariaValueMin = computed(() => {
+    if (!this.group) return 0;
+    const panels = this.group._panels();
+    const index = this._panelIndex();
+    return panels[index]?.minSize() ?? 0;
+  });
+
+  /** @internal */
+  _ariaValueMax = computed(() => {
+    if (!this.group) return 100;
+    const panels = this.group._panels();
+    const index = this._panelIndex();
+    return panels[index]?.maxSize() ?? 100;
+  });
+
+  hostClasses = computed(() =>
+    cn(
+      'relative flex items-center justify-center bg-border',
+      FOCUS_RING,
+      this.direction() === 'horizontal'
+        ? 'h-full w-px cursor-col-resize after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2'
+        : 'h-px w-full cursor-row-resize after:absolute after:inset-x-0 after:top-1/2 after:h-1 after:-translate-y-1/2',
+      'data-[dragging=true]:bg-primary',
+      this.class()
+    )
+  );
+
+  gripClasses = computed(() =>
+    cn(
+      'z-10 flex items-center justify-center rounded-sm border bg-border',
+      this.direction() === 'horizontal' ? 'h-4 w-3' : 'h-3 w-4'
+    )
+  );
+
+  ngOnInit() {
+    this._calculatePanelIndex();
+  }
+
+  ngOnDestroy() {
+    this.removeListeners();
+  }
+
+  private _calculatePanelIndex() {
+    if (!this.group || !isPlatformBrowser(this.platformId)) return;
+
+    const element = this.elementRef.nativeElement;
+    const parent = element.parentElement;
+    if (!parent) return;
+
+    // Count panels before this handle
+    const children = Array.from(parent.children) as Element[];
+    let panelCount = 0;
+    for (const child of children) {
+      if (child === element) break;
+      if (child.hasAttribute('data-panel')) {
+        panelCount++;
+      }
+    }
+    // panelIndex is the index of the panel to the LEFT/TOP of this handle
+    this._panelIndex.set(Math.max(0, panelCount - 1));
+  }
+
+  onMouseDown(event: MouseEvent) {
+    event.preventDefault();
+    this.startDrag(event.clientX, event.clientY);
+
+    if (isPlatformBrowser(this.platformId)) {
+      this.document.addEventListener('mousemove', this.onMouseMove);
+      this.document.addEventListener('mouseup', this.onMouseUp);
+    }
+  }
+
+  onTouchStart(event: TouchEvent) {
+    if (event.touches.length !== 1) return;
+    const touch = event.touches[0];
+    this.startDrag(touch.clientX, touch.clientY);
+
+    if (isPlatformBrowser(this.platformId)) {
+      this.document.addEventListener('touchmove', this.onTouchMove, { passive: false });
+      this.document.addEventListener('touchend', this.onTouchEnd);
+    }
+  }
+
+  private startDrag(clientX: number, clientY: number) {
+    this.isDragging.set(true);
+    this._calculatePanelIndex();
+    this.startPosition =
+      this.direction() === 'horizontal' ? clientX : clientY;
+  }
+
+  private onMouseMove = (event: MouseEvent) => {
+    this.handleMove(event.clientX, event.clientY);
+  };
+
+  private onTouchMove = (event: TouchEvent) => {
+    event.preventDefault();
+    if (event.touches.length !== 1) return;
+    const touch = event.touches[0];
+    this.handleMove(touch.clientX, touch.clientY);
+  };
+
+  private handleMove(clientX: number, clientY: number) {
+    const currentPosition =
+      this.direction() === 'horizontal' ? clientX : clientY;
+    const delta = currentPosition - this.startPosition;
+    this.startPosition = currentPosition;
+
+    if (this.group && delta !== 0) {
+      this.group._resizePanel(this._panelIndex(), delta);
+    }
+  }
+
+  private onMouseUp = () => {
+    this.endDrag();
+    this.document.removeEventListener('mousemove', this.onMouseMove);
+    this.document.removeEventListener('mouseup', this.onMouseUp);
+  };
+
+  private onTouchEnd = () => {
+    this.endDrag();
+    this.document.removeEventListener('touchmove', this.onTouchMove);
+    this.document.removeEventListener('touchend', this.onTouchEnd);
+  };
+
+  private endDrag() {
+    this.isDragging.set(false);
+  }
+
+  private removeListeners() {
+    if (isPlatformBrowser(this.platformId)) {
+      this.document.removeEventListener('mousemove', this.onMouseMove);
+      this.document.removeEventListener('mouseup', this.onMouseUp);
+      this.document.removeEventListener('touchmove', this.onTouchMove);
+      this.document.removeEventListener('touchend', this.onTouchEnd);
+    }
+  }
+
+}