@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/navbar/navbar.ts

@@ -0,0 +1,40 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
+
+@Component({
+  selector: 'nav[sc-navbar]',
+  hostDirectives: [CdkOverlayOrigin],
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'navbar',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScNavbar {
+  readonly elementRef = inject(ElementRef);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  readonly overlayOrigin = inject(CdkOverlayOrigin);
+
+  protected readonly class = computed(() =>
+    cn(
+      'flex items-center justify-between',
+      'w-full px-4 py-3 md:px-6',
+      'bg-background border-b border-border',
+      this.classInput(),
+    ),
+  );
+}

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

@@ -0,0 +1,135 @@
+# Navigation Menu Components
+
+A collection of links for navigating websites with hover-activated dropdowns.
+
+## Architecture
+
+```
+ScNavigationMenu (Root - nav element)
+    ├── activeItem: signal<string | null>
+    │
+    └── ScNavigationMenuList (ul element)
+          │
+          ├── ScNavigationMenuItem (li - with dropdown)
+          │     ├── open: signal<boolean>
+          │     ├── Handles hover enter/leave
+          │     │
+          │     ├── ScNavigationMenuTrigger (button)
+          │     │     └── CdkOverlayOrigin
+          │     │
+          │     └── ScNavigationMenuContent
+          │           └── cdkConnectedOverlay
+          │
+          └── ScNavigationMenuItem (li - simple link)
+                └── ScNavigationMenuLink (a element)
+```
+
+## Components
+
+| Component                 | Selector                             | Description                                 |
+| ------------------------- | ------------------------------------ | ------------------------------------------- |
+| `ScNavigationMenu`        | `nav[sc-navigation-menu]`            | Root navigation wrapper                     |
+| `ScNavigationMenuList`    | `ul[sc-navigation-menu-list]`        | List container for items                    |
+| `ScNavigationMenuItem`    | `li[sc-navigation-menu-item]`        | Individual menu item with optional dropdown |
+| `ScNavigationMenuTrigger` | `button[sc-navigation-menu-trigger]` | Button that shows dropdown on hover         |
+| `ScNavigationMenuContent` | `div[sc-navigation-menu-content]`    | Dropdown content container                  |
+| `ScNavigationMenuLink`    | `a[sc-navigation-menu-link]`         | Simple navigation link (no dropdown)        |
+
+## Usage
+
+### Basic Navigation
+
+```html
+<nav sc-navigation-menu>
+  <ul sc-navigation-menu-list>
+    <!-- Item with dropdown -->
+    <li sc-navigation-menu-item>
+      <button sc-navigation-menu-trigger>Products</button>
+      <div sc-navigation-menu-content>
+        <ul class="grid gap-3 p-4 w-[400px]">
+          <li>
+            <a href="/product-a">Product A</a>
+          </li>
+          <li>
+            <a href="/product-b">Product B</a>
+          </li>
+        </ul>
+      </div>
+    </li>
+
+    <!-- Simple link -->
+    <li sc-navigation-menu-item>
+      <a sc-navigation-menu-link href="/about">About</a>
+    </li>
+  </ul>
+</nav>
+```
+
+### Mega Menu Style
+
+```html
+<li sc-navigation-menu-item>
+  <button sc-navigation-menu-trigger>Components</button>
+  <div sc-navigation-menu-content>
+    <ul class="grid w-[600px] gap-3 p-4 md:grid-cols-2">
+      <li>
+        <a class="block p-3 rounded-md hover:bg-accent" href="#">
+          <div class="font-medium">Alert Dialog</div>
+          <p class="text-sm text-muted-foreground">Modal dialog for important content.</p>
+        </a>
+      </li>
+      <!-- More items... -->
+    </ul>
+  </div>
+</li>
+```
+
+### With Featured Section
+
+```html
+<div sc-navigation-menu-content>
+  <ul class="grid gap-3 p-4 lg:grid-cols-[.75fr_1fr]">
+    <!-- Featured card spanning rows -->
+    <li class="row-span-3">
+      <a class="flex h-full flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6" href="#">
+        <div class="text-lg font-medium">Featured</div>
+        <p class="text-sm text-muted-foreground">Highlighted content here.</p>
+      </a>
+    </li>
+    <!-- Regular links -->
+    <li><a href="#">Link 1</a></li>
+    <li><a href="#">Link 2</a></li>
+    <li><a href="#">Link 3</a></li>
+  </ul>
+</div>
+```
+
+## Inputs
+
+### ScNavigationMenuLink
+
+| Input    | Type      | Default | Description                           |
+| -------- | --------- | ------- | ------------------------------------- |
+| `active` | `boolean` | `false` | Whether this link is currently active |
+
+## Features
+
+- **Hover triggered**: Dropdowns open on mouse enter
+- **Smooth close**: Small delay before closing allows mouse movement
+- **Flexible content**: Support any content in dropdowns
+- **Auto chevron**: Trigger buttons include animated chevron icon
+- **Simple links**: Support for non-dropdown navigation items
+
+## Styling
+
+The components use Tailwind CSS classes with shadcn/ui design tokens:
+
+- Trigger: `bg-background hover:bg-accent`
+- Content: Uses CDK overlay for positioning
+- Transitions: Fade and scale animations
+
+## Accessibility
+
+- Uses semantic `nav`, `ul`, `li` elements
+- `aria-expanded` on triggers indicates dropdown state
+- Keyboard navigation support through native focus handling

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

@@ -0,0 +1,8 @@
+export { ScNavigationMenu } from './navigation-menu';
+export { ScNavigationMenuContent } from './navigation-menu-content';
+export { ScNavigationMenuIndicator } from './navigation-menu-indicator';
+export { ScNavigationMenuItem } from './navigation-menu-item';
+export { ScNavigationMenuLink } from './navigation-menu-link';
+export { ScNavigationMenuList } from './navigation-menu-list';
+export { ScNavigationMenuTrigger } from './navigation-menu-trigger';
+export { ScNavigationMenuViewport } from './navigation-menu-viewport';

package/src/lib/components/navigation-menu/navigation-menu-content.ts

@@ -0,0 +1,80 @@
+import { ConnectedPosition, OverlayModule } from '@angular/cdk/overlay';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScNavigationMenuItem } from './navigation-menu-item';
+
+const position: ConnectedPosition = {
+  originX: 'start',
+  originY: 'bottom',
+  overlayX: 'start',
+  overlayY: 'top',
+  offsetY: 4,
+};
+
+@Component({
+  selector: 'div[sc-navigation-menu-content]',
+  imports: [OverlayModule],
+  template: `
+    @if (origin(); as origin) {
+      <ng-template
+        cdkConnectedOverlay
+        [cdkConnectedOverlayOrigin]="origin"
+        [cdkConnectedOverlayOpen]="menuItem.open()"
+        [cdkConnectedOverlayPositions]="[position]"
+      >
+        <div
+          [class]="contentClass()"
+          (mouseenter)="onMouseEnter()"
+          (mouseleave)="onMouseLeave()"
+        >
+          <ng-content />
+        </div>
+      </ng-template>
+    }
+  `,
+  host: {
+    'data-slot': 'navigation-menu-content',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScNavigationMenuContent {
+  readonly menuItem = inject(ScNavigationMenuItem);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly position = position;
+
+  protected readonly origin = computed(() => this.menuItem.origin());
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+
+  protected readonly contentClass = computed(() =>
+    cn(
+      'left-0 top-0 w-full md:absolute md:w-auto',
+      'bg-popover text-popover-foreground',
+      'rounded-md border shadow-lg',
+      'overflow-hidden',
+      'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out',
+      'data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out',
+      'data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52',
+      'data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52',
+      '**:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+    ),
+  );
+
+  onMouseEnter(): void {
+    this.menuItem.cancelHide();
+  }
+
+  onMouseLeave(): void {
+    this.menuItem.onMouseLeave();
+  }
+}

package/src/lib/components/navigation-menu/navigation-menu-indicator.ts

@@ -0,0 +1,35 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-navigation-menu-indicator]',
+  template: `
+    <div
+      class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md"
+    ></div>
+  `,
+  host: {
+    'data-slot': 'navigation-menu-indicator',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScNavigationMenuIndicator {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'data-[state=visible]:animate-in data-[state=hidden]:animate-out',
+      'data-[state=hidden]:fade-out data-[state=visible]:fade-in',
+      'top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+      this.classInput(),
+    ),
+  );
+}

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

@@ -0,0 +1,88 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import {
+  computed,
+  contentChild,
+  DestroyRef,
+  Directive,
+  inject,
+  input,
+  OnInit,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationStart, Router } from '@angular/router';
+import { filter } from 'rxjs';
+import { cn } from '@semantic-components/ui';
+import { ScNavigationMenu } from './navigation-menu';
+import { ScNavigationMenuTrigger } from './navigation-menu-trigger';
+
+@Directive({
+  selector: 'li[sc-navigation-menu-item]',
+  host: {
+    'data-slot': 'navigation-menu-item',
+    '[class]': 'class()',
+    '(mouseenter)': 'onMouseEnter()',
+    '(mouseleave)': 'onMouseLeave()',
+  },
+})
+export class ScNavigationMenuItem implements OnInit {
+  readonly navigationMenu = inject(ScNavigationMenu);
+  private readonly router = inject(Router);
+  private readonly destroyRef = inject(DestroyRef);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  readonly itemId = inject(_IdGenerator).getId('sc-navigation-menu-item-');
+
+  /** Whether this item's content is open */
+  readonly open = signal<boolean>(false);
+
+  private readonly triggerChild = contentChild(ScNavigationMenuTrigger);
+
+  readonly origin = computed(() => this.triggerChild()?.overlayOrigin);
+
+  protected readonly class = computed(() => cn('relative', this.classInput()));
+
+  private hideTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  ngOnInit(): void {
+    // Close the menu when navigation starts
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationStart),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe(() => {
+        this.open.set(false);
+        if (this.navigationMenu.activeItem() === this.itemId) {
+          this.navigationMenu.setActiveItem(null);
+        }
+      });
+  }
+
+  onMouseEnter(): void {
+    this.cancelHide();
+    this.open.set(true);
+    this.navigationMenu.setActiveItem(this.itemId);
+  }
+
+  onMouseLeave(): void {
+    this.scheduleHide();
+  }
+
+  private scheduleHide(): void {
+    this.cancelHide();
+    this.hideTimeout = setTimeout(() => {
+      this.open.set(false);
+      if (this.navigationMenu.activeItem() === this.itemId) {
+        this.navigationMenu.setActiveItem(null);
+      }
+    }, 100);
+  }
+
+  cancelHide(): void {
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout);
+      this.hideTimeout = null;
+    }
+  }
+}

