@semantic-components/ui-lab 0.63.0 → 0.65.0

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

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

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

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

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

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

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

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

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

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

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

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