@kouji-ui/core 0.1.1 → 0.1.2

package/src/icon/icon.mode.spec.ts

@@ -1,29 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { getIconMode } from './icon.mode';
-
-describe('getIconMode', () => {
-  it('returns "font" when name starts with "@font."', () => {
-    expect(getIconMode('@font.fa-cog')).toBe('font');
-  });
-
-  it('returns "svg" for plain names', () => {
-    expect(getIconMode('settings')).toBe('svg');
-  });
-
-  it('returns "svg" for hyphenated names', () => {
-    expect(getIconMode('alert-triangle')).toBe('svg');
-  });
-
-  it('returns "svg" for namespaced names that are not @font', () => {
-    expect(getIconMode('lucide:settings')).toBe('svg');
-  });
-
-  it('returns "svg" for empty string', () => {
-    expect(getIconMode('')).toBe('svg');
-  });
-
-  it('returns "svg" for "@font" with no trailing dot', () => {
-    // Strict: must be exactly "@font." prefix; "@fontawesome" stays svg.
-    expect(getIconMode('@fontawesome')).toBe('svg');
-  });
-});

package/src/icon/icon.mode.ts

@@ -1,23 +0,0 @@
-// packages/core/src/icon/icon.mode.ts
-
-/**
- * Render mode inferred from an icon name.
- * @doc
- * @doc-name icon
- * @doc-order 14
- */
-export type IconMode = 'svg' | 'font';
-
-const FONT_PREFIX = '@font.';
-
-/**
- * Infer render mode from icon name. Names starting with `@font.` use the
- * font code path (CSS `content`); everything else uses the svg/css-mask
- * code path.
- * @doc
- * @doc-name icon
- * @doc-order 5
- */
-export function getIconMode(name: string): IconMode {
-  return name.startsWith(FONT_PREFIX) ? 'font' : 'svg';
-}

package/src/icon/icon.providers.spec.ts

@@ -1,63 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, it } from 'vitest';
-import {
-  provideIconLoader,
-  provideIconResolver,
-  provideIcons,
-} from './icon.providers';
-import {
-  KJ_ICON_LOADER,
-  KJ_ICON_REGISTRY,
-  KJ_ICON_RESOLVER,
-} from './icon.tokens';
-
-describe('provideIcons', () => {
-  it('seeds the registry with the given map', () => {
-    TestBed.configureTestingModule({
-      providers: [provideIcons({ settings: 'url("a")', save: 'url("b")' })],
-    });
-    const reg = TestBed.inject(KJ_ICON_REGISTRY);
-    expect(reg()).toEqual({ settings: 'url("a")', save: 'url("b")' });
-  });
-
-  it('merges multiple provideIcons calls (last wins on collision)', () => {
-    TestBed.configureTestingModule({
-      providers: [
-        provideIcons({ settings: 'url("first")', save: 'url("b")' }),
-        provideIcons({ settings: 'url("second")', trash: 'url("c")' }),
-      ],
-    });
-    const reg = TestBed.inject(KJ_ICON_REGISTRY);
-    expect(reg()).toEqual({
-      settings: 'url("second")',
-      save: 'url("b")',
-      trash: 'url("c")',
-    });
-  });
-
-  it('default registry is empty when no provideIcons is called', () => {
-    TestBed.configureTestingModule({ providers: [] });
-    const reg = TestBed.inject(KJ_ICON_REGISTRY);
-    expect(reg()).toEqual({});
-  });
-});
-
-describe('provideIconResolver', () => {
-  it('overrides the default resolver', () => {
-    TestBed.configureTestingModule({
-      providers: [provideIconResolver((n) => `url("/icons/${n}.svg")`)],
-    });
-    const fn = TestBed.inject(KJ_ICON_RESOLVER);
-    expect(fn('settings')).toBe('url("/icons/settings.svg")');
-  });
-});
-
-describe('provideIconLoader', () => {
-  it('registers an async loader', async () => {
-    const loader = async (n: string) => `url("loaded:${n}")`;
-    TestBed.configureTestingModule({ providers: [provideIconLoader(loader)] });
-    const fn = TestBed.inject(KJ_ICON_LOADER);
-    expect(fn).not.toBeNull();
-    await expect(fn!('x')).resolves.toBe('url("loaded:x")');
-  });
-});

package/src/icon/icon.providers.ts

