@kouji-ui/components 0.1.1 → 0.1.3

package/src/file-upload/file-upload.ts

@@ -1,301 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  OnDestroy,
-  Output,
-  ViewChild,
-  ViewEncapsulation,
-  booleanAttribute,
-  computed,
-  input,
-} from '@angular/core';
-import {
-  KjFileUpload,
-  KjFileUploadDropzone,
-  KjFileUploadItem,
-  KjFileUploadList,
-  KjFileUploadTrigger,
-  KjFileRejection,
-  KjUploadableFile,
-  KjProgressBar,
-  KjProgressBarFill,
-} from '@kouji-ui/core';
-
-/**
- * Styled wrapper for the headless `KjFileUpload` directive family. Renders
- * the canonical drop-zone + trigger + per-file list shape so consumers don't
- * have to wire the five directives by hand.
- *
- * The component owns the *visible* shape (drop-zone instructional text,
- * file-row layout with thumbnail / name / size / progress / remove). The
- * directives still own the state machine, validation, drag-and-drop, ARIA,
- * and live-region announcements.
- *
- * Per-file progress integrates with `KjProgressBar` (composed via the inner
- * `<div kjProgressBar>`) for `role="progressbar"` semantics. When the
- * consumer wires a real upload (HTTP, signed-URL POST, etc.), they call
- * `setFileStatus(id, status, progress)` on the directive ref to drive the
- * row through `pending → uploading → done`.
- *
- * @example
- * ```html
- * <kj-file-upload kjAccept="image/*" [kjMaxSize]="5_000_000" />
- * ```
- *
- * @doc-example Default (single)
- *   A single-file picker with a styled drop-zone and a toolbar trigger.
- *   @doc-file file-upload.example.ts
- * @doc-example Usage
- *   Common upload shapes — single, multiple with image preview, and a wired
- *   simulated progress lifecycle.
- *   @doc-file file-upload.usage.example.ts
- * @doc-example Multiple
- *   `[kjMultiple]="true"` accepts a batch and renders one row per file.
- *   @doc-file file-upload.multiple.example.ts
- * @doc-example Drop-zone
- *   Highlights the drag-and-drop affordance with hint text and an accept-list.
- *   @doc-file file-upload.dropzone.example.ts
- * @doc-example Simulated upload progress
- *   Drives `pending → uploading → done` via `setFileStatus(id, status, progress)`.
- *   @doc-file file-upload.with-progress.example.ts
- * @doc-example Image preview
- *   `[kjShowPreview]="true"` renders a thumbnail per image file.
- *   @doc-file file-upload.image-preview.example.ts
- *
- * @doc-keyboard
- *   Tab           — Moves focus to the drop-zone, then to the trigger button, then to per-row Remove buttons
- *   Enter|Space   — Activates the drop-zone (opens picker) or the trigger / Remove button
- *
- * @doc-aria
- *   role="button"     — Set on the drop-zone for keyboard activation
- *   aria-label        — Drop-zone reads from [kjDropzoneLabel]; Remove buttons read "Remove <filename> from list"
- *   aria-live         — Selection, rejection, and removal are announced via a polite live region
- *   role="progressbar"— Per-file progress row when [progress()] is non-null
- *   data-status       — Mirrors the row's status (preparing/pending/uploading/done/error/cancelled)
- *
- * @doc-touch
- *   Drop-zone and trigger render at ≥ 44×44 px to satisfy WCAG 2.5.5. The
- *   per-row Remove button uses default `kj-button` chrome — keep it at `md`
- *   or larger when it is the primary touch target.
- *
- * @doc-a11y
- *   `KjFileUpload` owns the state machine (selection, validation, drag-and-drop,
- *   live announcements). The wrapper provides the visible shape but never
- *   re-implements the directive's `aria-*` plumbing. Always pair the drop-zone
- *   with an explicit `[kjDropzoneLabel]` — that string is both the heading and
- *   the accessible name.
- *
- * @doc-css-var
- *   --kj-file-upload-bg               — Background fill of the drop-zone surface.
- *   --kj-file-upload-fg               — Foreground (text) color inside the upload.
- *   --kj-file-upload-border-color     — Drop-zone border color. Drag-over and invalid retarget this.
- *   --kj-file-upload-border-style     — Drop-zone border style. Defaults to dashed.
- *   --kj-file-upload-border-width     — Drop-zone border thickness. Inherits --kj-border.
- *   --kj-file-upload-radius           — Drop-zone corner radius. Inherits --kj-radius-field.
- *   --kj-file-upload-padding          — Padding inside the drop-zone.
- *   --kj-file-upload-row-bg           — Background fill for each per-file row.
- *   --kj-file-upload-row-border-color — Border color between rows in the list.
- *   --kj-file-upload-row-padding-x    — Horizontal padding inside each row.
- *   --kj-file-upload-row-padding-y    — Vertical padding inside each row.
- *   --kj-file-upload-thumb-size       — Thumbnail square size for image previews.
- *   --kj-file-upload-thumb-radius     — Thumbnail corner radius.
- *
- * @doc-related field,input,progress-bar
- *
- * @doc-category Library/Data input
- * @doc
- * @doc-name file-upload
- * @doc-description Themed file picker with drag-and-drop, multi-file list, per-row progress, image previews, and rejection.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-file-upload',
-  standalone: true,
-  imports: [
-    KjFileUpload,
-    KjFileUploadTrigger,
-    KjFileUploadDropzone,
-    KjFileUploadList,
-    KjFileUploadItem,
-    KjProgressBar,
-    KjProgressBarFill,
-  ],
-  template: `
-    <div
-      kjFileUpload
-      #upload="kjFileUpload"
-      class="kj-file-upload"
-      [kjAccept]="kjAccept()"
-      [kjMultiple]="kjMultiple()"
-      [kjMaxSize]="kjMaxSize()"
-      [kjMaxFiles]="kjMaxFiles()"
-      [kjDisabled]="kjDisabled()"
-      (kjSelect)="kjSelect.emit($event)"
-      (kjReject)="kjReject.emit($event)"
-      (kjRemove)="kjRemove.emit($event)"
-    >
-      @if (kjShowDropzone()) {
-        <div kjFileUploadDropzone class="kj-file-upload__dropzone" [kjLabel]="kjDropzoneLabel()">
-          <strong>{{ kjDropzoneLabel() }}</strong>
-          @if (kjDropzoneHint()) {
-            <span class="kj-file-upload__dropzone-hint">{{ kjDropzoneHint() }}</span>
-          }
-        </div>
-      }
-      <div class="kj-file-upload__toolbar">
-        <button
-          kjFileUploadTrigger
-          type="button"
-          class="kj-file-upload__trigger"
-        >
-          {{ kjTriggerLabel() }}
-        </button>
-        <ng-content select="[kj-file-upload-actions]" />
-      </div>
-
-      <ul kjFileUploadList class="kj-file-upload__list">
-        @for (f of upload.files(); track f.id) {
-          <li
-            kjFileUploadItem
-            #row="kjFileUploadItem"
-            [kjFile]="f"
-            class="kj-file-upload__row"
-          >
-            @if (kjShowPreview() && isImage(f.file)) {
-              <img
-                class="kj-file-upload__thumb"
-                [src]="previewUrl(f)"
-                [alt]="f.file.name"
-              />
-            }
-            <div class="kj-file-upload__row-body">
-              <div class="kj-file-upload__row-meta">
-                <span class="kj-file-upload__row-name" [attr.aria-label]="f.file.name">
-                  {{ f.file.name }}
-                </span>
-                <span class="kj-file-upload__row-size">{{ formatSize(f.file.size) }}</span>
-              </div>
-              @if (row.progress() !== null) {
-                <div
-                  kjProgressBar
-                  [kjValue]="row.progress() ?? 0"
-                  class="kj-file-upload__progress"
-                  [attr.aria-label]="'Upload progress for ' + f.file.name"
-                >
-                  <div kjProgressBarFill class="kj-progress-bar__fill"></div>
-                </div>
-              }
-              <span class="kj-file-upload__row-status">
-                {{ statusLabel(row.status()) }}
-                @if (f.error) {
-                  — {{ f.error }}
-                }
-              </span>
-            </div>
-            <div class="kj-file-upload__row-actions">
-              <span
-                class="kj-file-upload__row-icon"
-                [attr.data-status]="row.status()"
-                [attr.aria-hidden]="'true'"
-              ></span>
-              <button
-                type="button"
-                class="kj-file-upload__remove"
-                (click)="row.remove()"
-                [attr.aria-label]="'Remove ' + f.file.name + ' from list'"
-              >
-                Remove
-              </button>
-            </div>
-          </li>
-        }
-      </ul>
-    </div>
-  `,
-  styleUrl: './file-upload.css',
-  encapsulation: ViewEncapsulation.None,
-  host: { 'style': 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjFileUploadComponent implements OnDestroy {
-  /** MIME / extension list for the picker. */
-  readonly kjAccept = input<string>('');
-
-  /** Multiple files. Default `true`. */
-  readonly kjMultiple = input(true, { transform: booleanAttribute });
-
-  /** Maximum bytes per file. */
-  readonly kjMaxSize = input<number>(Number.POSITIVE_INFINITY);
-
-  /** Total file count cap. */
-  readonly kjMaxFiles = input<number>(Number.POSITIVE_INFINITY);
-
-  /** Disables the entire control. */
-  readonly kjDisabled = input(false, { transform: booleanAttribute });
-
-  /** Whether to render the drop-zone (turn off for compact layouts). Default `true`. */
-  readonly kjShowDropzone = input(true, { transform: booleanAttribute });
-
-  /** Drop-zone accessible name + visible heading. */
-  readonly kjDropzoneLabel = input<string>('Drag files here, or click to browse');
-
-  /** Optional secondary hint inside the drop-zone (e.g. "PNG / JPG up to 5 MB"). */
-  readonly kjDropzoneHint = input<string>('');
-
-  /** Label for the toolbar trigger button. */
-  readonly kjTriggerLabel = input<string>('Choose files');
-
-  /** When `true`, image rows render an `<img>` thumbnail via `URL.createObjectURL`. */
-  readonly kjShowPreview = input(false, { transform: booleanAttribute });
-
-  @Output() readonly kjSelect = new EventEmitter<File[]>();
-  @Output() readonly kjReject = new EventEmitter<KjFileRejection[]>();
-  @Output() readonly kjRemove = new EventEmitter<KjUploadableFile>();
-
-  /** Direct access to the underlying directive — consumers drive simulated uploads via this. */
-  @ViewChild(KjFileUpload, { static: true }) readonly upload!: KjFileUpload;
-
-  // ─── View helpers ───
-  protected readonly isImage = (file: File): boolean => /^image\//.test(file.type);
-
-  /** Cache so `URL.createObjectURL` isn't called repeatedly per change-detection. */
-  private readonly previewCache = new Map<string, string>();
-
-  protected previewUrl(f: KjUploadableFile): string {
-    let url = this.previewCache.get(f.id);
-    if (!url) {
-      url = URL.createObjectURL(f.file);
-      this.previewCache.set(f.id, url);
-    }
-    return url;
-  }
-
-  protected formatSize(bytes: number): string {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
-  }
-
-  protected statusLabel(status: string): string {
-    switch (status) {
-      case 'preparing': return 'Preparing';
-      case 'pending': return 'Ready';
-      case 'uploading': return 'Uploading';
-      case 'done': return 'Done';
-      case 'error': return 'Error';
-      case 'cancelled': return 'Cancelled';
-      default: return status;
-    }
-  }
-
-  ngOnDestroy(): void {
-    for (const url of this.previewCache.values()) URL.revokeObjectURL(url);
-    this.previewCache.clear();
-  }
-
-  // Expose the most-useful imperative bits for the simulated-upload examples.
-  /** @internal */
-  readonly files = computed(() => this.upload?.files() ?? []);
-}

