@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/mention-input/mention-input.ts

@@ -0,0 +1,279 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  input,
+  model,
+  output,
+  signal,
+  ViewEncapsulation,
+  viewChild,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+export interface MentionUser {
+  id: string;
+  name: string;
+  username: string;
+  avatar?: string;
+}
+
+@Component({
+  selector: 'sc-mention-input',
+  exportAs: 'scMentionInput',
+  template: `
+    <div [class]="containerClass()">
+      <textarea
+        #textareaEl
+        [class]="textareaClass()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [rows]="rows()"
+        [value]="value()"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        (blur)="onBlur()"
+      ></textarea>
+
+      @if (showSuggestions() && filteredUsers().length > 0) {
+        <div
+          [class]="suggestionsClass()"
+          [style.top.px]="suggestionsPosition().top"
+          [style.left.px]="suggestionsPosition().left"
+          role="listbox"
+        >
+          @for (user of filteredUsers(); track user.id; let i = $index) {
+            <button
+              type="button"
+              role="option"
+              [class]="suggestionItemClass(i)"
+              [attr.aria-selected]="i === selectedIndex()"
+              (click)="selectUser(user)"
+              (mouseenter)="selectedIndex.set(i)"
+            >
+              @if (user.avatar) {
+                <img
+                  [src]="user.avatar"
+                  [alt]="user.name"
+                  class="size-6 rounded-full"
+                />
+              } @else {
+                <div
+                  class="size-6 rounded-full bg-muted flex items-center justify-center text-xs font-medium"
+                >
+                  {{ user.name.charAt(0).toUpperCase() }}
+                </div>
+              }
+              <div class="flex-1 text-left">
+                <div class="text-sm font-medium">{{ user.name }}</div>
+                <div class="text-xs text-muted-foreground">
+                  &#64;{{ user.username }}
+                </div>
+              </div>
+            </button>
+          }
+        </div>
+      }
+    </div>
+  `,
+  host: {
+    'data-slot': 'mention-input',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScMentionInput {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly placeholder = input<string>('Type @ to mention someone...');
+  readonly disabled = input<boolean>(false);
+  readonly rows = input<number>(3);
+  readonly users = input<MentionUser[]>([]);
+  readonly trigger = input<string>('@');
+
+  readonly value = model<string>('');
+  readonly mentions = model<MentionUser[]>([]);
+
+  readonly mentionSelect = output<MentionUser>();
+
+  protected readonly showSuggestions = signal(false);
+  protected readonly searchQuery = signal('');
+  protected readonly selectedIndex = signal(0);
+  protected readonly suggestionsPosition = signal({ top: 0, left: 0 });
+
+  private readonly textareaEl =
+    viewChild<ElementRef<HTMLTextAreaElement>>('textareaEl');
+  private mentionStartIndex = -1;
+
+  protected readonly filteredUsers = computed(() => {
+    const query = this.searchQuery().toLowerCase();
+    const mentioned = this.mentions().map((m) => m.id);
+
+    return this.users()
+      .filter((u) => !mentioned.includes(u.id))
+      .filter(
+        (u) =>
+          u.name.toLowerCase().includes(query) ||
+          u.username.toLowerCase().includes(query),
+      )
+      .slice(0, 5);
+  });
+
+  protected readonly containerClass = computed(() =>
+    cn('relative', this.classInput()),
+  );
+
+  protected readonly textareaClass = computed(() =>
+    cn(
+      'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm',
+      'placeholder:text-muted-foreground',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'resize-none',
+    ),
+  );
+
+  protected readonly suggestionsClass = computed(() =>
+    cn(
+      'absolute z-50 w-64 rounded-md border bg-popover p-1 shadow-md',
+      'animate-in fade-in-0 zoom-in-95',
+    ),
+  );
+
+  protected suggestionItemClass(index: number): string {
+    return cn(
+      'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm',
+      'hover:bg-accent hover:text-accent-foreground',
+      'focus-visible:outline-none',
+      index === this.selectedIndex() && 'bg-accent text-accent-foreground',
+    );
+  }
+
+  onInput(event: Event): void {
+    const textarea = event.target as HTMLTextAreaElement;
+    const newValue = textarea.value;
+    this.value.set(newValue);
+
+    const cursorPos = textarea.selectionStart;
+    const textBeforeCursor = newValue.slice(0, cursorPos);
+
+    // Check for trigger character
+    const triggerIndex = textBeforeCursor.lastIndexOf(this.trigger());
+
+    if (triggerIndex !== -1) {
+      const textAfterTrigger = textBeforeCursor.slice(triggerIndex + 1);
+      // Check if there's a space before the trigger (or it's at the start)
+      const charBeforeTrigger =
+        triggerIndex > 0 ? textBeforeCursor[triggerIndex - 1] : ' ';
+
+      if (
+        (charBeforeTrigger === ' ' ||
+          charBeforeTrigger === '\n' ||
+          triggerIndex === 0) &&
+        !textAfterTrigger.includes(' ')
+      ) {
+        this.mentionStartIndex = triggerIndex;
+        this.searchQuery.set(textAfterTrigger);
+        this.selectedIndex.set(0);
+        this.showSuggestions.set(true);
+        this.updateSuggestionsPosition();
+        return;
+      }
+    }
+
+    this.closeSuggestions();
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    if (!this.showSuggestions()) return;
+
+    const filtered = this.filteredUsers();
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.selectedIndex.update((i) => (i + 1) % filtered.length);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.selectedIndex.update(
+          (i) => (i - 1 + filtered.length) % filtered.length,
+        );
+        break;
+      case 'Enter':
+      case 'Tab':
+        if (filtered.length > 0) {
+          event.preventDefault();
+          this.selectUser(filtered[this.selectedIndex()]);
+        }
+        break;
+      case 'Escape':
+        event.preventDefault();
+        this.closeSuggestions();
+        break;
+    }
+  }
+
+  onBlur(): void {
+    // Delay to allow click on suggestion
+    setTimeout(() => {
+      this.closeSuggestions();
+    }, 150);
+  }
+
+  selectUser(user: MentionUser): void {
+    const textarea = this.textareaEl()?.nativeElement;
+    if (!textarea) return;
+
+    const currentValue = this.value();
+    const mentionText = `${this.trigger()}${user.username}`;
+
+    // Replace the trigger and search query with the mention
+    const beforeMention = currentValue.slice(0, this.mentionStartIndex);
+    const afterMention = currentValue.slice(textarea.selectionStart);
+    const newValue = `${beforeMention}${mentionText} ${afterMention}`;
+
+    this.value.set(newValue);
+    this.mentions.update((m) => [...m, user]);
+    this.mentionSelect.emit(user);
+    this.closeSuggestions();
+
+    // Set cursor position after the mention
+    setTimeout(() => {
+      const newCursorPos = this.mentionStartIndex + mentionText.length + 1;
+      textarea.setSelectionRange(newCursorPos, newCursorPos);
+      textarea.focus();
+    });
+  }
+
+  private closeSuggestions(): void {
+    this.showSuggestions.set(false);
+    this.searchQuery.set('');
+    this.mentionStartIndex = -1;
+  }
+
+  private updateSuggestionsPosition(): void {
+    const textarea = this.textareaEl()?.nativeElement;
+    if (!textarea) return;
+
+    // Simple positioning below the textarea
+    // For more accurate positioning, you'd need to calculate based on cursor position
+    const rect = textarea.getBoundingClientRect();
+    this.suggestionsPosition.set({
+      top: textarea.offsetHeight + 4,
+      left: 0,
+    });
+  }
+
+  focus(): void {
+    this.textareaEl()?.nativeElement.focus();
+  }
+
+  getMentions(): MentionUser[] {
+    return this.mentions();
+  }
+
+  clearMentions(): void {
+    this.mentions.set([]);
+  }
+}

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

@@ -0,0 +1,176 @@
+# ScMenu Components
+
+A set of Angular components that wrap `@angular/aria/menu` directives with shadcn/ui styling.
+
+## Architecture
+
+The components follow a dependency injection (DI) pattern where parent wrapper components automatically connect child components without requiring template variables.
+
+```
+ScMenuProvider (root wrapper)
+├── ScMenuTrigger (button that opens menu)
+└── ScMenuPortal (overlay positioning)
+    └── ScMenu (menu container with Menu directive)
+        ├── ScMenuItem (menu items)
+        ├── ScMenuSeparator (visual divider)
+        └── ScMenuSubProvider (submenu wrapper)
+            ├── ScMenuSubTrigger (item that opens submenu)
+            └── ScMenuSubPortal (submenu overlay positioning)
+                └── ScMenuSub (submenu container)
+                    └── ScMenuItem (submenu items)
+```
+
+## Components
+
+| Component           | Selector                    | Description                                     |
+| ------------------- | --------------------------- | ----------------------------------------------- |
+| `ScMenuProvider`    | `div[sc-menu-provider]`     | Root wrapper that auto-connects trigger to menu |
+| `ScMenuTrigger`     | `button[sc-menu-trigger]`   | Button that opens the menu                      |
+| `ScMenuPortal`      | `div[sc-menu-portal]`       | Handles overlay positioning                     |
+| `ScMenu`            | `div[sc-menu]`              | Menu container with animations                  |
+| `ScMenuItem`        | `div[sc-menu-item]`         | Selectable menu item                            |
+| `ScMenuSeparator`   | `div[sc-menu-separator]`    | Visual separator                                |
+| `ScMenuSubProvider` | `div[sc-menu-sub-provider]` | Submenu wrapper                                 |
+| `ScMenuSubTrigger`  | `div[sc-menu-sub-trigger]`  | Item that opens submenu                         |
+| `ScMenuSubPortal`   | `div[sc-menu-sub-portal]`   | Submenu overlay positioning                     |
+| `ScMenuSub`         | `div[sc-menu-sub]`          | Submenu container with animations               |
+| `ScMenuSubIcon`     | `svg[sc-menu-sub-icon]`     | Chevron icon for submenu triggers               |
+
+## Usage
+
+### Basic Menu
+
+```html
+<div sc-menu-provider>
+  <button sc-menu-trigger>Open Menu</button>
+  <div sc-menu-portal>
+    <div sc-menu>
+      <div sc-menu-item value="edit">Edit</div>
+      <div sc-menu-item value="duplicate">Duplicate</div>
+      <div sc-menu-separator></div>
+      <div sc-menu-item value="delete">Delete</div>
+    </div>
+  </div>
+</div>
+```
+
+### Menu with Submenu
+
+```html
+<div sc-menu-provider>
+  <button sc-menu-trigger>Open Menu</button>
+  <div sc-menu-portal>
+    <div sc-menu>
+      <div sc-menu-item value="new">New</div>
+      <div sc-menu-separator></div>
+      <div sc-menu-sub-provider>
+        <div sc-menu-sub-trigger value="share">
+          Share
+          <svg sc-menu-sub-icon><!-- chevron icon --></svg>
+        </div>
+        <div sc-menu-sub-portal>
+          <div sc-menu-sub>
+            <div sc-menu-item value="email">Email</div>
+            <div sc-menu-item value="message">Message</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### Menu Item with Icon
+
+```html
+<div sc-menu-item value="settings">
+  <svg class="text-muted-foreground size-4" aria-hidden="true">
+    <!-- icon SVG -->
+  </svg>
+  <span class="flex-1">Settings</span>
+</div>
+```
+
+### Destructive Menu Item
+
+```html
+<div sc-menu-item value="delete" class="text-destructive hover:bg-destructive/10 data-[active=true]:bg-destructive/10">Delete</div>
+```
+
+## Keyboard Navigation
+
+| Key               | Action                              |
+| ----------------- | ----------------------------------- |
+| `Enter` / `Space` | Select focused item or open submenu |
+| `ArrowDown`       | Move focus to next item             |
+| `ArrowUp`         | Move focus to previous item         |
+| `ArrowRight`      | Open submenu (on submenu trigger)   |
+| `ArrowLeft`       | Close submenu and return to parent  |
+| `Escape`          | Close menu                          |
+| `Home`            | Move focus to first item            |
+| `End`             | Move focus to last item             |
+
+## How It Works
+
+### Auto-Connection via DI
+
+The `ScMenuProvider` component uses `contentChild` to find its `ScMenuTrigger` and `ScMenu` descendants. An `effect` automatically connects the trigger's `menu` input to the content's `Menu` directive using `signalSetFn`:
+
+```typescript
+effect(() => {
+  const trigger = this.triggerChild()?.trigger;
+  const menu = this.content()?.menu;
+  if (trigger && menu) {
+    signalSetFn(trigger.menu[SIGNAL], menu);
+  }
+});
+```
+
+This eliminates the need for template variables like `#menu="ngMenu"`.
+
+### Overlay Positioning
+
+`ScMenuPortal` injects `ScMenuProvider` to access the trigger's `CdkOverlayOrigin` and `expanded` state:
+
+```typescript
+protected readonly origin = computed(() => this.scMenu.origin());
+protected readonly expanded = computed(() => this.scMenu.trigger()?.expanded() ?? false);
+```
+
+### Animations
+
+`ScMenu` applies Tailwind CSS transitions based on the menu's visibility:
+
+```typescript
+protected readonly class = computed(() =>
+  cn(
+    'bg-popover text-popover-foreground ...',
+    this.menu.visible()
+      ? 'opacity-100 visible transition-[opacity,visibility] duration-150 ease-out'
+      : 'opacity-0 invisible transition-[opacity,visibility] duration-150 ease-in [transition-delay:0s,150ms]',
+  ),
+);
+```
+
+The `[transition-delay:0s,150ms]` ensures visibility changes after opacity during the leave animation.
+
+## Accessibility
+
+- Full ARIA menu pattern implementation via `@angular/aria/menu`
+- Proper `role="menu"` and `role="menuitem"` attributes
+- `aria-expanded` state management for triggers
+- `aria-haspopup` for submenu triggers
+- Focus management and keyboard navigation
+- Screen reader announcements
+
+## Customization
+
+All components accept a `class` input for custom styling:
+
+```html
+<div sc-menu class="w-64">
+  <!-- wider menu -->
+</div>
+
+<div sc-menu-item value="special" class="font-bold">Special Item</div>
+```

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

@@ -0,0 +1,11 @@
+export { ScMenuProvider } from './menu-provider';
+export { ScMenuTrigger } from './menu-trigger';
+export { ScMenuPortal } from './menu-portal';
+export { ScMenu } from './menu';
+export { ScMenuItem } from './menu-item';
+export { ScMenuSeparator } from './menu-separator';
+export { ScMenuSubProvider } from './menu-sub-provider';
+export { ScMenuSubTrigger } from './menu-sub-trigger';
+export { ScMenuSubPortal } from './menu-sub-portal';
+export { ScMenuSub } from './menu-sub';
+export { ScMenuSubIcon } from './menu-sub-icon';

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

@@ -0,0 +1,32 @@
+import { MenuItem } from '@angular/aria/menu';
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'div[sc-menu-item]',
+  hostDirectives: [
+    {
+      directive: MenuItem,
+      inputs: ['value', 'submenu'],
+    },
+  ],
+  host: {
+    'data-slot': 'menu-item',
+    '[class]': 'class()',
+  },
+})
+export class ScMenuItem {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly inset = input<boolean>(false);
+
+  protected readonly class = computed(() =>
+    cn(
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors',
+      'hover:bg-accent hover:text-accent-foreground',
+      'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
+      'aria-disabled:pointer-events-none aria-disabled:opacity-50',
+      this.inset() && 'pl-8',
+      this.classInput(),
+    ),
+  );
+}

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

