@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/sortable-list/sortable-handle.ts

@@ -1,72 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_SORTABLE_LIST, ScSortableList } from './sortable-list';
-import { SC_SORTABLE_ITEM, ScSortableItem } from './sortable-item';
-
-@Component({
-  selector: '[sc-sortable-handle]',
-  template: `
-    <ng-content>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        class="size-4"
-      >
-        <circle cx="9" cy="5" r="1" />
-        <circle cx="9" cy="12" r="1" />
-        <circle cx="9" cy="19" r="1" />
-        <circle cx="15" cy="5" r="1" />
-        <circle cx="15" cy="12" r="1" />
-        <circle cx="15" cy="19" r="1" />
-      </svg>
-    </ng-content>
-  `,
-  host: {
-    'data-slot': 'sortable-handle',
-    '[class]': 'class()',
-    draggable: 'true',
-    '[attr.aria-label]': '"Drag to reorder"',
-    '(dragstart)': 'onDragStart($event)',
-    '(mousedown)': 'onMouseDown()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSortableHandle {
-  private readonly item = inject<ScSortableItem<unknown>>(SC_SORTABLE_ITEM);
-  private readonly list = inject<ScSortableList<unknown>>(SC_SORTABLE_LIST);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'cursor-grab active:cursor-grabbing',
-      'text-muted-foreground hover:text-foreground',
-      'touch-none',
-      this.classInput(),
-    ),
-  );
-
-  onDragStart(event: DragEvent): void {
-    event.stopPropagation();
-    this.list.startDrag(this.item.index());
-    if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move';
-      event.dataTransfer.setData('text/plain', String(this.item.index()));
-    }
-  }
-
-  onMouseDown(): void {
-    // Prepare for potential drag
-  }
-}

package/src/lib/components/sortable-list/sortable-item.ts