package/src/file-upload/file-upload.usage.example.ts

@@ -1,45 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { KjFileUploadComponent } from './file-upload';
-
-/**
- * Common upload shapes: a single-file picker with hint text and an
- * image-only multi-file picker with previews. Copy-paste starting point for
- * upload screens.
- */
-@Component({
-  selector: 'kj-file-upload-usage-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [KjFileUploadComponent],
-  styles: [`
-    :host { display: flex; flex-direction: column; gap: var(--kj-space-lg); }
-    h4 { margin: 0; font: 600 var(--kj-text-sm)/1.4 var(--kj-font-sans); color: var(--kj-fg-muted); }
-  `],
-  template: `
-    <section>
-      <h4>Single resume</h4>
-      <kj-file-upload
-        [kjMultiple]="false"
-        kjAccept=".pdf,.doc,.docx"
-        [kjMaxSize]="2_000_000"
-        kjDropzoneLabel="Drop your resume here, or click to browse"
-        kjDropzoneHint="PDF or Word, up to 2 MB"
-        kjTriggerLabel="Choose resume"
-      />
-    </section>
-
-    <section>
-      <h4>Photo gallery</h4>
-      <kj-file-upload
-        kjAccept="image/*"
-        [kjMaxSize]="5_000_000"
-        [kjMaxFiles]="6"
-        [kjShowPreview]="true"
-        kjDropzoneLabel="Drop images here, or click to browse"
-        kjDropzoneHint="PNG / JPG up to 5 MB each — max 6 files"
-        kjTriggerLabel="Add photos"
-      />
-    </section>
-  `,
-})
-export class KjFileUploadUsageExample {}

