@kouji-ui/core 0.0.3 → 0.1.1

package/src/date-picker/date-picker-calendar.ts

@@ -0,0 +1,65 @@
+import { Directive, inject, input } from '@angular/core';
+import { KJ_DATE_PICKER } from './date-picker.context';
+import { KjOverlayPanel } from '../primitives/overlay/panel';
+import {
+  KJ_OVERLAY_MOUNT_STRATEGY,
+  KJ_OVERLAY_POSITION_STRATEGY,
+  KJ_OVERLAY_FOCUS_TRAP_STRATEGY,
+  KJ_OVERLAY_PANEL_ROLE,
+} from '../primitives/overlay/tokens';
+import type { KjSide, KjAlign } from '../primitives/overlay/types';
+import { bodyPortal } from '../primitives/overlay/strategies/mount/body-portal';
+import { anchoredTo } from '../primitives/overlay/strategies/position/anchored-to';
+import { tabCycle } from '../primitives/overlay/strategies/focus-trap/tab-cycle';
+
+/**
+ * Marker directive for the calendar slot of a Date Picker. Composes the
+ * overlay `KjOverlayPanel` host directive — `role="dialog"`,
+ * `aria-modal="false"`, mount/position/focus-trap strategies — and lets
+ * consumers project a `KjCalendar` (or the `<kj-calendar>` wrapper) inside.
+ *
+ * Wire the panel to its trigger via `[kjFor]`:
+ *
+ * ```html
+ * <input kjDatePickerTrigger #t="kjDatePickerTrigger" />
+ * <div kjDatePickerCalendar [kjFor]="t"></div>
+ * ```
+ *
+ * @doc-category Core/Data input
+ * @doc
+ * @doc-name date-picker
+ */
+@Directive({
+  selector: '[kjDatePickerCalendar]',
+  standalone: true,
+  exportAs: 'kjDatePickerCalendar',
+  hostDirectives: [
+    { directive: KjOverlayPanel, inputs: ['kjFor'] },
+  ],
+  providers: [
+    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'dialog' as const },
+    { provide: KJ_OVERLAY_MOUNT_STRATEGY, useFactory: () => bodyPortal() },
+    { provide: KJ_OVERLAY_POSITION_STRATEGY, useFactory: () => anchoredTo() },
+    {
+      provide: KJ_OVERLAY_FOCUS_TRAP_STRATEGY,
+      useFactory: () => tabCycle({ returnFocus: true }),
+    },
+  ],
+  host: {
+    '[attr.aria-modal]': '"false"',
+    '[attr.aria-label]': '"Choose date"',
+  },
+})
+export class KjDatePickerCalendar {
+  /** @internal */
+  readonly ctx = inject(KJ_DATE_PICKER);
+
+  readonly kjSide   = input<KjSide>('bottom');
+  readonly kjAlign  = input<KjAlign>('start');
+  readonly kjOffset = input<number, unknown>(4, { transform: (v) => Number(v) || 4 });
+
+  constructor() {
+    const pos = inject(KJ_OVERLAY_POSITION_STRATEGY) as ReturnType<typeof anchoredTo>;
+    pos.configure({ side: this.kjSide, align: this.kjAlign, offset: this.kjOffset });
+  }
+}

package/src/date-picker/date-picker-trigger.ts