@@ -1,47 +0,0 @@
-import {
-  type EnvironmentProviders,
-  makeEnvironmentProviders,
-} from '@angular/core';
-import type { IconLoader, IconResolver } from './icon.types';
-import {
-  KJ_ICON_ENTRIES,
-  KJ_ICON_LOADER,
-  KJ_ICON_RESOLVER,
-} from './icon.tokens';
-
-/**
- * Register a map of icon names to CSS-ready values. Call multiple times to
- * compose icon sets; later calls win on key collision.
- * @doc
- * @doc-name icon
- * @doc-order 1
- */
-export function provideIcons(
-  map: Record<string, string>,
-): EnvironmentProviders {
-  return makeEnvironmentProviders([
-    { provide: KJ_ICON_ENTRIES, useValue: map, multi: true },
-  ]);
-}
-
-/**
- * Override the synchronous fallback resolver used when a name is not in the
- * registry and no async loader is configured.
- * @doc
- * @doc-name icon
- * @doc-order 2
- */
-export function provideIconResolver(fn: IconResolver): EnvironmentProviders {
-  return makeEnvironmentProviders([{ provide: KJ_ICON_RESOLVER, useValue: fn }]);
-}
-
-/**
- * Register an async loader. When present, missing icons are loaded via this
- * function and cached into the registry.
- * @doc
- * @doc-name icon
- * @doc-order 3
- */
-export function provideIconLoader(fn: IconLoader): EnvironmentProviders {
-  return makeEnvironmentProviders([{ provide: KJ_ICON_LOADER, useValue: fn }]);
-}

package/src/icon/icon.resolver.spec.ts

@@ -1,96 +0,0 @@
-import { Injector, runInInjectionContext } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import type { Provider, EnvironmentProviders } from '@angular/core';
-import { provideIcons, provideIconLoader, provideIconResolver } from './icon.providers';
-import { injectKjIconResolver } from './icon.resolver';
-
-function makeResolver(providers: (Provider | EnvironmentProviders)[]) {
-  TestBed.configureTestingModule({ providers });
-  const injector = TestBed.inject(Injector);
-  return runInInjectionContext(injector, () => injectKjIconResolver());
-}
-
-describe('injectKjIconResolver', () => {
-  beforeEach(() => TestBed.resetTestingModule());
-
-  describe('registry path', () => {
-    it('returns the registry value when name is registered', () => {
-      const resolve = makeResolver([
-        provideIcons({ settings: 'url("a")' }),
-      ]);
-      expect(resolve('settings')).toBe('url("a")');
-    });
-  });
-
-  describe('fallback resolver path (no loader)', () => {
-    it('falls back to KJ_ICON_RESOLVER when name is missing', () => {
-      const resolve = makeResolver([
-        provideIconResolver((n) => `url("/icons/${n}.svg")`),
-      ]);
-      expect(resolve('missing')).toBe('url("/icons/missing.svg")');
-    });
-
-    it('default resolver returns name unchanged', () => {
-      const resolve = makeResolver([]);
-      expect(resolve('missing')).toBe('missing');
-    });
-  });
-
-  describe('loader path', () => {
-    it('returns null while load is pending, then fills registry on success', async () => {
-      let resolveLoad: (v: string) => void;
-      const loader = vi.fn(
-        (_n: string) =>
-          new Promise<string>((res) => {
-            resolveLoad = (v) => res(v);
-          }),
-      );
-      const resolve = makeResolver([provideIconLoader(loader)]);
-
-      expect(resolve('settings')).toBeNull();
-      expect(loader).toHaveBeenCalledTimes(1);
-
-      // Concurrent call must NOT trigger a second load (dedupe).
-      expect(resolve('settings')).toBeNull();
-      expect(loader).toHaveBeenCalledTimes(1);
-
-      resolveLoad!('url("loaded")');
-      await Promise.resolve();
-      await Promise.resolve();
-
-      expect(resolve('settings')).toBe('url("loaded")');
-    });
-
-    it('on loader rejection, removes pending so a subsequent call retries', async () => {
-      let calls = 0;
-      const loader = vi.fn(async (_n: string) => {
-        calls++;
-        if (calls === 1) throw new Error('boom');
-        return 'url("ok")';
-      });
-      const resolve = makeResolver([provideIconLoader(loader)]);
-
-      expect(resolve('x')).toBeNull();
-      await Promise.resolve();
-      await Promise.resolve();
-      expect(resolve('x')).toBeNull();
-      expect(loader).toHaveBeenCalledTimes(2);
-      await Promise.resolve();
-      await Promise.resolve();
-      expect(resolve('x')).toBe('url("ok")');
-    });
-
-    it('loader path takes precedence over fallback resolver', async () => {
-      const loader = async () => 'url("from-loader")';
-      const resolve = makeResolver([
-        provideIconLoader(loader),
-        provideIconResolver(() => 'url("from-fallback")'),
-      ]);
-      expect(resolve('x')).toBeNull();
-      await Promise.resolve();
-      await Promise.resolve();
-      expect(resolve('x')).toBe('url("from-loader")');
-    });
-  });
-});