package/src/file-upload/index.ts

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

package/src/form/_examples/form.async-submit.example.ts

@@ -1,72 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { KjButtonComponent } from '../../button/button';
-import { KjFieldComponent, KjFieldLabelComponent } from '../../field/field';
-import { KjInputComponent } from '../../input/input';
-import { KjFormActionsComponent, KjFormComponent } from '../form';
-
-/**
- * Async submit example — the handler returns a Promise, so `<form kj-form>`
- * reflects `aria-busy` / `data-submitting` for the lifetime of the work.
- * `kjResetOnSuccess` clears the form after the simulated request.
- */
-@Component({
-  selector: 'kj-form-async-submit-example',
-  standalone: true,
-  imports: [
-    KjFormComponent,
-    KjFormActionsComponent,
-    KjFieldComponent,
-    KjFieldLabelComponent,
-    KjInputComponent,
-    KjButtonComponent,
-    ReactiveFormsModule,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .status {
-        font-size: 0.8125rem;
-        opacity: 0.7;
-        margin-top: 0.5rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <form kj-form [formGroup]="form" [kjAsyncSubmit]="submitHandler" kjResetOnSuccess>
-      <kj-field>
-        <kj-field-label>Title</kj-field-label>
-        <kj-input type="text" formControlName="title" />
-      </kj-field>
-      <kj-field>
-        <kj-field-label>Body</kj-field-label>
-        <kj-input type="text" formControlName="body" />
-      </kj-field>
-
-      <kj-form-actions>
-        <kj-button kjType="submit" [kjLoading]="busy()">Publish</kj-button>
-      </kj-form-actions>
-    </form>
-
-    <p class="status">Last status: {{ status() }}</p>
-  `,
-})
-export class KjFormAsyncSubmitExample {
-  readonly form = new FormGroup({
-    title: new FormControl('', [Validators.required]),
-    body: new FormControl('', [Validators.required]),
-  });
-  readonly busy = signal(false);
-  readonly status = signal('idle');
-
-  readonly submitHandler = async (value: unknown): Promise<void> => {
-    this.busy.set(true);
-    this.status.set('publishing…');
-    await new Promise((resolve) => setTimeout(resolve, 1500));
-    this.status.set(`published ${JSON.stringify(value)}`);
-    this.busy.set(false);
-  };
-}

package/src/form/_examples/form.compound.example.ts

@@ -1,93 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { KjButtonComponent } from '../../button/button';
-import { KjFieldComponent, KjFieldLabelComponent } from '../../field/field';
-import { KjInputComponent } from '../../input/input';
-import { KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent } from '../form';
-
-/**
- * Compound form — multiple `FormGroup` sections (account + address) inside a
- * single `<form kj-form>`. Demonstrates that the focus-on-first-error
- * tree-walk descends into nested groups and the error summary lists nested
- * fields by their dotted path.
- */
-@Component({
-  selector: 'kj-form-compound-example',
-  standalone: true,
-  imports: [
-    KjFormComponent,
-    KjFormActionsComponent,
-    KjFormSummaryComponent,
-    KjFieldComponent,
-    KjFieldLabelComponent,
-    KjInputComponent,
-    KjButtonComponent,
-    ReactiveFormsModule,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .group {
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-        padding: var(--kj-space-md);
-        border: 1px solid var(--kj-border-default);
-        border-radius: 0.5rem;
-      }
-      .group h3 {
-        margin: 0;
-        font-size: 0.875rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <form kj-form [formGroup]="form" (kjSubmit)="lastValue.set($event)">
-      <kj-form-summary />
-
-      <fieldset class="group" formGroupName="account">
-        <h3>Account</h3>
-        <kj-field>
-          <kj-field-label>Username</kj-field-label>
-          <kj-input type="text" formControlName="username" />
-        </kj-field>
-        <kj-field>
-          <kj-field-label>Email</kj-field-label>
-          <kj-input type="email" formControlName="email" />
-        </kj-field>
-      </fieldset>
-
-      <fieldset class="group" formGroupName="address">
-        <h3>Address</h3>
-        <kj-field>
-          <kj-field-label>Street</kj-field-label>
-          <kj-input type="text" formControlName="street" />
-        </kj-field>
-        <kj-field>
-          <kj-field-label>City</kj-field-label>
-          <kj-input type="text" formControlName="city" />
-        </kj-field>
-      </fieldset>
-
-      <kj-form-actions>
-        <kj-button kjType="submit">Create account</kj-button>
-      </kj-form-actions>
-    </form>
-  `,
-})
-export class KjFormCompoundExample {
-  readonly form = new FormGroup({
-    account: new FormGroup({
-      username: new FormControl('', [Validators.required]),
-      email: new FormControl('', [Validators.required, Validators.email]),
-    }),
-    address: new FormGroup({
-      street: new FormControl('', [Validators.required]),
-      city: new FormControl('', [Validators.required]),
-    }),
-  });
-  readonly lastValue = signal<unknown>(null);
-}

package/src/form/_examples/form.example.ts

@@ -1,70 +0,0 @@
-import { JsonPipe } from '@angular/common';
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { KjButtonComponent } from '../../button/button';
-import { KjFieldComponent, KjFieldLabelComponent } from '../../field/field';
-import { KjInputComponent } from '../../input/input';
-import { KjFormActionsComponent, KjFormComponent } from '../form';
-
-/**
- * Default `<form kj-form>` usage — a small login form with email + password.
- * Demonstrates `(kjSubmit)` (only fires when valid), the auto submit-button
- * coordination, and the focus-on-first-error behaviour out of the box.
- */
-@Component({
-  selector: 'kj-form-example',
-  standalone: true,
-  imports: [
-    KjFormComponent,
-    KjFormActionsComponent,
-    KjFieldComponent,
-    KjFieldLabelComponent,
-    KjInputComponent,
-    KjButtonComponent,
-    ReactiveFormsModule,
-    JsonPipe,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .submitted {
-        font-size: 0.8125rem;
-        opacity: 0.7;
-        margin-top: 0.5rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <form kj-form [formGroup]="form" (kjSubmit)="onSubmit($event)">
-      <kj-field>
-        <kj-field-label>Email</kj-field-label>
-        <kj-input type="email" formControlName="email" placeholder="you@example.com" />
-      </kj-field>
-      <kj-field>
-        <kj-field-label>Password</kj-field-label>
-        <kj-input type="password" formControlName="password" />
-      </kj-field>
-      <kj-form-actions>
-        <kj-button kjType="submit">Sign in</kj-button>
-      </kj-form-actions>
-    </form>
-
-    @if (lastValue()) {
-      <p class="submitted">Submitted: {{ lastValue() | json }}</p>
-    }
-  `,
-})
-export class KjFormExample {
-  readonly form = new FormGroup({
-    email: new FormControl('', [Validators.required, Validators.email]),
-    password: new FormControl('', [Validators.required]),
-  });
-  readonly lastValue = signal<unknown>(null);
-
-  onSubmit(value: unknown): void {
-    this.lastValue.set(value);
-  }
-}

package/src/form/_examples/form.validation.example.ts

@@ -1,67 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { KjButtonComponent } from '../../button/button';
-import { KjFieldComponent, KjFieldLabelComponent } from '../../field/field';
-import { KjInputComponent } from '../../input/input';
-import { KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent } from '../form';
-
-/**
- * Validation example — submitting an empty form populates the
- * `<kj-form-summary>` companion with the list of invalid fields, focuses the
- * first invalid input, and announces the count politely-but-assertively.
- */
-@Component({
-  selector: 'kj-form-validation-example',
-  standalone: true,
-  imports: [
-    KjFormComponent,
-    KjFormActionsComponent,
-    KjFormSummaryComponent,
-    KjFieldComponent,
-    KjFieldLabelComponent,
-    KjInputComponent,
-    KjButtonComponent,
-    ReactiveFormsModule,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <form kj-form [formGroup]="form" (kjSubmit)="onSubmit()">
-      <kj-form-summary />
-
-      <kj-field>
-        <kj-field-label>Full name</kj-field-label>
-        <kj-input type="text" formControlName="name" />
-      </kj-field>
-      <kj-field>
-        <kj-field-label>Email</kj-field-label>
-        <kj-input type="email" formControlName="email" />
-      </kj-field>
-      <kj-field>
-        <kj-field-label>Phone</kj-field-label>
-        <kj-input type="tel" formControlName="phone" />
-      </kj-field>
-
-      <kj-form-actions>
-        <kj-button kjType="submit">Continue</kj-button>
-      </kj-form-actions>
-    </form>
-  `,
-})
-export class KjFormValidationExample {
-  readonly form = new FormGroup({
-    name: new FormControl('', [Validators.required]),
-    email: new FormControl('', [Validators.required, Validators.email]),
-    phone: new FormControl('', [Validators.required]),
-  });
-
-  onSubmit(): void {
-    /* no-op for the doc example */
-  }
-}

package/src/form/_examples/index.ts

@@ -1,6 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjFormAsyncSubmitExample } from './form.async-submit.example';
-export { KjFormCompoundExample } from './form.compound.example';
-export { KjFormExample } from './form.example';
-export { KjFormValidationExample } from './form.validation.example';