@@ -0,0 +1,215 @@
+import { Directive, ElementRef, computed, effect, inject } from '@angular/core';
+import { KjFormControl } from '../primitives/forms/form-control';
+import { KjFocusRing } from '../primitives/interaction/focus-ring';
+import { formatDateShort, parseDate } from '../calendar/date-utils';
+import { KJ_DATE_PICKER } from './date-picker.context';
+import { KjOverlayTrigger } from '../primitives/overlay/trigger';
+import type { KjOverlayPanel } from '../primitives/overlay/panel';
+import { KjOverlayController } from '../primitives/overlay/controller';
+import {
+  KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
+  KJ_OVERLAY_PANEL_ROLE,
+  type KjTriggerEventStrategy,
+} from '../primitives/overlay/tokens';
+import type { KjOverlayContext } from '../primitives/overlay/context';
+import { onClick } from '../primitives/overlay/strategies/trigger-event/on-click';
+import { onFocus } from '../primitives/overlay/strategies/trigger-event/on-focus';
+
+/**
+ * Composite trigger-event strategy: opens the calendar on input focus AND on
+ * click of the input (handy for icons inside the input). Mirrors the
+ * `hoverOrFocus` factory used by the tooltip migration.
+ *
+ * Naïvely wiring both `onClick` and `onFocus` to the same `toggle()` is a
+ * bug: clicking an unfocused input fires focus → toggle (opens), then
+ * click → toggle (closes), so the calendar appears only while the mouse
+ * button is held. We swallow any click toggle that fires within a short
+ * window after a focus-driven open so the activating click reads as a
+ * normal "open" instead of "open-then-close".
+ */
+function clickOrFocus(): KjTriggerEventStrategy {
+  const a = onClick();
+  const b = onFocus();
+  let userToggle: (() => void) | null = null;
+  let suppressClickUntil = 0;
+  const guardedClickToggle = () => {
+    if (performance.now() < suppressClickUntil) return;
+    userToggle?.();
+  };
+  const focusToggle = () => {
+    suppressClickUntil = performance.now() + 300;
+    userToggle?.();
+  };
+  return {
+    ariaHasPopup: 'dialog',
+    attach(ctx: KjOverlayContext) { a.attach(ctx); b.attach(ctx); },
+    bindToggle(t) {
+      userToggle = t;
+      a.bindToggle(guardedClickToggle);
+      b.bindToggle(focusToggle);
+    },
+    onOpen()  { a.onOpen?.();  b.onOpen?.();  },
+    onClose() { a.onClose?.(); b.onClose?.(); },
+    detach()  { a.detach();    b.detach();    },
+  };
+}
+
+/**
+ * Date Picker trigger directive. Apply to the `<input>` element. Combines:
+ *  - locale-aware **format on render** — when the value changes, the input's
+ *    text is overwritten with `Intl.DateTimeFormat`'s short form.
+ *  - locale-aware **parse on blur / Enter** — typed text is parsed (ISO,
+ *    locale-aware m/d/y or d/m/y) and committed to the picker's value.
+ *  - **combobox a11y** — `role="combobox"`; `aria-haspopup`, `aria-expanded`,
+ *    and `aria-controls` are wired by the composed `KjOverlayTrigger` host
+ *    directive (APG combobox+dialog pattern).
+ *  - **keyboard** — `ArrowDown` / `Alt+ArrowDown` opens the popup;
+ *    `Escape` closes; `Enter` parses and (if valid) commits.
+ *  - **CVA** — composes `KjFormControl` so the input plays with
+ *    `formControl` / `[(ngModel)]` bindings on the host.
+ *
+ * @doc-category Core/Data input
+ * @doc
+ * @doc-name date-picker
+ */
+@Directive({
+  selector: 'input[kjDatePickerTrigger]',
+  exportAs: 'kjDatePickerTrigger',
+  standalone: true,
+  hostDirectives: [
+    KjFormControl,
+    KjFocusRing,
+    { directive: KjOverlayTrigger, inputs: ['kjOpen'] },
+  ],
+  providers: [
+    KjOverlayController,
+    { provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY, useFactory: () => clickOrFocus() },
+    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'dialog' as const },
+  ],
+  host: {
+    'role': 'combobox',
+    'autocomplete': 'off',
+    'spellcheck': 'false',
+    '[attr.aria-disabled]': 'ctx.disabled() ? "true" : null',
+    '[attr.aria-readonly]': 'ctx.readonly() ? "true" : null',
+    '[attr.disabled]': 'ctx.disabled() ? "" : null',
+    '[attr.readonly]': 'ctx.readonly() ? "" : null',
+    '(input)': 'onInput($event)',
+    '(blur)': 'onBlur()',
+    '(keydown)': 'onKeydown($event)',
+  },
+})
+export class KjDatePickerTrigger {
+  /** @internal */
+  readonly ctx = inject(KJ_DATE_PICKER);
+  /** @internal */
+  readonly controller = inject(KjOverlayController);
+  private readonly formCtrl = inject(KjFormControl);
+  private readonly el = inject<ElementRef<HTMLInputElement>>(ElementRef);
+
+  /** Cached typed text — avoids overwriting mid-edit. */
+  private editing = false;
+
+  readonly displayValue = computed(() => {
+    const v = this.ctx.value();
+    return v ? formatDateShort(v, this.ctx.locale()) : '';
+  });
+
+  constructor() {
+    // Reflect the value to the input element whenever the value or locale
+    // changes — but only if the user isn't currently editing.
+    effect(() => {
+      const text = this.displayValue();
+      if (this.editing) return;
+      const inputEl = this.el.nativeElement;
+      if (inputEl.value !== text) inputEl.value = text;
+    });
+
+    // Mirror the picker's value into the form control (for CVA consumers).
+    effect(() => {
+      const v = this.ctx.value();
+      if (this.formCtrl.value() !== v) this.formCtrl.value.set(v);
+    });
+
+    // Bridge the root context's `open` (kjOpen model) with the overlay
+    // controller so consumers reading or writing `picker.kjOpen` see the
+    // same source of truth as the primitive.
+    effect(() => {
+      const isOpen = this.controller.isOpen();
+      if (this.ctx.open() !== isOpen) this.ctx.open.set(isOpen);
+    });
+    effect(() => {
+      const want = this.ctx.open();
+      if (want && !this.controller.isOpen()) {
+        if (!this.ctx.disabled() && !this.ctx.readonly()) this.controller.open();
+      } else if (!want && this.controller.isOpen()) {
+        this.controller.close('programmatic');
+      }
+    });
+  }
+
+  /** @internal */
+  onInput(_event: Event): void {
+    this.editing = true;
+    this.formCtrl.notifyChange(this.el.nativeElement.value);
+  }
+
+  /** @internal */
+  onBlur(): void {
+    this.commitTyped();
+    this.editing = false;
+    this.formCtrl.notifyTouched();
+  }
+
+  /** @internal */
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'ArrowDown' && (event.altKey || !this.controller.isOpen())) {
+      event.preventDefault();
+      if (!this.ctx.disabled() && !this.ctx.readonly()) this.controller.open();
+      return;
+    }
+    if (event.key === 'Escape' && this.controller.isOpen()) {
+      event.preventDefault();
+      this.controller.close('esc');
+      return;
+    }
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      this.commitTyped();
+    }
+  }
+
+  private commitTyped(): void {
+    const text = this.el.nativeElement.value;
+    if (!text.trim()) {
+      // Clearing the input clears the value.
+      if (this.ctx.value() !== null) {
+        const picker = this.ctx as { kjValue?: { set(v: Date | null): void } };
+        picker.kjValue?.set(null);
+      }
+      return;
+    }
+    const parsed = parseDate(text, this.ctx.locale());
+    if (parsed && !this.isOutOfBounds(parsed)) {
+      this.ctx.selectDate(parsed);
+    } else {
+      // Restore previous formatted value.
+      this.el.nativeElement.value = this.displayValue();
+    }
+  }
+
+  private readonly _overlayTrigger = inject(KjOverlayTrigger, { self: true });
+  attachPanel(panel: KjOverlayPanel): void {
+    this._overlayTrigger.attachPanel(panel);
+  }
+
+  private isOutOfBounds(d: Date): boolean {
+    const min = this.ctx.minDate();
+    const max = this.ctx.maxDate();
+    if (min && d < min) return true;
+    if (max && d > max) return true;
+    const filter = this.ctx.disabledDates();
+    if (filter && !filter(d)) return true;
+    return false;
+  }
+}

