@kouji-ui/core 0.1.1 → 0.1.2

package/src/input-group/input-group-addon.ts

@@ -1,92 +0,0 @@
-import {
-  DestroyRef,
-  Directive,
-  Signal,
-  booleanAttribute,
-  computed,
-  inject,
-  input,
-} from '@angular/core';
-import { KJ_INPUT_GROUP } from './input-group.context';
-
-/** Auto-incrementing counter for stable addon ids. */
-let _nextId = 0;
-
-/**
- * Marks an element as a prefix or suffix addon inside a `[kjInputGroup]`.
- *
- * Auto-mints a stable `id` (e.g. `kj-addon-0`) so the parent group can build
- * `aria-labelledby` lists. Registers with the group on construction and
- * deregisters on destroy.
- *
- * - `kjPosition='start'` — always treated as a leading addon.
- * - `kjPosition='end'`   — always treated as a trailing addon.
- * - `kjPosition='auto'`  — inferred from DOM order (default).
- *
- * Set `kjAriaHidden="true"` (or omit) to mark decorative addons (icons,
- * currency symbols, etc.) that do not need to participate in
- * `aria-labelledby`.
- *
- * @example
- * ```html
- * <span kjInputGroupAddon>$</span>
- * <input kjInput type="text" placeholder="Amount" />
- * <span kjInputGroupAddon kjPosition="end">.00</span>
- * ```
- * @doc-category Core/Inputs
- * @doc
- * @doc-name input-group
- */
-@Directive({
-  selector: '[kjInputGroupAddon]',
-  standalone: true,
-  exportAs: 'kjInputGroupAddon',
-  host: {
-    '[id]': 'addonId',
-    '[attr.aria-hidden]': 'kjAriaHidden() != null ? (kjAriaHidden() ? "true" : null) : null',
-    '[attr.data-position]': 'kjPosition()',
-  },
-})
-export class KjInputGroupAddon {
-  private readonly _group = inject(KJ_INPUT_GROUP, { optional: true });
-  private readonly _destroyRef = inject(DestroyRef);
-
-  /** Stable id for this addon — set once at construction time. */
-  readonly addonId = `kj-addon-${_nextId++}`;
-
-  /**
-   * Explicit position override. When `'auto'` (default), position is inferred
-   * from DOM order within the group.
-   */
-  readonly kjPosition = input<'start' | 'end' | 'auto'>('auto');
-
-  /**
-   * When `true`, marks this addon as decorative (`aria-hidden="true"`).
-   * When `false`, ensures the element is not hidden.
-   * When `undefined` (default), no `aria-hidden` attribute is written.
-   */
-  readonly kjAriaHidden = input<boolean | undefined, boolean | string | undefined>(undefined, {
-    transform: (v: boolean | string | undefined): boolean | undefined => {
-      if (v === undefined || v === '') return undefined;
-      return booleanAttribute(v);
-    },
-  });
-
-  /** `true` when this addon should be excluded from `aria-labelledby` composition. */
-  readonly isDecorative: Signal<boolean> = computed(() => this.kjAriaHidden() === true);
-
-  constructor() {
-    if (this._group) {
-      const group = this._group;
-      const id = this.addonId;
-      const position = this.kjPosition;
-      const isDecorative = this.isDecorative;
-
-      group.registerAddon({ id, position, isDecorative });
-
-      this._destroyRef.onDestroy(() => {
-        group.unregisterAddon(id);
-      });
-    }
-  }
-}

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

