@kouji-ui/core 0.0.3 → 0.1.1

package/src/menu/menu.ts

@@ -1,176 +0,0 @@
-import { Directive, ElementRef, inject, signal } from '@angular/core';
-import { KJ_MENU, KjMenuContext } from './menu.context';
-
-/**
- * Root menu container. Manages open/close state and provides context to child directives.
- * Pairs with `[kjMenuTrigger]`, `[kjMenuContent]`, and `[kjMenuItem]`.
- *
- * Click outside or Escape closes the menu. Clicking the trigger toggles it.
- * Arrow-key navigation, Home/End, and typeahead are handled by `[kjMenuContent]`.
- *
- * @example
- * ```html
- * <div kjMenu>
- *   <button kjMenuTrigger>Actions</button>
- *   <div kjMenuContent>
- *     <button kjMenuItem>Edit</button>
- *     <button kjMenuItem>Delete</button>
- *   </div>
- * </div>
- * ```
- * @doc
- *  @doc-example Basic
- *    @doc-theme default
- *      @doc-file menu.example.ts
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjMenu]',
-  standalone: true,
-  providers: [{ provide: KJ_MENU, useExisting: KjMenu }],
-  exportAs: 'kjMenu',
-})
-export class KjMenu implements KjMenuContext {
-  private readonly _open = signal(false);
-  readonly open = this._open.asReadonly();
-
-  toggle(): void { this._open.update(v => !v); }
-  close(): void { this._open.set(false); }
-}
-
-/**
- * Trigger element that toggles the parent menu.
- * Automatically sets `aria-haspopup` and `aria-expanded` on the host element.
- *
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjMenuTrigger]',
-  standalone: true,
-  host: {
-    '[attr.aria-haspopup]': '"menu"',
-    '[attr.aria-expanded]': 'ctx.open().toString()',
-    // stopPropagation prevents the document:click on kjMenuContent from immediately closing
-    '(click)': '$event.stopPropagation(); ctx.toggle()',
-  },
-})
-export class KjMenuTrigger {
-  readonly ctx = inject(KJ_MENU);
-}
-
-/**
- * Menu content panel. Hidden when closed via the `hidden` attribute.
- * Provides keyboard navigation: Arrow keys, Home/End, Escape, and typeahead.
- * Click-outside dismissal is handled via a document-level click listener.
- *
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjMenuContent]',
-  standalone: true,
-  host: {
-    'role': 'menu',
-    '[attr.hidden]': '!ctx.open() ? "" : null',
-    // Prevent clicks inside from propagating to document click handler
-    '(click)': '$event.stopPropagation()',
-    // Keyboard navigation within the menu
-    '(keydown)': 'onKeydown($event)',
-    // Close on Escape key
-    '(document:keydown.escape)': 'ctx.open() && ctx.close()',
-    // Close on any click outside (trigger stopPropagation prevents self-close)
-    '(document:click)': 'ctx.open() && ctx.close()',
-  },
-})
-export class KjMenuContent {
-  private readonly el = inject(ElementRef<HTMLElement>);
-  readonly ctx = inject(KJ_MENU);
-
-  onKeydown(e: KeyboardEvent): void {
-    const items = this.getFocusableItems();
-    if (!items.length) return;
-    const current = items.indexOf(document.activeElement as HTMLElement);
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        items[(current + 1) % items.length].focus();
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        items[(current - 1 + items.length) % items.length].focus();
-        break;
-      case 'Home':
-        e.preventDefault();
-        items[0].focus();
-        break;
-      case 'End':
-        e.preventDefault();
-        items[items.length - 1].focus();
-        break;
-      default: {
-        // Type-ahead: jump to next item starting with pressed character
-        const char = e.key.length === 1 ? e.key.toLowerCase() : null;
-        if (char) {
-          const match =
-            items.find((item, i) =>
-              i > current && item.textContent?.trim().toLowerCase().startsWith(char)
-            ) ??
-            items.find(item =>
-              item.textContent?.trim().toLowerCase().startsWith(char)
-            );
-          match?.focus();
-        }
-      }
-    }
-  }
-
-  private getFocusableItems(): HTMLElement[] {
-    const nodes = this.el.nativeElement.querySelectorAll('[kjMenuItem]');
-    return (Array.from(nodes) as HTMLElement[]).filter(el => !el.hasAttribute('disabled'));
-  }
-}
-
-/**
- * Individual menu item. Closes the menu on click or keyboard activation (Enter/Space).
- *
- * @example
- * ```html
- * <button kjMenuItem>Delete</button>
- * ```
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjMenuItem]',
-  standalone: true,
-  host: {
-    'role': 'menuitem',
-    '[attr.tabindex]': '"0"',
-    '(click)': 'ctx.close()',
-    '(keydown.enter)': '$event.preventDefault(); ctx.close()',
-    '(keydown.space)': '$event.preventDefault(); ctx.close()',
-  },
-})
-export class KjMenuItem {
-  readonly ctx = inject(KJ_MENU);
-}
-
-/**
- * Closes the parent menu when clicked. Convenience directive for non-item close buttons.
- * Place anywhere inside `[kjMenu]`.
- *
- * @example
- * ```html
- * <button kjMenuClose>Cancel</button>
- * ```
- * @category Core/Navigation
- */
-@Directive({
-  selector: '[kjMenuClose]',
-  standalone: true,
-  host: {
-    '(click)': 'ctx.close()',
-  },
-})
-export class KjMenuClose {
-  readonly ctx = inject(KJ_MENU);
-}

