@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,228 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  model,
-  output,
-  inject,
-  ElementRef,
-  ViewEncapsulation,
-  afterNextRender,
-  DestroyRef,
-  effect,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_SIGNATURE_PAD, ScSignaturePoint } from './signature-pad';
-
-@Component({
-  selector: 'canvas[sc-signature-pad-canvas]',
-  template: '',
-  host: {
-    'data-slot': 'signature-pad-canvas',
-    '[class]': 'class()',
-    '[width]': 'width()',
-    '[height]': 'height()',
-    role: 'img',
-    '(mousedown)': 'onPointerDown($event)',
-    '(mousemove)': 'onPointerMove($event)',
-    '(mouseup)': 'onPointerUp()',
-    '(mouseleave)': 'onPointerUp()',
-    '(touchstart)': 'onTouchStart($event)',
-    '(touchmove)': 'onTouchMove($event)',
-    '(touchend)': 'onPointerUp()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSignaturePadCanvas {
-  readonly signaturePad = inject(SC_SIGNATURE_PAD);
-  private readonly elementRef = inject(ElementRef<HTMLCanvasElement>);
-  private readonly destroyRef = inject(DestroyRef);
-
-  // Canvas requires width/height as attributes (not CSS) to set the internal drawing buffer resolution.
-  // CSS/Tailwind only sets display size, which causes stretching and poor drawing quality.
-  readonly width = input<number>(400);
-  readonly height = input<number>(200);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  // Two-way binding
-  readonly value = model<string>('');
-
-  // Outputs
-  readonly signatureChange = output<string>();
-  readonly strokeEnd = output<void>();
-
-  protected readonly class = computed(() =>
-    cn(
-      'border rounded-lg cursor-crosshair touch-none',
-      this.signaturePad.disabled() && 'opacity-50 cursor-not-allowed',
-      this.classInput(),
-    ),
-  );
-
-  constructor() {
-    // Register canvas with parent directive
-    afterNextRender(() => {
-      const canvas = this.elementRef.nativeElement;
-      this.signaturePad.canvasElement.set(canvas);
-      this.redraw();
-    });
-
-    // Watch for line changes and redraw
-    effect(() => {
-      this.signaturePad.lines();
-      this.redraw();
-    });
-  }
-
-  private getCanvasPoint(clientX: number, clientY: number): ScSignaturePoint {
-    const canvas = this.elementRef.nativeElement;
-    const rect = canvas.getBoundingClientRect();
-    const scaleX = canvas.width / rect.width;
-    const scaleY = canvas.height / rect.height;
-
-    return {
-      x: (clientX - rect.left) * scaleX,
-      y: (clientY - rect.top) * scaleY,
-    };
-  }
-
-  protected onPointerDown(event: MouseEvent): void {
-    if (this.signaturePad.disabled()) return;
-
-    this.signaturePad.isDrawing.set(true);
-    const point = this.getCanvasPoint(event.clientX, event.clientY);
-    this.signaturePad.currentLine.set([point]);
-    this.drawPoint(point);
-  }
-
-  protected onPointerMove(event: MouseEvent): void {
-    if (!this.signaturePad.isDrawing() || this.signaturePad.disabled()) return;
-
-    const point = this.getCanvasPoint(event.clientX, event.clientY);
-    this.signaturePad.currentLine.update((line) => [...line, point]);
-    this.drawLine();
-  }
-
-  protected onPointerUp(): void {
-    if (!this.signaturePad.isDrawing()) return;
-
-    this.signaturePad.isDrawing.set(false);
-
-    if (this.signaturePad.currentLine().length > 0) {
-      this.signaturePad.addLine({
-        points: this.signaturePad.currentLine(),
-        color: this.signaturePad.penColor(),
-        width: this.signaturePad.penWidth(),
-      });
-      this.signaturePad.currentLine.set([]);
-      this.strokeEnd.emit();
-      this.emitSignature();
-    }
-  }
-
-  protected onTouchStart(event: TouchEvent): void {
-    if (this.signaturePad.disabled()) return;
-    event.preventDefault();
-
-    const touch = event.touches[0];
-    this.signaturePad.isDrawing.set(true);
-    const point = this.getCanvasPoint(touch.clientX, touch.clientY);
-    this.signaturePad.currentLine.set([point]);
-    this.drawPoint(point);
-  }
-
-  protected onTouchMove(event: TouchEvent): void {
-    if (!this.signaturePad.isDrawing() || this.signaturePad.disabled()) return;
-    event.preventDefault();
-
-    const touch = event.touches[0];
-    const point = this.getCanvasPoint(touch.clientX, touch.clientY);
-    this.signaturePad.currentLine.update((line) => [...line, point]);
-    this.drawLine();
-  }
-
-  private drawPoint(point: ScSignaturePoint): void {
-    const ctx = this.signaturePad.getContext();
-    if (!ctx) return;
-
-    ctx.fillStyle = this.signaturePad.penColor();
-    ctx.beginPath();
-    ctx.arc(point.x, point.y, this.signaturePad.penWidth() / 2, 0, Math.PI * 2);
-    ctx.fill();
-  }
-
-  private drawLine(): void {
-    const ctx = this.signaturePad.getContext();
-    const points = this.signaturePad.currentLine();
-    if (!ctx || points.length < 2) return;
-
-    ctx.strokeStyle = this.signaturePad.penColor();
-    ctx.lineWidth = this.signaturePad.penWidth();
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-
-    const lastTwo = points.slice(-2);
-    ctx.beginPath();
-    ctx.moveTo(lastTwo[0].x, lastTwo[0].y);
-    ctx.lineTo(lastTwo[1].x, lastTwo[1].y);
-    ctx.stroke();
-  }
-
-  private drawFullLine(line: {
-    points: ScSignaturePoint[];
-    color: string;
-    width: number;
-  }): void {
-    const ctx = this.signaturePad.getContext();
-    if (!ctx || line.points.length === 0) return;
-
-    ctx.strokeStyle = line.color;
-    ctx.lineWidth = line.width;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-
-    if (line.points.length === 1) {
-      ctx.fillStyle = line.color;
-      ctx.beginPath();
-      ctx.arc(
-        line.points[0].x,
-        line.points[0].y,
-        line.width / 2,
-        0,
-        Math.PI * 2,
-      );
-      ctx.fill();
-      return;
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(line.points[0].x, line.points[0].y);
-
-    for (let i = 1; i < line.points.length; i++) {
-      ctx.lineTo(line.points[i].x, line.points[i].y);
-    }
-    ctx.stroke();
-  }
-
-  private redraw(): void {
-    const ctx = this.signaturePad.getContext();
-    if (!ctx) return;
-
-    // Clear and fill background
-    ctx.fillStyle = this.signaturePad.backgroundColor();
-    ctx.fillRect(0, 0, this.width(), this.height());
-
-    // Redraw all lines
-    for (const line of this.signaturePad.lines()) {
-      this.drawFullLine(line);
-    }
-  }
-
-  private emitSignature(): void {
-    const dataURL = this.signaturePad.toDataURL();
-    this.value.set(dataURL);
-    this.signatureChange.emit(dataURL);
-  }
-}

package/src/lib/components/signature-pad/signature-pad-clear-button.ts

@@ -1,48 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_SIGNATURE_PAD } from './signature-pad';
-
-@Component({
-  selector: 'button[sc-signature-pad-clear]',
-  template: '<ng-content />',
-  host: {
-    'data-slot': 'signature-pad-clear',
-    type: 'button',
-    '[class]': 'class()',
-    '[disabled]': 'isDisabled()',
-    '[attr.aria-label]': 'ariaLabel()',
-    '(click)': 'onClick()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSignaturePadClearButton {
-  readonly signaturePad = inject(SC_SIGNATURE_PAD);
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly ariaLabel = input<string>('Clear signature');
-
-  protected readonly class = computed(() =>
-    cn(
-      'p-1.5 rounded-md bg-background/80 border hover:bg-accent',
-      'disabled:opacity-50 disabled:cursor-not-allowed',
-      'focus:outline-none focus:ring-2 focus:ring-ring',
-      this.classInput(),
-    ),
-  );
-
-  protected readonly isDisabled = computed(
-    () => !this.signaturePad.canUndo() || this.signaturePad.disabled(),
-  );
-
-  protected onClick(): void {
-    if (this.isDisabled()) return;
-    this.signaturePad.clear();
-  }
-}

package/src/lib/components/signature-pad/signature-pad-color-button.ts

@@ -1,50 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { SC_SIGNATURE_PAD } from './signature-pad';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'button[sc-signature-pad-pen-color]',
-  template: '<ng-content />',
-  host: {
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-label]': 'ariaLabel()',
-    '[attr.data-active]': 'isActive() || null',
-    '[disabled]': 'signaturePad.disabled() || null',
-    '(click)': 'onClick()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSignaturePadColorButton {
-  protected readonly signaturePad = inject(SC_SIGNATURE_PAD);
-
-  readonly color = input.required<string>();
-  readonly ariaLabel = input<string>('');
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly isActive = computed(
-    () => this.signaturePad.penColor() === this.color(),
-  );
-
-  protected readonly class = computed(() =>
-    cn(
-      'inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors',
-      'disabled:pointer-events-none disabled:opacity-50',
-      'data-[active]:border-primary data-[active]:bg-primary/10',
-      this.classInput(),
-    ),
-  );
-
-  protected onClick(): void {
-    if (this.signaturePad.disabled()) return;
-    this.signaturePad.penColor.set(this.color());
-  }
-}

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

@@ -1,26 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'div[sc-signature-pad-controls]',
-  template: '<ng-content />',
-  host: {
-    'data-slot': 'signature-pad-controls',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSignaturePadControls {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('absolute top-2 right-2 flex gap-1', this.classInput()),
-  );
-}

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

@@ -1,25 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'div[sc-signature-pad-toolbar]',
-  template: '<ng-content />',
-  host: {
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSignaturePadToolbar {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('flex items-center gap-3', this.classInput()),
-  );
-}

package/src/lib/components/signature-pad/signature-pad-undo-button.ts

@@ -1,48 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  computed,
-  input,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_SIGNATURE_PAD } from './signature-pad';
-
-@Component({
-  selector: 'button[sc-signature-pad-undo]',
-  template: '<ng-content />',
-  host: {
-    'data-slot': 'signature-pad-undo',
-    type: 'button',
-    '[class]': 'class()',
-    '[disabled]': 'isDisabled()',
-    '[attr.aria-label]': 'ariaLabel()',
-    '(click)': 'onClick()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSignaturePadUndoButton {
-  readonly signaturePad = inject(SC_SIGNATURE_PAD);
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly ariaLabel = input<string>('Undo last stroke');
-
-  protected readonly class = computed(() =>
-    cn(
-      'p-1.5 rounded-md bg-background/80 border hover:bg-accent',
-      'disabled:opacity-50 disabled:cursor-not-allowed',
-      'focus:outline-none focus:ring-2 focus:ring-ring',
-      this.classInput(),
-    ),
-  );
-
-  protected readonly isDisabled = computed(
-    () => !this.signaturePad.canUndo() || this.signaturePad.disabled(),
-  );
-
-  protected onClick(): void {
-    if (this.isDisabled()) return;
-    this.signaturePad.undo();
-  }
-}

package/src/lib/components/signature-pad/signature-pad-width-button.ts

@@ -1,50 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { SC_SIGNATURE_PAD } from './signature-pad';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'button[sc-signature-pad-pen-width]',
-  template: '<ng-content />',
-  host: {
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-label]': 'ariaLabel()',
-    '[attr.data-active]': 'isActive() || null',
-    '[disabled]': 'signaturePad.disabled() || null',
-    '(click)': 'onClick()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSignaturePadWidthButton {
-  protected readonly signaturePad = inject(SC_SIGNATURE_PAD);
-
-  readonly width = input.required<number>();
-  readonly ariaLabel = input<string>('');
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly isActive = computed(
-    () => this.signaturePad.penWidth() === this.width(),
-  );
-
-  protected readonly class = computed(() =>
-    cn(
-      'inline-flex items-center justify-center size-8 rounded-md border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors',
-      'disabled:pointer-events-none disabled:opacity-50',
-      'data-[active]:border-primary data-[active]:bg-primary/10',
-      this.classInput(),
-    ),
-  );
-
-  protected onClick(): void {
-    if (this.signaturePad.disabled()) return;
-    this.signaturePad.penWidth.set(this.width());
-  }
-}

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

@@ -1,97 +0,0 @@
-import {
-  Directive,
-  InjectionToken,
-  input,
-  signal,
-  computed,
-} from '@angular/core';
-
-export interface ScSignaturePoint {
-  x: number;
-  y: number;
-  pressure?: number;
-}
-
-export interface ScSignatureLine {
-  points: ScSignaturePoint[];
-  color: string;
-  width: number;
-}
-
-export const SC_SIGNATURE_PAD = new InjectionToken<ScSignaturePad>(
-  'SC_SIGNATURE_PAD',
-);
-
-@Directive({
-  selector: '[sc-signature-pad]',
-  exportAs: 'scSignaturePad',
-  providers: [{ provide: SC_SIGNATURE_PAD, useExisting: ScSignaturePad }],
-  host: {
-    'data-slot': 'signature-pad',
-    '[attr.data-disabled]': 'disabled() || null',
-  },
-})
-export class ScSignaturePad {
-  readonly disabled = input<boolean>(false);
-  readonly backgroundColor = input<string>('#ffffff');
-
-  // Pen settings (writable signals for customization)
-  readonly penColor = signal<string>('#000000');
-  readonly penWidth = signal<number>(2);
-
-  // Internal state
-  readonly lines = signal<ScSignatureLine[]>([]);
-  readonly isDrawing = signal(false);
-  readonly currentLine = signal<ScSignaturePoint[]>([]);
-  readonly canvasElement = signal<HTMLCanvasElement | null>(null);
-
-  // Computed state
-  readonly canUndo = computed(() => this.lines().length > 0);
-  readonly isEmpty = computed(() => this.lines().length === 0);
-
-  // Add a line to the signature
-  addLine(line: ScSignatureLine): void {
-    this.lines.update((lines) => [...lines, line]);
-  }
-
-  // Clear all lines
-  clear(): void {
-    this.lines.set([]);
-    this.currentLine.set([]);
-  }
-
-  // Undo last line
-  undo(): void {
-    if (this.lines().length === 0) return;
-    this.lines.update((lines) => lines.slice(0, -1));
-  }
-
-  // Get canvas context
-  getContext(): CanvasRenderingContext2D | null {
-    return this.canvasElement()?.getContext('2d') ?? null;
-  }
-
-  // Get data URL
-  toDataURL(
-    type: 'image/png' | 'image/jpeg' = 'image/png',
-    quality?: number,
-  ): string {
-    const canvas = this.canvasElement();
-    if (!canvas) return '';
-    return canvas.toDataURL(type, quality);
-  }
-
-  // Get blob
-  toBlob(
-    callback: (blob: Blob | null) => void,
-    type?: string,
-    quality?: number,
-  ): void {
-    const canvas = this.canvasElement();
-    if (!canvas) {
-      callback(null);
-      return;
-    }
-    canvas.toBlob(callback, type, quality);
-  }
-}

package/src/lib/components/skeleton/README.md

@@ -1,80 +0,0 @@
-# Skeleton
-
-Use to show a placeholder while content is loading.
-
-## Components
-
-- `ScSkeleton` - A pulsing placeholder element
-
-## Usage
-
-```html
-<div sc-skeleton class="h-4 w-[250px]"></div>
-```
-
-## Examples
-
-### Card Skeleton
-
-```html
-<div class="flex items-center space-x-4">
-  <div sc-skeleton class="size-12 rounded-full"></div>
-  <div class="space-y-2">
-    <div sc-skeleton class="h-4 w-[250px]"></div>
-    <div sc-skeleton class="h-4 w-[200px]"></div>
-  </div>
-</div>
-```
-
-### Article Skeleton
-
-```html
-<div class="space-y-3">
-  <div sc-skeleton class="h-[125px] w-[250px] rounded-xl"></div>
-  <div class="space-y-2">
-    <div sc-skeleton class="h-4 w-[250px]"></div>
-    <div sc-skeleton class="h-4 w-[200px]"></div>
-  </div>
-</div>
-```
-
-### List Skeleton
-
-```html
-@for (i of [1, 2, 3]; track i) {
-<div class="flex items-center space-x-4">
-  <div sc-skeleton class="size-10 rounded-full"></div>
-  <div class="flex-1 space-y-2">
-    <div sc-skeleton class="h-4 w-3/4"></div>
-    <div sc-skeleton class="h-3 w-1/2"></div>
-  </div>
-</div>
-}
-```
-
-## Inputs
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-## Styling
-
-The skeleton uses:
-
-- `animate-pulse` for the pulsing animation
-- `bg-muted` for the background color
-- `rounded-md` for default border radius
-
-Override with custom classes:
-
-```html
-<!-- Circular skeleton -->
-<div sc-skeleton class="size-12 rounded-full"></div>
-
-<!-- Large rounded skeleton -->
-<div sc-skeleton class="h-[200px] w-full rounded-xl"></div>
-
-<!-- Custom background -->
-<div sc-skeleton class="h-4 w-full bg-primary/20"></div>
-```

package/src/lib/components/skeleton/index.ts

@@ -1 +0,0 @@
-export * from './skeleton';

package/src/lib/components/skeleton/skeleton.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-skeleton]',
-  host: {
-    'data-slot': 'skeleton',
-    '[class]': 'class()',
-  },
-})
-export class ScSkeleton {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('animate-pulse rounded-md bg-muted', this.classInput()),
-  );
-}