@kouji-ui/components 0.1.1 → 0.1.2

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

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

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

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

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

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

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

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

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

package/src/input/input.css

@@ -1,70 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   .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

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

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

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

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

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