@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,279 +0,0 @@
-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

@@ -1,176 +0,0 @@
-# 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

@@ -1,11 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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()));
-}