package/src/popover/popover.context.ts

@@ -1,18 +0,0 @@
-import { InjectionToken, Signal, InputSignal } from '@angular/core';
-
-/** Preferred side for the popover relative to its trigger. */
-export type KjPopoverSide = 'top' | 'bottom' | 'left' | 'right';
-/** Alignment of the popover along the cross-axis. */
-export type KjPopoverAlign = 'start' | 'center' | 'end';
-
-/** Context shared between popover directives. */
-export interface KjPopoverContext {
-  readonly open: Signal<boolean>;
-  readonly popoverId: string;
-  kjPopoverSide: Signal<KjPopoverSide> | InputSignal<KjPopoverSide>;
-  kjPopoverAlign: Signal<KjPopoverAlign> | InputSignal<KjPopoverAlign>;
-  toggle: () => void;
-  hide: () => void;
-}
-
-export const KJ_POPOVER = new InjectionToken<KjPopoverContext>('KjPopover');

package/src/popover/popover.example.ts

@@ -1,50 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  KjPopover, KjPopoverTrigger,
-  KjPopoverContent, KjPopoverClose,
-} from './popover';
-import { KjButton } from '../button/button';
-
-@Component({
-  selector: 'kj-example-popover-basic',
-  standalone: true,
-  imports: [
-    KjPopover, KjPopoverTrigger,
-    KjPopoverContent, KjPopoverClose,
-    KjButton,
-  ],
-  styleUrls: ['../styles/docs-themes.css'],
-  styles: [`
-    :host { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 2rem 10rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 220px; }
-    .anchor { position: relative; display: inline-block; }
-    button[kjButton] { padding: 0.5rem 1.25rem; border: 1px solid var(--kj-border); background: transparent; color: var(--kj-text); cursor: pointer; font-family: inherit; font-size: 0.875rem; }
-    button[kjButton]:hover { border-color: var(--kj-accent); color: var(--kj-accent); }
-    [kjPopoverContent] {
-      position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
-      background: var(--kj-surface); border: 1px solid var(--kj-border); padding: 1rem; min-width: 14rem;
-      color: var(--kj-text);
-    }
-    [kjPopoverContent][hidden] { display: none; }
-    [kjPopoverContent][data-align="end"] { left: auto; right: 0; }
-    .popover-title { font-size: 0.875rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--kj-accent); }
-    .popover-body { font-size: 0.8125rem; color: var(--kj-text-muted); margin: 0 0 1rem; line-height: 1.5; }
-    .popover-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
-    .popover-footer button[kjButton] { padding: 0.35rem 0.875rem; font-size: 0.8125rem; }
-    [data-variant="default"] { border-color: var(--kj-accent); color: var(--kj-accent-on); background: var(--kj-accent); }
-    [data-variant="ghost"] { border-color: transparent; background: transparent; color: var(--kj-text-muted); }
-  `],
-  template: `
-    <div class="anchor" kjPopover>
-      <button kjButton kjPopoverTrigger>Open Popover</button>
-      <div kjPopoverContent>
-        <p class="popover-title">Notification Settings</p>
-        <p class="popover-body">Control how and when you receive notifications from this app.</p>
-        <div class="popover-footer">
-          <button kjButton kjPopoverClose [kjVariant]="'ghost'">Cancel</button>
-          <button kjButton kjPopoverClose [kjVariant]="'default'">Save</button>
-        </div>
-      </div>
-    </div>
-  `,
-})
-export class PopoverBasicExample {}