@@ -1,162 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  ElementRef,
-  inject,
-  InjectionToken,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_SORTABLE_LIST, ScSortableList } from './sortable-list';
-
-// Token for sortable item context
-export const SC_SORTABLE_ITEM = new InjectionToken<ScSortableItem<unknown>>(
-  'SC_SORTABLE_ITEM',
-);
-
-@Component({
-  selector: '[sc-sortable-item]',
-  template: `
-    <ng-content />
-  `,
-  providers: [{ provide: SC_SORTABLE_ITEM, useExisting: ScSortableItem }],
-  host: {
-    'data-slot': 'sortable-item',
-    '[class]': 'class()',
-    '[attr.draggable]': 'canDrag()',
-    '[attr.data-dragging]': 'isBeingDragged() || null',
-    '[attr.data-drag-over]': 'isDragOver() || null',
-    '[attr.tabindex]': 'list.disabled() ? -1 : 0',
-    '(dragstart)': 'onDragStart($event)',
-    '(dragend)': 'onDragEnd($event)',
-    '(dragover)': 'onDragOver($event)',
-    '(dragenter)': 'onDragEnter($event)',
-    '(dragleave)': 'onDragLeave($event)',
-    '(drop)': 'onDrop($event)',
-    '(keydown)': 'onKeydown($event)',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSortableItem<T> {
-  readonly list = inject<ScSortableList<T>>(SC_SORTABLE_LIST);
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly index = input.required<number>();
-  readonly item = input.required<T>();
-
-  protected readonly class = computed(() =>
-    cn(
-      'relative select-none',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md',
-      'data-[dragging]:opacity-50 data-[dragging]:z-50',
-      'data-[drag-over]:ring-2 data-[drag-over]:ring-primary',
-      'transition-[box-shadow,opacity]',
-      this.classInput(),
-    ),
-  );
-
-  protected readonly canDrag = computed(() => {
-    if (this.list.disabled()) return false;
-    return !this.list.handleOnly();
-  });
-
-  protected readonly isBeingDragged = computed(
-    () => this.list.draggedIndex() === this.index(),
-  );
-
-  protected readonly isDragOver = computed(() => {
-    const dragOverIdx = this.list.dragOverIndex();
-    const draggedIdx = this.list.draggedIndex();
-    return dragOverIdx === this.index() && draggedIdx !== this.index();
-  });
-
-  // Allow handle to trigger drag
-  startDragFromHandle(): void {
-    this.list.startDrag(this.index());
-  }
-
-  onDragStart(event: DragEvent): void {
-    if (this.list.handleOnly()) {
-      // If handleOnly, prevent default drag unless triggered from handle
-      event.preventDefault();
-      return;
-    }
-    this.list.startDrag(this.index());
-    if (event.dataTransfer) {
-      event.dataTransfer.effectAllowed = 'move';
-      event.dataTransfer.setData('text/plain', String(this.index()));
-    }
-  }
-
-  onDragEnd(event: DragEvent): void {
-    event.preventDefault();
-    this.list.endDrag();
-  }
-
-  onDragOver(event: DragEvent): void {
-    event.preventDefault();
-    if (event.dataTransfer) {
-      event.dataTransfer.dropEffect = 'move';
-    }
-  }
-
-  onDragEnter(event: DragEvent): void {
-    event.preventDefault();
-    this.list.setDragOver(this.index());
-  }
-
-  onDragLeave(event: DragEvent): void {
-    // Only clear if leaving to outside
-    const rect = this.elementRef.nativeElement.getBoundingClientRect();
-    if (
-      event.clientX < rect.left ||
-      event.clientX > rect.right ||
-      event.clientY < rect.top ||
-      event.clientY > rect.bottom
-    ) {
-      // Check if related target is not a child
-      const related = event.relatedTarget as HTMLElement;
-      if (!this.elementRef.nativeElement.contains(related)) {
-        this.list.setDragOver(null);
-      }
-    }
-  }
-
-  onDrop(event: DragEvent): void {
-    event.preventDefault();
-    this.list.endDrag();
-  }
-
-  onKeydown(event: KeyboardEvent): void {
-    if (this.list.disabled()) return;
-
-    const isVertical = this.list.orientation() === 'vertical';
-
-    if (
-      (isVertical && event.key === 'ArrowUp') ||
-      (!isVertical && event.key === 'ArrowLeft')
-    ) {
-      event.preventDefault();
-      this.list.moveUp(this.index());
-      this.focusSelf();
-    } else if (
-      (isVertical && event.key === 'ArrowDown') ||
-      (!isVertical && event.key === 'ArrowRight')
-    ) {
-      event.preventDefault();
-      this.list.moveDown(this.index());
-      this.focusSelf();
-    }
-  }
-
-  private focusSelf(): void {
-    // Re-focus after move (item might have moved in DOM)
-    requestAnimationFrame(() => {
-      this.elementRef.nativeElement.focus();
-    });
-  }
-}

package/src/lib/components/sortable-list/sortable-list.ts

@@ -1,127 +0,0 @@
-import {
-  computed,
-  Directive,
-  InjectionToken,
-  input,
-  model,
-  output,
-  signal,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-export interface SortableEvent<T> {
-  item: T;
-  previousIndex: number;
-  currentIndex: number;
-}
-
-// Token for sortable list context
-export const SC_SORTABLE_LIST = new InjectionToken<ScSortableList<unknown>>(
-  'SC_SORTABLE_LIST',
-);
-
-@Directive({
-  selector: '[sc-sortable-list]',
-  exportAs: 'scSortableList',
-  providers: [{ provide: SC_SORTABLE_LIST, useExisting: ScSortableList }],
-  host: {
-    'data-slot': 'sortable-list',
-    '[class]': 'class()',
-    '[attr.data-orientation]': 'orientation()',
-    '[attr.data-disabled]': 'disabled() || null',
-    '[attr.data-dragging]': 'isDragging() || null',
-  },
-})
-export class ScSortableList<T> {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly items = model<T[]>([]);
-  readonly orientation = input<'vertical' | 'horizontal'>('vertical');
-  readonly disabled = input<boolean>(false);
-  readonly handleOnly = input<boolean>(false);
-
-  readonly sortChange = output<SortableEvent<T>>();
-  readonly sortStart = output<{ item: T; index: number }>();
-  readonly sortEnd = output<SortableEvent<T>>();
-
-  readonly isDragging = signal(false);
-  readonly draggedIndex = signal<number | null>(null);
-  readonly dragOverIndex = signal<number | null>(null);
-
-  protected readonly class = computed(() =>
-    cn(
-      'relative',
-      this.orientation() === 'vertical' && 'flex flex-col',
-      this.orientation() === 'horizontal' && 'flex flex-row',
-      this.classInput(),
-    ),
-  );
-
-  private registeredItems: { index: number; element: HTMLElement }[] = [];
-
-  registerItem(index: number, element: HTMLElement): void {
-    this.registeredItems.push({ index, element });
-  }
-
-  unregisterItem(index: number): void {
-    this.registeredItems = this.registeredItems.filter(
-      (item) => item.index !== index,
-    );
-  }
-
-  startDrag(index: number): void {
-    if (this.disabled()) return;
-    this.isDragging.set(true);
-    this.draggedIndex.set(index);
-    this.sortStart.emit({ item: this.items()[index], index });
-  }
-
-  endDrag(): void {
-    const draggedIdx = this.draggedIndex();
-    const overIdx = this.dragOverIndex();
-
-    if (draggedIdx !== null && overIdx !== null && draggedIdx !== overIdx) {
-      this.moveItem(draggedIdx, overIdx);
-    }
-
-    this.isDragging.set(false);
-    this.draggedIndex.set(null);
-    this.dragOverIndex.set(null);
-  }
-
-  setDragOver(index: number | null): void {
-    if (this.isDragging()) {
-      this.dragOverIndex.set(index);
-    }
-  }
-
-  moveItem(fromIndex: number, toIndex: number): void {
-    if (this.disabled()) return;
-
-    const items = [...this.items()];
-    const [removed] = items.splice(fromIndex, 1);
-    items.splice(toIndex, 0, removed);
-
-    this.items.set(items);
-
-    const event: SortableEvent<T> = {
-      item: removed,
-      previousIndex: fromIndex,
-      currentIndex: toIndex,
-    };
-
-    this.sortChange.emit(event);
-    this.sortEnd.emit(event);
-  }
-
-  moveUp(index: number): void {
-    if (index > 0) {
-      this.moveItem(index, index - 1);
-    }
-  }
-
-  moveDown(index: number): void {
-    if (index < this.items().length - 1) {
-      this.moveItem(index, index + 1);
-    }
-  }
-}

package/src/lib/components/sortable-list/sortable-overlay.ts

@@ -1,31 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  ViewEncapsulation,
-} from '@angular/core';
-import { SC_SORTABLE_LIST, ScSortableList } from './sortable-list';
-
-@Component({
-  selector: '[sc-sortable-overlay]',
-  template: `
-    @if (list.isDragging()) {
-      <div
-        class="fixed inset-0 z-40 cursor-grabbing"
-        (dragover)="onDragOver($event)"
-      ></div>
-    }
-  `,
-  host: {
-    'data-slot': 'sortable-overlay',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSortableOverlay {
-  readonly list = inject<ScSortableList<unknown>>(SC_SORTABLE_LIST);
-
-  onDragOver(event: DragEvent): void {
-    event.preventDefault();
-  }
-}

package/src/lib/components/speed-dial/README.md

@@ -1,259 +0,0 @@
-# Speed Dial
-
-A floating action button (FAB) that expands to reveal a set of related actions.
-
-## Installation
-
-Import the components from the speed-dial module:
-
-```typescript
-import { ScSpeedDial, ScSpeedDialAction } from '@/ui/speed-dial';
-import type { SpeedDialAction, SpeedDialDirection } from '@/ui/speed-dial';
-```
-
-## Usage
-
-### Basic Usage
-
-```html
-<sc-speed-dial [actions]="actions" (actionClick)="onActionClick($event)" />
-```
-
-```typescript
-actions: SpeedDialAction[] = [
-  {
-    id: 'edit',
-    icon: '<svg>...</svg>',
-    label: 'Edit',
-  },
-  {
-    id: 'delete',
-    icon: '<svg>...</svg>',
-    label: 'Delete',
-  },
-];
-
-onActionClick(event: SpeedDialActionClickEvent): void {
-  console.log('Action clicked:', event.action.label);
-}
-```
-
-### Direction Options
-
-```html
-<!-- Expand upward (default) -->
-<sc-speed-dial [actions]="actions" direction="up" />
-
-<!-- Expand downward -->
-<sc-speed-dial [actions]="actions" direction="down" />
-
-<!-- Expand to the left -->
-<sc-speed-dial [actions]="actions" direction="left" />
-
-<!-- Expand to the right -->
-<sc-speed-dial [actions]="actions" direction="right" />
-```
-
-### Custom Icons
-
-```html
-<sc-speed-dial [actions]="actions" [icon]="customIcon" [closeIcon]="customCloseIcon" />
-```
-
-### Size Variants
-
-```html
-<!-- Small -->
-<sc-speed-dial [actions]="actions" size="sm" actionSize="sm" />
-
-<!-- Medium (default) -->
-<sc-speed-dial [actions]="actions" size="md" actionSize="md" />
-
-<!-- Large -->
-<sc-speed-dial [actions]="actions" size="lg" actionSize="lg" />
-```
-
-### Without Labels
-
-```html
-<sc-speed-dial [actions]="actions" [showLabels]="false" />
-```
-
-### Controlled Open State
-
-```html
-<sc-speed-dial [actions]="actions" [(open)]="isOpen" (openChange)="onOpenChange($event)" />
-```
-
-### Positioning
-
-The Speed Dial component uses inline positioning by default. For fixed or floating positioning, wrap it in a positioned container:
-
-```html
-<!-- Fixed bottom-right position -->
-<div class="fixed bottom-6 right-6 z-50">
-  <sc-speed-dial [actions]="actions" />
-</div>
-
-<!-- Absolute within container -->
-<div class="relative h-96">
-  <div class="absolute bottom-4 right-4">
-    <sc-speed-dial [actions]="actions" />
-  </div>
-</div>
-```
-
-## API Reference
-
-### ScSpeedDial
-
-The main speed dial component with floating action button.
-
-#### Inputs
-
-| Input                 | Type                                  | Default          | Description                   |
-| --------------------- | ------------------------------------- | ---------------- | ----------------------------- |
-| `actions`             | `SpeedDialAction[]`                   | `[]`             | Array of action items         |
-| `direction`           | `'up' \| 'down' \| 'left' \| 'right'` | `'up'`           | Direction to expand actions   |
-| `icon`                | `string`                              | Plus icon        | SVG icon for closed state     |
-| `closeIcon`           | `string`                              | X icon           | SVG icon for open state       |
-| `label`               | `string`                              | `'Open actions'` | Label for the main button     |
-| `ariaLabel`           | `string`                              | `'Speed dial'`   | Accessible label              |
-| `showLabels`          | `boolean`                             | `true`           | Show action labels            |
-| `closeOnActionClick`  | `boolean`                             | `true`           | Close menu after action click |
-| `closeOnOutsideClick` | `boolean`                             | `true`           | Close menu on outside click   |
-| `size`                | `'sm' \| 'md' \| 'lg'`                | `'md'`           | Size of main FAB button       |
-| `actionSize`          | `'sm' \| 'md' \| 'lg'`                | `'md'`           | Size of action buttons        |
-| `class`               | `string`                              | `''`             | Additional CSS classes        |
-
-#### Two-way Bindings
-
-| Binding | Type      | Description               |
-| ------- | --------- | ------------------------- |
-| `open`  | `boolean` | Open/closed state of menu |
-
-#### Outputs
-
-| Output        | Type                        | Description                     |
-| ------------- | --------------------------- | ------------------------------- |
-| `actionClick` | `SpeedDialActionClickEvent` | Emitted when action is clicked  |
-| `openChange`  | `boolean`                   | Emitted when open state changes |
-
-#### Public Methods
-
-| Method     | Description       |
-| ---------- | ----------------- |
-| `toggle()` | Toggle open state |
-| `close()`  | Close the menu    |
-
-### ScSpeedDialAction
-
-Individual action button component (used internally).
-
-#### Inputs
-
-| Input          | Type                   | Default | Description               |
-| -------------- | ---------------------- | ------- | ------------------------- |
-| `icon`         | `string` (required)    | -       | SVG icon string           |
-| `label`        | `string` (required)    | -       | Action label              |
-| `disabled`     | `boolean`              | `false` | Disable the action        |
-| `ariaLabel`    | `string`               | -       | Custom accessible label   |
-| `showLabel`    | `boolean`              | `true`  | Show label next to action |
-| `labelVisible` | `boolean`              | `true`  | Label visibility state    |
-| `size`         | `'sm' \| 'md' \| 'lg'` | `'md'`  | Button size               |
-
-## Type Definitions
-
-### SpeedDialAction
-
-```typescript
-interface SpeedDialAction {
-  id: string;
-  icon: string;
-  label: string;
-  disabled?: boolean;
-  ariaLabel?: string;
-}
-```
-
-### SpeedDialActionClickEvent
-
-```typescript
-interface SpeedDialActionClickEvent {
-  action: SpeedDialAction;
-  index: number;
-}
-```
-
-### SpeedDialDirection
-
-```typescript
-type SpeedDialDirection = 'up' | 'down' | 'left' | 'right';
-```
-
-## Accessibility
-
-The Speed Dial component follows accessibility best practices:
-
-- Main button has `aria-expanded` indicating open/closed state
-- Main button has `aria-haspopup="true"` indicating a menu
-- Actions menu has `role="menu"` for screen readers
-- Each action has `aria-label` for clear identification
-- Pressing Escape closes the menu
-- Labels provide visual context and appear as tooltips
-- Disabled actions are properly indicated
-
-## Keyboard Navigation
-
-| Key    | Action                     |
-| ------ | -------------------------- |
-| Enter  | Toggle menu / Click action |
-| Space  | Toggle menu / Click action |
-| Escape | Close menu                 |
-
-## Styling
-
-The component uses Tailwind CSS classes and supports theming through CSS variables:
-
-- `--primary` / `--primary-foreground`: Main FAB colors
-- `--secondary` / `--secondary-foreground`: Action button colors
-- `--popover` / `--popover-foreground`: Label colors
-- `--ring`: Focus ring color
-
-### Custom Styling
-
-```html
-<sc-speed-dial [actions]="actions" class="[&_button]:bg-blue-500" />
-```
-
-## Animation
-
-The Speed Dial features smooth animations:
-
-- Main FAB has shadow transition on hover
-- Actions animate with opacity, scale, and position
-- Staggered reveal based on action index
-- Configurable transition timing
-
-## Features
-
-- Floating action button with expandable menu
-- Four expansion directions (up, down, left, right)
-- Customizable main button and close icons
-- Three size variants for flexibility
-- Optional action labels with tooltips
-- Support for disabled actions
-- Auto-close on action click or outside click
-- Escape key to close
-- Smooth staggered animations
-- Full keyboard and screen reader support
-- Responsive and mobile-friendly
-
-## Use Cases
-
-- Quick actions toolbar
-- Social sharing buttons
-- Add/create menus
-- Navigation shortcuts
-- Contact options
-- Settings quick access

package/src/lib/components/speed-dial/index.ts

@@ -1,7 +0,0 @@
-export { ScSpeedDial } from './speed-dial';
-export { ScSpeedDialAction } from './speed-dial-action';
-export type {
-  SpeedDialAction,
-  SpeedDialActionClickEvent,
-  SpeedDialDirection,
-} from './speed-dial-types';