@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/sidebar/sidebar-menu-sub-item.ts

@@ -0,0 +1,15 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'li[sc-sidebar-menu-sub-item]',
+  host: {
+    'data-slot': 'sidebar-menu-sub-item',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarMenuSubItem {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+}

package/src/lib/components/sidebar/sidebar-menu-sub.ts

@@ -0,0 +1,21 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'ul[sc-sidebar-menu-sub]',
+  host: {
+    'data-slot': 'sidebar-menu-sub',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarMenuSub {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/sidebar/sidebar-menu.ts

@@ -0,0 +1,17 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'ul[sc-sidebar-menu]',
+  host: {
+    'data-slot': 'sidebar-menu',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarMenu {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex w-full min-w-0 flex-col gap-0', this.classInput()),
+  );
+}

package/src/lib/components/sidebar/sidebar-provider.ts

@@ -0,0 +1,128 @@
+import {
+  Component,
+  computed,
+  effect,
+  inject,
+  input,
+  model,
+  OnDestroy,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+import { cn } from '@semantic-components/ui';
+import { ScSidebarState } from './sidebar-state.service';
+
+const SIDEBAR_STORAGE_KEY = 'sc-sidebar-state';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+const MOBILE_BREAKPOINT = 768;
+
+@Component({
+  selector: 'div[sc-sidebar-provider]',
+  template: '<ng-content />',
+  providers: [ScSidebarState],
+  host: {
+    'data-slot': 'sidebar-wrapper',
+    '[class]': 'class()',
+    '[style.--sidebar-width]': '"16rem"',
+    '[style.--sidebar-width-mobile]': '"18rem"',
+    '[style.--sidebar-width-icon]': '"3rem"',
+  },
+  encapsulation: ViewEncapsulation.None,
+})
+export class ScSidebarProvider implements OnInit, OnDestroy {
+  readonly state = inject(ScSidebarState);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  // Two-way binding support
+  readonly open = model<boolean>(true);
+
+  protected readonly class = computed(() =>
+    cn(
+      'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
+      this.classInput(),
+    ),
+  );
+
+  private keydownHandler?: (event: KeyboardEvent) => void;
+  private resizeHandler?: () => void;
+
+  private readonly router = inject(Router);
+
+  constructor() {
+    // Sync model with state
+    effect(() => this.state.setOpen(this.open()));
+    effect(() => this.open.set(this.state.open()));
+
+    // Save to localStorage when state changes
+    effect(() => {
+      this.saveToStorage(this.state.open());
+    });
+
+    // Close mobile sidebar on navigation
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        filter(() => this.state.isMobile() && this.state.openMobile()),
+        takeUntilDestroyed(),
+      )
+      .subscribe(() => this.state.setOpenMobile(false));
+  }
+
+  ngOnInit(): void {
+    // Load initial state from localStorage
+    const savedState = this.loadFromStorage();
+    if (savedState !== null) {
+      this.open.set(savedState);
+    }
+
+    // Setup keyboard shortcut (Cmd/Ctrl + B)
+    this.keydownHandler = (event: KeyboardEvent) => {
+      if (
+        (event.metaKey || event.ctrlKey) &&
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT
+      ) {
+        event.preventDefault();
+        this.state.toggle();
+      }
+    };
+    window.addEventListener('keydown', this.keydownHandler);
+
+    // Setup mobile detection
+    this.resizeHandler = () => {
+      const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
+      this.state.setIsMobile(isMobile);
+    };
+    this.resizeHandler(); // Initial check
+    window.addEventListener('resize', this.resizeHandler);
+  }
+
+  ngOnDestroy(): void {
+    if (this.keydownHandler) {
+      window.removeEventListener('keydown', this.keydownHandler);
+    }
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+    }
+  }
+
+  private saveToStorage(open: boolean): void {
+    try {
+      localStorage.setItem(SIDEBAR_STORAGE_KEY, String(open));
+    } catch {
+      // localStorage unavailable
+    }
+  }
+
+  private loadFromStorage(): boolean | null {
+    try {
+      const value = localStorage.getItem(SIDEBAR_STORAGE_KEY);
+      return value !== null ? value === 'true' : null;
+    } catch {
+      return null;
+    }
+  }
+}

package/src/lib/components/sidebar/sidebar-rail.ts

@@ -0,0 +1,39 @@
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScSidebarState } from './sidebar-state.service';
+
+@Component({
+  selector: 'button[sc-sidebar-rail]',
+  template: '',
+  host: {
+    'data-slot': 'sidebar-rail',
+    '[class]': 'class()',
+    '(click)': 'state.toggle()',
+    tabindex: '-1',
+    title: 'Toggle Sidebar',
+  },
+  encapsulation: ViewEncapsulation.None,
+})
+export class ScSidebarRail {
+  readonly state = inject(ScSidebarState);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/sidebar/sidebar-separator.ts

@@ -0,0 +1,21 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-sidebar-separator]',
+  host: {
+    'data-slot': 'sidebar-separator',
+    '[class]': 'class()',
+  },
+})
+export class ScSidebarSeparator {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'mx-2 h-px w-auto bg-sidebar-border',
+      'group-data-[collapsible=icon]:mx-2',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/sidebar/sidebar-state.service.ts

@@ -0,0 +1,33 @@
+import { Injectable, computed, signal } from '@angular/core';
+
+@Injectable()
+export class ScSidebarState {
+  // Signals for reactive state
+  readonly open = signal(true);
+  readonly openMobile = signal(false);
+  readonly isMobile = signal(false);
+
+  // Computed state
+  readonly state = computed(() => (this.open() ? 'expanded' : 'collapsed'));
+
+  // Methods
+  toggle(): void {
+    this.open.update((value) => !value);
+  }
+
+  toggleMobile(): void {
+    this.openMobile.update((value) => !value);
+  }
+
+  setOpen(value: boolean): void {
+    this.open.set(value);
+  }
+
+  setOpenMobile(value: boolean): void {
+    this.openMobile.set(value);
+  }
+
+  setIsMobile(value: boolean): void {
+    this.isMobile.set(value);
+  }
+}

package/src/lib/components/sidebar/sidebar-trigger.ts

@@ -0,0 +1,38 @@
+import { Directive, computed, inject, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScSidebarState } from './sidebar-state.service';
+import { buttonVariants, ScButtonVariants } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'button[sc-sidebar-trigger]',
+  host: {
+    'data-slot': 'sidebar-trigger',
+    type: 'button',
+    '[class]': 'class()',
+    '(click)': 'onClick($event)',
+  },
+})
+export class ScSidebarTrigger {
+  readonly state = inject(ScSidebarState);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  readonly variant = input<ScButtonVariants['variant']>('ghost');
+  readonly size = input<ScButtonVariants['size']>('icon-sm');
+
+  protected readonly class = computed(() =>
+    cn(
+      buttonVariants({ variant: this.variant(), size: this.size() }),
+      this.classInput(),
+    ),
+  );
+
+  protected onClick(event: MouseEvent): void {
+    event.preventDefault();
+    if (this.state.isMobile()) {
+      this.state.toggleMobile();
+    } else {
+      this.state.toggle();
+    }
+  }
+}

