@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,91 +0,0 @@
-import { CdkOverlayOrigin } 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';
-
-@Component({
-  selector: 'div[sc-context-menu-sub-trigger]',
-  hostDirectives: [CdkOverlayOrigin],
-  template: `
-    <ng-content />
-    <svg
-      class="ml-auto size-4"
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-    >
-      <path d="m9 18 6-6-6-6" />
-    </svg>
-  `,
-  host: {
-    'data-slot': 'context-menu-sub-trigger',
-    role: 'menuitem',
-    'aria-haspopup': 'menu',
-    '[attr.aria-expanded]': 'submenu.open()',
-    '[attr.data-state]': 'submenu.open() ? "open" : "closed"',
-    '[class]': 'class()',
-    '(mouseenter)': 'onMouseEnter()',
-    '(mouseleave)': 'onMouseLeave()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScContextMenuSubTrigger {
-  readonly submenu = inject(ScContextMenuSub);
-  readonly overlayOrigin = inject(CdkOverlayOrigin);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  private showTimeout: ReturnType<typeof setTimeout> | null = null;
-  private hideTimeout: ReturnType<typeof setTimeout> | null = null;
-
-  protected readonly class = computed(() =>
-    cn(
-      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
-      'focus:bg-accent focus:text-accent-foreground',
-      'data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-      this.classInput(),
-    ),
-  );
-
-  onMouseEnter(): void {
-    this.cancelHide();
-    this.showTimeout = setTimeout(() => {
-      this.submenu.show();
-    }, 100);
-  }
-
-  onMouseLeave(): void {
-    this.cancelShow();
-    this.hideTimeout = setTimeout(() => {
-      this.submenu.hide();
-    }, 100);
-  }
-
-  private cancelShow(): void {
-    if (this.showTimeout) {
-      clearTimeout(this.showTimeout);
-      this.showTimeout = null;
-    }
-  }
-
-  cancelHide(): void {
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout);
-      this.hideTimeout = null;
-    }
-  }
-}

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

@@ -1,38 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'div[sc-context-menu-sub]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'context-menu-sub',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScContextMenuSub {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  /** Whether the submenu is open */
-  readonly open = signal<boolean>(false);
-
-  protected readonly class = computed(() => cn('relative', this.classInput()));
-
-  show(): void {
-    this.open.set(true);
-  }
-
-  hide(): void {
-    this.open.set(false);
-  }
-}

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

@@ -1,40 +0,0 @@
-import {
-  computed,
-  contentChild,
-  Directive,
-  inject,
-  input,
-  TemplateRef,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScContextMenu } from './context-menu';
-import { ScContextMenuContent } from './context-menu-content';
-
-@Directive({
-  selector: '[sc-context-menu-trigger]',
-  host: {
-    'data-slot': 'context-menu-trigger',
-    '[class]': 'class()',
-    '(contextmenu)': 'onContextMenu($event)',
-  },
-})
-export class ScContextMenuTrigger {
-  private readonly contextMenu = inject(ScContextMenu);
-  private readonly contentChild = contentChild(ScContextMenuContent);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() => cn('', this.classInput()));
-
-  onContextMenu(event: MouseEvent): void {
-    event.preventDefault();
-    const content = this.contentChild();
-    if (content?.templateRef) {
-      this.contextMenu.openAt(
-        event.clientX,
-        event.clientY,
-        content.templateRef,
-      );
-    }
-  }
-}

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

