@kouji-ui/core 0.1.1 → 0.1.3

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

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

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

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

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

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

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