package/src/lib/components/sidebar/sidebar.ts

@@ -0,0 +1,120 @@
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SiXIcon } from '@semantic-icons/lucide-icons';
+import { cn } from '@semantic-components/ui';
+import {
+  ScSheet,
+  ScSheetClose,
+  ScSheetPortal,
+  ScSheetProvider,
+} from '../sheet';
+import { ScSidebarState } from './sidebar-state.service';
+
+@Component({
+  selector: 'div[sc-sidebar]',
+  imports: [
+    ScSheetProvider,
+    ScSheetPortal,
+    ScSheet,
+    ScSheetClose,
+    SiXIcon,
+    NgTemplateOutlet,
+  ],
+  template: `
+    <ng-template #content>
+      <ng-content />
+    </ng-template>
+
+    <!-- Mobile sidebar uses default width from sheet component -->
+    @if (isMobile()) {
+      <div sc-sheet-provider [(open)]="state.openMobile" [side]="side()">
+        <ng-template scSheetPortal>
+          <div
+            sc-sheet
+            class="bg-sidebar text-sidebar-foreground p-0 flex h-full flex-col"
+          >
+            <button sc-sheet-close>
+              <svg si-x-icon></svg>
+              <span class="sr-only">Close</span>
+            </button>
+            <ng-container *ngTemplateOutlet="content" />
+          </div>
+        </ng-template>
+      </div>
+    } @else {
+      <div
+        class="group peer hidden md:block text-sidebar-foreground"
+        [attr.data-state]="state.state()"
+        [attr.data-collapsible]="
+          state.state() === 'collapsed' ? collapsible() : ''
+        "
+      >
+        <div [class]="gapClass()"></div>
+        <div [class]="containerClass()">
+          <div [class]="innerClass()">
+            <ng-container *ngTemplateOutlet="content" />
+          </div>
+        </div>
+      </div>
+    }
+  `,
+  host: {
+    'data-slot': 'sidebar',
+    '[attr.data-state]': 'state.state()',
+    '[attr.data-variant]': 'variant()',
+    '[attr.data-side]': 'side()',
+    '[attr.data-collapsible]': 'collapsible()',
+  },
+  encapsulation: ViewEncapsulation.None,
+})
+export class ScSidebar {
+  readonly state = inject(ScSidebarState);
+
+  readonly side = input<'left' | 'right'>('left');
+  readonly variant = input<'sidebar' | 'floating' | 'inset'>('sidebar');
+  readonly collapsible = input<'offcanvas' | 'icon' | 'none'>('offcanvas');
+
+  protected readonly isMobile = computed(() => this.state.isMobile());
+
+  protected readonly gapClass = computed(() => {
+    const side = this.side();
+    const variant = this.variant();
+
+    return cn(
+      'relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear',
+      'group-data-[collapsible=offcanvas]:w-0',
+      'group-data-[side=right]:rotate-180',
+      variant === 'floating' || variant === 'inset'
+        ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+        : 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]',
+    );
+  });
+
+  protected readonly containerClass = computed(() => {
+    const side = this.side();
+    const variant = this.variant();
+
+    return cn(
+      'fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex',
+      side === 'left'
+        ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+        : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+      variant === 'floating' || variant === 'inset'
+        ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+        : 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+    );
+  });
+
+  protected readonly innerClass = computed(() =>
+    cn(
+      'flex h-full w-full flex-col bg-sidebar',
+      'group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border',
+    ),
+  );
+}

