@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/confetti/confetti.ts

@@ -1,220 +0,0 @@
-import {
-  afterNextRender,
-  ChangeDetectionStrategy,
-  Component,
-  DestroyRef,
-  ElementRef,
-  inject,
-  input,
-  output,
-  signal,
-  viewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import type {
-  ConfettiOptions,
-  ConfettiParticle,
-  ConfettiShape,
-} from './confetti-types';
-import { DEFAULT_CONFETTI_OPTIONS } from './confetti-types';
-
-@Component({
-  selector: 'sc-confetti',
-  template: `
-    <canvas
-      #canvas
-      class="pointer-events-none fixed inset-0 z-50"
-      [width]="canvasWidth()"
-      [height]="canvasHeight()"
-      [class.hidden]="!isActive()"
-    ></canvas>
-  `,
-  styles: `
-    :host {
-      display: contents;
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScConfetti {
-  private readonly destroyRef = inject(DestroyRef);
-  readonly canvasRef = viewChild<ElementRef<HTMLCanvasElement>>('canvas');
-
-  readonly options = input<ConfettiOptions>({});
-
-  readonly complete = output<void>();
-
-  protected readonly isActive = signal(false);
-  protected readonly canvasWidth = signal(0);
-  protected readonly canvasHeight = signal(0);
-
-  private particles: ConfettiParticle[] = [];
-  private animationId: number | null = null;
-  private ctx: CanvasRenderingContext2D | null = null;
-
-  constructor() {
-    afterNextRender(() => {
-      this.updateCanvasSize();
-      this.setupResizeHandler();
-    });
-  }
-
-  private updateCanvasSize(): void {
-    this.canvasWidth.set(window.innerWidth);
-    this.canvasHeight.set(window.innerHeight);
-  }
-
-  private setupResizeHandler(): void {
-    const handler = () => this.updateCanvasSize();
-    window.addEventListener('resize', handler);
-    this.destroyRef.onDestroy(() => {
-      window.removeEventListener('resize', handler);
-      this.stop();
-    });
-  }
-
-  fire(customOptions?: ConfettiOptions): void {
-    const opts = {
-      ...DEFAULT_CONFETTI_OPTIONS,
-      ...this.options(),
-      ...customOptions,
-    };
-    this.createParticles(opts);
-    this.isActive.set(true);
-    this.startAnimation(opts);
-  }
-
-  fireFromElement(element: HTMLElement, customOptions?: ConfettiOptions): void {
-    const rect = element.getBoundingClientRect();
-    const origin = {
-      x: (rect.left + rect.width / 2) / window.innerWidth,
-      y: (rect.top + rect.height / 2) / window.innerHeight,
-    };
-    this.fire({ ...customOptions, origin });
-  }
-
-  stop(): void {
-    if (this.animationId !== null) {
-      cancelAnimationFrame(this.animationId);
-      this.animationId = null;
-    }
-    this.particles = [];
-    this.isActive.set(false);
-    this.clearCanvas();
-  }
-
-  private createParticles(opts: Required<ConfettiOptions>): void {
-    this.particles = [];
-    const originX = opts.origin.x * this.canvasWidth();
-    const originY = opts.origin.y * this.canvasHeight();
-
-    for (let i = 0; i < opts.particleCount; i++) {
-      const angle =
-        (Math.random() * opts.spread - opts.spread / 2) * (Math.PI / 180);
-      const velocity = opts.startVelocity * (0.5 + Math.random() * 0.5);
-
-      this.particles.push({
-        x: originX,
-        y: originY,
-        vx: Math.sin(angle) * velocity + opts.drift,
-        vy: -Math.cos(angle) * velocity,
-        color: opts.colors[Math.floor(Math.random() * opts.colors.length)],
-        size: 8 + Math.random() * 8,
-        rotation: Math.random() * 360,
-        rotationSpeed: (Math.random() - 0.5) * 10,
-        shape: opts.shapes[Math.floor(Math.random() * opts.shapes.length)],
-      });
-    }
-  }
-
-  private startAnimation(opts: Required<ConfettiOptions>): void {
-    const canvas = this.canvasRef()?.nativeElement;
-    if (!canvas) return;
-
-    this.ctx = canvas.getContext('2d');
-    if (!this.ctx) return;
-
-    const startTime = performance.now();
-
-    const animate = (currentTime: number) => {
-      const elapsed = currentTime - startTime;
-
-      if (elapsed >= opts.duration || this.particles.length === 0) {
-        this.stop();
-        this.complete.emit();
-        return;
-      }
-
-      this.updateParticles(opts);
-      this.drawParticles();
-
-      this.animationId = requestAnimationFrame(animate);
-    };
-
-    this.animationId = requestAnimationFrame(animate);
-  }
-
-  private updateParticles(opts: Required<ConfettiOptions>): void {
-    const height = this.canvasHeight();
-
-    this.particles = this.particles.filter((p) => {
-      p.x += p.vx;
-      p.y += p.vy;
-      p.vy += opts.gravity * 0.5;
-      p.vx *= opts.decay;
-      p.vy *= opts.decay;
-      p.rotation += p.rotationSpeed;
-
-      return p.y < height + 50;
-    });
-  }
-
-  private drawParticles(): void {
-    if (!this.ctx) return;
-
-    this.clearCanvas();
-
-    for (const p of this.particles) {
-      this.ctx.save();
-      this.ctx.translate(p.x, p.y);
-      this.ctx.rotate((p.rotation * Math.PI) / 180);
-      this.ctx.fillStyle = p.color;
-
-      this.drawShape(p.shape, p.size);
-
-      this.ctx.restore();
-    }
-  }
-
-  private drawShape(shape: ConfettiShape, size: number): void {
-    if (!this.ctx) return;
-
-    switch (shape) {
-      case 'square':
-        this.ctx.fillRect(-size / 2, -size / 2, size, size);
-        break;
-      case 'circle':
-        this.ctx.beginPath();
-        this.ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
-        this.ctx.fill();
-        break;
-      case 'triangle':
-        this.ctx.beginPath();
-        this.ctx.moveTo(0, -size / 2);
-        this.ctx.lineTo(size / 2, size / 2);
-        this.ctx.lineTo(-size / 2, size / 2);
-        this.ctx.closePath();
-        this.ctx.fill();
-        break;
-      case 'ribbon':
-        this.ctx.fillRect(-size / 4, -size, size / 2, size * 2);
-        break;
-    }
-  }
-
-  private clearCanvas(): void {
-    if (!this.ctx) return;
-    this.ctx.clearRect(0, 0, this.canvasWidth(), this.canvasHeight());
-  }
-}

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

@@ -1,7 +0,0 @@
-export { ScConfetti } from './confetti';
-export type {
-  ConfettiOptions,
-  ConfettiParticle,
-  ConfettiShape,
-} from './confetti-types';
-export { DEFAULT_CONFETTI_OPTIONS } from './confetti-types';

package/src/lib/components/context-menu/README.md

@@ -1,149 +0,0 @@
-# Context Menu Components
-
-Displays a menu at the pointer position when triggered by a right-click.
-
-## Architecture
-
-```
-ScContextMenu (Root)
-    ├── open: signal<boolean>
-    ├── position: signal<{x, y}>
-    │
-    ├── ScContextMenuTrigger (wraps any element)
-    │     └── Listens to contextmenu event
-    │
-    └── ScContextMenuContent (ng-template)
-          ├── Uses CDK Overlay at mouse position
-          │
-          ├── ScContextMenuLabel
-          ├── ScContextMenuItem
-          │     └── ScContextMenuShortcut
-          ├── ScContextMenuSeparator
-          │
-          └── ScContextMenuSub
-                ├── ScContextMenuSubTrigger
-                └── ScContextMenuSubContent
-```
-
-## Components
-
-| Component                 | Selector                           | Description                          |
-| ------------------------- | ---------------------------------- | ------------------------------------ |
-| `ScContextMenu`           | `div[sc-context-menu]`             | Root wrapper with overlay management |
-| `ScContextMenuTrigger`    | `[sc-context-menu-trigger]`        | Element that triggers on right-click |
-| `ScContextMenuContent`    | `<sc-context-menu-content>`        | Menu content container               |
-| `ScContextMenuItem`       | `[sc-context-menu-item]`           | Individual menu item                 |
-| `ScContextMenuLabel`      | `[sc-context-menu-label]`          | Label for grouping items             |
-| `ScContextMenuSeparator`  | `[sc-context-menu-separator]`      | Visual separator                     |
-| `ScContextMenuShortcut`   | `[sc-context-menu-shortcut]`       | Keyboard shortcut display            |
-| `ScContextMenuSub`        | `div[sc-context-menu-sub]`         | Submenu wrapper                      |
-| `ScContextMenuSubTrigger` | `div[sc-context-menu-sub-trigger]` | Submenu trigger                      |
-| `ScContextMenuSubContent` | `div[sc-context-menu-sub-content]` | Submenu content                      |
-
-## Usage
-
-### Basic Context Menu
-
-```html
-<div sc-context-menu>
-  <div sc-context-menu-trigger class="h-32 w-64 border border-dashed">Right click here</div>
-
-  <sc-context-menu-content>
-    <div sc-context-menu-item (select)="onCut()">
-      Cut
-      <span sc-context-menu-shortcut>⌘X</span>
-    </div>
-    <div sc-context-menu-item (select)="onCopy()">
-      Copy
-      <span sc-context-menu-shortcut>⌘C</span>
-    </div>
-    <div sc-context-menu-item (select)="onPaste()">
-      Paste
-      <span sc-context-menu-shortcut>⌘V</span>
-    </div>
-  </sc-context-menu-content>
-</div>
-```
-
-### With Labels and Separators
-
-```html
-<sc-context-menu-content>
-  <span sc-context-menu-label>Edit</span>
-  <div sc-context-menu-separator></div>
-  <div sc-context-menu-item>Cut</div>
-  <div sc-context-menu-item>Copy</div>
-  <div sc-context-menu-item>Paste</div>
-</sc-context-menu-content>
-```
-
-### With Submenu
-
-```html
-<sc-context-menu-content>
-  <div sc-context-menu-item>Back</div>
-  <div sc-context-menu-item>Forward</div>
-
-  <div sc-context-menu-sub>
-    <div sc-context-menu-sub-trigger>More Tools</div>
-    <div sc-context-menu-sub-content>
-      <div sc-context-menu-item>Save Page As...</div>
-      <div sc-context-menu-item>Create Shortcut...</div>
-      <div sc-context-menu-item>Developer Tools</div>
-    </div>
-  </div>
-</sc-context-menu-content>
-```
-
-### With Disabled Items
-
-```html
-<div sc-context-menu-item [disabled]="true">Disabled Item</div>
-```
-
-## Inputs
-
-### ScContextMenuItem
-
-| Input           | Type      | Default | Description                     |
-| --------------- | --------- | ------- | ------------------------------- |
-| `disabled`      | `boolean` | `false` | Whether the item is disabled    |
-| `closeOnSelect` | `boolean` | `true`  | Whether to close menu on select |
-
-### ScContextMenuLabel
-
-| Input   | Type      | Default | Description                          |
-| ------- | --------- | ------- | ------------------------------------ |
-| `inset` | `boolean` | `false` | Add left padding to align with items |
-
-## Outputs
-
-### ScContextMenuItem
-
-| Output   | Type   | Description                   |
-| -------- | ------ | ----------------------------- |
-| `select` | `void` | Emitted when item is selected |
-
-## Features
-
-- **Right-click triggered**: Opens at mouse cursor position
-- **Backdrop dismiss**: Clicking outside closes the menu
-- **Escape key**: Closes the menu
-- **Submenu support**: Nested menus with hover trigger
-- **Keyboard shortcuts**: Display keyboard shortcuts with `sc-context-menu-shortcut`
-- **Disabled items**: Support for disabled menu items
-
-## Accessibility
-
-- Uses `role="menu"` and `role="menuitem"`
-- `aria-haspopup` and `aria-expanded` on submenu triggers
-- `tabindex="-1"` on menu items for focus management
-- Escape key closes the menu
-
-## Differences from Regular Menu
-
-| Feature  | Context Menu       | Menu                |
-| -------- | ------------------ | ------------------- |
-| Trigger  | Right-click        | Click on button     |
-| Position | At mouse cursor    | Attached to trigger |
-| Use case | Contextual actions | Dropdown menus      |

package/src/lib/components/context-menu/context-menu-content.ts

@@ -1,46 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  TemplateRef,
-  ViewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScContextMenu } from './context-menu';
-
-@Component({
-  selector: 'sc-context-menu-content',
-  template: `
-    <ng-template #contentTemplate>
-      <div [class]="class()" role="menu" (keydown)="onKeydown($event)">
-        <ng-content />
-      </div>
-    </ng-template>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScContextMenuContent {
-  private readonly contextMenu = inject(ScContextMenu);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  @ViewChild('contentTemplate', { static: true })
-  templateRef!: TemplateRef<unknown>;
-
-  protected readonly class = computed(() =>
-    cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
-      'animate-in fade-in-0 zoom-in-95',
-      this.classInput(),
-    ),
-  );
-
-  onKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Escape') {
-      this.contextMenu.closeMenu();
-    }
-  }
-}