package/src/date-picker/date-picker.context.ts

@@ -0,0 +1,50 @@
+import { InjectionToken, type Signal, type WritableSignal } from '@angular/core';
+
+/**
+ * Shared context for the Date Picker family. Implemented by `KjDatePicker`
+ * (root) and consumed by `KjDatePickerTrigger` and `KjDatePickerCalendar`.
+ *
+ * @doc-category Core/Data input
+ */
+export interface KjDatePickerContext {
+  /** Current value; `null` when empty. */
+  readonly value: Signal<Date | null>;
+
+  /** Open / closed state of the popover. */
+  readonly open: WritableSignal<boolean>;
+
+  /** Auto-minted id of the popover panel — consumers wire `aria-controls`. */
+  readonly panelId: string;
+
+  /** Earliest selectable date; `null` = open. */
+  readonly minDate: Signal<Date | null>;
+
+  /** Latest selectable date; `null` = open. */
+  readonly maxDate: Signal<Date | null>;
+
+  /** Per-date predicate. */
+  readonly disabledDates: Signal<((d: Date) => boolean) | null>;
+
+  /** BCP-47 locale tag. */
+  readonly locale: Signal<string>;
+
+  /** Whether the picker is disabled. */
+  readonly disabled: Signal<boolean>;
+
+  /** Whether the picker is read-only (no edits). */
+  readonly readonly: Signal<boolean>;
+
+  /** Selects a date and closes the popover. */
+  selectDate(date: Date): void;
+
+  /** Opens the popover. */
+  show(): void;
+
+  /** Closes the popover. */
+  hide(): void;
+
+  /** Toggles the popover open / closed. */
+  toggle(): void;
+}
+
+export const KJ_DATE_PICKER = new InjectionToken<KjDatePickerContext>('KjDatePicker');

package/src/date-picker/date-picker.spec.ts