@@ -1,106 +0,0 @@
-import { Overlay, OverlayRef } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  inject,
-  input,
-  signal,
-  TemplateRef,
-  ViewContainerRef,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScContextMenuContent } from './context-menu-content';
-
-@Component({
-  selector: 'div[sc-context-menu]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'context-menu',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScContextMenu {
-  private readonly overlay = inject(Overlay);
-  private readonly viewContainerRef = inject(ViewContainerRef);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  /** Whether the context menu is open */
-  readonly open = signal<boolean>(false);
-
-  /** Position where the context menu should appear */
-  readonly position = signal<{ x: number; y: number }>({ x: 0, y: 0 });
-
-  private overlayRef: OverlayRef | null = null;
-  private contentChild = contentChild(ScContextMenuContent);
-
-  protected readonly class = computed(() => cn('relative', this.classInput()));
-
-  openAt(x: number, y: number, template: TemplateRef<unknown>): void {
-    this.closeMenu();
-
-    this.position.set({ x, y });
-
-    this.overlayRef = this.overlay.create({
-      positionStrategy: this.overlay
-        .position()
-        .flexibleConnectedTo({ x, y })
-        .withPositions([
-          {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top',
-          },
-          {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom',
-          },
-          {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'top',
-          },
-          {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'bottom',
-          },
-        ]),
-      scrollStrategy: this.overlay.scrollStrategies.close(),
-      hasBackdrop: true,
-      backdropClass: 'cdk-overlay-transparent-backdrop',
-    });
-
-    const portal = new TemplatePortal(template, this.viewContainerRef);
-    this.overlayRef.attach(portal);
-    this.open.set(true);
-
-    this.overlayRef.backdropClick().subscribe(() => this.closeMenu());
-    this.overlayRef.keydownEvents().subscribe((event) => {
-      if (event.key === 'Escape') {
-        this.closeMenu();
-      }
-    });
-  }
-
-  closeMenu(): void {
-    if (this.overlayRef) {
-      this.overlayRef.dispose();
-      this.overlayRef = null;
-    }
-    this.open.set(false);
-  }
-}

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

@@ -1,10 +0,0 @@
-export { ScContextMenu } from './context-menu';
-export { ScContextMenuContent } from './context-menu-content';
-export { ScContextMenuItem } from './context-menu-item';
-export { ScContextMenuLabel } from './context-menu-label';
-export { ScContextMenuSeparator } from './context-menu-separator';
-export { ScContextMenuShortcut } from './context-menu-shortcut';
-export { ScContextMenuSub } from './context-menu-sub';
-export { ScContextMenuSubContent } from './context-menu-sub-content';
-export { ScContextMenuSubTrigger } from './context-menu-sub-trigger';
-export { ScContextMenuTrigger } from './context-menu-trigger';

package/src/lib/components/copy-button/README.md

@@ -1,211 +0,0 @@
-# Copy Button
-
-A button component that copies text to clipboard with visual feedback.
-
-## Usage
-
-```html
-<button sc-copy-button [value]="textToCopy"></button>
-```
-
-## Components
-
-### ScCopyButton
-
-Core copy button with icon and feedback animation.
-
-**Selector:** `button[sc-copy-button]`
-
-**Inputs:**
-
-| Input      | Type                                  | Default   | Description            |
-| ---------- | ------------------------------------- | --------- | ---------------------- |
-| `value`    | `string`                              | Required  | Text to copy           |
-| `disabled` | `boolean`                             | `false`   | Disabled state         |
-| `timeout`  | `number`                              | `2000`    | Feedback duration (ms) |
-| `variant`  | `'default' \| 'ghost' \| 'outline'`   | `'ghost'` | Visual style           |
-| `size`     | `'sm' \| 'default' \| 'lg' \| 'icon'` | `'icon'`  | Button size            |
-| `class`    | `string`                              | `''`      | Additional CSS         |
-
-**Outputs:**
-
-| Output        | Type     | Description           |
-| ------------- | -------- | --------------------- |
-| `copySuccess` | `string` | Emits copied value    |
-| `copyError`   | `Error`  | Emits on copy failure |
-
-**Methods:**
-
-| Method    | Description           |
-| --------- | --------------------- |
-| `copy()`  | Trigger copy manually |
-| `reset()` | Reset copied state    |
-
-### ScCopyButtonWithText
-
-Copy button with text label.
-
-**Selector:** `[sc-copy-button-with-text]`
-
-**Inputs:**
-
-| Input        | Type                                | Default     | Description       |
-| ------------ | ----------------------------------- | ----------- | ----------------- |
-| `value`      | `string`                            | Required    | Text to copy      |
-| `disabled`   | `boolean`                           | `false`     | Disabled state    |
-| `timeout`    | `number`                            | `2000`      | Feedback duration |
-| `variant`    | `'default' \| 'ghost' \| 'outline'` | `'default'` | Visual style      |
-| `size`       | `'sm' \| 'default' \| 'lg'`         | `'default'` | Button size       |
-| `copyText`   | `string`                            | `'Copy'`    | Text before copy  |
-| `copiedText` | `string`                            | `'Copied!'` | Text after copy   |
-
-### ScCopyInput
-
-Input field with integrated copy button.
-
-**Selector:** `[sc-copy-input]`
-
-**Inputs:**
-
-| Input      | Type      | Default  | Description           |
-| ---------- | --------- | -------- | --------------------- |
-| `value`    | `string`  | Required | Value to display/copy |
-| `readonly` | `boolean` | `true`   | Input readonly state  |
-| `class`    | `string`  | `''`     | Additional CSS        |
-
-### ScCopyCode
-
-Code block with copy button.
-
-**Selector:** `[sc-copy-code]`
-
-**Inputs:**
-
-| Input   | Type     | Required | Description    |
-| ------- | -------- | -------- | -------------- |
-| `value` | `string` | Yes      | Code to copy   |
-| `class` | `string` | No       | Additional CSS |
-
-## Examples
-
-### Basic
-
-```html
-<button sc-copy-button [value]="'Hello, World!'"></button>
-```
-
-### With Event Handler
-
-```html
-<button sc-copy-button [value]="text" (copySuccess)="onCopied($event)" (copyError)="onError($event)"></button>
-```
-
-### Variants
-
-```html
-<button sc-copy-button [value]="text" variant="ghost"></button>
-<button sc-copy-button [value]="text" variant="outline"></button>
-<button sc-copy-button [value]="text" variant="default"></button>
-```
-
-### Sizes
-
-```html
-<button sc-copy-button [value]="text" size="sm"></button>
-<button sc-copy-button [value]="text" size="default"></button>
-<button sc-copy-button [value]="text" size="lg"></button>
-<button sc-copy-button [value]="text" size="icon"></button>
-```
-
-### With Text Label
-
-```html
-<div sc-copy-button-with-text [value]="'Copy this text'"></div>
-
-<div sc-copy-button-with-text [value]="shareLink" copyText="Copy Link" copiedText="Link Copied!"></div>
-```
-
-### Copy Input
-
-```html
-<div sc-copy-input [value]="'https://example.com/share/abc123'"></div>
-
-<div>
-  <label>API Key</label>
-  <div sc-copy-input [value]="apiKey"></div>
-</div>
-```
-
-### Copy Code Block
-
-```html
-<div sc-copy-code [value]="codeSnippet">{{ codeSnippet }}</div>
-```
-
-### Inline with Text
-
-```html
-<div class="flex items-center gap-2 border rounded-md px-3 py-2">
-  <code class="flex-1">npm install package</code>
-  <button sc-copy-button [value]="'npm install package'" size="sm"></button>
-</div>
-```
-
-### Custom Timeout
-
-```html
-<button sc-copy-button [value]="text" [timeout]="5000">Copy (5s feedback)</button>
-```
-
-### Disabled
-
-```html
-<button sc-copy-button [value]="text" [disabled]="true"></button>
-```
-
-### Share URL Pattern
-
-```html
-<div class="flex items-center gap-2">
-  <input [value]="shareUrl" readonly class="flex-1 border rounded px-3 py-2" />
-  <button sc-copy-button [value]="shareUrl" variant="outline"></button>
-</div>
-```
-
-### Color Code Pattern
-
-```html
-<div class="flex items-center gap-3">
-  <div class="size-10 rounded-md" [style.background]="color"></div>
-  <span class="flex-1">{{ color }}</span>
-  <button sc-copy-button [value]="color" variant="ghost"></button>
-</div>
-```
-
-### Promo Code Pattern
-
-```html
-<div class="flex items-center justify-between">
-  <code class="text-2xl font-bold">SAVE20</code>
-  <button sc-copy-button [value]="'SAVE20'" variant="outline">Copy Code</button>
-</div>
-```
-
-## Features
-
-- **Clipboard API**: Uses modern `navigator.clipboard.writeText()`
-- **Visual Feedback**: Icon changes to checkmark on success
-- **Configurable Timeout**: Control how long feedback shows
-- **Multiple Variants**: Ghost, outline, and default styles
-- **Multiple Sizes**: Small, default, large, and icon-only
-- **Convenience Components**: Input, code block, and text label wrappers
-- **Events**: Success and error callbacks
-- **Programmatic Control**: `copy()` and `reset()` methods
-
-## Accessibility
-
-- `aria-label` updates based on state
-- `data-copied` attribute for styling
-- Focus visible indicators
-- Disabled state support
-- Proper button semantics

package/src/lib/components/copy-button/copy-button-with-text.ts

@@ -1,53 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScCopyButton } from './copy-button';
-
-@Component({
-  selector: '[sc-copy-button-with-text]',
-  template: `
-    <button
-      sc-copy-button
-      [value]="value()"
-      [disabled]="disabled()"
-      [timeout]="timeout()"
-      [variant]="variant()"
-      [size]="size()"
-      (copySuccess)="copySuccess.emit($event)"
-      (copyError)="copyError.emit($event)"
-      #copyBtn="scCopyButton"
-    >
-      {{ copyBtn.copied() ? copiedText() : copyText() }}
-    </button>
-  `,
-  host: {
-    'data-slot': 'copy-button-with-text',
-    '[class]': 'class()',
-  },
-  imports: [ScCopyButton],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCopyButtonWithText {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly value = input.required<string>();
-  readonly disabled = input<boolean>(false);
-  readonly timeout = input<number>(2000);
-  readonly variant = input<'default' | 'ghost' | 'outline'>('default');
-  readonly size = input<'sm' | 'default' | 'lg'>('default');
-  readonly copyText = input<string>('Copy');
-  readonly copiedText = input<string>('Copied!');
-
-  readonly copySuccess = output<string>();
-  readonly copyError = output<Error>();
-
-  protected readonly class = computed(() =>
-    cn('inline-block', this.classInput()),
-  );
-}

package/src/lib/components/copy-button/copy-button.ts

@@ -1,137 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'button[sc-copy-button]',
-  exportAs: 'scCopyButton',
-  template: `
-    @if (copied()) {
-      <!-- Check icon -->
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        [class]="iconClass()"
-        class="text-green-500"
-      >
-        <path d="M20 6 9 17l-5-5" />
-      </svg>
-    } @else {
-      <!-- Copy icon -->
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        [class]="iconClass()"
-      >
-        <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
-        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
-      </svg>
-    }
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'copy-button',
-    type: 'button',
-    '[class]': 'class()',
-    '[disabled]': 'disabled()',
-    '[attr.data-copied]': 'copied() || null',
-    '[attr.aria-label]': 'ariaLabel()',
-    '(click)': 'copy()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCopyButton {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly value = input.required<string>();
-  readonly disabled = input<boolean>(false);
-  readonly timeout = input<number>(2000);
-  readonly variant = input<'default' | 'ghost' | 'outline'>('ghost');
-  readonly size = input<'sm' | 'default' | 'lg' | 'icon'>('icon');
-
-  readonly copySuccess = output<string>();
-  readonly copyError = output<Error>();
-
-  readonly copied = signal(false);
-  private timeoutId: ReturnType<typeof setTimeout> | null = null;
-
-  protected readonly class = computed(() =>
-    cn(
-      'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors',
-      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-      'disabled:pointer-events-none disabled:opacity-50',
-      // Variants
-      this.variant() === 'default' &&
-        'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-      this.variant() === 'ghost' &&
-        'hover:bg-accent hover:text-accent-foreground',
-      this.variant() === 'outline' &&
-        'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
-      // Sizes
-      this.size() === 'sm' && 'h-8 px-3 text-xs',
-      this.size() === 'default' && 'h-9 px-4 py-2 text-sm',
-      this.size() === 'lg' && 'h-10 px-8 text-sm',
-      this.size() === 'icon' && 'size-9',
-      this.classInput(),
-    ),
-  );
-
-  protected readonly iconClass = computed(() =>
-    cn(
-      this.size() === 'sm' && 'size-3.5',
-      this.size() === 'default' && 'size-4',
-      this.size() === 'lg' && 'size-5',
-      this.size() === 'icon' && 'size-4',
-    ),
-  );
-
-  protected readonly ariaLabel = computed(() =>
-    this.copied() ? 'Copied to clipboard' : 'Copy to clipboard',
-  );
-
-  async copy(): Promise<void> {
-    if (this.disabled() || this.copied()) return;
-
-    try {
-      await navigator.clipboard.writeText(this.value());
-      this.copied.set(true);
-      this.copySuccess.emit(this.value());
-
-      // Clear any existing timeout
-      if (this.timeoutId) {
-        clearTimeout(this.timeoutId);
-      }
-
-      // Reset after timeout
-      this.timeoutId = setTimeout(() => {
-        this.copied.set(false);
-        this.timeoutId = null;
-      }, this.timeout());
-    } catch (error) {
-      this.copyError.emit(
-        error instanceof Error ? error : new Error('Failed to copy'),
-      );
-    }
-  }
-
-  reset(): void {
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-      this.timeoutId = null;
-    }
-    this.copied.set(false);
-  }
-}