package/src/icon/icon.resolver.ts

@@ -1,49 +0,0 @@
-import { inject } from '@angular/core';
-import {
-  KJ_ICON_LOADER,
-  KJ_ICON_REGISTRY,
-  KJ_ICON_RESOLVER,
-} from './icon.tokens';
-
-/**
- * Returns a function that resolves an icon name to a CSS-ready value, or
- * `null` while an async load is pending.
- *
- * Lookup order:
- * 1. `KJ_ICON_REGISTRY` (eager)
- * 2. `KJ_ICON_LOADER` (async; fills registry on success, returns `null` while pending)
- * 3. `KJ_ICON_RESOLVER` (sync default, e.g. URL synthesis)
- *
- * Must be called in an injection context.
- * @doc
- * @doc-name icon
- * @doc-order 4
- */
-export function injectKjIconResolver(): (name: string) => string | null {
-  const registry = inject(KJ_ICON_REGISTRY);
-  const loader = inject(KJ_ICON_LOADER);
-  const fallback = inject(KJ_ICON_RESOLVER);
-  const pending = new Set<string>();
-
-  return (name: string): string | null => {
-    const map = registry();
-    if (Object.prototype.hasOwnProperty.call(map, name)) return map[name];
-
-    if (loader) {
-      if (!pending.has(name)) {
-        pending.add(name);
-        Promise.resolve(loader(name))
-          .then((value) => {
-            registry.update((m) => ({ ...m, [name]: value }));
-            pending.delete(name);
-          })
-          .catch(() => {
-            pending.delete(name);
-          });
-      }
-      return null;
-    }
-
-    return fallback(name);
-  };
-}

package/src/icon/icon.tokens.ts

@@ -1,88 +0,0 @@
-import { InjectionToken, type WritableSignal, inject, signal } from '@angular/core';
-import type { IconLoader, IconResolver } from './icon.types';
-
-/**
- * Multi-provider entries contributed by `provideIcons(...)`. Each entry is a
- * `Record<name, cssReadyValue>`. The registry factory merges all entries at
- * injection time.
- *
- * Internal — consumers use `provideIcons(...)`.
- * @internal
- */
-export const KJ_ICON_ENTRIES = new InjectionToken<Record<string, string>>(
-  'KJ_ICON_ENTRIES',
-);
-
-/**
- * Runtime icon registry. A writable signal so the async loader can fill in
- * resolved icons and any consuming directive's computed re-evaluates.
- *
- * Stored values are CSS-ready: `url("...")` for svg mode, quoted glyphs for
- * font mode. Adapter authors are responsible for the wrapping.
- * @doc
- * @doc-name icon
- * @doc-order 6
- */
-export const KJ_ICON_REGISTRY = new InjectionToken<
-  WritableSignal<Record<string, string>>
->('KJ_ICON_REGISTRY', {
-  providedIn: 'root',
-  factory: () => {
-    const entries = inject(KJ_ICON_ENTRIES, { optional: true }) as
-      | Record<string, string>[]
-      | Record<string, string>
-      | null;
-    const list: Record<string, string>[] = Array.isArray(entries)
-      ? entries
-      : entries
-        ? [entries]
-        : [];
-    const merged = list.reduce<Record<string, string>>(
-      (acc, m) => ({ ...acc, ...m }),
-      {},
-    );
-    return signal<Record<string, string>>(merged);
-  },
-});
-
-/**
- * Synchronous fallback resolver. Called when a name is not in the registry
- * and no async loader is configured. Returns a CSS-ready string.
- *
- * Default: returns the name unchanged.
- * @doc
- * @doc-name icon
- * @doc-order 7
- */
-export const KJ_ICON_RESOLVER = new InjectionToken<IconResolver>(
-  'KJ_ICON_RESOLVER',
-  { providedIn: 'root', factory: () => (name: string) => name },
-);
-
-/**
- * Optional async loader. When set, missing icons are loaded via this fn and
- * the result is written into `KJ_ICON_REGISTRY`. While loading, the
- * directive renders nothing for that name. If unset, the resolver fallback
- * is used instead.
- * @doc
- * @doc-name icon
- * @doc-order 8
- */
-export const KJ_ICON_LOADER = new InjectionToken<IconLoader | null>(
-  'KJ_ICON_LOADER',
-  { providedIn: 'root', factory: () => null },
-);
-
-/**
- * Resolvable path to the kouji icon stylesheet.
- *
- * ```ts
- * import { KJ_ICON_CSS_PATH } from '@kouji-ui/core';
- * // or import the file directly:
- * import '@kouji-ui/core/icon/icon.css';
- * ```
- * @doc
- * @doc-name icon
- * @doc-order 9
- */
-export const KJ_ICON_CSS_PATH = '@kouji-ui/core/icon/icon.css' as const;

