@kouji-ui/core 0.1.1 → 0.1.2

package/src/button/config.ts

@@ -1,45 +0,0 @@
-import { InjectionToken, Provider } from '@angular/core';
-
-export interface KjButtonConfig {
-  variants: string[];
-  sizes: string[];
-  defaults: { variant: string; size: string };
-}
-
-/**
- * Default Button presets shipped by kouji-ui. Exported so consumers can spread
- * them when extending: `[...KJ_BUTTON_DEFAULTS.variants, 'brand']`.
- */
-export const KJ_BUTTON_DEFAULTS: KjButtonConfig = {
-  variants: ['default', 'destructive', 'outline', 'ghost', 'link'],
-  sizes: ['sm', 'md', 'lg', 'xl', 'icon'],
-  defaults: { variant: 'default', size: 'md' },
-};
-
-/**
- * DI token for the active Button presets. Default factory yields
- * `KJ_BUTTON_DEFAULTS`. Override via `provideKjButton(…)` at the application
- * scope (e.g. `bootstrapApplication`'s `providers` or a route's `providers`)
- * or at the component scope (a component's own `providers: […]`).
- */
-export const KJ_BUTTON_CONFIG = new InjectionToken<KjButtonConfig>('kj.button.config', {
-  factory: () => KJ_BUTTON_DEFAULTS,
-});
-
-/**
- * Configures the Button presets for the enclosing injector. Replaces (does
- * not merge) `variants` and `sizes`; spread `KJ_BUTTON_DEFAULTS.variants` to
- * extend.
- *
- * Returns a `Provider[]` so it can be spread into either an environment
- * `providers` (`bootstrapApplication`, route config) or a component-level
- * `providers` array.
- */
-export function provideKjButton(config: Partial<KjButtonConfig>): Provider[] {
-  return [
-    {
-      provide: KJ_BUTTON_CONFIG,
-      useValue: { ...KJ_BUTTON_DEFAULTS, ...config },
-    },
-  ];
-}

package/src/button/index.ts

@@ -1,2 +0,0 @@
-export * from './button';
-export * from './config';

package/src/button-group/button-group.context.ts

@@ -1,28 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-
-/** Layout axis for the button group. */
-export type KjButtonGroupOrientation = 'horizontal' | 'vertical';
-
-/**
- * Shared state surfaced by `KjButtonGroup` for child buttons (in the wrapper
- * package) and the wrapper template to read.
- *
- * - `orientation` drives layout / styling hooks.
- * - `variant` / `size` are *defaults* — children may override per-instance.
- * - `disabled` is OR-ed into each child's own disabled state.
- */
-export interface KjButtonGroupContext {
-  /** Layout axis (default `'horizontal'`). */
-  readonly orientation: Signal<KjButtonGroupOrientation>;
-  /** Variant token forwarded from the group as a default for children. */
-  readonly variant: Signal<string | undefined>;
-  /** Size token forwarded from the group as a default for children. */
-  readonly size: Signal<string | undefined>;
-  /** Group-level disabled flag, OR-ed into each child's own state. */
-  readonly disabled: Signal<boolean>;
-}
-
-/** Injection token for `KjButtonGroupContext`. */
-export const KJ_BUTTON_GROUP = new InjectionToken<KjButtonGroupContext>(
-  'KjButtonGroup',
-);

package/src/button-group/button-group.spec.ts

