@kouji-ui/components 0.1.1

package/src/icon/lucide/icon-names.ts

@@ -0,0 +1,18 @@
+// Re-generate via:
+//   node scripts/generate-lucide-icon-names.mjs
+// (script reads the installed lucide-static/icon-nodes.json keys and writes
+// this file). We embed the list as a static const instead of importing the
+// JSON at runtime so SSR / Vite ESM resolvers don't have to resolve a JSON
+// path inside the lucide-static package at request time.
+
+import { LUCIDE_ICON_NAMES_RAW } from './icon-names.generated';
+
+/** Kebab-case Lucide icon name. */
+export type LucideIconName = string;
+
+/**
+ * All Lucide icon kebab-case names, sorted alphabetically. Generated from
+ * `lucide-static/icon-nodes.json`. Useful for galleries, autocomplete, or
+ * batch eager registration via {@link provideLucideIcons}.
+ */
+export const LUCIDE_ICON_NAMES: readonly LucideIconName[] = LUCIDE_ICON_NAMES_RAW;

package/src/icon/lucide/index.ts

@@ -0,0 +1,2 @@
+export { provideLucideIcons } from './provide-lucide-icons';
+export { LUCIDE_ICON_NAMES } from './icon-names';

package/src/icon/lucide/provide-lucide-icons.ts

@@ -0,0 +1,96 @@
+import {
+  type EnvironmentProviders,
+  inject,
+  makeEnvironmentProviders,
+  provideEnvironmentInitializer,
+} from '@angular/core';
+import { KJ_ICON_REGISTRY } from '@kouji-ui/core';
+import * as lucideIcons from 'lucide-static';
+
+/**
+ * Encode an SVG string into a `data:` URL fragment safe for use inside a CSS
+ * `url(...)` value. Percent-encodes the characters that would otherwise break
+ * parsing (`#`, `?`, `<`, `>`, etc.) while leaving the bulk of the SVG
+ * human-readable for easier debugging.
+ */
+function encodeSvgDataUrl(svg: string): string {
+  const encoded = svg
+    .replace(/"/g, "'")
+    .replace(/>\s+</g, '><')
+    .trim()
+    .replace(/[\r\n\t]+/g, ' ')
+    .replace(/%/g, '%25')
+    .replace(/#/g, '%23')
+    .replace(/\?/g, '%3F')
+    .replace(/</g, '%3C')
+    .replace(/>/g, '%3E');
+  return `url("data:image/svg+xml;utf8,${encoded}")`;
+}
+
+/** Convert PascalCase ("AArrowDown") → kebab-case ("a-arrow-down"). */
+function pascalToKebab(name: string): string {
+  return name
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+    .toLowerCase();
+}
+
+/** Lazily build the kebab-name → encoded-data-url map once per app. */
+let _registryEntries: Record<string, string> | null = null;
+function buildLucideRegistry(): Record<string, string> {
+  if (_registryEntries) return _registryEntries;
+  const entries: Record<string, string> = {};
+  const map = lucideIcons as unknown as Record<string, string>;
+  for (const [pascal, svg] of Object.entries(map)) {
+    if (typeof svg !== 'string') continue;
+    entries[pascalToKebab(pascal)] = encodeSvgDataUrl(svg);
+  }
+  _registryEntries = entries;
+  return entries;
+}
+
+/**
+ * Wire Lucide icons into the kouji icon registry.
+ *
+ * The full Lucide icon set is bundled once and registered into
+ * `KJ_ICON_REGISTRY` at app start, so any kebab-case Lucide name renders
+ * synchronously the first time it appears in the DOM.
+ *
+ * The transferred bundle cost is ~300 KB gzipped for the whole set, which
+ * lets us keep the API surface minimal and works identically in dev and
+ * production — Vite/esbuild can't reliably code-split per-icon dynamic
+ * imports against `lucide-static`'s package layout, so a single static
+ * namespace import is the predictable choice.
+ *
+ * @example
+ * ```ts
+ * // app.config.ts
+ * provideLucideIcons(),
+ * ```
+ *
+ * @doc-example Gallery
+ *   @doc-file ../icon.gallery.example.ts
+ *
+ * @doc-css-var
+ *   --kj-icon       — Resolved icon value (url("...") or "glyph"). Set by the directive — read by the rendered .kj-icon.
+ *   --kj-icon-font  — Font family for `mode="font"` icons. Set on a parent to wire a pre-loaded icon font.
+ *   --kj-icon-size-xs — Token size for the `xs` icon scale. Override per theme.
+ *   --kj-icon-size-sm — Token size for the `sm` icon scale.
+ *   --kj-icon-size-md — Token size for the `md` icon scale.
+ *   --kj-icon-size-lg — Token size for the `lg` icon scale.
+ *   --kj-icon-size-xl — Token size for the `xl` icon scale.
+ *
+ * @doc-category Library/Icon
+ * @doc
+ * @doc-name icon
+ * @doc-is-main
+ * @doc-description Wires the full Lucide icon set into the kouji icon registry — any kebab-case Lucide name renders by name.
+ */
+export function provideLucideIcons(): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    provideEnvironmentInitializer(() => {
+      const registry = inject(KJ_ICON_REGISTRY);
+      registry.update((m) => ({ ...m, ...buildLucideRegistry() }));
+    }),
+  ]);
+}