@@ -0,0 +1,53 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ScMenuProvider } from './menu-provider';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-menu-portal]',
+  imports: [OverlayModule],
+  template: `
+    @if (origin(); as origin) {
+      <ng-template
+        [cdkConnectedOverlayOpen]="expanded()"
+        [cdkConnectedOverlay]="{ origin, usePopover: 'inline' }"
+        [cdkConnectedOverlayPositions]="[
+          {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: 4,
+          },
+        ]"
+        cdkAttachPopoverAsChild
+      >
+        <ng-content />
+      </ng-template>
+    }
+  `,
+  host: {
+    'data-slot': 'menu-portal',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScMenuPortal {
+  private readonly scMenu = inject(ScMenuProvider);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly origin = computed(() => this.scMenu.origin());
+  protected readonly expanded = computed(
+    () => this.scMenu.trigger()?.expanded() ?? false,
+  );
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+}

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

@@ -0,0 +1,50 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  effect,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
+import { cn } from '@semantic-components/ui';
+import { ScMenuTrigger } from './menu-trigger';
+import { ScMenu } from './menu';
+
+@Component({
+  selector: 'div[sc-menu-provider]',
+  imports: [],
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'menu-provider',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScMenuProvider {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  private readonly triggerChild = contentChild(ScMenuTrigger);
+  private readonly content = contentChild(ScMenu, { descendants: true });
+
+  readonly origin = computed(() => this.triggerChild()?.overlayOrigin);
+  readonly trigger = computed(() => this.triggerChild()?.trigger);
+  readonly menu = computed(() => this.content()?.menu);
+
+  protected readonly class = computed(() => cn('relative', this.classInput()));
+
+  constructor() {
+    // Auto-connect trigger to menu
+    effect(() => {
+      const trigger = this.triggerChild()?.trigger;
+      const menu = this.content()?.menu;
+      if (trigger && menu) {
+        signalSetFn(trigger.menu[SIGNAL], menu);
+      }
+    });
+  }
+}

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

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

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

@@ -0,0 +1,18 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'svg[sc-menu-sub-icon]',
+  host: {
+    'data-slot': 'menu-sub-icon',
+    '[class]': 'class()',
+    'aria-hidden': 'true',
+  },
+})
+export class ScMenuSubIcon {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('ml-auto size-4 text-muted-foreground', this.classInput()),
+  );
+}

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

@@ -0,0 +1,53 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ScMenuSubProvider } from './menu-sub-provider';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-menu-sub-portal]',
+  imports: [OverlayModule],
+  template: `
+    @if (origin(); as origin) {
+      <ng-template
+        [cdkConnectedOverlayOpen]="expanded()"
+        [cdkConnectedOverlay]="{ origin, usePopover: 'inline' }"
+        [cdkConnectedOverlayPositions]="[
+          {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetX: 4,
+          },
+        ]"
+        cdkAttachPopoverAsChild
+      >
+        <ng-content />
+      </ng-template>
+    }
+  `,
+  host: {
+    'data-slot': 'menu-sub-portal',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScMenuSubPortal {
+  private readonly scMenuSub = inject(ScMenuSubProvider);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly origin = computed(() => this.scMenuSub.origin());
+  protected readonly expanded = computed(
+    () => this.scMenuSub.menuItem()?.expanded() ?? false,
+  );
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+}