package/src/popover/popover.finance.example.ts

@@ -1,52 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  KjPopover, KjPopoverTrigger,
-  KjPopoverContent, KjPopoverClose,
-} from './popover';
-
-@Component({
-  selector: 'kj-example-popover-finance',
-  standalone: true,
-  imports: [
-    KjPopover, KjPopoverTrigger,
-    KjPopoverContent, KjPopoverClose,
-  ],
-  styleUrls: ['../styles/docs-themes.css'],
-  host: { class: 'kj-theme-finance' },
-  styles: [`
-    :host { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 2rem 10rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 220px; }
-    .anchor { position: relative; display: inline-block; }
-    button {
-      padding: 0.4rem 1rem; background: var(--kj-accent); color: var(--kj-accent-on); border: 1px solid var(--kj-accent);
-      border-radius: var(--kj-radius-md); cursor: pointer; font-family: inherit; font-size: 0.875rem; font-weight: 500;
-    }
-    button:hover { background: #2563eb; }
-    [kjPopoverContent] {
-      position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
-      background: var(--kj-surface); border: 1px solid var(--kj-border); border-radius: var(--kj-radius-lg);
-      box-shadow: var(--kj-shadow-md); padding: 1rem; min-width: 14rem;
-    }
-    [kjPopoverContent][hidden] { display: none; }
-    .popover-title { font-size: 0.875rem; font-weight: 600; color: var(--kj-text); margin: 0 0 0.375rem; }
-    .popover-body { font-size: 0.8125rem; color: var(--kj-text-muted); margin: 0 0 1rem; line-height: 1.5; }
-    .popover-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
-    .btn-cancel { padding: 0.35rem 0.875rem; background: var(--kj-surface); color: #374151; border: 1px solid var(--kj-border); border-radius: var(--kj-radius-sm); cursor: pointer; font-size: 0.8125rem; font-weight: 500; }
-    .btn-cancel:hover { background: #f3f4f6; }
-    .btn-primary { padding: 0.35rem 0.875rem; background: var(--kj-accent); color: var(--kj-accent-on); border: 1px solid var(--kj-accent); border-radius: var(--kj-radius-sm); cursor: pointer; font-size: 0.8125rem; font-weight: 500; }
-    .btn-primary:hover { background: #2563eb; }
-  `],
-  template: `
-    <div class="anchor" kjPopover>
-      <button kjPopoverTrigger>Preferences</button>
-      <div kjPopoverContent>
-        <p class="popover-title">Notification Preferences</p>
-        <p class="popover-body">Choose how you receive alerts and account notifications.</p>
-        <div class="popover-footer">
-          <button class="btn-cancel" kjPopoverClose>Cancel</button>
-          <button class="btn-primary" kjPopoverClose>Apply</button>
-        </div>
-      </div>
-    </div>
-  `,
-})
-export class PopoverFinanceExample {}

package/src/popover/popover.retro.example.ts