package/src/input/_examples/index.ts

@@ -0,0 +1,4 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjInputColorExample } from './input.color.example';
+export { KjInputExample } from './input.example';

package/src/input/_examples/input.color.example.ts

@@ -0,0 +1,33 @@
+import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
+import { KjInputComponent } from '../input';
+
+/**
+ * Color picker example — uses the native <input type="color"> swatch
+ * via the shared kj-input wrapper. Bound to a signal via ngModel-style flow.
+ */
+@Component({
+  selector: 'kj-input-color-example',
+  standalone: true,
+  imports: [KjInputComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        gap: var(--kj-space-md);
+        align-items: center;
+      }
+      code {
+        font: var(--kj-text-sm)/1 var(--kj-font-mono);
+        color: var(--kj-fg-muted);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-input type="color" (input)="hex.set($any($event.target).value)" />
+    <code>{{ hex() }}</code>
+  `,
+})
+export class KjInputColorExample {
+  readonly hex = signal('#b8f500');
+}

package/src/input/_examples/input.example.ts

@@ -0,0 +1,22 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjInputComponent } from '../input';
+
+/**
+ * Default usage example for KjInputComponent.
+ * Rendered live in the docs and as code in the example panel.
+ */
+@Component({
+  selector: 'kj-input-example',
+  standalone: true,
+  imports: [KjInputComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-input type="text" placeholder="Type something…"></kj-input>`,
+})
+export class KjInputExample {}

package/src/input/index.ts

@@ -0,0 +1 @@
+export * from './input';

package/src/input/input.css

@@ -0,0 +1,70 @@
+/* ─────────────────────────────────────────────────────────────
+   .kj-input — component-layer tokens + structural CSS
+   Same pattern as button.css: tokens default to shared layer,
+   variants/states retarget tokens, structural CSS reads tokens only.
+   ──────────────────────────────────────────────────────────── */
+
+@layer kj.component {
+  .kj-input {
+    --kj-input-bg:               var(--kj-bg-field);
+    --kj-input-fg:               var(--kj-fg-default);
+    --kj-input-border-color:     var(--kj-border-default);
+    --kj-input-border-style:     solid;
+    --kj-input-border-width:     var(--kj-border);
+    --kj-input-radius:           var(--kj-radius-field);
+    --kj-input-padding-x:        var(--kj-space-md);
+    --kj-input-padding-y:        var(--kj-space-sm);
+    --kj-input-font:             var(--kj-font-sans);
+    --kj-input-font-size:        var(--kj-text-sm);
+    --kj-input-placeholder-fg:   var(--kj-fg-muted);
+    /* Match button md (36px) so inputs and buttons line up in form rows.
+       Don't set `align-self` — in column-flex parents (form-field stacks),
+       `center` horizontally shifts the host; explicit height alone is what
+       prevents row-flex parents from stretching the input vertically. */
+    --kj-input-height:           2.25rem;
+
+    display: inline-flex;
+    width: 100%;
+    height: var(--kj-input-height);
+    background: var(--kj-input-bg);
+    color: var(--kj-input-fg);
+    border: var(--kj-input-border-width) var(--kj-input-border-style) var(--kj-input-border-color);
+    border-radius: var(--kj-input-radius);
+    padding: var(--kj-input-padding-y) var(--kj-input-padding-x);
+    font: var(--kj-input-font-size) / 1.4 var(--kj-input-font);
+    transition: var(--kj-transition);
+  }
+  /* Per-size heights mirror the button scale. */
+  .kj-input[data-size="xs"] { --kj-input-height: 1.75rem; --kj-input-font-size: 0.75rem;   --kj-input-padding-x: var(--kj-space-sm); --kj-input-padding-y: 0; }
+  .kj-input[data-size="sm"] { --kj-input-height: 2rem;    --kj-input-font-size: 0.8125rem; }
+  .kj-input[data-size="lg"] { --kj-input-height: 2.75rem; --kj-input-font-size: 1rem; }
+
+  /* Variant: sunken — inputs sit on `--kj-bg-body` so they read distinctly
+     against a card / surface parent. Used on the landing showcase where
+     cards already use `--kj-bg-surface`; mirrors the design's pattern of
+     "input on page bg, card around it on surface". */
+  .kj-input[data-variant="sunken"] {
+    --kj-input-bg: var(--kj-bg-body);
+  }
+  .kj-input::placeholder { color: var(--kj-input-placeholder-fg); }
+
+  .kj-input:focus-visible {
+    outline: 2px solid var(--kj-bg-primary);
+    outline-offset: 2px;
+    --kj-input-border-color: var(--kj-border-focus, var(--kj-bg-primary));
+  }
+  .kj-input[aria-invalid="true"] {
+    --kj-input-border-color: var(--kj-border-danger, var(--kj-fg-danger));
+  }
+  .kj-input[aria-disabled="true"], .kj-input:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+
+  .kj-input[type="color"] {
+    inline-size: 44px;
+    block-size: 32px;
+    padding: 2px;
+    cursor: pointer;
+  }
+}

package/src/input/input.playground.ts

@@ -0,0 +1,79 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjInputComponent, type KjInputType, type KjInputVariant } from './input';
+import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
+
+/**
+ * Playground state — module-scope signals. Type, variant, value/placeholder,
+ * disabled, and invalid cover every public input the wrapper surfaces.
+ */
+const type = signal<KjInputType>('text');
+const variant = signal<KjInputVariant>('default');
+const value = signal('');
+const placeholder = signal('you@example.com');
+const disabled = signal(false);
+const invalid = signal(false);
+
+@Component({
+  selector: 'kj-input-playground',
+  standalone: true,
+  imports: [KjInputComponent, FormsModule],
+  template: `
+    <kj-input
+      [type]="type()"
+      [variant]="variant()"
+      [placeholder]="placeholder()"
+      [disabled]="disabled()"
+      [invalid]="invalid()"
+      [(ngModel)]="value"
+    />
+  `,
+  styles: [`:host { display: block; max-width: 360px; }`],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjInputPlaygroundDemo {
+  protected readonly type = type;
+  protected readonly variant = variant;
+  protected readonly value = value;
+  protected readonly placeholder = placeholder;
+  protected readonly disabled = disabled;
+  protected readonly invalid = invalid;
+}
+
+export const PLAYGROUND: PlaygroundFile = {
+  component: KjInputPlaygroundDemo,
+  state: {
+    type: type as unknown as ReturnType<typeof signal>,
+    variant: variant as unknown as ReturnType<typeof signal>,
+    value: value as unknown as ReturnType<typeof signal>,
+    placeholder: placeholder as unknown as ReturnType<typeof signal>,
+    disabled: disabled as unknown as ReturnType<typeof signal>,
+    invalid: invalid as unknown as ReturnType<typeof signal>,
+  },
+  controls: [
+    {
+      kind: 'chips',
+      name: 'type',
+      label: 'type',
+      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url', 'color'],
+    },
+    { kind: 'chips', name: 'variant', label: 'variant', options: ['default', 'sunken'] },
+    { kind: 'text', name: 'placeholder', label: 'placeholder' },
+    { kind: 'toggle', name: 'disabled', label: 'disabled' },
+    { kind: 'toggle', name: 'invalid', label: 'invalid' },
+  ],
+  snippet: (values) => {
+    const s = values as {
+      type: string;
+      variant: string;
+      placeholder: string;
+      disabled: boolean;
+      invalid: boolean;
+    };
+    const attrs: string[] = [`type="${s.type}"`, `variant="${s.variant}"`];
+    if (s.placeholder) attrs.push(`placeholder="${s.placeholder}"`);
+    if (s.disabled) attrs.push('[disabled]="true"');
+    if (s.invalid) attrs.push('[invalid]="true"');
+    return `<kj-input\n  ${attrs.join('\n  ')}\n/>`;
+  },
+};

package/src/input/input.spec.ts

@@ -0,0 +1,98 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, test, beforeEach } from 'vitest';
+import { KjInputComponent } from './input';
+
+@Component({
+  standalone: true,
+  imports: [KjInputComponent],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `<kj-input
+    [type]="type"
+    [value]="value"
+    [placeholder]="placeholder"
+    [invalid]="invalid"
+    [disabled]="disabled"
+  />`,
+})
+class HostComponent {
+  type: 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url' | 'color' = 'text';
+  value = '';
+  placeholder = '';
+  invalid = false;
+  disabled = false;
+}
+
+describe('KjInputComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({ imports: [HostComponent] });
+  });
+
+  test('renders an inner <input> with the .kj-input class', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('kj-input input.kj-input')).not.toBeNull();
+  });
+
+  test('forwards type to the inner element', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.type = 'email';
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('kj-input input').getAttribute('type')).toBe(
+      'email',
+    );
+  });
+
+  test('renders <input type="color"> when type=color', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.type = 'color';
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('kj-input input').getAttribute('type')).toBe(
+      'color',
+    );
+  });
+
+  test('mirrors type to data-type attr on host', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.type = 'color';
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('kj-input').getAttribute('data-type')).toBe('color');
+  });
+
+  test('forwards value to the inner element (no form control wired)', () => {
+    // Use type=text — jsdom's <input type="color"> .value reverts to '#000000'.
+    // The binding mechanism is identical for any type.
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.value = 'hello';
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('kj-input input').value).toBe('hello');
+  });
+
+  test('forwards placeholder', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.placeholder = 'you@example.com';
+    fixture.detectChanges();
+    expect(fixture.nativeElement.querySelector('kj-input input').getAttribute('placeholder')).toBe(
+      'you@example.com',
+    );
+  });
+
+  test('forwards invalid → aria-invalid (after blur)', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.invalid = true;
+    fixture.detectChanges();
+    const input = fixture.nativeElement.querySelector('kj-input input');
+    input.dispatchEvent(new Event('blur'));
+    fixture.detectChanges();
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+  });
+
+  test('forwards disabled → aria-disabled', () => {
+    const fixture = TestBed.createComponent(HostComponent);
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+    expect(
+      fixture.nativeElement.querySelector('kj-input input').getAttribute('aria-disabled'),
+    ).toBe('true');
+  });
+});