@@ -1,27 +0,0 @@
-import { InjectionToken, Signal } from '@angular/core';
-
-/**
- * Context interface surfaced by `KjInputGroup` for child addons and inputs.
- *
- * - `variant` / `size` / `disabled` propagate from the group to children.
- * - `startAddonIds` / `endAddonIds` track registered addon ids for ARIA composition.
- * - `registerAddon` / `unregisterAddon` maintain the addon registry.
- * - `grouped: true` is a type discriminant that proves a context token is present.
- */
-export interface KjInputGroupContext {
-  readonly variant: Signal<string | undefined>;
-  readonly size: Signal<string | undefined>;
-  readonly disabled: Signal<boolean>;
-  readonly grouped: true;
-  readonly startAddonIds: Signal<readonly string[]>;
-  readonly endAddonIds: Signal<readonly string[]>;
-  registerAddon(addon: {
-    id: string;
-    position: Signal<'start' | 'end' | 'auto'>;
-    isDecorative: Signal<boolean>;
-  }): void;
-  unregisterAddon(id: string): void;
-}
-
-/** Injection token for `KjInputGroupContext`. */
-export const KJ_INPUT_GROUP = new InjectionToken<KjInputGroupContext>('KjInputGroup');

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

@@ -1,186 +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 { KjInputGroupAddon } from './input-group-addon';
-import { KjInputGroup } from './input-group';
-import { KJ_INPUT_GROUP } from './input-group.context';
-
-expect.extend(toHaveNoViolations);
-
-describe('KjInputGroup', () => {
-  it('renders without error', async () => {
-    const { container } = await render(
-      `<div kjInputGroup>
-         <span kjInputGroupAddon>$</span>
-       </div>`,
-      { imports: [KjInputGroup, KjInputGroupAddon] },
-    );
-    expect(container.querySelector('[kjInputGroup]')).toBeInTheDocument();
-  });
-
-  it('defaults to horizontal orientation', async () => {
-    const { container } = await render(
-      `<div kjInputGroup><span kjInputGroupAddon>$</span></div>`,
-      { imports: [KjInputGroup, KjInputGroupAddon] },
-    );
-    const host = container.querySelector('[kjInputGroup]') as HTMLElement;
-    expect(host.getAttribute('data-orientation')).toBe('horizontal');
-  });
-
-  it('reflects kjOrientation="vertical" to data-orientation', async () => {
-    const { container } = await render(
-      `<div kjInputGroup [kjOrientation]="'vertical'"><span kjInputGroupAddon>$</span></div>`,
-      { imports: [KjInputGroup, KjInputGroupAddon] },
-    );
-    const host = container.querySelector('[kjInputGroup]') as HTMLElement;
-    expect(host.getAttribute('data-orientation')).toBe('vertical');
-  });
-
-  it('sets data-disabled when kjDisabled is true', async () => {
-    const { container } = await render(
-      `<div kjInputGroup [kjDisabled]="true"><span kjInputGroupAddon>$</span></div>`,
-      { imports: [KjInputGroup, KjInputGroupAddon] },
-    );
-    const host = container.querySelector('[kjInputGroup]') as HTMLElement;
-    expect(host.getAttribute('data-disabled')).toBe('');
-  });
-
-  it('omits data-disabled when kjDisabled is false', async () => {
-    const { container } = await render(
-      `<div kjInputGroup><span kjInputGroupAddon>$</span></div>`,
-      { imports: [KjInputGroup, KjInputGroupAddon] },
-    );
-    const host = container.querySelector('[kjInputGroup]') as HTMLElement;
-    expect(host.hasAttribute('data-disabled')).toBe(false);
-  });
-
-  it('provides KJ_INPUT_GROUP context', async () => {
-    let captured: ReturnType<typeof inject<typeof KJ_INPUT_GROUP>> | undefined;
-
-    @Component({
-      selector: 'kj-ig-probe',
-      standalone: true,
-      template: '',
-    })
-    class Probe {
-      constructor() {
-        captured = inject(KJ_INPUT_GROUP);
-      }
-    }
-
-    await render(
-      `<div kjInputGroup [kjDisabled]="false">
-         <kj-ig-probe />
-       </div>`,
-      { imports: [KjInputGroup, Probe] },
-    );
-
-    expect(captured).toBeDefined();
-    expect(captured!.grouped).toBe(true);
-    expect(captured!.disabled()).toBe(false);
-  });
-
-  it('addons register with the group and expose an id', async () => {
-    let captured: ReturnType<typeof inject<typeof KJ_INPUT_GROUP>> | undefined;
-
-    @Component({
-      selector: 'kj-ig-ctx-probe',
-      standalone: true,
-      template: '',
-    })
-    class CtxProbe {
-      constructor() {
-        captured = inject(KJ_INPUT_GROUP);
-      }
-    }
-
-    await render(
-      `<div kjInputGroup>
-         <span kjInputGroupAddon>$</span>
-         <kj-ig-ctx-probe />
-         <span kjInputGroupAddon kjPosition="end">.00</span>
-       </div>`,
-      { imports: [KjInputGroup, KjInputGroupAddon, CtxProbe] },
-    );
-
-    // After both addons register, there should be entries in start / end ids.
-    expect(captured).toBeDefined();
-    // Non-decorative addons appear in either startAddonIds or endAddonIds.
-    const allIds = [...captured!.startAddonIds(), ...captured!.endAddonIds()];
-    expect(allIds.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it('addon with kjAriaHidden="true" is excluded from id lists', async () => {
-    let captured: ReturnType<typeof inject<typeof KJ_INPUT_GROUP>> | undefined;
-
-    @Component({
-      selector: 'kj-ig-hidden-probe',
-      standalone: true,
-      template: '',
-    })
-    class HiddenProbe {
-      constructor() {
-        captured = inject(KJ_INPUT_GROUP);
-      }
-    }
-
-    await render(
-      `<div kjInputGroup>
-         <span kjInputGroupAddon [kjAriaHidden]="true">icon</span>
-         <kj-ig-hidden-probe />
-       </div>`,
-      { imports: [KjInputGroup, KjInputGroupAddon, HiddenProbe] },
-    );
-
-    expect(captured).toBeDefined();
-    const allIds = [...captured!.startAddonIds(), ...captured!.endAddonIds()];
-    expect(allIds.length).toBe(0);
-  });
-
-  it('addon reflects kjPosition to data-position attribute', async () => {
-    const { container } = await render(
-      `<div kjInputGroup>
-         <span kjInputGroupAddon kjPosition="end">.00</span>
-       </div>`,
-      { imports: [KjInputGroup, KjInputGroupAddon] },
-    );
-    const addon = container.querySelector('[kjInputGroupAddon]') as HTMLElement;
-    expect(addon.getAttribute('data-position')).toBe('end');
-  });
-
-  it('addon sets aria-hidden="true" when kjAriaHidden is true', async () => {
-    const { container } = await render(
-      `<div kjInputGroup>
-         <span kjInputGroupAddon [kjAriaHidden]="true">icon</span>
-       </div>`,
-      { imports: [KjInputGroup, KjInputGroupAddon] },
-    );
-    const addon = container.querySelector('[kjInputGroupAddon]') as HTMLElement;
-    expect(addon.getAttribute('aria-hidden')).toBe('true');
-  });
-
-  it('addon does not set aria-hidden when kjAriaHidden is undefined', async () => {
-    const { container } = await render(
-      `<div kjInputGroup>
-         <span kjInputGroupAddon>$</span>
-       </div>`,
-      { imports: [KjInputGroup, KjInputGroupAddon] },
-    );
-    const addon = container.querySelector('[kjInputGroupAddon]') as HTMLElement;
-    expect(addon.hasAttribute('aria-hidden')).toBe(false);
-  });
-
-  it('passes axe audit', async () => {
-    const { container } = await render(
-      `<div kjInputGroup aria-label="Amount">
-         <span kjInputGroupAddon aria-hidden="true">$</span>
-         <input type="text" aria-label="Amount" placeholder="Amount" />
-         <span kjInputGroupAddon aria-hidden="true">.00</span>
-       </div>`,
-      { imports: [KjInputGroup, KjInputGroupAddon] },
-    );
-    expect(await axe(container)).toHaveNoViolations();
-  });
-});

package/src/input-group/input-group.ts

@@ -1,136 +0,0 @@
-import {
-  Directive,
-  Signal,
-  WritableSignal,
-  booleanAttribute,
-  computed,
-  inject,
-  input,
-  signal,
-} from '@angular/core';
-import { KjDisabled } from '../primitives/interaction/disabled';
-import { KjSize } from '../presets/size';
-import { KjVariant } from '../presets/variant';
-import { KJ_INPUT_GROUP, KjInputGroupContext } from './input-group.context';
-
-/** Internal shape stored in the addon registry. */
-interface AddonEntry {
-  id: string;
-  position: Signal<'start' | 'end' | 'auto'>;
-  isDecorative: Signal<boolean>;
-}
-
-/**
- * Coordinates a group of `[kjInputGroupAddon]` elements flanking a central
- * `[kjInput]`. Provides the `KJ_INPUT_GROUP` context token, propagates
- * variant/size/disabled to children, and builds the `startAddonIds` /
- * `endAddonIds` lists used to compose `aria-labelledby` on the inner input.
- *
- * The directive is structural-only: it does not render any DOM of its own.
- * Visual concerns live in `packages/components/src/input-group/`.
- *
- * @example
- * ```html
- * <div kjInputGroup [kjOrientation]="'horizontal'">
- *   <span kjInputGroupAddon>$</span>
- *   <input kjInput type="text" placeholder="Amount" />
- *   <span kjInputGroupAddon kjPosition="end">.00</span>
- * </div>
- * ```
- * @doc-category Core/Inputs
- * @doc
- * @doc-name input-group
- * @doc-description Groups an input with prefix and suffix addons that share variant, size, and disabled state.
- * @doc-is-main
- */
-@Directive({
-  selector: '[kjInputGroup]',
-  standalone: true,
-  exportAs: 'kjInputGroup',
-  hostDirectives: [
-    { directive: KjVariant, inputs: ['kjVariant'] },
-    { directive: KjSize, inputs: ['kjSize'] },
-    { directive: KjDisabled, inputs: ['kjDisabled'] },
-  ],
-  providers: [{ provide: KJ_INPUT_GROUP, useExisting: KjInputGroup }],
-  host: {
-    '[attr.data-orientation]': 'kjOrientation()',
-    '[attr.data-disabled]': 'aggregateDisabled() ? "" : null',
-  },
-})
-export class KjInputGroup implements KjInputGroupContext {
-  private readonly _variantDir = inject(KjVariant);
-  private readonly _sizeDir = inject(KjSize);
-  private readonly _disabledDir = inject(KjDisabled);
-
-  /** Layout axis for the group. */
-  readonly kjOrientation = input<'horizontal' | 'vertical'>('horizontal');
-
-  /** Disabled input (forwarded from `KjDisabled`). */
-  readonly kjDisabled = input(false, { transform: booleanAttribute });
-
-  // ── Addon registry ──────────────────────────────────────────────────────
-  private readonly _addons: WritableSignal<readonly AddonEntry[]> = signal([]);
-
-  /** Ids of addons positioned at the start of the group. */
-  readonly startAddonIds: Signal<readonly string[]> = computed(() =>
-    this._addons()
-      .filter(a => {
-        const pos = a.position();
-        return pos === 'start' || (pos === 'auto' && this._addons().indexOf(a) < this._firstNonStartIndex());
-      })
-      .filter(a => !a.isDecorative())
-      .map(a => a.id),
-  );
-
-  /** Ids of addons positioned at the end of the group. */
-  readonly endAddonIds: Signal<readonly string[]> = computed(() =>
-    this._addons()
-      .filter(a => {
-        const pos = a.position();
-        return pos === 'end' || (pos === 'auto' && this._addons().indexOf(a) >= this._firstNonStartIndex());
-      })
-      .filter(a => !a.isDecorative())
-      .map(a => a.id),
-  );
-
-  // ── KjInputGroupContext ──────────────────────────────────────────────────
-  readonly grouped = true as const;
-
-  get variant(): Signal<string | undefined> {
-    return this._variantDir.kjVariant as Signal<string | undefined>;
-  }
-
-  get size(): Signal<string | undefined> {
-    return this._sizeDir.kjSize as Signal<string | undefined>;
-  }
-
-  get disabled(): Signal<boolean> {
-    return this._disabledDir.disabled;
-  }
-
-  /** OR of own disabled flag. Exposed for host bindings and children. */
-  readonly aggregateDisabled = computed(() => this._disabledDir.disabled());
-
-  registerAddon(addon: AddonEntry): void {
-    this._addons.update(prev => [...prev, addon]);
-  }
-
-  unregisterAddon(id: string): void {
-    this._addons.update(prev => prev.filter(a => a.id !== id));
-  }
-
-  // ── Helpers ─────────────────────────────────────────────────────────────
-
-  /**
-   * Returns the index of the first addon whose `position` signal is not
-   * `'start'` — used as the boundary between start and end in `'auto'` mode.
-   */
-  private _firstNonStartIndex(): number {
-    const addons = this._addons();
-    for (let i = 0; i < addons.length; i++) {
-      if (addons[i].position() !== 'start') return i;
-    }
-    return addons.length;
-  }
-}

package/src/input-mask/index.ts

@@ -1,11 +0,0 @@
-export { KjInputMask } from './input-mask';
-export { compileMask } from './input-mask.compile';
-export type { Slot, CompiledMask } from './input-mask.compile';
-export { MaskEngine } from './input-mask.engine';
-export type { MaskEngineCallbacks, MaskEngineOptions } from './input-mask.engine';
-export {
-  KJ_INPUT_MASK_TOKENS,
-  defaultMaskTokens,
-  provideKjInputMaskTokens,
-} from './input-mask.tokens';
-export { KJ_INPUT_MASK_PRESETS } from './input-mask.presets';

package/src/input-mask/input-mask.compile.ts

@@ -1,69 +0,0 @@
-/**
- * A single slot in a compiled mask.
- * - `literal`: a fixed character that is always rendered and skipped by the caret.
- * - `variable`: a user-fillable position with a regex that filters keystrokes.
- */
-export type Slot =
-  | { kind: 'literal'; char: string }
-  | { kind: 'variable'; tokenId: string; re: RegExp };
-
-/** Result of compiling a mask template string. */
-export interface CompiledMask {
-  /** Full slot vector — one entry per character position in the display string. */
-  readonly slots: ReadonlyArray<Slot>;
-  /** Positions (in `slots`) that are variable (user-fillable). */
-  readonly variableIndices: ReadonlyArray<number>;
-  readonly literalCount: number;
-  readonly variableCount: number;
-}
-
-/**
- * Compiles a mask template string into a `CompiledMask`.
- *
- * Token characters (keys of `tokens`) become variable slots. Any other
- * character becomes a literal slot. Escape a token character with a leading
- * backslash: `\\9` → literal `9`.
- *
- * @example
- * ```ts
- * const mask = compileMask('(999) 999-9999', { '9': /[0-9]/ });
- * // mask.variableCount === 10
- * // mask.slots[0] === { kind: 'literal', char: '(' }
- * // mask.slots[1] === { kind: 'variable', tokenId: '9', re: /[0-9]/ }
- * ```
- */
-export function compileMask(
-  template: string,
-  tokens: Record<string, RegExp>,
-): CompiledMask {
-  const slots: Slot[] = [];
-  const variableIndices: number[] = [];
-  let i = 0;
-
-  while (i < template.length) {
-    const ch = template[i];
-
-    // Escape: \\ followed by any character → literal of that character
-    if (ch === '\\' && i + 1 < template.length) {
-      slots.push({ kind: 'literal', char: template[i + 1] });
-      i += 2;
-      continue;
-    }
-
-    const re = tokens[ch];
-    if (re) {
-      variableIndices.push(slots.length);
-      slots.push({ kind: 'variable', tokenId: ch, re });
-    } else {
-      slots.push({ kind: 'literal', char: ch });
-    }
-    i++;
-  }
-
-  return {
-    slots,
-    variableIndices,
-    literalCount: slots.length - variableIndices.length,
-    variableCount: variableIndices.length,
-  };
-}