package/src/lib/components/navigation-menu/navigation-menu-link.ts

@@ -0,0 +1,29 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'a[sc-navigation-menu-link]',
+  host: {
+    'data-slot': 'navigation-menu-link',
+    '[attr.data-active]': 'active()',
+    '[class]': 'class()',
+  },
+})
+export class ScNavigationMenuLink {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly active = input<boolean>(false);
+
+  protected readonly class = computed(() =>
+    cn(
+      'data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground',
+      'hover:bg-accent hover:text-accent-foreground',
+      'focus:bg-accent focus:text-accent-foreground',
+      'focus-visible:ring-ring/50',
+      '[&_svg:not([class*="text-"])]:text-muted-foreground',
+      'flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none',
+      'focus-visible:ring-[3px] focus-visible:outline-1',
+      '[&_svg:not([class*="size-"])]:size-4',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/navigation-menu/navigation-menu-list.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'ul[sc-navigation-menu-list]',
+  host: {
+    'data-slot': 'navigation-menu-list',
+    '[class]': 'class()',
+  },
+})
+export class ScNavigationMenuList {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'group flex flex-1 list-none items-center justify-center gap-1',
+      this.classInput(),
+    ),
+  );
+}

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

@@ -0,0 +1,52 @@
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SiChevronDownIcon } from '@semantic-icons/lucide-icons';
+import { cn } from '@semantic-components/ui';
+import { ScNavigationMenuItem } from './navigation-menu-item';
+
+@Component({
+  selector: 'button[sc-navigation-menu-trigger]',
+  imports: [SiChevronDownIcon],
+  hostDirectives: [CdkOverlayOrigin],
+  template: `
+    <ng-content />
+    <svg
+      si-chevron-down-icon
+      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+    ></svg>
+  `,
+  host: {
+    'data-slot': 'navigation-menu-trigger',
+    type: 'button',
+    '[class]': 'class()',
+    '[attr.aria-expanded]': 'menuItem.open()',
+    '[attr.data-state]': 'menuItem.open() ? "open" : "closed"',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScNavigationMenuTrigger {
+  readonly menuItem = inject(ScNavigationMenuItem);
+  readonly overlayOrigin = inject(CdkOverlayOrigin);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium',
+      'hover:bg-accent hover:text-accent-foreground',
+      'focus:bg-accent focus:text-accent-foreground',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50',
+      'focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
+      '[&_svg]:pointer-events-none',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/navigation-menu/navigation-menu-viewport.ts

@@ -0,0 +1,35 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-navigation-menu-viewport]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'navigation-menu-viewport',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScNavigationMenuViewport {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'origin-top-center bg-popover text-popover-foreground',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90',
+      'relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow',
+      'md:w-[var(--radix-navigation-menu-viewport-width)]',
+      this.classInput(),
+    ),
+  );
+}

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

@@ -0,0 +1,39 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'nav[sc-navigation-menu]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'navigation-menu',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScNavigationMenu {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  /** Currently active item ID */
+  readonly activeItem = signal<string | null>(null);
+
+  protected readonly class = computed(() =>
+    cn(
+      'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+      this.classInput(),
+    ),
+  );
+
+  setActiveItem(id: string | null): void {
+    this.activeItem.set(id);
+  }
+}