package/src/input/input.ts

@@ -0,0 +1,158 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  ViewChild,
+  ViewEncapsulation,
+  forwardRef,
+  input,
+  viewChild,
+} from '@angular/core';
+import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
+import { KjInput } from '@kouji-ui/core';
+
+export type KjInputType = 'text' | 'email' | 'password' | 'number'
+                        | 'search' | 'tel' | 'url' | 'color';
+
+/** Visual variants — `default` uses the field surface; `sunken` drops to
+ *  body bg so the input pops against a card/surface parent. */
+export type KjInputVariant = 'default' | 'sunken';
+
+/** Size tier — `xs` (28px) for filter rows / inline editors, `sm` (32px)
+ *  for dense forms, `md` (36px, default) for standard rows, `lg` (44px)
+ *  for touch-first primary inputs. */
+export type KjInputSize = 'xs' | 'sm' | 'md' | 'lg';
+
+/**
+ * Styled wrapper around the headless KjInput directive.
+ *
+ * Supports `[(ngModel)]` and `[formControl]` bindings.
+ *
+ * @example
+ * ```html
+ * <kj-input type="email" placeholder="you@example.com" [(ngModel)]="email" />
+ * ```
+ *
+ * @doc-keyboard
+ *   Tab    — Moves focus into and out of the input (native input semantics)
+ *   Enter  — Submits the parent <form> when present (native behavior)
+ *
+ * @doc-aria
+ *   aria-invalid   — set to "true" only after the control is touched AND [invalid] is true; avoids announcing errors before the user has interacted
+ *   data-invalid   — mirror of aria-invalid for CSS targeting
+ *   data-type      — reflects the `type` input ("text" | "email" | "password" | ...) for type-specific styling
+ *   data-variant   — reflects the visual `variant` input ("default" | "sunken")
+ *   disabled       — native attribute reflected when the bound form control's disabled state is true
+ *
+ * @doc-css-var
+ *   --kj-input-bg             — Background fill. Variant `sunken` retargets this to body bg.
+ *   --kj-input-fg             — Foreground (text + caret) color.
+ *   --kj-input-border-color   — Border color. Focus and invalid states retarget this.
+ *   --kj-input-border-style   — Border line style. Default solid.
+ *   --kj-input-border-width   — Border thickness. Inherits --kj-border.
+ *   --kj-input-radius         — Corner radius. Inherits --kj-radius-field.
+ *   --kj-input-padding-x      — Horizontal padding inside the input.
+ *   --kj-input-padding-y      — Vertical padding inside the input.
+ *   --kj-input-font           — Font family. Defaults to --kj-font-sans.
+ *   --kj-input-font-size      — Font size. Sizes (sm/md/lg) override.
+ *   --kj-input-placeholder-fg — Placeholder text color. Muted by default.
+ *   --kj-input-height         — Explicit height. Sizes override; matches button md by default.
+ *
+ * @doc-touch
+ *   Default height is 36px (md). Use `data-size="lg"` (2.75rem / 44px) when the input is the primary touch target in a form. The `type="color"` swatch renders at 44×32px — pair it with a textual label for the accessible name.
+ *
+ * @doc-a11y
+ *   `<kj-input>` is a thin wrapper around the headless `kjInput` directive that
+ *   composes `KjFormControl` (CVA), `KjDisabled`, and `KjFocusRing`. Always
+ *   associate a `<label>` via `for=`/`id=` or wrap the input in the label — the
+ *   component does not generate its own accessible name. Pair with a sibling
+ *   error node referenced by `aria-describedby` to surface validation messages
+ *   to screen readers. Focus visibility comes from `:focus-visible` only (2px
+ *   primary outline), never on mouse click.
+ *
+ * @doc-related field,password-input,textarea,input-mask
+ *
+ * @doc-example Default
+ *   Plain text input — anchors the chrome and the (ngModel) two-way pattern.
+ *   @doc-file input.example.ts
+ * @doc-example Usage
+ *   Common input shapes — types, invalid state, disabled, and a (ngModel) bind.
+ *   @doc-file input.usage.example.ts
+ * @doc-example Color
+ *   `type="color"` renders the native swatch wired through the same wrapper.
+ *   @doc-file input.color.example.ts
+ *
+ * @doc
+ * @doc-category Library/Data input
+ * @doc-name input
+ * @doc-description Themed text input with type variants, invalid and disabled state, and Angular forms support.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-input',
+  standalone: true,
+  imports: [KjInput],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => KjInputComponent),
+      multi: true,
+    },
+  ],
+  template: `
+    <input
+      #nativeInput
+      kjInput
+      class="kj-input"
+      [type]="type()"
+      [value]="value()"
+      [placeholder]="placeholder()"
+      [attr.data-variant]="variant()"
+      [attr.data-size]="kjSize() === 'md' ? null : kjSize()"
+      [kjInvalid]="invalid()"
+      [kjDisabled]="disabled()"
+    />
+  `,
+  styleUrl: './input.css',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    'style': 'display: contents;',
+    '[attr.data-type]': 'type()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjInputComponent implements ControlValueAccessor {
+  readonly type = input<KjInputType>('text');
+  readonly variant = input<KjInputVariant>('default');
+  readonly kjSize = input<KjInputSize>('md');
+  readonly value = input<string>('');
+  readonly placeholder = input<string>('');
+  readonly invalid = input(false);
+  readonly disabled = input(false);
+
+  @ViewChild(KjInput, { static: true })
+  protected innerInput?: KjInput;
+
+  /** Native `<input>` element, queried via template-ref. Used by callers
+   *  (cell editors, focus-trapping consumers) that need to move keyboard
+   *  focus into the input without reaching into the DOM. */
+  readonly nativeInput = viewChild<ElementRef<HTMLInputElement>>('nativeInput');
+
+  /** Focus the underlying `<input>`. No-op until the view renders. */
+  focus(): void {
+    this.nativeInput()?.nativeElement.focus();
+  }
+
+  writeValue(val: unknown): void {
+    this.innerInput?.formCtrl.writeValue(val);
+  }
+  registerOnChange(fn: (value: unknown) => void): void {
+    this.innerInput?.formCtrl.registerOnChange(fn);
+  }
+  registerOnTouched(fn: () => void): void {
+    this.innerInput?.formCtrl.registerOnTouched(fn);
+  }
+  setDisabledState(isDisabled: boolean): void {
+    this.innerInput?.formCtrl.setDisabledState(isDisabled);
+  }
+}

