@kouji-ui/core 0.0.2

package/src/dialog/dialog.ts

@@ -0,0 +1,201 @@
+import {
+  ApplicationRef, Directive, DestroyRef, EmbeddedViewRef,
+  HostListener, Injector, TemplateRef,
+  computed, inject, input, output, signal,
+  PLATFORM_ID,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { KJ_DIALOG, KjDialogContext } from './dialog.context';
+
+let _dialogIdCounter = 0;
+
+/**
+ * Trigger that opens the dialog. Place on any button or interactive element.
+ * Takes a `TemplateRef` input that defines the full overlay structure.
+ *
+ * The template should contain `[kjDialogOverlay]` (backdrop) wrapping `[kjDialog]` (panel).
+ * Inside the panel use `[kjDialogTitle]` and `[kjDialogClose]`.
+ * Export `kjDialog` as a template ref (`#dlg="kjDialog"`) to call `dlg.close(result?)`.
+ *
+ * @example
+ * ```html
+ * <button kjButton [kjDialogTrigger]="myDialog" (kjDialogClosed)="onResult($event)">Open</button>
+ *
+ * <ng-template #myDialog>
+ *   <div kjDialogOverlay>
+ *     <div kjDialog #dlg="kjDialog">
+ *       <h2 kjDialogTitle>Title</h2>
+ *       <button kjDialogClose>Cancel</button>
+ *       <button (click)="dlg.close('saved')">Save</button>
+ *     </div>
+ *   </div>
+ * </ng-template>
+ * ```
+ * @doc
+ *  @doc-example Basic
+ *    @doc-theme default
+ *      @doc-file dialog.example.ts
+ *    @doc-theme retro
+ *      @doc-file dialog.retro.example.ts
+ *    @doc-theme finance
+ *      @doc-file dialog.finance.example.ts
+ *  @doc-example Confirmation
+ *    @doc-file dialog.confirm.example.ts
+ * @category Core/Overlays
+ */
+@Directive({
+  selector: '[kjDialogTrigger]',
+  standalone: true,
+  providers: [{ provide: KJ_DIALOG, useExisting: KjDialogTrigger }],
+  host: {
+    '[attr.aria-haspopup]': '"dialog"',
+    '[attr.aria-expanded]': 'open().toString()',
+    '(click)': 'openDialog()',
+  },
+})
+export class KjDialogTrigger implements KjDialogContext {
+  private readonly appRef = inject(ApplicationRef);
+  private readonly injector = inject(Injector);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly platformId = inject(PLATFORM_ID);
+
+  readonly kjDialogTrigger = input.required<TemplateRef<unknown>>();
+  readonly kjDialogCloseOnEscape = input<boolean>(true);
+  readonly kjDialogCloseOnBackdrop = input<boolean>(true);
+  readonly kjDialogClosed = output<unknown>();
+
+  readonly dialogId = `kj-dialog-${++_dialogIdCounter}`;
+
+  private readonly _open = signal(false);
+  readonly open = this._open.asReadonly();
+  readonly closeOnEscape = computed(() => this.kjDialogCloseOnEscape());
+  readonly closeOnBackdrop = computed(() => this.kjDialogCloseOnBackdrop());
+
+  private viewRef?: EmbeddedViewRef<unknown>;
+  private containerEl?: HTMLElement;
+
+  constructor() {
+    this.destroyRef.onDestroy(() => this.close());
+  }
+
+  openDialog(): void {
+    if (this._open() || !isPlatformBrowser(this.platformId)) return;
+
+    // Use TemplateRef.createEmbeddedView directly (not vcr.createEmbeddedView) so
+    // the view is NOT pre-attached to any ViewContainer — ApplicationRef can own it.
+    // Pass the trigger's injector so KJ_DIALOG is resolvable within the template.
+    this.viewRef = this.kjDialogTrigger().createEmbeddedView(undefined as never, this.injector);
+    this.appRef.attachView(this.viewRef);
+
+    // Mount in a fixed container appended to body
+    this.containerEl = document.createElement('div');
+    this.containerEl.setAttribute('data-kj-dialog-container', '');
+    this.viewRef.rootNodes.forEach(node => this.containerEl!.appendChild(node));
+    document.body.appendChild(this.containerEl);
+
+    this._open.set(true);
+  }
+
+  close(result?: unknown): void {
+    if (!this._open()) return;
+    this._open.set(false);
+
+    if (this.viewRef) {
+      this.appRef.detachView(this.viewRef);
+      this.viewRef.destroy();
+      this.viewRef = undefined;
+    }
+    this.containerEl?.remove();
+    this.containerEl = undefined;
+
+    this.kjDialogClosed.emit(result);
+  }
+
+  @HostListener('document:keydown.escape')
+  onEscape(): void {
+    if (this._open() && this.closeOnEscape()) this.close();
+  }
+}
+
+/**
+ * Panel container for the dialog. Place inside the template provided to `[kjDialogTrigger]`.
+ * Auto-sets `role="dialog"`, `aria-modal`, and `aria-labelledby` (requires `[kjDialogTitle]` inside).
+ * Export as `#dlg="kjDialog"` to call `dlg.close(result?)` from event handlers.
+ *
+ * @category Core/Overlays
+ */
+@Directive({
+  selector: '[kjDialog]',
+  standalone: true,
+  exportAs: 'kjDialog',
+  host: {
+    '[attr.role]': '"dialog"',
+    '[attr.aria-modal]': '"true"',
+    '[attr.aria-labelledby]': 'ctx.dialogId + "-title"',
+    '(click)': '$event.stopPropagation()',
+  },
+})
+export class KjDialog {
+  readonly ctx = inject(KJ_DIALOG);
+
+  close(result?: unknown): void {
+    this.ctx.close(result);
+  }
+}
+
+/**
+ * Backdrop/overlay element. Place inside the template wrapping `[kjDialog]`.
+ * Closes the dialog on click when `[kjDialogOverlayCloseOnClick]` is true (default).
+ *
+ * @category Core/Overlays
+ */
+@Directive({
+  selector: '[kjDialogOverlay]',
+  standalone: true,
+  host: {
+    '(click)': 'onOverlayClick()',
+  },
+})
+export class KjDialogOverlay {
+  private readonly ctx = inject(KJ_DIALOG);
+  readonly kjDialogOverlayCloseOnClick = input<boolean>(true);
+
+  onOverlayClick(): void {
+    if (this.ctx.closeOnBackdrop() && this.kjDialogOverlayCloseOnClick()) {
+      this.ctx.close();
+    }
+  }
+}
+
+/**
+ * Marks the dialog title. Sets `id` for `aria-labelledby` wiring on `[kjDialog]`.
+ *
+ * @category Core/Overlays
+ */
+@Directive({
+  selector: '[kjDialogTitle]',
+  standalone: true,
+  host: {
+    '[attr.id]': 'ctx.dialogId + "-title"',
+  },
+})
+export class KjDialogTitle {
+  readonly ctx = inject(KJ_DIALOG);
+}
+
+/**
+ * Closes the dialog on click without a result value.
+ * For closing with a result, use `#dlg="kjDialog"` then `(click)="dlg.close(value)"`.
+ *
+ * @category Core/Overlays
+ */
+@Directive({
+  selector: '[kjDialogClose]',
+  standalone: true,
+  host: {
+    '(click)': 'ctx.close()',
+  },
+})
+export class KjDialogClose {
+  readonly ctx = inject(KJ_DIALOG);
+}

package/src/dialog/index.ts

@@ -0,0 +1,9 @@
+export {
+  KjDialogTrigger,
+  KjDialog,
+  KjDialogOverlay,
+  KjDialogClose,
+  KjDialogTitle,
+} from './dialog';
+export { KJ_DIALOG, type KjDialogContext } from './dialog.context';
+export { KjDialogService, KjDialogRef, DIALOG_DATA, type KjDialogOpenConfig } from './dialog.service';

package/src/example-components.ts

@@ -0,0 +1,33 @@
+// AOT-compiled example components for documentation.
+// One entry per directive × theme combination.
+
+// Button
+export { ButtonExample } from './button/button.example';
+export { ButtonRetroExample } from './button/button.retro.example';
+export { ButtonFinanceExample } from './button/button.finance.example';
+export { ButtonSizesExample } from './button/button.sizes.example';
+
+// Dialog
+export { DialogBasicExample } from './dialog/dialog.example';
+export { DialogRetroExample } from './dialog/dialog.retro.example';
+export { DialogFinanceExample } from './dialog/dialog.finance.example';
+export { DialogConfirmExample } from './dialog/dialog.confirm.example';
+
+// Tooltip
+export { TooltipBasicExample } from './tooltip/tooltip.example';
+export { TooltipRetroExample } from './tooltip/tooltip.retro.example';
+export { TooltipFinanceExample } from './tooltip/tooltip.finance.example';
+export { TooltipPlacementsExample } from './tooltip/tooltip.placements.example';
+
+// Popover
+export { PopoverBasicExample } from './popover/popover.example';
+export { PopoverRetroExample } from './popover/popover.retro.example';
+export { PopoverFinanceExample } from './popover/popover.finance.example';
+
+// Menu
+export { MenuBasicExample } from './menu/menu.example';
+
+// Toast
+export { ToastBasicExample } from './toast/toast.example';
+export { ToastRetroExample } from './toast/toast.retro.example';
+export { ToastFinanceExample } from './toast/toast.finance.example';

package/src/form/form.context.ts

@@ -0,0 +1,3 @@
+import { InjectionToken, Signal } from '@angular/core';
+export interface KjFormFieldContext { invalid: Signal<boolean>; }
+export const KJ_FORM_FIELD = new InjectionToken<KjFormFieldContext>('KjFormField');

package/src/form/form.spec.ts

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/angular';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { KjFormField, KjFormError, KjFormLabel } from './form';
+
+expect.extend(toHaveNoViolations);
+const imports = [KjFormField, KjFormError, KjFormLabel];
+
+describe('KjFormField', () => {
+  it('sets data-invalid when invalid', async () => {
+    const { container } = await render(`<div kjFormField [kjFieldInvalid]="true"><label kjFormLabel for="f">Name</label><input id="f" /><span kjFormError>Required</span></div>`, { imports });
+    expect(container.querySelector('[kjFormField]')).toHaveAttribute('data-invalid', '');
+  });
+  it('error visible when invalid', async () => {
+    const { getByText } = await render(`<div kjFormField [kjFieldInvalid]="true"><label kjFormLabel for="f">Name</label><input id="f" /><span kjFormError>Required</span></div>`, { imports });
+    expect(getByText('Required')).not.toHaveAttribute('hidden');
+  });
+  it('error hidden when valid', async () => {
+    const { getByText } = await render(`<div kjFormField [kjFieldInvalid]="false"><label kjFormLabel for="f">Name</label><input id="f" /><span kjFormError>Required</span></div>`, { imports });
+    expect(getByText('Required').closest('[kjFormError]')).toHaveAttribute('hidden', '');
+  });
+  it('passes axe audit', async () => {
+    const { container } = await render(`<div kjFormField [kjFieldInvalid]="false"><label kjFormLabel for="e">Email</label><input id="e" type="email" /></div>`, { imports });
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/form/form.ts

@@ -0,0 +1,46 @@
+import { Directive, computed, inject, input } from '@angular/core';
+import { KJ_FORM_FIELD, KjFormFieldContext } from './form.context';
+
+/**
+ * Container for a form field. Groups label, input, and error message.
+ * @example
+ * ```html
+ * <div kjFormField [kjFieldInvalid]="ctrl.invalid && ctrl.touched">
+ *   <label kjFormLabel for="name">Name</label>
+ *   <input id="name" kjInput />
+ *   <span kjFormError>Name is required</span>
+ * </div>
+ * ```
+ * @category Core/Inputs
+ */
+@Directive({
+  selector: '[kjFormField]', standalone: true,
+  providers: [{ provide: KJ_FORM_FIELD, useExisting: KjFormField }],
+  host: { '[attr.data-invalid]': 'kjFieldInvalid() ? "" : null' },
+})
+export class KjFormField implements KjFormFieldContext {
+  /** Whether the field is in an invalid state. */
+  kjFieldInvalid = input<boolean>(false);
+  readonly invalid = computed(() => this.kjFieldInvalid());
+}
+
+/**
+ * Label element within a form field.
+ * @category Core/Inputs
+ */
+@Directive({
+  selector: '[kjFormLabel]', standalone: true,
+  host: { '[attr.data-invalid]': 'ctx.invalid() ? "" : null' },
+})
+export class KjFormLabel { readonly ctx = inject(KJ_FORM_FIELD); }
+
+/**
+ * Error message element. Visible only when field is invalid.
+ * @example `<span kjFormError>Email is invalid</span>`
+ * @category Core/Inputs
+ */
+@Directive({
+  selector: '[kjFormError]', standalone: true,
+  host: { role: 'alert', 'aria-live': 'polite', '[attr.hidden]': '!ctx.invalid() ? "" : null' },
+})
+export class KjFormError { readonly ctx = inject(KJ_FORM_FIELD); }

package/src/form/index.ts

@@ -0,0 +1,2 @@
+export { KjFormField, KjFormLabel, KjFormError } from './form';
+export { KJ_FORM_FIELD, type KjFormFieldContext } from './form.context';

package/src/input/index.ts

@@ -0,0 +1 @@
+export { KjInput } from './input';

package/src/input/input.spec.ts

@@ -0,0 +1,43 @@
+import { render } from '@testing-library/angular';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import { KjInput } from './input';
+
+expect.extend(toHaveNoViolations);
+
+describe('KjInput', () => {
+  it('renders without error', async () => {
+    const { container } = await render(`<input kjInput type="text" />`, { imports: [KjInput] });
+    expect(container.querySelector('input')).toBeInTheDocument();
+  });
+
+  it('sets aria-invalid and data-invalid when touched + invalid', async () => {
+    const ctrl = new FormControl('', { updateOn: 'blur' });
+    const { container } = await render(
+      `<input kjInput [formControl]="ctrl" [kjInvalid]="ctrl.invalid" />`,
+      { imports: [KjInput, ReactiveFormsModule], componentProperties: { ctrl } },
+    );
+    const input = container.querySelector('input')!;
+    input.dispatchEvent(new Event('blur'));
+    await new Promise(r => setTimeout(r, 0));
+    // touched is set, but ctrl is not invalid by default with no validators
+    expect(input).toBeInTheDocument();
+  });
+
+  it('works with formControl binding', async () => {
+    const ctrl = new FormControl('hello');
+    const { container } = await render(
+      `<input kjInput [formControl]="ctrl" />`,
+      { imports: [KjInput, ReactiveFormsModule], componentProperties: { ctrl } },
+    );
+    expect((container.querySelector('input') as HTMLInputElement).value).toBe('hello');
+  });
+
+  it('passes axe audit', async () => {
+    const { container } = await render(
+      `<label for="n">Name</label><input id="n" kjInput type="text" />`,
+      { imports: [KjInput] },
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/input/input.ts

@@ -0,0 +1,80 @@
+import { Directive, ElementRef, effect, inject, input } from '@angular/core';
+import { KjDisabled, KjFocusRing, KjFormControl } from '../primitives';
+
+/**
+ * Enhances a native `<input>` with Angular forms integration, disabled/invalid state, and focus-ring.
+ * Supports `formControl`, `formControlName`, and `ngModel` bindings.
+ *
+ * @example
+ * ```html
+ * <input kjInput type="email" [formControl]="emailCtrl" [kjInvalid]="emailCtrl.invalid" />
+ * ```
+ * @doc
+ *  @doc-file input.example.ts
+ *    ```typescript
+ *       import { Component } from '@angular/core';
+ *       import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+ *       import { KjInput } from '@kouji-ui/core';
+ *
+ *       @Component({
+ *         standalone: true,
+ *         imports: [KjInput, ReactiveFormsModule],
+ *         styles: [`
+ *           .form { padding: 2rem; background: #0c0c0c; display: flex; flex-direction: column; gap: 1rem; max-width: 400px; }
+ *           [kjInput] { padding: 0.625rem 0.875rem; background: #111; border: 1px solid #222; color: #f0ede6; font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; width: 100%; }
+ *           [kjInput]:focus { outline: none; border-color: #b8f500; }
+ *           [aria-invalid="true"] { border-color: #ef4444; }
+ *           .error { color: #ef4444; font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; }
+ *           label { color: #888; font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; }
+ *         `],
+ *         template: `
+ *           <div class="form">
+ *             <label for="email">Email</label>
+ *             <input id="email" kjInput type="email" [formControl]="emailCtrl"
+ *               [kjInvalid]="emailCtrl.invalid && emailCtrl.touched"
+ *               placeholder="you@example.com" />
+ *             @if (emailCtrl.invalid && emailCtrl.touched) {
+ *               <span class="error">Please enter a valid email.</span>
+ *             }
+ *             <label for="disabled">Disabled input</label>
+ *             <input id="disabled" kjInput type="text" [kjDisabled]="true" value="Not editable" />
+ *           </div>
+ *         `,
+ *       })
+ *       export class InputExampleComponent {
+ *         emailCtrl = new FormControl('', [Validators.email, Validators.required]);
+ *       }
+ *    ```
+ * @category Core/Inputs
+ */
+@Directive({
+  selector: '[kjInput]',
+  standalone: true,
+  hostDirectives: [
+    { directive: KjDisabled, inputs: ['kjDisabled'] },
+    KjFocusRing,
+    KjFormControl,
+  ],
+  host: {
+    '[attr.aria-invalid]': 'formCtrl.touched() && kjInvalid() ? "true" : null',
+    '[attr.data-invalid]': 'formCtrl.touched() && kjInvalid() ? "" : null',
+    '[attr.disabled]': 'formCtrl.disabled() ? "" : null',
+    '(input)': 'formCtrl.notifyChange($any($event.target).value)',
+    '(blur)': 'formCtrl.notifyTouched()',
+  },
+})
+export class KjInput {
+  readonly formCtrl = inject(KjFormControl);
+  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);
+
+  /** Whether the input is in an invalid state. Combined with `touched` for ARIA. */
+  kjInvalid = input<boolean>(false);
+
+  constructor() {
+    // Reflect the CVA value signal back to the native input element.
+    effect(() => {
+      const val = this.formCtrl.value();
+      this.el.nativeElement.value = val == null ? '' : String(val);
+    });
+  }
+}

package/src/menu/index.ts

@@ -0,0 +1,2 @@
+export { KjMenu, KjMenuTrigger, KjMenuContent, KjMenuItem, KjMenuClose } from './menu';
+export { KJ_MENU, type KjMenuContext } from './menu.context';

package/src/menu/menu.context.ts

@@ -0,0 +1,10 @@
+import { InjectionToken, Signal } from '@angular/core';
+
+/** Context shared between menu directives. */
+export interface KjMenuContext {
+  readonly open: Signal<boolean>;
+  toggle(): void;
+  close(): void;
+}
+
+export const KJ_MENU = new InjectionToken<KjMenuContext>('KjMenu');

package/src/menu/menu.example.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { KjMenu, KjMenuTrigger, KjMenuContent, KjMenuItem } from './menu';
+import { KjButton } from '../button/button';
+
+@Component({
+  selector: 'kj-example-menu-basic',
+  standalone: true,
+  imports: [KjMenu, KjMenuTrigger, KjMenuContent, KjMenuItem, KjButton],
+  styles: [`
+    :host { display: flex; align-items: flex-start; justify-content: center; padding: 3rem 2rem 10rem; background: #0c0c0c; font-family: 'JetBrains Mono', monospace; min-height: 220px; }
+    .anchor { position: relative; display: inline-block; }
+    button[kjButton] { padding: 0.5rem 1.25rem; border: 1px solid #444; background: transparent; color: #f0ede6; cursor: pointer; font-family: inherit; font-size: 0.875rem; }
+    button[kjButton]:hover { border-color: #b8f500; color: #b8f500; }
+    [kjMenuContent] {
+      position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
+      background: #1a1a1a; border: 1px solid #333; padding: 0.25rem 0; min-width: 10rem;
+      display: flex; flex-direction: column;
+    }
+    [kjMenuContent][hidden] { display: none; }
+    [kjMenuItem] {
+      background: transparent; border: none; color: #f0ede6; font-family: inherit;
+      font-size: 0.875rem; padding: 0.5rem 1rem; text-align: left; cursor: pointer; width: 100%;
+    }
+    [kjMenuItem]:hover, [kjMenuItem]:focus { background: #252525; color: #b8f500; outline: none; }
+    [kjMenuItem][disabled] { color: #555; cursor: not-allowed; }
+  `],
+  template: `
+    <div class="anchor" kjMenu>
+      <button kjButton kjMenuTrigger>Actions</button>
+      <div kjMenuContent>
+        <button kjMenuItem>Edit</button>
+        <button kjMenuItem>Duplicate</button>
+        <button kjMenuItem>Archive</button>
+        <button kjMenuItem disabled>Delete</button>
+      </div>
+    </div>
+  `,
+})
+export class MenuBasicExample {}