@@ -0,0 +1,117 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, test, beforeEach } from 'vitest';
+import { KjDatePicker, KjDatePickerCalendar, KjDatePickerTrigger } from './index';
+import { isSameDay } from '../calendar/date-utils';
+
+@Component({
+  standalone: true,
+  imports: [KjDatePicker, KjDatePickerTrigger, KjDatePickerCalendar],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <div kjDatePicker [(kjValue)]="value" [(kjOpen)]="open">
+      <input kjDatePickerTrigger #t="kjDatePickerTrigger" />
+      <div kjDatePickerCalendar [kjFor]="t"></div>
+    </div>
+  `,
+})
+class HostPicker {
+  value = signal<Date | null>(null);
+  open = signal(false);
+}
+
+describe('KjDatePicker', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [HostPicker] });
+  });
+
+  test('input has role="combobox" + aria-haspopup="dialog"', () => {
+    const fixture = TestBed.createComponent(HostPicker);
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('input');
+    expect(input.getAttribute('role')).toBe('combobox');
+    expect(input.getAttribute('aria-haspopup')).toBe('dialog');
+  });
+
+  test('input aria-controls points to the panel id', () => {
+    const fixture = TestBed.createComponent(HostPicker);
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('input');
+    const panel = fixture.nativeElement.querySelector('[kjDatePickerCalendar]');
+    expect(input.getAttribute('aria-controls')).toBe(panel.getAttribute('id'));
+  });
+
+  test('aria-expanded reflects open state', () => {
+    const fixture = TestBed.createComponent(HostPicker);
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('input');
+    expect(input.getAttribute('aria-expanded')).toBe('false');
+    fixture.componentInstance.open.set(true);
+    fixture.detectChanges();
+    expect(input.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  test('ArrowDown opens the popover', () => {
+    const fixture = TestBed.createComponent(HostPicker);
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.open()).toBe(true);
+  });
+
+  test('Escape closes the popover when open', () => {
+    const fixture = TestBed.createComponent(HostPicker);
+    fixture.componentInstance.open.set(true);
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.open()).toBe(false);
+  });
+
+  test('typing a parseable date and blurring commits the value', () => {
+    const fixture = TestBed.createComponent(HostPicker);
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.value = '2025-04-15';
+    input.dispatchEvent(new Event('input'));
+    input.dispatchEvent(new Event('blur'));
+    fixture.detectChanges();
+    const v = fixture.componentInstance.value()!;
+    expect(v).not.toBeNull();
+    expect(isSameDay(v, new Date(2025, 3, 15))).toBe(true);
+  });
+
+  test('typing garbage and blurring restores the formatted value', () => {
+    const fixture = TestBed.createComponent(HostPicker);
+    fixture.componentInstance.value.set(new Date(2025, 3, 15));
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    input.value = 'asdfgh';
+    input.dispatchEvent(new Event('input'));
+    input.dispatchEvent(new Event('blur'));
+    fixture.detectChanges();
+    // Value unchanged.
+    expect(isSameDay(fixture.componentInstance.value()!, new Date(2025, 3, 15))).toBe(true);
+    // Input restored to formatted text.
+    expect(input.value.length).toBeGreaterThan(0);
+  });
+
+  test('formats the input on value change', () => {
+    const fixture = TestBed.createComponent(HostPicker);
+    fixture.detectChanges();
+    fixture.componentInstance.value.set(new Date(2025, 3, 15));
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    expect(input.value.length).toBeGreaterThan(0);
+    expect(input.value).toContain('2025');
+  });
+
+  test('panel host gets role="dialog"', () => {
+    const fixture = TestBed.createComponent(HostPicker);
+    fixture.detectChanges();
+    const panel = fixture.nativeElement.querySelector('[kjDatePickerCalendar]');
+    expect(panel.getAttribute('role')).toBe('dialog');
+  });
+});

package/src/date-picker/date-picker.ts

@@ -0,0 +1,127 @@
+import {
+  Directive,
+  LOCALE_ID,
+  booleanAttribute,
+  computed,
+  inject,
+  input,
+  model,
+} from '@angular/core';
+import { KjDisabled } from '../primitives/interaction/disabled';
+import { startOfDay } from '../calendar/date-utils';
+import { KJ_DATE_PICKER, type KjDatePickerContext } from './date-picker.context';
+
+let _panelIdCounter = 0;
+function nextPanelId(): string {
+  _panelIdCounter += 1;
+  return `kj-date-picker-panel-${_panelIdCounter}`;
+}
+
+/**
+ * Headless Date Picker root. Owns the value, the bounds / locale config, and
+ * a two-way bindable `kjOpen` model. The actual show/hide wiring (and the
+ * minted panel id) lives on the overlay primitives composed by
+ * `KjDatePickerTrigger` (`KjOverlayTrigger`) and `KjDatePickerCalendar`
+ * (`KjOverlayPanel`); the trigger bridges its overlay controller back into
+ * this root's `kjOpen` model.
+ *
+ * Native `Date` only — locale-aware via `Intl.DateTimeFormat`.
+ *
+ * **Compound shape:**
+ *
+ * ```html
+ * <div kjDatePicker [(kjValue)]="when">
+ *   <input kjDatePickerTrigger #t="kjDatePickerTrigger" />
+ *   <div kjDatePickerCalendar [kjFor]="t"></div>
+ * </div>
+ * ```
+ *
+ * @doc-category Core/Data input
+ * @doc
+ * @doc-name date-picker
+ * @doc-description Unstyled date-picker root that owns the selected date, popover state, locale, and bounds.
+ * @doc-is-main
+ */
+@Directive({
+  selector: '[kjDatePicker]',
+  standalone: true,
+  exportAs: 'kjDatePicker',
+  hostDirectives: [
+    { directive: KjDisabled, inputs: ['kjDisabled'] },
+  ],
+  providers: [
+    { provide: KJ_DATE_PICKER, useExisting: KjDatePicker },
+  ],
+})
+export class KjDatePicker implements KjDatePickerContext {
+  private readonly disabledHost = inject(KjDisabled);
+  private readonly defaultLocale = inject(LOCALE_ID);
+
+  /** Current selected value. Two-way bindable — `[(kjValue)]`. */
+  readonly kjValue = model<Date | null>(null);
+
+  /** Earliest selectable date (inclusive). */
+  readonly kjMin = input<Date | null>(null);
+
+  /** Latest selectable date (inclusive). */
+  readonly kjMax = input<Date | null>(null);
+
+  /** Per-date predicate. */
+  readonly kjDisabledDates = input<((d: Date) => boolean) | null>(null);
+
+  /** BCP-47 locale tag. Defaults to Angular's `LOCALE_ID`. */
+  readonly kjLocale = input<string>('');
+
+  /** First day of the week override (0=Sun … 6=Sat). */
+  readonly kjFirstDayOfWeek = input<number | null>(null);
+
+  /** Read-only — value displays but cannot be edited. */
+  readonly kjReadonly = input<boolean, boolean | string>(false, { transform: booleanAttribute });
+
+  /**
+   * Two-way bindable open state for the popover. Bridged to the trigger's
+   * overlay controller — flipping this opens/closes the calendar.
+   */
+  readonly kjOpen = model<boolean>(false);
+
+  // ── KjDatePickerContext implementation ─────────────────────────────
+
+  readonly value = this.kjValue.asReadonly();
+  readonly open = this.kjOpen;
+  /**
+   * @deprecated The real panel id is minted by the composed
+   * `KjOverlayPanel` host directive on `KjDatePickerCalendar`. Retained as a
+   * stable string so existing template references compile; consumers should
+   * migrate to `[kjFor]="trigger"` for `aria-controls` wiring.
+   */
+  readonly panelId = nextPanelId();
+  readonly minDate = computed(() => this.kjMin());
+  readonly maxDate = computed(() => this.kjMax());
+  readonly disabledDates = computed(() => this.kjDisabledDates());
+  readonly locale = computed(() => this.kjLocale() || this.defaultLocale);
+  readonly disabled = this.disabledHost.disabled;
+  readonly readonly = computed(() => this.kjReadonly());
+
+  /** First-day-of-week override (re-exposed for the projected calendar). */
+  readonly firstDayOfWeek = computed(() => this.kjFirstDayOfWeek());
+
+  selectDate(date: Date): void {
+    if (this.disabled() || this.readonly()) return;
+    this.kjValue.set(startOfDay(date));
+    this.kjOpen.set(false);
+  }
+
+  show(): void {
+    if (this.disabled() || this.readonly()) return;
+    this.kjOpen.set(true);
+  }
+
+  hide(): void {
+    this.kjOpen.set(false);
+  }
+
+  toggle(): void {
+    if (this.kjOpen()) this.hide();
+    else this.show();
+  }
+}

package/src/date-picker/index.ts

@@ -0,0 +1,7 @@
+export { KjDatePicker } from './date-picker';
+export { KjDatePickerTrigger } from './date-picker-trigger';
+export { KjDatePickerCalendar } from './date-picker-calendar';
+export {
+  KJ_DATE_PICKER,
+  type KjDatePickerContext,
+} from './date-picker.context';