package/src/input/input.usage.example.ts

@@ -0,0 +1,40 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { KjInputComponent } from './input';
+
+/**
+ * Common input shapes — text/email/password types, invalid state, disabled,
+ * and (ngModel) two-way binding. Copy-paste starting point for forms.
+ */
+@Component({
+  selector: 'kj-input-usage-example',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [KjInputComponent, FormsModule],
+  styles: [`
+    :host { display: flex; flex-direction: column; gap: var(--kj-space-md); max-width: 360px; }
+    label { font: 500 var(--kj-text-sm)/1.4 var(--kj-font-sans); color: var(--kj-fg-default); }
+    .row { display: flex; flex-direction: column; gap: var(--kj-space-xs); }
+    code { font: var(--kj-text-xs)/1 var(--kj-font-mono); color: var(--kj-fg-muted); }
+  `],
+  template: `
+    <div class="row">
+      <label for="usage-name">Name</label>
+      <kj-input id="usage-name" type="text" [(ngModel)]="name" placeholder="Ada Lovelace" />
+      <code>value: {{ name() || '—' }}</code>
+    </div>
+
+    <div class="row">
+      <label for="usage-email">Email</label>
+      <kj-input id="usage-email" type="email" [invalid]="true" value="not-an-email" />
+    </div>
+
+    <div class="row">
+      <label for="usage-pwd">Password</label>
+      <kj-input id="usage-pwd" type="password" [disabled]="true" value="••••••••" />
+    </div>
+  `,
+})
+export class KjInputUsageExample {
+  readonly name = signal('');
+}

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

@@ -0,0 +1,7 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjInputGroupButtonExample } from './input-group.button.example';
+export { KjInputGroupExample } from './input-group.example';
+export { KjInputGroupIconExample } from './input-group.icon.example';
+export { KjInputGroupUrlExample } from './input-group.url.example';
+export { KjInputGroupVariantsExample } from './input-group.variants.example';