@@ -1,53 +0,0 @@
-import { Component } from '@angular/core';
-import {
-  KjPopover, KjPopoverTrigger,
-  KjPopoverContent, KjPopoverClose,
-} from './popover';
-
-@Component({
-  selector: 'kj-example-popover-retro',
-  standalone: true,
-  imports: [
-    KjPopover, KjPopoverTrigger,
-    KjPopoverContent, KjPopoverClose,
-  ],
-  styleUrls: ['../styles/docs-themes.css'],
-  host: { class: 'kj-theme-retro' },
-  styles: [`
-    :host { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 2rem 10rem; background: var(--kj-bg); font-family: var(--kj-font); min-height: 220px; color: var(--kj-text); }
-    .anchor { position: relative; display: inline-block; }
-    button {
-      padding: 0.4rem 1rem; font-family: var(--kj-font); font-size: 0.8rem; font-weight: 700;
-      letter-spacing: 0.06em; text-transform: uppercase; background: var(--kj-surface); color: var(--kj-text);
-      border: var(--kj-btn-border); border-radius: 0; cursor: pointer;
-      box-shadow: var(--kj-shadow-sm); transition: var(--kj-transition);
-    }
-    button:hover { transform: translate(-1px, -1px); box-shadow: var(--kj-shadow-md); }
-    [kjPopoverContent] {
-      position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
-      background: var(--kj-bg); border: var(--kj-btn-border); box-shadow: var(--kj-shadow-hard);
-      padding: 1rem; min-width: 14rem; font-family: var(--kj-font);
-    }
-    [kjPopoverContent][hidden] { display: none; }
-    .popover-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; border-bottom: var(--kj-btn-border); padding-bottom: 0.375rem; color: var(--kj-text); }
-    .popover-body { font-size: 0.75rem; color: var(--kj-text-muted); margin: 0.5rem 0 1rem; line-height: 1.6; }
-    .popover-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }
-    .popover-footer button { padding: 0.3rem 0.75rem; font-size: 0.7rem; box-shadow: var(--kj-shadow-sm); }
-    .popover-footer button:hover { box-shadow: var(--kj-shadow-md); }
-    .btn-primary { background: var(--kj-accent); color: var(--kj-accent-on); border-color: var(--kj-border); }
-  `],
-  template: `
-    <div class="anchor" kjPopover>
-      <button kjPopoverTrigger>Settings</button>
-      <div kjPopoverContent>
-        <p class="popover-title">Notifications</p>
-        <p class="popover-body">Configure notification frequency and delivery preferences.</p>
-        <div class="popover-footer">
-          <button kjPopoverClose>Cancel</button>
-          <button kjPopoverClose class="btn-primary">Save</button>
-        </div>
-      </div>
-    </div>
-  `,
-})
-export class PopoverRetroExample {}

package/src/primitives/overlay/overlay.spec.ts

@@ -1,90 +0,0 @@
-import { Component, TemplateRef, ViewChild, ViewContainerRef, inject } from '@angular/core';
-import { render } from '@testing-library/angular';
-import { KjOverlayService, KjOverlayRef } from './overlay';
-
-describe('KjOverlayService', () => {
-  it('can be injected', async () => {
-    @Component({ standalone: true, template: '' })
-    class TestComponent {
-      readonly svc = inject(KjOverlayService);
-    }
-    const { fixture } = await render(TestComponent);
-    expect(fixture.componentInstance.svc).toBeTruthy();
-  });
-
-  it('createFromTemplate returns a KjOverlayRef with isOpen=false', async () => {
-    @Component({
-      standalone: true,
-      template: '<ng-template #tpl><div>overlay content</div></ng-template>',
-    })
-    class TestComponent {
-      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
-      readonly svc = inject(KjOverlayService);
-      readonly vcr = inject(ViewContainerRef);
-      ref!: KjOverlayRef;
-      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
-    }
-    const { fixture } = await render(TestComponent);
-    expect(fixture.componentInstance.ref.isOpen()).toBe(false);
-    fixture.componentInstance.ref.dispose();
-  });
-
-  it('open() sets isOpen to true', async () => {
-    @Component({
-      standalone: true,
-      template: '<ng-template #tpl><div>overlay</div></ng-template>',
-    })
-    class TestComponent {
-      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
-      readonly svc = inject(KjOverlayService);
-      readonly vcr = inject(ViewContainerRef);
-      ref!: KjOverlayRef;
-      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
-    }
-    const { fixture } = await render(TestComponent);
-    const ref = fixture.componentInstance.ref;
-    ref.open();
-    expect(ref.isOpen()).toBe(true);
-    ref.dispose();
-  });
-
-  it('close() sets isOpen to false', async () => {
-    @Component({
-      standalone: true,
-      template: '<ng-template #tpl><div>overlay</div></ng-template>',
-    })
-    class TestComponent {
-      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
-      readonly svc = inject(KjOverlayService);
-      readonly vcr = inject(ViewContainerRef);
-      ref!: KjOverlayRef;
-      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
-    }
-    const { fixture } = await render(TestComponent);
-    const ref = fixture.componentInstance.ref;
-    ref.open();
-    ref.close();
-    expect(ref.isOpen()).toBe(false);
-    ref.dispose();
-  });
-
-  it('dispose() removes the overlay container from document.body', async () => {
-    @Component({
-      standalone: true,
-      template: '<ng-template #tpl><div>overlay</div></ng-template>',
-    })
-    class TestComponent {
-      @ViewChild('tpl', { static: true }) tpl!: TemplateRef<unknown>;
-      readonly svc = inject(KjOverlayService);
-      readonly vcr = inject(ViewContainerRef);
-      ref!: KjOverlayRef;
-      ngOnInit() { this.ref = this.svc.createFromTemplate(this.tpl, this.vcr); }
-    }
-    const { fixture } = await render(TestComponent);
-    const ref = fixture.componentInstance.ref;
-    ref.open();
-    expect(document.body.querySelector('[data-kj-overlay]')).toBeTruthy();
-    ref.dispose();
-    expect(document.body.querySelector('[data-kj-overlay]')).toBeNull();
-  });
-});