package/src/lib/components/context-menu/context-menu-item.ts

@@ -1,44 +0,0 @@
-import { computed, Directive, inject, input, output } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScContextMenu } from './context-menu';
-
-@Directive({
-  selector: '[sc-context-menu-item]',
-  host: {
-    'data-slot': 'context-menu-item',
-    role: 'menuitem',
-    tabindex: '-1',
-    '[class]': 'class()',
-    '[attr.data-disabled]': 'disabled() || null',
-    '(click)': 'onClick()',
-    '(keydown.enter)': 'onClick()',
-    '(keydown.space)': 'onClick()',
-  },
-})
-export class ScContextMenuItem {
-  private readonly contextMenu = inject(ScContextMenu);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly disabled = input<boolean>(false);
-  readonly closeOnSelect = input<boolean>(true);
-
-  readonly select = output<void>();
-
-  protected readonly class = computed(() =>
-    cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none',
-      'focus:bg-accent focus:text-accent-foreground',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      '[&>svg]:size-4 [&>svg]:shrink-0',
-      this.classInput(),
-    ),
-  );
-
-  onClick(): void {
-    if (this.disabled()) return;
-    this.select.emit();
-    if (this.closeOnSelect()) {
-      this.contextMenu.closeMenu();
-    }
-  }
-}

