@kouji-ui/core 0.0.4 → 0.1.2

package/src/primitives/overlay/overlay.ts

@@ -1,106 +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 {
-    if (this.isOpen()) {
-      this.close();
-    } else {
-      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/public-api.ts

@@ -1,35 +0,0 @@
-// Public API for @kouji-ui/core
-
-export const KJ_CORE_VERSION = '0.0.1';
-
-// ── Primitives ──────────────────────────────────────────────
-export * from './primitives/index';
-
-// ── Accessibility utilities ──────────────────────────────────
-export * from './a11y/index';
-
-// ── Foundation components ────────────────────────────────────
-export * from './button/index';
-export * from './input/index';
-export * from './checkbox/index';
-export * from './radio/index';
-export * from './toggle/index';
-export * from './badge/index';
-export * from './avatar/index';
-
-// ── Overlay components ───────────────────────────────────────
-export * from './dialog/index';
-export * from './tooltip/index';
-export * from './popover/index';
-export * from './menu/index';
-export * from './toast/index';
-
-// ── Data components ──────────────────────────────────────────
-export * from './table/index';
-export * from './form/index';
-export * from './tabs/index';
-export * from './accordion/index';
-export * from './select/index';
-
-// ── Charts ───────────────────────────────────────────────────
-export * from './chart/index';

package/src/radio/index.ts

@@ -1,2 +0,0 @@
-export { KjRadioGroup, KjRadio } from './radio';
-export { KJ_RADIO_GROUP, type KjRadioContext } from './radio.context';

package/src/radio/radio.context.ts

@@ -1,3 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-export interface KjRadioContext { value: Signal<unknown>; select: (value: unknown) => void; }
-export const KJ_RADIO_GROUP = new InjectionToken<KjRadioContext>('KjRadioGroup');

package/src/radio/radio.spec.ts

@@ -1,36 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjRadioGroup, KjRadio } from './radio';
-
-expect.extend(toHaveNoViolations);
-
-const template = `<div kjRadioGroup [(kjValue)]="selected" aria-label="Opts"><div kjRadio [kjRadioValue]="'a'" tabindex="0">A</div><div kjRadio [kjRadioValue]="'b'" tabindex="-1">B</div></div>`;
-const imports = [KjRadioGroup, KjRadio];
-
-describe('KjRadioGroup', () => {
-  it('has radiogroup role', async () => {
-    const { getByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
-    expect(getByRole('radiogroup')).toBeInTheDocument();
-  });
-
-  it('radio items have role=radio', async () => {
-    const { getAllByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
-    expect(getAllByRole('radio')).toHaveLength(2);
-  });
-
-  it('selected radio has aria-checked=true', async () => {
-    const { getAllByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
-    expect(getAllByRole('radio')[0]).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('clicking radio selects it', async () => {
-    const { getAllByRole } = await render(template, { imports, componentProperties: { selected: 'a' } });
-    fireEvent.click(getAllByRole('radio')[1]);
-    expect(getAllByRole('radio')[1]).toHaveAttribute('aria-checked', 'true');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(template, { imports, componentProperties: { selected: 'a' } });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/radio/radio.ts

@@ -1,55 +0,0 @@
-import { Directive, computed, inject, input, model } from '@angular/core';
-import { KJ_RADIO_GROUP, KjRadioContext } from './radio.context';
-import { KjDisabled, KjFocusRing, KjFormControl } from '../primitives';
-
-/**
- * Container for a group of radio buttons. Manages the selected value.
- * @example
- * ```html
- * <div kjRadioGroup [(kjValue)]="size" aria-label="Size">
- *   <div kjRadio [kjRadioValue]="'s'" tabindex="0">Small</div>
- * </div>
- * ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjRadioGroup]', standalone: true,
-  providers: [{ provide: KJ_RADIO_GROUP, useExisting: KjRadioGroup }],
-  host: { role: 'radiogroup' },
-})
-export class KjRadioGroup implements KjRadioContext {
-  kjValue = model<unknown>(undefined);
-  readonly value = this.kjValue.asReadonly();
-  select(val: unknown): void { this.kjValue.set(val); }
-}
-
-/**
- * Individual radio button within a `[kjRadioGroup]`. Includes CVA for forms integration.
- * @example `<div kjRadio [kjRadioValue]="'a'" tabindex="0">Option A</div>`
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjRadio]', standalone: true,
-  hostDirectives: [
-    { directive: KjDisabled, inputs: ['kjDisabled'] },
-    KjFocusRing,
-    KjFormControl,
-  ],
-  host: {
-    role: 'radio',
-    '[attr.aria-checked]': 'checked().toString()',
-    '[attr.data-checked]': 'checked() ? "" : null',
-    '(click)': 'select()',
-    '(keydown.space)': 'onSpace($event)',
-    '(keydown.enter)': 'select()',
-    '(blur)': 'formCtrl.notifyTouched()',
-  },
-})
-export class KjRadio {
-  private readonly group = inject(KJ_RADIO_GROUP);
-  readonly formCtrl = inject(KjFormControl);
-  kjRadioValue = input.required<unknown>();
-  readonly checked = computed(() => this.group.value() === this.kjRadioValue());
-  select(): void { this.group.select(this.kjRadioValue()); this.formCtrl.notifyChange(this.kjRadioValue()); }
-  onSpace(e: Event): void { e.preventDefault(); this.select(); }
-}

package/src/select/index.ts

@@ -1,2 +0,0 @@
-export { KjSelect, KjSelectTrigger, KjSelectContent, KjOption } from './select';
-export { KJ_SELECT, type KjSelectContext } from './select.context';

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');

package/src/select/select.spec.ts

@@ -1,145 +0,0 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { KjSelect, KjSelectTrigger, KjSelectContent, KjOption } from './select';
-
-expect.extend(toHaveNoViolations);
-
-const imports = [KjSelect, KjSelectTrigger, KjSelectContent, KjOption];
-const template = `
-  <div kjSelect [(kjSelectValue)]="val">
-    <button kjSelectTrigger aria-haspopup="listbox">Select fruit</button>
-    <div kjSelectContent>
-      <div kjOption [kjOptionValue]="'apple'">Apple</div>
-      <div kjOption [kjOptionValue]="'banana'">Banana</div>
-      <div kjOption [kjOptionValue]="'cherry'">Cherry</div>
-    </div>
-  </div>`;
-
-describe('KjSelect', () => {
-  it('listbox hidden by default', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('trigger opens listbox', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    expect(container.querySelector('[kjSelectContent]')).not.toHaveAttribute('hidden');
-  });
-
-  it('trigger sets aria-expanded to false by default', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    expect(container.querySelector('[kjSelectTrigger]')).toHaveAttribute('aria-expanded', 'false');
-  });
-
-  it('trigger sets aria-expanded to true when open', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    expect(container.querySelector('[kjSelectTrigger]')).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('clicking option selects and closes', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    fireEvent.click(container.querySelector('[kjOption]')!);
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('selected option has aria-selected="true"', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: 'apple' } });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(options[0]).toHaveAttribute('aria-selected', 'true');
-    expect(options[1]).toHaveAttribute('aria-selected', 'false');
-  });
-
-  it('listbox has role="listbox"', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('role', 'listbox');
-  });
-
-  it('options have role="option"', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    const options = container.querySelectorAll('[kjOption]');
-    options.forEach(opt => expect(opt).toHaveAttribute('role', 'option'));
-  });
-
-  it('ArrowDown moves focus to next option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(document.activeElement).toBe(options[0]);
-  });
-
-  it('ArrowDown then ArrowDown moves to second option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(document.activeElement).toBe(options[1]);
-  });
-
-  it('Home key moves focus to first option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    // Move down first
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    // Then Home
-    fireEvent.keyDown(content, { key: 'Home' });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(document.activeElement).toBe(options[0]);
-  });
-
-  it('End key moves focus to last option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'End' });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(document.activeElement).toBe(options[2]);
-  });
-
-  it('Enter selects focused option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    fireEvent.keyDown(content, { key: 'Enter' });
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('Space selects focused option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'ArrowDown' });
-    fireEvent.keyDown(content, { key: ' ' });
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('type-ahead jumps to matching option', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    const content = container.querySelector('[kjSelectContent]')!;
-    fireEvent.keyDown(content, { key: 'b' });
-    const options = container.querySelectorAll('[kjOption]');
-    expect(document.activeElement).toBe(options[1]);
-  });
-
-  it('Escape closes the listbox', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    fireEvent.click(container.querySelector('[kjSelectTrigger]')!);
-    fireEvent.keyDown(document, { key: 'Escape' });
-    expect(container.querySelector('[kjSelectContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(template, { imports, componentProperties: { val: '' } });
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/select/select.ts

@@ -1,250 +0,0 @@
-import {
-  afterNextRender,
-  computed,
-  Directive,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  model,
-  signal,
-} from '@angular/core';
-import { KjDisabled, KjFocusRing } from '../primitives';
-import { KJ_SELECT } from './select.context';
-
-/**
- * Root select container. Manages open/close state via `kjSelectValue` model.
- *
- * @example
- * ```html
- * <div kjSelect [(kjSelectValue)]="selected">
- *   <button kjSelectTrigger aria-haspopup="listbox">Choose fruit</button>
- *   <div kjSelectContent>
- *     <div kjOption [kjOptionValue]="'apple'">Apple</div>
- *   </div>
- * </div>
- * ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjSelect]',
-  standalone: true,
-  providers: [{ provide: KJ_SELECT, useExisting: KjSelect }],
-})
-export class KjSelect {
-  /** The currently selected value. Supports two-way binding. */
-  readonly kjSelectValue = model<unknown>(undefined);
-
-  /** Read-only signal for the current value. */
-  readonly value = this.kjSelectValue.asReadonly();
-
-  private readonly _open = signal(false);
-
-  /** Whether the listbox is currently open. */
-  readonly open = this._open.asReadonly();
-
-  /**
-   * Selects a value and closes the listbox.
-   * @param val The value to select.
-   */
-  select(val: unknown): void {
-    this.kjSelectValue.set(val);
-    this._open.set(false);
-  }
-
-  /** Toggles the open state of the listbox. */
-  toggle(): void {
-    this._open.update(v => !v);
-  }
-
-  /** Closes the listbox. */
-  hide(): void {
-    this._open.set(false);
-  }
-}
-
-/**
- * Trigger button that opens/closes the select listbox.
- * Automatically binds `aria-expanded` to reflect open state.
- *
- * @example
- * ```html
- * <button kjSelectTrigger aria-haspopup="listbox">Choose fruit</button>
- * ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjSelectTrigger]',
-  standalone: true,
-  hostDirectives: [KjFocusRing],
-  host: {
-    '[attr.aria-expanded]': 'ctx.open().toString()',
-    '(click)': '$event.stopPropagation(); ctx.toggle()',
-  },
-})
-export class KjSelectTrigger {
-  /** @internal */
-  readonly ctx = inject(KJ_SELECT);
-}
-
-/**
- * Listbox container. Provides keyboard navigation (Arrow keys, Home, End,
- * Enter, Space, type-ahead) and ARIA listbox semantics. Hidden when closed.
- *
- * @example
- * ```html
- * <div kjSelectContent>
- *   <div kjOption [kjOptionValue]="'apple'">Apple</div>
- * </div>
- * ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjSelectContent]',
-  standalone: true,
-  host: {
-    'role': 'listbox',
-    '[attr.hidden]': '!ctx.open() ? "" : null',
-    '[attr.aria-activedescendant]': 'activeId()',
-    '(keydown)': 'onKeydown($event)',
-    '(document:keydown.escape)': 'ctx.hide()',
-    '(document:click)': 'onDocClick()',
-    '(click)': '$event.stopPropagation()',
-  },
-})
-export class KjSelectContent {
-  private readonly el = inject(ElementRef<HTMLElement>);
-  /** @internal */
-  readonly ctx = inject(KJ_SELECT);
-
-  private readonly _activeIndex = signal(-1);
-
-  /** @internal */
-  readonly activeId = computed(() => {
-    const items = this.getOptions();
-    const idx = this._activeIndex();
-    return items[idx]?.id ?? null;
-  });
-
-  /** @internal */
-  onDocClick(): void {
-    if (this.ctx.open()) this.ctx.hide();
-  }
-
-  /** @internal */
-  onKeydown(e: KeyboardEvent): void {
-    const items = this.getOptions();
-    if (!items.length) return;
-    let idx = this._activeIndex();
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        idx = Math.min(idx + 1, items.length - 1);
-        this._activeIndex.set(idx);
-        items[idx]?.el.focus();
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        idx = Math.max(idx - 1, 0);
-        this._activeIndex.set(idx);
-        items[idx]?.el.focus();
-        break;
-      case 'Home':
-        e.preventDefault();
-        this._activeIndex.set(0);
-        items[0]?.el.focus();
-        break;
-      case 'End':
-        e.preventDefault();
-        this._activeIndex.set(items.length - 1);
-        items[items.length - 1]?.el.focus();
-        break;
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        if (idx >= 0) {
-          const val = items[idx]?.value;
-          if (val !== undefined) this.ctx.select(val);
-        }
-        break;
-      default: {
-        const char = e.key.length === 1 ? e.key.toLowerCase() : null;
-        if (char) {
-          const match = items.findIndex(item =>
-            item.el.textContent?.trim().toLowerCase().startsWith(char)
-          );
-          if (match >= 0) {
-            this._activeIndex.set(match);
-            items[match].el.focus();
-          }
-        }
-      }
-    }
-  }
-
-  private getOptions(): Array<{ el: HTMLElement; value: unknown; id: string }> {
-    return (Array.from(
-      this.el.nativeElement.querySelectorAll('[kjOption]')
-    ) as HTMLElement[]).map((el, i) => ({
-      el,
-      value: (el as HTMLElement & { __kjOptionValue?: unknown }).__kjOptionValue,
-      id: el.id || `kj-option-${i}`,
-    }));
-  }
-}
-
-/**
- * Individual option inside a `kjSelectContent`. Clicking or pressing Enter/Space
- * calls `select()` on the parent context.
- *
- * @example
- * ```html
- * <div kjOption [kjOptionValue]="'apple'">Apple</div>
- * ```
- * @category Core/Inputs
- */
-@Directive({
-  selector: '[kjOption]',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjDisabled, inputs: ['kjDisabled'] },
-  ],
-  host: {
-    'role': 'option',
-    '[attr.tabindex]': '"0"',
-    '[attr.aria-selected]': 'selected().toString()',
-    '[attr.aria-disabled]': 'disabled() ? "true" : null',
-    '(click)': 'handleClick()',
-    '(keydown.enter)': '$event.preventDefault(); handleClick()',
-    '(keydown.space)': '$event.preventDefault(); handleClick()',
-  },
-})
-export class KjOption {
-  private readonly ctx = inject(KJ_SELECT);
-  private readonly el = inject(ElementRef<HTMLElement>);
-  /** @internal */
-  readonly disabled = inject(KjDisabled).disabled;
-
-  /** The value this option represents. */
-  readonly kjOptionValue = input.required<unknown>();
-
-  /** @internal */
-  readonly selected = computed(() => this.ctx.value() === this.kjOptionValue());
-
-  constructor() {
-    effect(() => {
-      (this.el.nativeElement as HTMLElement & { __kjOptionValue?: unknown }).__kjOptionValue = this.kjOptionValue();
-    });
-    afterNextRender(() => {
-      if (!this.el.nativeElement.id) {
-        this.el.nativeElement.id = `kj-option-${Math.random().toString(36).slice(2, 7)}`;
-      }
-    });
-  }
-
-  /** @internal */
-  handleClick(): void {
-    if (!this.disabled()) this.ctx.select(this.kjOptionValue());
-  }
-}