@@ -1,99 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { render } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import { describe, expect, it } from 'vitest';
-
-import { KjButton } from '../button/button';
-import { KjButtonGroup } from './button-group';
-import { KJ_BUTTON_GROUP } from './button-group.context';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjButtonGroup', () => {
-  it('renders with role="group"', async () => {
-    const { container } = await render(
-      `<div kjButtonGroup>
-         <button kjButton>One</button>
-         <button kjButton>Two</button>
-       </div>`,
-      { imports: [KjButtonGroup, KjButton] },
-    );
-    const host = container.querySelector('[kjButtonGroup]') as HTMLElement;
-    expect(host.getAttribute('role')).toBe('group');
-  });
-
-  it('defaults to horizontal orientation', async () => {
-    const { container } = await render(
-      `<div kjButtonGroup><button kjButton>x</button></div>`,
-      { imports: [KjButtonGroup, KjButton] },
-    );
-    const host = container.querySelector('[kjButtonGroup]') as HTMLElement;
-    expect(host.getAttribute('data-orientation')).toBe('horizontal');
-  });
-
-  it('reflects kjOrientation="vertical" to data-orientation', async () => {
-    const { container } = await render(
-      `<div kjButtonGroup [kjOrientation]="'vertical'"><button kjButton>x</button></div>`,
-      { imports: [KjButtonGroup, KjButton] },
-    );
-    const host = container.querySelector('[kjButtonGroup]') as HTMLElement;
-    expect(host.getAttribute('data-orientation')).toBe('vertical');
-  });
-
-  it('writes data-disabled when kjDisabled is true', async () => {
-    const { container } = await render(
-      `<div kjButtonGroup [kjDisabled]="true"><button kjButton>x</button></div>`,
-      { imports: [KjButtonGroup, KjButton] },
-    );
-    const host = container.querySelector('[kjButtonGroup]') as HTMLElement;
-    expect(host.getAttribute('data-disabled')).toBe('');
-  });
-
-  it('omits data-disabled when kjDisabled is false', async () => {
-    const { container } = await render(
-      `<div kjButtonGroup><button kjButton>x</button></div>`,
-      { imports: [KjButtonGroup, KjButton] },
-    );
-    const host = container.querySelector('[kjButtonGroup]') as HTMLElement;
-    expect(host.hasAttribute('data-disabled')).toBe(false);
-  });
-
-  it('provides KJ_BUTTON_GROUP context with variant and size signals', async () => {
-    let captured: ReturnType<typeof inject<typeof KJ_BUTTON_GROUP>> | undefined;
-
-    @Component({
-      selector: 'kj-bg-probe',
-      standalone: true,
-      template: '',
-    })
-    class Probe {
-      constructor() {
-        captured = inject(KJ_BUTTON_GROUP);
-      }
-    }
-
-    await render(
-      `<div kjButtonGroup [kjVariant]="'outline'" [kjSize]="'sm'">
-         <kj-bg-probe />
-       </div>`,
-      { imports: [KjButtonGroup, Probe] },
-    );
-
-    expect(captured).toBeDefined();
-    expect(captured!.variant()).toBe('outline');
-    expect(captured!.size()).toBe('sm');
-    expect(captured!.orientation()).toBe('horizontal');
-    expect(captured!.disabled()).toBe(false);
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(
-      `<div kjButtonGroup>
-         <button kjButton>Save</button>
-         <button kjButton>Cancel</button>
-       </div>`,
-      { imports: [KjButtonGroup, KjButton] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/button-group/button-group.ts

@@ -1,99 +0,0 @@
-import { Directive, Signal, booleanAttribute, input } from '@angular/core';
-import {
-  KJ_BUTTON_GROUP,
-  KjButtonGroupContext,
-  KjButtonGroupOrientation,
-} from './button-group.context';
-
-/**
- * Coordinates a visually-joined cluster of `KjButton` children. Owns the
- * group's layout role (`role="group"`), orientation, and the per-group
- * variant/size defaults that child buttons read via the `KJ_BUTTON_GROUP`
- * context token (children fall back to the group's value when they don't
- * set their own variant/size).
- *
- * The directive is structural-only: it sets the host role, ARIA orientation,
- * and `data-orientation` attribute used by the wrapper package's segmented
- * styling. It does not own selection state, dropdown wiring, or roving
- * tabindex — keep those in dedicated directives (see `button-group.md`).
- *
- * Disabled propagates: when `kjDisabled` is true, every projected child
- * `KjButton` reads it from the context and OR-s it with its own.
- *
- * @example
- * ```html
- * <div kjButtonGroup [kjOrientation]="'horizontal'" [kjVariant]="'outline'">
- *   <button kjButton>Save</button>
- *   <button kjButton>Cancel</button>
- *   <button kjButton>Delete</button>
- * </div>
- * ```
- * @doc-category Core/Actions
- * @doc
- * @doc-name button-group
- * @doc-description Unstyled button group that shares variant, size, and disabled defaults across child buttons.
- * @doc-is-main
- */
-@Directive({
-  selector: '[kjButtonGroup]',
-  standalone: true,
-  exportAs: 'kjButtonGroup',
-  providers: [{ provide: KJ_BUTTON_GROUP, useExisting: KjButtonGroup }],
-  host: {
-    '[attr.role]': '"group"',
-    // `role="group"` does not accept `aria-orientation` per WAI-ARIA, so the
-    // orientation is only surfaced as a styling hook via `data-orientation`.
-    // Roles that *do* take the attribute (e.g. `toolbar`, `radiogroup`) are
-    // out of scope for this directive — see `button-group.md` for the
-    // dedicated toolbar/radiogroup variants.
-    '[attr.data-orientation]': 'kjOrientation()',
-    '[attr.data-disabled]': 'kjDisabled() ? "" : null',
-  },
-})
-export class KjButtonGroup implements KjButtonGroupContext {
-  /**
-   * Layout axis. Drives `aria-orientation` and the `data-orientation`
-   * styling hook used by the wrapper package's CSS.
-   * @default 'horizontal'
-   */
-  readonly kjOrientation = input<KjButtonGroupOrientation>('horizontal');
-
-  /**
-   * Default variant forwarded to children via `KJ_BUTTON_GROUP`. Children
-   * that set their own `kjVariant` override this; children that don't read
-   * the group's value as a fallback.
-   */
-  readonly kjVariant = input<string | undefined>(undefined);
-
-  /**
-   * Default size forwarded to children via `KJ_BUTTON_GROUP`. Per-child
-   * overrides win.
-   */
-  readonly kjSize = input<string | undefined>(undefined);
-
-  /**
-   * Group-level disabled flag. OR-ed with each child button's own
-   * `kjDisabled` — if either is `true` the child is disabled.
-   */
-  readonly kjDisabled = input(false, { transform: booleanAttribute });
-
-  /** Read-only context view — exposed for the wrapper / spec ergonomics. */
-  get orientation(): Signal<KjButtonGroupOrientation> {
-    return this.kjOrientation;
-  }
-
-  /** Read-only context view. */
-  get variant(): Signal<string | undefined> {
-    return this.kjVariant;
-  }
-
-  /** Read-only context view. */
-  get size(): Signal<string | undefined> {
-    return this.kjSize;
-  }
-
-  /** Read-only context view. */
-  get disabled(): Signal<boolean> {
-    return this.kjDisabled;
-  }
-}

package/src/button-group/index.ts

@@ -1,2 +0,0 @@
-export * from './button-group';
-export * from './button-group.context';

package/src/calendar/calendar-day.ts

@@ -1,102 +0,0 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import {
-  Directive,
-  ElementRef,
-  PLATFORM_ID,
-  computed,
-  effect,
-  inject,
-  input,
-} from '@angular/core';
-import { formatDateLong, isSameDay, isSameMonth } from './date-utils';
-import { KJ_CALENDAR } from './calendar.context';
-
-/**
- * A single day cell in the calendar grid. Apply to a `<button>` (preferred —
- * native focusability) or a `<td>` containing a `<button>`. Exposes the
- * computed flags `isSelected`, `isToday`, `isDisabled`, `isOutsideMonth` as
- * `data-*` attributes so themes paint without re-deriving them.
- *
- * Roving `tabindex`: only the cell whose date matches `focusedDate()` carries
- * `tabindex="0"`; all others are `tabindex="-1"`. Clicking a cell calls
- * `selectDate()` on the context.
- *
- * The host's `aria-label` is auto-set to a locale-aware long form
- * (`"Tuesday, April 15, 2025"`) for SR clarity. Visible text is the
- * day-of-month only (consumer renders `{{ day.dayNumber() }}`).
- *
- * @doc-category Core/Data input
- * @doc
- * @doc-name calendar
- */
-@Directive({
-  selector: '[kjCalendarDay]',
-  standalone: true,
-  exportAs: 'kjCalendarDay',
-  host: {
-    'role': 'gridcell',
-    'type': 'button',
-    '[attr.aria-label]': 'ariaLabel()',
-    '[attr.aria-selected]': 'isSelected() ? "true" : null',
-    '[attr.aria-current]': 'isToday() ? "date" : null',
-    '[attr.aria-disabled]': 'isDisabled() ? "true" : null',
-    '[attr.tabindex]': 'isFocused() ? "0" : "-1"',
-    '[attr.disabled]': 'isDisabled() ? "" : null',
-    '[attr.data-selected]': 'isSelected() ? "" : null',
-    '[attr.data-today]': 'isToday() ? "" : null',
-    '[attr.data-disabled]': 'isDisabled() ? "" : null',
-    '[attr.data-outside-month]': 'isOutsideMonth() ? "" : null',
-    '(click)': 'onClick($event)',
-  },
-})
-export class KjCalendarDay {
-  private readonly ctx = inject(KJ_CALENDAR);
-  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);
-  private readonly platformId = inject(PLATFORM_ID);
-  private readonly doc = inject(DOCUMENT);
-
-  /** The date this cell represents. */
-  readonly kjDate = input.required<Date>();
-
-  readonly isSelected = computed(() => {
-    const v = this.ctx.value();
-    return !!v && isSameDay(v, this.kjDate());
-  });
-
-  readonly isToday = computed(() => isSameDay(this.kjDate(), new Date()));
-
-  readonly isDisabled = computed(() => this.ctx.isDisabled(this.kjDate()));
-
-  readonly isFocused = computed(() => isSameDay(this.kjDate(), this.ctx.focusedDate()));
-
-  readonly isOutsideMonth = computed(
-    () => !isSameMonth(this.kjDate(), this.ctx.focusedDate()),
-  );
-
-  readonly ariaLabel = computed(() => formatDateLong(this.kjDate(), this.ctx.locale()));
-
-  /** Day-of-month number for the visible text. */
-  readonly dayNumber = computed(() => this.kjDate().getDate());
-
-  constructor() {
-    // Whenever this cell becomes the focused one, request focus.
-    effect(() => {
-      if (!isPlatformBrowser(this.platformId)) return;
-      if (this.isFocused() && this.doc.activeElement !== this.el.nativeElement) {
-        // Defer so the DOM has the new tabindex.
-        queueMicrotask(() => {
-          if (this.isFocused()) {
-            try { this.el.nativeElement.focus({ preventScroll: true }); } catch { /* noop */ }
-          }
-        });
-      }
-    });
-  }
-
-  /** @internal */
-  onClick(event: MouseEvent): void {
-    event.preventDefault();
-    if (this.isDisabled()) return;
-    this.ctx.selectDate(this.kjDate());
-  }
-}

package/src/calendar/calendar-grid.ts

@@ -1,90 +0,0 @@
-import { Directive, computed, inject } from '@angular/core';
-import {
-  buildMonthMatrix,
-  weekdayLongNames,
-  weekdayShortNames,
-} from './date-utils';
-import { KJ_CALENDAR } from './calendar.context';
-
-/**
- * Calendar grid directive. Hosts the `<table role="grid">` and exposes the
- * 6×7 day matrix plus locale-aware weekday headers. The `(keydown)` handler
- * implements the APG keyboard contract — see `KjCalendar` for the full key
- * map.
- *
- * @doc-category Core/Data input
- * @doc
- * @doc-name calendar
- */
-@Directive({
-  selector: '[kjCalendarGrid]',
-  standalone: true,
-  exportAs: 'kjCalendarGrid',
-  host: {
-    'role': 'grid',
-    '[attr.aria-labelledby]': 'ctx.captionId()',
-    '(keydown)': 'onKeydown($event)',
-  },
-})
-export class KjCalendarGrid {
-  /** @internal */
-  readonly ctx = inject(KJ_CALENDAR);
-
-  /** 6 weeks × 7 days for the focused month. */
-  readonly weeks = computed(() =>
-    buildMonthMatrix(this.ctx.focusedDate(), this.ctx.firstDayOfWeek()),
-  );
-
-  /** Localised short weekday names (`['Sun','Mon',…]`). */
-  readonly weekdayShort = computed(() =>
-    weekdayShortNames(this.ctx.locale(), this.ctx.firstDayOfWeek()),
-  );
-
-  /** Localised long weekday names (used for `<th abbr>`). */
-  readonly weekdayLong = computed(() =>
-    weekdayLongNames(this.ctx.locale(), this.ctx.firstDayOfWeek()),
-  );
-
-  /** @internal — APG keyboard contract for the grid. */
-  onKeydown(event: KeyboardEvent): void {
-    if (this.ctx.disabled()) return;
-    const key = event.key;
-    let handled = true;
-    switch (key) {
-      case 'ArrowLeft':
-        this.ctx.moveFocus('day', -1);
-        break;
-      case 'ArrowRight':
-        this.ctx.moveFocus('day', 1);
-        break;
-      case 'ArrowUp':
-        this.ctx.moveFocus('week', -1);
-        break;
-      case 'ArrowDown':
-        this.ctx.moveFocus('week', 1);
-        break;
-      case 'Home':
-        this.ctx.moveFocusToWeekBoundary('start');
-        break;
-      case 'End':
-        this.ctx.moveFocusToWeekBoundary('end');
-        break;
-      case 'PageUp':
-        this.ctx.moveFocus(event.shiftKey ? 'year' : 'month', -1);
-        break;
-      case 'PageDown':
-        this.ctx.moveFocus(event.shiftKey ? 'year' : 'month', 1);
-        break;
-      case 'Enter':
-      case ' ':
-        this.ctx.selectDate(this.ctx.focusedDate());
-        break;
-      default:
-        handled = false;
-    }
-    if (handled) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  }
-}

package/src/calendar/calendar-header.ts

@@ -1,65 +0,0 @@
-import { Directive, computed, inject } from '@angular/core';
-import { addMonths, formatMonthYear } from './date-utils';
-import { KJ_CALENDAR } from './calendar.context';
-
-/**
- * Calendar header directive. Carries the auto-minted caption id so the grid's
- * `aria-labelledby` resolves automatically. Exposes computed `label` for the
- * caption text (locale-aware "April 2025") and `prev` / `next` methods that
- * advance the focused date by ±1 month.
- *
- * Buttons inside the header are the consumer's responsibility — wire
- * `(click)="header.prev()"` and `(click)="header.next()"` and read
- * `header.label()` for the caption text.
- *
- * @doc-category Core/Data input
- * @doc
- * @doc-name calendar
- */
-@Directive({
-  selector: '[kjCalendarHeader]',
-  standalone: true,
-  exportAs: 'kjCalendarHeader',
-})
-export class KjCalendarHeader {
-  private readonly ctx = inject(KJ_CALENDAR);
-
-  /** The id assigned to the header caption (mirror onto the caption's `id`). */
-  readonly captionId = this.ctx.captionId;
-
-  /** Locale-aware caption text — e.g. `"April 2025"`. */
-  readonly label = computed(() =>
-    formatMonthYear(this.ctx.focusedDate(), this.ctx.locale()),
-  );
-
-  /** Whether the previous-month button should be disabled (out-of-bounds month). */
-  readonly prevDisabled = computed(() => {
-    const min = this.ctx.minDate();
-    if (!min) return false;
-    const prevMonth = addMonths(this.ctx.focusedDate(), -1);
-    // Disabled when the last day of the prev month is < min.
-    const lastOfPrev = new Date(prevMonth.getFullYear(), prevMonth.getMonth() + 1, 0);
-    return lastOfPrev.getTime() < min.getTime();
-  });
-
-  /** Whether the next-month button should be disabled. */
-  readonly nextDisabled = computed(() => {
-    const max = this.ctx.maxDate();
-    if (!max) return false;
-    const nextMonth = addMonths(this.ctx.focusedDate(), 1);
-    const firstOfNext = new Date(nextMonth.getFullYear(), nextMonth.getMonth(), 1);
-    return firstOfNext.getTime() > max.getTime();
-  });
-
-  /** Move focus to the previous month (same day-of-month, clamped). */
-  prev(): void {
-    if (this.prevDisabled()) return;
-    this.ctx.moveFocus('month', -1);
-  }
-
-  /** Move focus to the next month. */
-  next(): void {
-    if (this.nextDisabled()) return;
-    this.ctx.moveFocus('month', 1);
-  }
-}

package/src/calendar/calendar.context.ts

@@ -1,53 +0,0 @@
-import { InjectionToken, type Signal, type WritableSignal } from '@angular/core';
-
-/**
- * Shared state contract for the Calendar family. Implemented by `KjCalendar`
- * and consumed by `KjCalendarHeader`, `KjCalendarGrid`, and `KjCalendarDay`
- * via DI. Headless directives never read each other's inputs directly — they
- * always go through this context.
- *
- * @doc-category Core/Data input
- */
-export interface KjCalendarContext {
-  /** Locale BCP-47 tag (e.g. `'en-US'`, `'fr-FR'`). Drives weekday and month names. */
-  readonly locale: Signal<string>;
-
-  /** Current selection. `null` when nothing is selected. */
-  readonly value: Signal<Date | null>;
-
-  /** The "active" date — the cell that owns `tabindex=0`. Drives keyboard focus. */
-  readonly focusedDate: WritableSignal<Date>;
-
-  /** Earliest selectable date (inclusive). `null` = open. */
-  readonly minDate: Signal<Date | null>;
-
-  /** Latest selectable date (inclusive). `null` = open. */
-  readonly maxDate: Signal<Date | null>;
-
-  /** Per-date predicate; `false` blocks selection / focus. */
-  readonly disabledDates: Signal<((date: Date) => boolean) | null>;
-
-  /** First day of the week (0=Sun … 6=Sat). Locale-derived if undefined. */
-  readonly firstDayOfWeek: Signal<number>;
-
-  /** Whether the entire calendar is disabled. */
-  readonly disabled: Signal<boolean>;
-
-  /** Auto-minted id of the header caption — used for `aria-labelledby` on the grid. */
-  readonly captionId: Signal<string>;
-
-  /** Combined disabled predicate (min/max/filter/global disabled). */
-  isDisabled(date: Date): boolean;
-
-  /** Selects a date. No-op if disabled. */
-  selectDate(date: Date): void;
-
-  /** Moves the focused date by `delta` of the given unit, skipping disabled dates. */
-  moveFocus(unit: 'day' | 'week' | 'month' | 'year', delta: number): void;
-
-  /** Snaps focus to the start or end of the focused week. */
-  moveFocusToWeekBoundary(boundary: 'start' | 'end'): void;
-}
-
-/** DI token for the Calendar context. */
-export const KJ_CALENDAR = new InjectionToken<KjCalendarContext>('KjCalendar');