package/src/primitives/overlay/overlay.ts

@@ -1,102 +0,0 @@
-import {
-  Injectable, inject, signal,
-  EmbeddedViewRef, ApplicationRef, TemplateRef, ViewContainerRef,
-} from '@angular/core';
-
-/**
- * Managed wrapper around a DOM overlay container.
- * Provides `isOpen` as a signal and lifecycle methods.
- *
- * Create instances via {@link KjOverlayService} — do not construct directly.
- *
- * @example
- * ```ts
- * const ref = inject(KjOverlayService).createFromTemplate(tpl, vcr);
- * ref.open();
- * ```
- */
-export class KjOverlayRef {
-  private readonly _isOpen = signal(false);
-
-  /** Whether the overlay is currently open. */
-  readonly isOpen = this._isOpen.asReadonly();
-
-  constructor(
-    private readonly container: HTMLElement,
-    private readonly viewRef: EmbeddedViewRef<unknown>,
-    private readonly appRef: ApplicationRef,
-  ) {}
-
-  /** Shows the overlay container. */
-  open(): void {
-    this._isOpen.set(true);
-    this.container.removeAttribute('hidden');
-  }
-
-  /** Hides the overlay container. */
-  close(): void {
-    this._isOpen.set(false);
-    this.container.setAttribute('hidden', '');
-  }
-
-  /** Toggles the overlay between open and closed states. */
-  toggle(): void {
-    this.isOpen() ? this.close() : this.open();
-  }
-
-  /**
-   * Permanently removes the overlay from the DOM and destroys the view.
-   * Call inside `DestroyRef.onDestroy()` to prevent memory leaks.
-   */
-  dispose(): void {
-    this.appRef.detachView(this.viewRef);
-    this.viewRef.destroy();
-    this.container.remove();
-  }
-
-  /** The underlying container `HTMLElement` for advanced usage. */
-  get el(): HTMLElement {
-    return this.container;
-  }
-}
-
-/**
- * Factory service for creating managed overlay containers.
- * Creates a container appended to `document.body`.
- *
- * @example
- * ```ts
- * // Dialog — full-screen backdrop overlay
- * const ref = inject(KjOverlayService).createFromTemplate(tpl, vcr);
- * ref.open();
- *
- * // Clean up when done
- * ref.dispose();
- * ```
- */
-@Injectable({ providedIn: 'root' })
-export class KjOverlayService {
-  private readonly appRef = inject(ApplicationRef);
-
-  /**
-   * Creates an overlay from an Angular template ref.
-   * The container is appended to `document.body` and starts hidden.
-   *
-   * @param tpl - The `TemplateRef` to render inside the overlay.
-   * @param vcr - The `ViewContainerRef` used to create the embedded view.
-   * @returns A {@link KjOverlayRef} managing the created overlay.
-   */
-  createFromTemplate(tpl: TemplateRef<unknown>, vcr: ViewContainerRef): KjOverlayRef {
-    // Use TemplateRef.createEmbeddedView directly so the view is not pre-attached
-    // to the VCR's container — ApplicationRef can own the view lifecycle.
-    const viewRef = tpl.createEmbeddedView(null as never, vcr.injector);
-    this.appRef.attachView(viewRef);
-
-    const container = document.createElement('div');
-    container.setAttribute('data-kj-overlay', '');
-    viewRef.rootNodes.forEach(node => container.appendChild(node));
-    document.body.appendChild(container);
-
-    return new KjOverlayRef(container, viewRef, this.appRef);
-  }
-}

package/src/select/select.context.ts

@@ -1,3 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-export interface KjSelectContext { value: Signal<unknown>; open: Signal<boolean>; select: (value: unknown) => void; toggle: () => void; hide: () => void; }
-export const KJ_SELECT = new InjectionToken<KjSelectContext>('KjSelect');