@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,240 +0,0 @@
-import {
-  afterNextRender,
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  DestroyRef,
-  ElementRef,
-  inject,
-  input,
-  output,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import type {
-  SplitButtonAction,
-  SplitButtonSize,
-  SplitButtonVariant,
-} from './split-button-types';
-
-@Component({
-  selector: 'sc-split-button',
-  template: `
-    <div [class]="containerClass()" role="group">
-      <!-- Main Button -->
-      <button
-        type="button"
-        [class]="mainButtonClass()"
-        [disabled]="disabled()"
-        [attr.aria-label]="label()"
-        (click)="onMainClick()"
-      >
-        @if (icon()) {
-          <span
-            class="inline-flex items-center justify-center [&>svg]:w-4 [&>svg]:h-4"
-            [innerHTML]="icon()"
-          ></span>
-        }
-        <span>{{ label() }}</span>
-      </button>
-
-      <!-- Dropdown Toggle -->
-      <button
-        type="button"
-        [class]="dropdownButtonClass()"
-        [disabled]="disabled() || actions().length === 0"
-        [attr.aria-expanded]="isOpen()"
-        [attr.aria-haspopup]="true"
-        aria-label="More actions"
-        (click)="toggleDropdown()"
-      >
-        <span
-          class="inline-flex items-center justify-center transition-transform duration-200"
-          [class.rotate-180]="isOpen()"
-          [innerHTML]="chevronIcon"
-        ></span>
-      </button>
-
-      <!-- Dropdown Menu -->
-      @if (isOpen()) {
-        <div [class]="dropdownMenuClass()" role="menu">
-          @for (action of actions(); track action.id) {
-            <button
-              type="button"
-              role="menuitem"
-              [class]="menuItemClass(action)"
-              [disabled]="action.disabled"
-              (click)="onActionClick(action)"
-            >
-              @if (action.icon) {
-                <span
-                  class="inline-flex items-center justify-center [&>svg]:w-4 [&>svg]:h-4"
-                  [innerHTML]="action.icon"
-                ></span>
-              }
-              <span>{{ action.label }}</span>
-            </button>
-          }
-        </div>
-      }
-    </div>
-  `,
-  styles: `
-    :host {
-      display: inline-block;
-      position: relative;
-    }
-  `,
-  host: {
-    '(document:keydown.escape)': 'close()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSplitButton {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-  private readonly destroyRef = inject(DestroyRef);
-
-  readonly label = input.required<string>();
-  readonly actions = input<SplitButtonAction[]>([]);
-  readonly icon = input<string>();
-  readonly variant = input<SplitButtonVariant>('default');
-  readonly size = input<SplitButtonSize>('md');
-  readonly disabled = input(false);
-  readonly class = input<string>('');
-
-  readonly mainClick = output<void>();
-  readonly actionClick = output<SplitButtonAction>();
-
-  protected readonly isOpen = signal(false);
-
-  readonly chevronIcon = `<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"><path d="m6 9 6 6 6-6"/></svg>`;
-
-  protected readonly containerClass = computed(() =>
-    cn('inline-flex', this.class()),
-  );
-
-  protected readonly mainButtonClass = computed(() =>
-    cn(
-      'inline-flex items-center justify-center gap-2 font-medium',
-      'transition-colors rounded-l-md',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      'disabled:opacity-50 disabled:cursor-not-allowed',
-      this.variantClasses(),
-      this.sizeClasses(),
-      'rounded-r-none border-r-0',
-    ),
-  );
-
-  protected readonly dropdownButtonClass = computed(() =>
-    cn(
-      'inline-flex items-center justify-center font-medium',
-      'transition-colors rounded-r-md',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      'disabled:opacity-50 disabled:cursor-not-allowed',
-      this.variantClasses(),
-      this.dropdownSizeClasses(),
-      'rounded-l-none border-l border-l-background/20',
-    ),
-  );
-
-  protected readonly dropdownMenuClass = computed(() =>
-    cn(
-      'absolute right-0 mt-1 z-50',
-      'min-w-[160px] p-1',
-      'bg-popover text-popover-foreground',
-      'border rounded-md shadow-md',
-      'animate-in fade-in-0 zoom-in-95',
-      this.size() === 'sm'
-        ? 'top-8'
-        : this.size() === 'lg'
-          ? 'top-12'
-          : 'top-10',
-    ),
-  );
-
-  protected menuItemClass(action: SplitButtonAction): string {
-    return cn(
-      'flex w-full items-center gap-2 px-3 py-2 text-sm',
-      'rounded-sm cursor-pointer',
-      'transition-colors',
-      'focus:outline-none focus:bg-accent focus:text-accent-foreground',
-      'disabled:opacity-50 disabled:cursor-not-allowed',
-      action.destructive
-        ? 'text-destructive hover:bg-destructive/10 focus:bg-destructive/10 focus:text-destructive'
-        : 'hover:bg-accent hover:text-accent-foreground',
-    );
-  }
-
-  private variantClasses(): string {
-    const variants = {
-      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-      outline:
-        'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-      destructive:
-        'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-    };
-    return variants[this.variant()];
-  }
-
-  private sizeClasses(): string {
-    const sizes = {
-      sm: 'h-8 px-3 text-xs',
-      md: 'h-10 px-4 text-sm',
-      lg: 'h-12 px-6 text-base',
-    };
-    return sizes[this.size()];
-  }
-
-  private dropdownSizeClasses(): string {
-    const sizes = {
-      sm: 'h-8 px-2',
-      md: 'h-10 px-2',
-      lg: 'h-12 px-3',
-    };
-    return sizes[this.size()];
-  }
-
-  constructor() {
-    afterNextRender(() => {
-      this.setupOutsideClickHandler();
-    });
-  }
-
-  private setupOutsideClickHandler(): void {
-    const handler = (event: MouseEvent) => {
-      if (!this.isOpen()) return;
-      const target = event.target as HTMLElement;
-      if (!this.elementRef.nativeElement.contains(target)) {
-        this.close();
-      }
-    };
-
-    document.addEventListener('click', handler);
-
-    this.destroyRef.onDestroy(() => {
-      document.removeEventListener('click', handler);
-    });
-  }
-
-  toggleDropdown(): void {
-    this.isOpen.update((v) => !v);
-  }
-
-  close(): void {
-    this.isOpen.set(false);
-  }
-
-  onMainClick(): void {
-    this.mainClick.emit();
-  }
-
-  onActionClick(action: SplitButtonAction): void {
-    if (!action.disabled) {
-      this.actionClick.emit(action);
-      this.close();
-    }
-  }
-}

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

@@ -1,136 +0,0 @@
-# Spotlight
-
-Highlight specific UI elements with a spotlight overlay effect for feature discovery and user guidance.
-
-## Usage
-
-```html
-<button (click)="spotlight.show('#my-element')">Show Spotlight</button>
-
-<sc-spotlight #spotlight [padding]="12">
-  <sc-spotlight-title>Feature Title</sc-spotlight-title>
-  <sc-spotlight-description>Description of the highlighted feature.</sc-spotlight-description>
-  <sc-spotlight-actions>
-    <button (click)="spotlight.close()">Got it</button>
-  </sc-spotlight-actions>
-</sc-spotlight>
-```
-
-## API
-
-### ScSpotlight
-
-| Input                 | Type                | Default    | Description                     |
-| --------------------- | ------------------- | ---------- | ------------------------------- |
-| `target`              | `string \| Element` | `null`     | CSS selector or Element         |
-| `padding`             | `number`            | `8`        | Padding around highlighted area |
-| `borderRadius`        | `number`            | `8`        | Border radius of spotlight      |
-| `overlayOpacity`      | `number`            | `0.75`     | Overlay darkness (0-1)          |
-| `animationDuration`   | `number`            | `300`      | Animation duration in ms        |
-| `showClose`           | `boolean`           | `true`     | Show close button               |
-| `closeOnOverlayClick` | `boolean`           | `true`     | Close when clicking overlay     |
-| `closeOnEscape`       | `boolean`           | `true`     | Close on Escape key             |
-| `scrollIntoView`      | `boolean`           | `true`     | Scroll target into view         |
-| `scrollBehavior`      | `ScrollBehavior`    | `'smooth'` | Scroll animation type           |
-| `contentPlacement`    | `string`            | `'auto'`   | Position of content panel       |
-| `class`               | `string`            | `''`       | Additional CSS classes          |
-
-| Output   | Type   | Description                 |
-| -------- | ------ | --------------------------- |
-| `opened` | `void` | Emits when spotlight opens  |
-| `closed` | `void` | Emits when spotlight closes |
-
-| Method   | Type                          | Description               |
-| -------- | ----------------------------- | ------------------------- |
-| `show`   | `(target: string \| Element)` | Show spotlight on element |
-| `hide`   | `() => void`                  | Hide the spotlight        |
-| `toggle` | `(target: string \| Element)` | Toggle visibility         |
-| `close`  | `() => void`                  | Close the spotlight       |
-
-### ScSpotlightTitle
-
-Styled title for the spotlight content.
-
-### ScSpotlightDescription
-
-Styled description text for the spotlight content.
-
-### ScSpotlightActions
-
-Container for action buttons with proper spacing.
-
-## Examples
-
-### Basic Spotlight
-
-```html
-<button (click)="spotlight.show('#feature-card')">Highlight Feature</button>
-
-<sc-spotlight #spotlight>
-  <sc-spotlight-title>New Feature!</sc-spotlight-title>
-  <sc-spotlight-description>Check out this exciting new capability.</sc-spotlight-description>
-</sc-spotlight>
-```
-
-### With Custom Styling
-
-```html
-<sc-spotlight #spotlight [padding]="16" [borderRadius]="12" [overlayOpacity]="0.85">
-  <sc-spotlight-title>Premium Feature</sc-spotlight-title>
-  <sc-spotlight-description>Upgrade to access this feature.</sc-spotlight-description>
-  <sc-spotlight-actions>
-    <button (click)="spotlight.close()">Maybe Later</button>
-    <button (click)="upgrade()">Upgrade Now</button>
-  </sc-spotlight-actions>
-</sc-spotlight>
-```
-
-### Programmatic Target
-
-```typescript
-// Using CSS selector
-spotlight.show('#my-element');
-
-// Using Element reference
-const element = document.querySelector('.my-class');
-spotlight.show(element);
-```
-
-### Input-Driven
-
-```html
-<sc-spotlight [target]="activeTarget()">
-  <!-- Content automatically updates when target changes -->
-</sc-spotlight>
-```
-
-```typescript
-activeTarget = signal<string | null>(null);
-
-highlightElement(selector: string) {
-  this.activeTarget.set(selector);
-}
-
-clearHighlight() {
-  this.activeTarget.set(null);
-}
-```
-
-## Features
-
-- SVG mask-based overlay with spotlight cutout
-- Animated pulse effect on highlighted element
-- Auto-positioning content panel
-- Customizable padding, border radius, and opacity
-- Close on overlay click or Escape key
-- Scroll target into view automatically
-- ResizeObserver for dynamic element tracking
-- Content slot for custom tooltips and actions
-- Smooth enter/exit animations
-
-## Accessibility
-
-- ARIA dialog role with modal attribute
-- Keyboard navigable (Escape to close)
-- Focus trap within spotlight
-- Screen reader friendly

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

@@ -1,5 +0,0 @@
-export { ScSpotlight } from './spotlight';
-export type { SpotlightOptions } from './spotlight';
-export { ScSpotlightTitle } from './spotlight-title';
-export { ScSpotlightDescription } from './spotlight-description';
-export { ScSpotlightActions } from './spotlight-actions';

package/src/lib/components/spotlight/spotlight-actions.ts

@@ -1,24 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'sc-spotlight-actions',
-  template: `
-    <div [class]="computedClass()"><ng-content></ng-content></div>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSpotlightActions {
-  readonly class = input<string>('');
-
-  protected readonly computedClass = computed(() =>
-    cn('flex gap-2 mt-4 justify-end', this.class()),
-  );
-}

package/src/lib/components/spotlight/spotlight-description.ts

@@ -1,24 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'sc-spotlight-description',
-  template: `
-    <p [class]="computedClass()"><ng-content></ng-content></p>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSpotlightDescription {
-  readonly class = input<string>('');
-
-  protected readonly computedClass = computed(() =>
-    cn('text-sm text-muted-foreground', this.class()),
-  );
-}

package/src/lib/components/spotlight/spotlight-title.ts

@@ -1,24 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'sc-spotlight-title',
-  template: `
-    <h3 [class]="computedClass()"><ng-content></ng-content></h3>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSpotlightTitle {
-  readonly class = input<string>('');
-
-  protected readonly computedClass = computed(() =>
-    cn('font-semibold text-lg mb-2', this.class()),
-  );
-}