package/src/lib/components/context-menu/context-menu-label.ts

@@ -1,22 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-context-menu-label]',
-  host: {
-    'data-slot': 'context-menu-label',
-    '[class]': 'class()',
-  },
-})
-export class ScContextMenuLabel {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly inset = input<boolean>(false);
-
-  protected readonly class = computed(() =>
-    cn(
-      'px-2 py-1.5 text-sm font-semibold',
-      this.inset() && 'pl-8',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/context-menu/context-menu-separator.ts

@@ -1,18 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-context-menu-separator]',
-  host: {
-    'data-slot': 'context-menu-separator',
-    role: 'separator',
-    '[class]': 'class()',
-  },
-})
-export class ScContextMenuSeparator {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('-mx-1 my-1 h-px bg-border', this.classInput()),
-  );
-}

package/src/lib/components/context-menu/context-menu-shortcut.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-context-menu-shortcut]',
-  host: {
-    'data-slot': 'context-menu-shortcut',
-    '[class]': 'class()',
-  },
-})
-export class ScContextMenuShortcut {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'ml-auto text-xs tracking-widest text-muted-foreground',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/context-menu/context-menu-sub-content.ts

@@ -1,83 +0,0 @@
-import { ConnectedPosition, OverlayModule } from '@angular/cdk/overlay';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScContextMenuSub } from './context-menu-sub';
-import { ScContextMenuSubTrigger } from './context-menu-sub-trigger';
-
-const positions: ConnectedPosition[] = [
-  {
-    originX: 'end',
-    originY: 'top',
-    overlayX: 'start',
-    overlayY: 'top',
-    offsetX: 4,
-  },
-  {
-    originX: 'start',
-    originY: 'top',
-    overlayX: 'end',
-    overlayY: 'top',
-    offsetX: -4,
-  },
-];
-
-@Component({
-  selector: 'div[sc-context-menu-sub-content]',
-  imports: [OverlayModule],
-  template: `
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayOrigin]="trigger.overlayOrigin"
-      [cdkConnectedOverlayOpen]="submenu.open()"
-      [cdkConnectedOverlayPositions]="positions"
-    >
-      <div
-        [class]="contentClass()"
-        role="menu"
-        (mouseenter)="onMouseEnter()"
-        (mouseleave)="onMouseLeave()"
-      >
-        <ng-content />
-      </div>
-    </ng-template>
-  `,
-  host: {
-    'data-slot': 'context-menu-sub-content',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScContextMenuSubContent {
-  readonly submenu = inject(ScContextMenuSub);
-  readonly trigger = inject(ScContextMenuSubTrigger);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly positions = positions;
-
-  protected readonly class = computed(() => cn('', this.classInput()));
-
-  protected readonly contentClass = computed(() =>
-    cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg',
-      this.submenu.open()
-        ? 'opacity-100 scale-100 transition-[opacity,transform] duration-150 ease-out'
-        : 'opacity-0 scale-95 transition-[opacity,transform] duration-150 ease-in',
-    ),
-  );
-
-  onMouseEnter(): void {
-    this.trigger.cancelHide();
-  }
-
-  onMouseLeave(): void {
-    this.submenu.hide();
-  }
-}