package/src/lib/components/signature-pad/README.md

@@ -0,0 +1,236 @@
+# Signature Pad
+
+Canvas-based signature capture component with touch and mouse support.
+
+## Composable Architecture
+
+The signature pad uses a **composable architecture** that gives you full control over layout and functionality.
+
+### Basic Usage
+
+```typescript
+import { ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadControls, ScSignaturePadUndoButton, ScSignaturePadClearButton } from '@semantic-components/ui-lab';
+import { SiUndoIcon, SiTrash2Icon } from '@semantic-icons/lucide-icons';
+
+@Component({
+  imports: [ScSignaturePad, ScSignaturePadCanvas, ScSignaturePadControls, ScSignaturePadUndoButton, ScSignaturePadClearButton, SiUndoIcon, SiTrash2Icon],
+  template: `
+    <div sc-signature-pad class="relative inline-block">
+      <canvas sc-signature-pad-canvas [(value)]="signature" [width]="400" [height]="200"></canvas>
+
+      <div sc-signature-pad-controls>
+        <button sc-signature-pad-undo>
+          <svg si-undo-icon class="size-4"></svg>
+        </button>
+        <button sc-signature-pad-clear>
+          <svg si-trash-2-icon class="size-4"></svg>
+        </button>
+      </div>
+    </div>
+  `,
+})
+export class MyComponent {
+  readonly signature = signal('');
+}
+```
+
+### Composable Components
+
+**`ScSignaturePad` (Directive)**
+
+- Root directive that provides context
+- Manages signature state and drawing logic
+- **Selector**: `[sc-signature-pad]`
+- **Inputs**: `disabled`, `penColor`, `penWidth`, `backgroundColor`
+
+**`ScSignaturePadCanvas` (Component)**
+
+- Canvas element for drawing
+- **Selector**: `canvas[sc-signature-pad-canvas]`
+- **Inputs**: `width`, `height`, `ariaLabel`, `class`
+- **Model**: `value` (two-way bindable data URL)
+- **Outputs**: `signatureChange`, `strokeEnd`
+
+**`ScSignaturePadControls` (Component)**
+
+- Container for control buttons (uses `<ng-content>`)
+- **Selector**: `div[sc-signature-pad-controls]`
+- **Default position**: `absolute top-2 right-2`
+
+**`ScSignaturePadUndoButton` (Component)**
+
+- Undo last stroke
+- **Selector**: `button[sc-signature-pad-undo]`
+- **Auto-disabled**: When no strokes to undo
+
+**`ScSignaturePadClearButton` (Component)**
+
+- Clear entire signature
+- **Selector**: `button[sc-signature-pad-clear]`
+- **Auto-disabled**: When signature is empty
+
+**`ScSignaturePadToolbar` (Component)**
+
+- Optional container for toolbar items (uses `<ng-content>`)
+- **Selector**: `div[sc-signature-pad-toolbar]`
+- **Default styling**: Flex row with gap
+
+**`ScSignaturePadColorButton` (Component)**
+
+- Button to select pen color
+- **Selector**: `button[sc-signature-pad-pen-color]`
+- **Inputs**: `color` (required, hex color string)
+- **Auto-active**: When color matches current pen color
+
+**`ScSignaturePadWidthButton` (Component)**
+
+- Button to select pen width
+- **Selector**: `button[sc-signature-pad-pen-width]`
+- **Inputs**: `width` (required, number in pixels)
+- **Auto-active**: When width matches current pen width
+
+### Flexible Examples
+
+#### Custom Button Layout
+
+```html
+<div sc-signature-pad>
+  <canvas sc-signature-pad-canvas [width]="500" [height]="250"></canvas>
+
+  <!-- Controls at bottom instead of top-right -->
+  <div sc-signature-pad-controls class="static mt-2 justify-center">
+    <button sc-signature-pad-undo class="px-4 py-2">Undo</button>
+    <button sc-signature-pad-clear class="px-4 py-2">Clear</button>
+  </div>
+</div>
+```
+
+#### With Custom Buttons
+
+```html
+<div sc-signature-pad #pad>
+  <canvas sc-signature-pad-canvas [(value)]="signature"></canvas>
+
+  <div sc-signature-pad-controls>
+    <button sc-signature-pad-undo>
+      <svg si-undo-icon></svg>
+    </button>
+    <button sc-signature-pad-clear>
+      <svg si-trash-icon></svg>
+    </button>
+    <!-- Add your own buttons -->
+    <button (click)="downloadSignature(pad)">
+      <svg si-download-icon></svg>
+    </button>
+  </div>
+</div>
+```
+
+#### Without Controls Container
+
+```html
+<div sc-signature-pad>
+  <canvas sc-signature-pad-canvas></canvas>
+</div>
+
+<!-- External controls -->
+<div class="flex gap-2 mt-2">
+  <button sc-signature-pad-undo>Undo</button>
+  <button sc-signature-pad-clear>Clear</button>
+  <button (click)="save()">Save</button>
+</div>
+```
+
+#### With Color Selection
+
+```html
+<div sc-signature-pad class="space-y-3">
+  <!-- Color toolbar -->
+  <div sc-signature-pad-toolbar>
+    <button sc-signature-pad-pen-color [color]="'#000000'">
+      <span class="size-4 rounded-full border" style="background: #000000"></span>
+    </button>
+    <button sc-signature-pad-pen-color [color]="'#1d4ed8'">
+      <span class="size-4 rounded-full border" style="background: #1d4ed8"></span>
+    </button>
+    <button sc-signature-pad-pen-color [color]="'#dc2626'">
+      <span class="size-4 rounded-full border" style="background: #dc2626"></span>
+    </button>
+  </div>
+
+  <!-- Canvas -->
+  <div class="relative inline-block">
+    <canvas sc-signature-pad-canvas></canvas>
+    <div sc-signature-pad-controls>
+      <button sc-signature-pad-undo>Undo</button>
+      <button sc-signature-pad-clear>Clear</button>
+    </div>
+  </div>
+</div>
+```
+
+#### With Width Selection
+
+```html
+<div sc-signature-pad class="space-y-3">
+  <div sc-signature-pad-toolbar>
+    <button sc-signature-pad-pen-width [width]="2">
+      <span class="w-4 rounded-full bg-foreground" style="height: 2px"></span>
+    </button>
+    <button sc-signature-pad-pen-width [width]="4">
+      <span class="w-4 rounded-full bg-foreground" style="height: 4px"></span>
+    </button>
+    <button sc-signature-pad-pen-width [width]="6">
+      <span class="w-4 rounded-full bg-foreground" style="height: 6px"></span>
+    </button>
+  </div>
+
+  <div class="relative inline-block">
+    <canvas sc-signature-pad-canvas></canvas>
+  </div>
+</div>
+```
+
+#### Combined Toolbar
+
+```html
+<div sc-signature-pad-toolbar>
+  <!-- Colors -->
+  <button sc-signature-pad-pen-color [color]="'#000000'">
+    <span class="size-4 rounded-full border" style="background: #000000"></span>
+  </button>
+  <button sc-signature-pad-pen-color [color]="'#1d4ed8'">
+    <span class="size-4 rounded-full border" style="background: #1d4ed8"></span>
+  </button>
+
+  <!-- Separator (optional) -->
+  <div class="w-px h-6 bg-border"></div>
+
+  <!-- Widths -->
+  <button sc-signature-pad-pen-width [width]="2">
+    <span class="w-4 rounded-full bg-foreground" style="height: 2px"></span>
+  </button>
+  <button sc-signature-pad-pen-width [width]="4">
+    <span class="w-4 rounded-full bg-foreground" style="height: 4px"></span>
+  </button>
+</div>
+```
+
+## Features
+
+- ✅ Touch and mouse support
+- ✅ Smooth drawing with line interpolation
+- ✅ Undo functionality (stroke by stroke)
+- ✅ Export to PNG, JPEG, or Blob
+- ✅ Customizable pen color and width
+- ✅ Responsive canvas sizing
+- ✅ **Composable architecture** for maximum flexibility
+- ✅ Use with `@semantic-icons` for consistent icons
+
+## Accessibility
+
+- Keyboard accessible controls
+- ARIA labels for screen readers
+- Focus indicators on buttons
+- Disabled state support
+- Touch-friendly button sizes

package/src/lib/components/signature-pad/index.ts

@@ -0,0 +1,8 @@
+export * from './signature-pad';
+export * from './signature-pad-canvas';
+export * from './signature-pad-controls';
+export * from './signature-pad-undo-button';
+export * from './signature-pad-clear-button';
+export * from './signature-pad-toolbar';
+export * from './signature-pad-color-button';
+export * from './signature-pad-width-button';