@sonny-ui/core 0.1.0-alpha.15 → 0.1.0-alpha.16

package/src/lib/color-picker/color-picker.utils.ts

@@ -0,0 +1,183 @@
+import type { RGB, HSL, HSV, ColorFormat } from './color-picker.types';
+
+export function hexToRgb(hex: string): RGB | null {
+  const clean = hex.replace(/^#/, '');
+  if (!/^[0-9a-fA-F]+$/.test(clean)) return null;
+  if (clean.length === 3) {
+    const r = parseInt(clean[0] + clean[0], 16);
+    const g = parseInt(clean[1] + clean[1], 16);
+    const b = parseInt(clean[2] + clean[2], 16);
+    return { r, g, b };
+  }
+  if (clean.length === 6) {
+    const r = parseInt(clean.slice(0, 2), 16);
+    const g = parseInt(clean.slice(2, 4), 16);
+    const b = parseInt(clean.slice(4, 6), 16);
+    return { r, g, b };
+  }
+  return null;
+}
+
+export function rgbToHex(rgb: RGB): string {
+  const toHex = (n: number) => Math.round(Math.max(0, Math.min(255, n))).toString(16).padStart(2, '0');
+  return `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+}
+
+export function rgbToHsl(rgb: RGB): HSL {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100),
+  };
+}
+
+export function hslToRgb(hsl: HSL): RGB {
+  const h = hsl.h / 360;
+  const s = hsl.s / 100;
+  const l = hsl.l / 100;
+
+  if (s === 0) {
+    const v = Math.round(l * 255);
+    return { r: v, g: v, b: v };
+  }
+
+  const hue2rgb = (p: number, q: number, t: number): number => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+
+  return {
+    r: Math.round(hue2rgb(p, q, h + 1 / 3) * 255),
+    g: Math.round(hue2rgb(p, q, h) * 255),
+    b: Math.round(hue2rgb(p, q, h - 1 / 3) * 255),
+  };
+}
+
+export function rgbToHsv(rgb: RGB): HSV {
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const d = max - min;
+  let h = 0;
+  const s = max === 0 ? 0 : d / max;
+  const v = max;
+
+  if (max !== min) {
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+
+  return { h: Math.round(h * 360), s, v };
+}
+
+export function hsvToRgb(hsv: HSV): RGB {
+  const h = hsv.h / 360;
+  const s = hsv.s;
+  const v = hsv.v;
+  const i = Math.floor(h * 6);
+  const f = h * 6 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - f * s);
+  const t = v * (1 - (1 - f) * s);
+
+  let r: number, g: number, b: number;
+  switch (i % 6) {
+    case 0: r = v; g = t; b = p; break;
+    case 1: r = q; g = v; b = p; break;
+    case 2: r = p; g = v; b = t; break;
+    case 3: r = p; g = q; b = v; break;
+    case 4: r = t; g = p; b = v; break;
+    default: r = v; g = p; b = q; break;
+  }
+
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255),
+  };
+}
+
+export function parseColor(input: string): RGB | null {
+  const trimmed = input.trim().toLowerCase();
+
+  // HEX
+  if (trimmed.startsWith('#')) {
+    return hexToRgb(trimmed);
+  }
+
+  // rgb(r, g, b)
+  const rgbMatch = trimmed.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/);
+  if (rgbMatch) {
+    return {
+      r: Math.min(255, parseInt(rgbMatch[1])),
+      g: Math.min(255, parseInt(rgbMatch[2])),
+      b: Math.min(255, parseInt(rgbMatch[3])),
+    };
+  }
+
+  // hsl(h, s%, l%)
+  const hslMatch = trimmed.match(/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/);
+  if (hslMatch) {
+    return hslToRgb({
+      h: Math.min(360, parseInt(hslMatch[1])),
+      s: Math.min(100, parseInt(hslMatch[2])),
+      l: Math.min(100, parseInt(hslMatch[3])),
+    });
+  }
+
+  return null;
+}
+
+export function formatColor(rgb: RGB, format: ColorFormat, alpha?: number): string {
+  switch (format) {
+    case 'hex':
+      return rgbToHex(rgb);
+    case 'rgb':
+      if (alpha !== undefined && alpha < 1) {
+        return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha.toFixed(2)})`;
+      }
+      return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
+    case 'hsl': {
+      const hsl = rgbToHsl(rgb);
+      if (alpha !== undefined && alpha < 1) {
+        return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha.toFixed(2)})`;
+      }
+      return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
+    }
+  }
+}
+
+export function isValidColor(input: string): boolean {
+  return parseColor(input) !== null;
+}

package/src/lib/color-picker/color-picker.variants.ts

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority';
+
+export const colorPickerTriggerVariants = cva(
+  'inline-flex w-full items-center gap-2 whitespace-nowrap rounded-sm border border-border bg-background px-3 py-2 text-sm ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'h-9 text-xs',
+        md: 'h-10 text-sm',
+        lg: 'h-11 text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+);
+
+export type ColorPickerSize = 'sm' | 'md' | 'lg';

package/src/lib/color-picker/index.ts

@@ -0,0 +1,20 @@
+export { SnyColorPickerComponent } from './color-picker.component';
+export { colorPickerTriggerVariants, type ColorPickerSize } from './color-picker.variants';
+export type {
+  ColorFormat,
+  RGB,
+  HSL,
+  HSV,
+  ColorPickerPreset,
+} from './color-picker.types';
+export {
+  hexToRgb,
+  rgbToHex,
+  rgbToHsl,
+  hslToRgb,
+  rgbToHsv,
+  hsvToRgb,
+  parseColor,
+  formatColor,
+  isValidColor,
+} from './color-picker.utils';

package/src/lib/command-palette/command-palette.component.spec.ts

@@ -0,0 +1,178 @@
+import { Component, inject } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyCommandPaletteService } from './command-palette.service';
+import { SnyDialogService } from '../modal/dialog.service';
+import type { Command } from './command-palette.types';
+
+function createCommands(): Command[] {
+  return [
+    { id: 'light', label: 'Set Light Theme', group: 'Theme', action: vi.fn() },
+    { id: 'dark', label: 'Set Dark Theme', group: 'Theme', action: vi.fn() },
+    { id: 'home', label: 'Go to Home', group: 'Navigation', action: vi.fn(), shortcut: 'Ctrl+H' },
+    { id: 'settings', label: 'Open Settings', group: 'Navigation', action: vi.fn(), description: 'Open the settings page' },
+    { id: 'copy', label: 'Copy URL', action: vi.fn(), keywords: ['clipboard', 'link'] },
+    { id: 'disabled', label: 'Disabled Command', disabled: true, action: vi.fn() },
+  ];
+}
+
+@Component({
+  standalone: true,
+  template: `<button (click)="open()">Open</button>`,
+})
+class TestHostComponent {
+  readonly service = inject(SnyCommandPaletteService);
+  commands = createCommands();
+
+  open(): void {
+    this.service.open({ commands: this.commands });
+  }
+}
+
+describe('SnyCommandPaletteComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let host: TestHostComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+      providers: [SnyDialogService, SnyCommandPaletteService],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  function openPalette(): void {
+    host.open();
+    fixture.detectChanges();
+  }
+
+  function getPaletteEl(): HTMLElement | null {
+    return document.querySelector('sny-command-palette');
+  }
+
+  function getButtons(): HTMLButtonElement[] {
+    const el = getPaletteEl();
+    return el ? Array.from(el.querySelectorAll('button[data-cmd-idx]')) as HTMLButtonElement[] : [];
+  }
+
+  function getInput(): HTMLInputElement | null {
+    const el = getPaletteEl();
+    return el ? el.querySelector('input') : null;
+  }
+
+  afterEach(() => {
+    host.service.close();
+    fixture.detectChanges();
+  });
+
+  it('should open the palette via service', () => {
+    openPalette();
+    expect(getPaletteEl()).not.toBeNull();
+  });
+
+  it('should prevent double open', () => {
+    openPalette();
+    host.open();
+    fixture.detectChanges();
+    const palettes = document.querySelectorAll('sny-command-palette');
+    expect(palettes.length).toBe(1);
+  });
+
+  it('should render search input with placeholder', () => {
+    openPalette();
+    const input = getInput();
+    expect(input).not.toBeNull();
+    expect(input?.placeholder).toBe('Type a command...');
+  });
+
+  it('should render commands (excluding disabled)', () => {
+    openPalette();
+    const buttons = getButtons();
+    // 6 commands minus 1 disabled = 5
+    expect(buttons.length).toBe(5);
+  });
+
+  it('should render group headers', () => {
+    openPalette();
+    const el = getPaletteEl()!;
+    const groups = el.querySelectorAll('.uppercase');
+    const groupNames = Array.from(groups).map((g) => g.textContent?.trim());
+    expect(groupNames).toContain('Theme');
+    expect(groupNames).toContain('Navigation');
+  });
+
+  it('should filter commands by query', () => {
+    openPalette();
+    const input = getInput()!;
+    input.value = 'dark';
+    input.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+
+    const buttons = getButtons();
+    expect(buttons.length).toBe(1);
+    expect(buttons[0].textContent).toContain('Set Dark Theme');
+  });
+
+  it('should filter by keywords', () => {
+    openPalette();
+    const input = getInput()!;
+    input.value = 'clipboard';
+    input.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+
+    const buttons = getButtons();
+    expect(buttons.length).toBe(1);
+    expect(buttons[0].textContent).toContain('Copy URL');
+  });
+
+  it('should show empty state when no results', () => {
+    openPalette();
+    const input = getInput()!;
+    input.value = 'xyznonexistent';
+    input.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+
+    const el = getPaletteEl()!;
+    expect(el.textContent).toContain('No results found.');
+  });
+
+  it('should render shortcuts', () => {
+    openPalette();
+    const el = getPaletteEl()!;
+    const kbds = el.querySelectorAll('kbd');
+    const texts = Array.from(kbds).map((k) => k.textContent?.trim());
+    expect(texts).toContain('Ctrl+H');
+  });
+
+  it('should render descriptions', () => {
+    openPalette();
+    const el = getPaletteEl()!;
+    expect(el.textContent).toContain('Open the settings page');
+  });
+
+  it('should execute command on click and close', () => {
+    openPalette();
+    const buttons = getButtons();
+    buttons[0].click();
+    fixture.detectChanges();
+
+    expect(host.commands[0].action).toHaveBeenCalled();
+    // Palette should be closed
+    setTimeout(() => {
+      expect(getPaletteEl()).toBeNull();
+    });
+  });
+
+  it('should navigate with arrow keys', () => {
+    openPalette();
+    const el = getPaletteEl()!;
+
+    el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+
+    const buttons = getButtons();
+    // Second button should be active
+    expect(buttons[1].className).toContain('bg-accent');
+  });
+});

package/src/lib/command-palette/command-palette.component.ts

@@ -0,0 +1,195 @@
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  signal,
+  viewChild,
+} from '@angular/core';
+import { DialogRef } from '@angular/cdk/dialog';
+import { SnyInputDirective } from '../input/input.directive';
+import { SNY_DIALOG_DATA } from '../modal/dialog.service';
+import type { Command, CommandGroup, CommandPaletteConfig } from './command-palette.types';
+
+@Component({
+  selector: 'sny-command-palette',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SnyInputDirective],
+  host: {
+    '(keydown)': 'onKeydown($event)',
+    'class': 'block',
+  },
+  styles: `
+    :host {
+      display: block;
+      background-color: var(--sny-background);
+      border: 1px solid var(--sny-border);
+      border-radius: 0.5rem;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      overflow: hidden;
+    }
+  `,
+  template: `
+    <!-- Search -->
+    <div class="flex items-center gap-2 border-b border-border px-4 py-3">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground shrink-0"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+      <input
+        #searchInput
+        snyInput
+        class="border-none shadow-none h-8 px-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+        [placeholder]="config.placeholder ?? 'Type a command...'"
+        [value]="query()"
+        (input)="onQueryChange(searchInput.value)"
+      />
+      <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground shrink-0">Esc</kbd>
+    </div>
+
+    <!-- Results -->
+    <div class="max-h-[300px] overflow-y-auto p-2 sny-scrollbar">
+      @if (flatResults().length === 0) {
+        <p class="py-6 text-center text-sm text-muted-foreground">
+          {{ config.emptyText ?? 'No results found.' }}
+        </p>
+      } @else {
+        @for (group of filteredGroups(); track group.name) {
+          @if (group.name) {
+            <p class="px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider">{{ group.name }}</p>
+          }
+          @for (cmd of group.commands; track cmd.id) {
+            @let idx = flatIndex(cmd);
+            <button
+              [attr.data-cmd-idx]="idx"
+              [class]="
+                'w-full text-left rounded-sm px-3 py-2 text-sm transition-colors flex items-center gap-3 cursor-pointer ' +
+                (idx === activeIndex()
+                  ? 'bg-accent text-accent-foreground'
+                  : 'text-foreground hover:bg-accent/50')
+              "
+              (click)="execute(cmd)"
+              (mouseenter)="activeIndex.set(idx)"
+            >
+              @if (cmd.icon) {
+                <span class="shrink-0 w-5 text-center text-muted-foreground" [innerHTML]="cmd.icon"></span>
+              }
+              <div class="flex-1 min-w-0">
+                <span class="block truncate font-medium">{{ cmd.label }}</span>
+                @if (cmd.description) {
+                  <span class="block text-xs text-muted-foreground truncate">{{ cmd.description }}</span>
+                }
+              </div>
+              @if (cmd.shortcut) {
+                <kbd class="rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground shrink-0">{{ cmd.shortcut }}</kbd>
+              }
+            </button>
+          }
+        }
+      }
+    </div>
+
+    <!-- Footer -->
+    <div class="border-t border-border px-4 py-2">
+      <div class="flex items-center gap-3 text-xs text-muted-foreground">
+        <span class="flex items-center gap-1">
+          <kbd class="rounded border border-border bg-muted px-1 py-0.5 font-mono text-[10px]">&uarr;&darr;</kbd>
+          Navigate
+        </span>
+        <span class="flex items-center gap-1">
+          <kbd class="rounded border border-border bg-muted px-1 py-0.5 font-mono text-[10px]">&crarr;</kbd>
+          Execute
+        </span>
+        <span class="flex items-center gap-1">
+          <kbd class="rounded border border-border bg-muted px-1 py-0.5 font-mono text-[10px]">Esc</kbd>
+          Close
+        </span>
+      </div>
+    </div>
+  `,
+})
+export class SnyCommandPaletteComponent {
+  readonly config = inject<CommandPaletteConfig>(SNY_DIALOG_DATA);
+  private readonly dialogRef = inject(DialogRef);
+  private readonly searchInput = viewChild<ElementRef<HTMLInputElement>>('searchInput');
+
+  readonly query = signal('');
+  readonly activeIndex = signal(0);
+
+  readonly filteredGroups = computed<CommandGroup[]>(() => {
+    const q = this.query().toLowerCase().trim();
+    const commands = this.config.commands.filter((cmd) => {
+      if (cmd.disabled) return false;
+      if (!q) return true;
+      return (
+        cmd.label.toLowerCase().includes(q) ||
+        cmd.description?.toLowerCase().includes(q) ||
+        cmd.keywords?.some((k) => k.toLowerCase().includes(q))
+      );
+    });
+
+    const groups = new Map<string, Command[]>();
+    for (const cmd of commands) {
+      const group = cmd.group ?? '';
+      if (!groups.has(group)) groups.set(group, []);
+      groups.get(group)!.push(cmd);
+    }
+
+    return [...groups.entries()].map(([name, cmds]) => ({ name, commands: cmds }));
+  });
+
+  readonly flatResults = computed(() =>
+    this.filteredGroups().flatMap((g) => g.commands)
+  );
+
+  constructor() {
+    afterNextRender(() => {
+      this.searchInput()?.nativeElement.focus();
+    });
+  }
+
+  onQueryChange(value: string): void {
+    this.query.set(value);
+    this.activeIndex.set(0);
+  }
+
+  flatIndex(cmd: Command): number {
+    return this.flatResults().indexOf(cmd);
+  }
+
+  execute(cmd: Command): void {
+    this.dialogRef.close();
+    cmd.action();
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    const results = this.flatResults();
+    const len = results.length;
+    if (len === 0 && event.key !== 'Escape') return;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.activeIndex.update((i) => (i + 1) % len);
+        this.scrollActiveIntoView();
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.activeIndex.update((i) => (i - 1 + len) % len);
+        this.scrollActiveIntoView();
+        break;
+      case 'Enter':
+        event.preventDefault();
+        const active = results[this.activeIndex()];
+        if (active) this.execute(active);
+        break;
+    }
+  }
+
+  private scrollActiveIntoView(): void {
+    requestAnimationFrame(() => {
+      const el = document.querySelector(`[data-cmd-idx="${this.activeIndex()}"]`);
+      el?.scrollIntoView({ block: 'nearest' });
+    });
+  }
+}

package/src/lib/command-palette/command-palette.service.ts

@@ -0,0 +1,36 @@
+import { Injectable, inject } from '@angular/core';
+import { SnyDialogService } from '../modal/dialog.service';
+import type { SnyDialogRef } from '../modal/dialog-ref';
+import { SnyCommandPaletteComponent } from './command-palette.component';
+import type { CommandPaletteConfig } from './command-palette.types';
+
+@Injectable({ providedIn: 'root' })
+export class SnyCommandPaletteService {
+  private readonly dialogService = inject(SnyDialogService);
+  private isOpen = false;
+
+  open(config: CommandPaletteConfig): SnyDialogRef<void> | null {
+    if (this.isOpen) return null;
+    this.isOpen = true;
+
+    const ref = this.dialogService.open<SnyCommandPaletteComponent, void>(
+      SnyCommandPaletteComponent,
+      {
+        width: config.width ?? '32rem',
+        data: config,
+      }
+    );
+
+    ref.closed.subscribe(() => {
+      this.isOpen = false;
+    });
+
+    return ref;
+  }
+
+  close(): void {
+    if (this.isOpen) {
+      this.dialogService.closeAll();
+    }
+  }
+}

package/src/lib/command-palette/command-palette.types.ts

@@ -0,0 +1,23 @@
+export interface Command {
+  id: string;
+  label: string;
+  description?: string;
+  icon?: string;
+  group?: string;
+  keywords?: string[];
+  shortcut?: string;
+  disabled?: boolean;
+  action: () => void;
+}
+
+export interface CommandGroup {
+  name: string;
+  commands: Command[];
+}
+
+export interface CommandPaletteConfig {
+  commands: Command[];
+  placeholder?: string;
+  emptyText?: string;
+  width?: string;
+}

package/src/lib/command-palette/index.ts

@@ -0,0 +1,7 @@
+export { SnyCommandPaletteComponent } from './command-palette.component';
+export { SnyCommandPaletteService } from './command-palette.service';
+export type {
+  Command,
+  CommandGroup,
+  CommandPaletteConfig,
+} from './command-palette.types';

package/src/lib/otp-input/index.ts

@@ -0,0 +1,2 @@
+export { SnyOtpInputComponent } from './otp-input.component';
+export { otpCellVariants, type OtpInputSize, type OtpInputType } from './otp-input.variants';