package/src/icon/icon.types.ts

@@ -1,48 +0,0 @@
-// packages/core/src/icon/icon.types.ts
-
-/**
- * Resolves an icon name to a CSS-ready value (e.g. `url("data:...")` for svg
- * mode, or a quoted glyph like `"\\f013"` for font mode). Synchronous.
- *
- * Used as a fallback when an icon is not in the registry and no async loader
- * is configured.
- * @doc
- * @doc-name icon
- * @doc-order 10
- */
-export type IconResolver = (name: string) => string;
-
-/**
- * Asynchronously resolves an icon name to a CSS-ready value. Result is
- * memoized into the registry so subsequent reads are synchronous.
- * @doc
- * @doc-name icon
- * @doc-order 11
- */
-export type IconLoader = (name: string) => Promise<string>;
-
-/**
- * Semantic color tokens for `[kjIconColor]`. Maps to
- * `var(--kj-color-icon-{token})`. `'inherit'` is the default and means
- * "use whatever the surrounding text color is" (CSS `currentColor`).
- * @doc
- * @doc-name icon
- * @doc-order 12
- */
-export type KjIconColor =
-  | 'inherit'
-  | 'muted'
-  | 'primary'
-  | 'success'
-  | 'warning'
-  | 'danger'
-  | 'info';
-
-/**
- * Size tokens for `[kjIconSize]`. Maps to `var(--kj-icon-size-{token})`.
- * Sizes are em-relative so an icon scales with surrounding text by default.
- * @doc
- * @doc-name icon
- * @doc-order 13
- */
-export type KjIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/src/icon/index.ts

@@ -1,21 +0,0 @@
-export { getIconMode, type IconMode } from './icon.mode';
-export type {
-  IconResolver,
-  IconLoader,
-  KjIconColor,
-  KjIconSize,
-} from './icon.types';
-export {
-  KJ_ICON_ENTRIES,
-  KJ_ICON_REGISTRY,
-  KJ_ICON_RESOLVER,
-  KJ_ICON_LOADER,
-  KJ_ICON_CSS_PATH,
-} from './icon.tokens';
-export {
-  provideIcons,
-  provideIconResolver,
-  provideIconLoader,
-} from './icon.providers';
-export { injectKjIconResolver } from './icon.resolver';
-export { KjIconDirective } from './icon.directive';

package/src/input/index.ts

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

package/src/input/input.spec.ts

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

@@ -1,89 +0,0 @@
-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]);
- *       }
- *    ```
- * @doc-category Core/Inputs
- * @doc-name input
- * @doc-description Adds Angular forms integration, invalid and disabled state, and a focus ring to a native input.
- * @doc-is-main
- */
-@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.
-    // Skip when the form control's value is null/undefined so external [value]
-    // bindings (template attribute, parent component) are preserved when no
-    // ngModel/formControl is wired. When a form is wired, callers clear via
-    // setValue('') rather than setValue(null), preserving the clear-on-empty
-    // behavior.
-    effect(() => {
-      const val = this.formCtrl.value();
-      if (val == null) return;
-      this.el.nativeElement.value = String(val);
-    });
-  }
-}

package/src/input-group/index.ts

@@ -1,3 +0,0 @@
-export * from './input-group';
-export * from './input-group-addon';
-export * from './input-group.context';