@kouji-ui/components 0.1.1 → 0.1.2

package/src/input-group/_examples/input-group.button.example.ts

@@ -1,43 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { KjInputComponent } from '../../input/input';
-import { KjButtonComponent } from '../../button/button';
-import { KjInputGroupComponent, KjInputGroupAddonComponent } from '../input-group';
-
-/**
- * Input with a Search button suffix.
- */
-@Component({
-  selector: 'kj-input-group-button-example',
-  standalone: true,
-  imports: [
-    KjInputGroupComponent,
-    KjInputGroupAddonComponent,
-    KjInputComponent,
-    FormsModule,
-    KjButtonComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-input-group>
-      <kj-input type="search" placeholder="Search…" [(ngModel)]="query" aria-label="Search" />
-      <kj-input-group-addon>
-        <kj-button kjVariant="default" (click)="onSearch()">Search</kj-button>
-      </kj-input-group-addon>
-    </kj-input-group>
-  `,
-})
-export class KjInputGroupButtonExample {
-  readonly query = signal('');
-
-  onSearch(): void {
-    // Search logic would go here.
-  }
-}

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

@@ -1,39 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { KjInputComponent } from '../../input/input';
-import { KjInputGroupComponent, KjInputGroupAddonComponent } from '../input-group';
-
-/**
- * Default usage: currency prefix and decimal suffix flanking a text input.
- */
-@Component({
-  selector: 'kj-input-group-example',
-  standalone: true,
-  imports: [KjInputGroupComponent, KjInputGroupAddonComponent, KjInputComponent, FormsModule],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-input-group>
-      <kj-input-group-addon [kjAriaHidden]="true">$</kj-input-group-addon>
-      <kj-input
-        type="text"
-        placeholder="Amount"
-        [(ngModel)]="amount"
-        aria-label="Amount in dollars"
-      />
-      <kj-input-group-addon [kjAriaHidden]="true">.00</kj-input-group-addon>
-    </kj-input-group>
-    <p style="margin-top:0.75rem;font-size:0.8rem;color:var(--kj-fg-muted)">
-      Value: {{ amount() || '—' }}
-    </p>
-  `,
-})
-export class KjInputGroupExample {
-  readonly amount = signal('');
-}

package/src/input-group/_examples/input-group.icon.example.ts

@@ -1,49 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { KjInputComponent } from '../../input/input';
-import { KjInputGroupComponent, KjInputGroupAddonComponent } from '../input-group';
-
-/**
- * Search-icon prefix followed by a text input.
- * The icon addon is decorative (kjAriaHidden="true"); the input carries the
- * accessible label via aria-label.
- */
-@Component({
-  selector: 'kj-input-group-icon-example',
-  standalone: true,
-  imports: [KjInputGroupComponent, KjInputGroupAddonComponent, KjInputComponent, FormsModule],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-input-group>
-      <kj-input-group-addon [kjAriaHidden]="true">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <circle cx="11" cy="11" r="8" />
-          <line x1="21" y1="21" x2="16.65" y2="16.65" />
-        </svg>
-      </kj-input-group-addon>
-      <kj-input type="search" placeholder="Search…" [(ngModel)]="query" aria-label="Search" />
-    </kj-input-group>
-  `,
-})
-export class KjInputGroupIconExample {
-  readonly query = signal('');
-}

package/src/input-group/_examples/input-group.url.example.ts

@@ -1,36 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { KjInputComponent } from '../../input/input';
-import { KjInputGroupComponent, KjInputGroupAddonComponent } from '../input-group';
-
-/**
- * URL slug composition: "https://" prefix + input + ".com" suffix.
- */
-@Component({
-  selector: 'kj-input-group-url-example',
-  standalone: true,
-  imports: [KjInputGroupComponent, KjInputGroupAddonComponent, KjInputComponent, FormsModule],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-input-group>
-      <kj-input-group-addon [kjAriaHidden]="true">https://</kj-input-group-addon>
-      <kj-input
-        type="text"
-        placeholder="your-site"
-        [(ngModel)]="slug"
-        aria-label="Website domain name"
-      />
-      <kj-input-group-addon [kjAriaHidden]="true">.com</kj-input-group-addon>
-    </kj-input-group>
-  `,
-})
-export class KjInputGroupUrlExample {
-  readonly slug = signal('');
-}

package/src/input-group/_examples/input-group.variants.example.ts

@@ -1,39 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjInputComponent } from '../../input/input';
-import { KjInputGroupComponent, KjInputGroupAddonComponent } from '../input-group';
-
-/**
- * Demonstrates default, filled, and ghost variant groups side-by-side.
- */
-@Component({
-  selector: 'kj-input-group-variants-example',
-  standalone: true,
-  imports: [KjInputGroupComponent, KjInputGroupAddonComponent, KjInputComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-input-group>
-      <kj-input-group-addon [kjAriaHidden]="true">$</kj-input-group-addon>
-      <kj-input type="text" placeholder="Default" aria-label="Default variant amount" />
-    </kj-input-group>
-
-    <kj-input-group kjVariant="filled">
-      <kj-input-group-addon [kjAriaHidden]="true">$</kj-input-group-addon>
-      <kj-input type="text" placeholder="Filled" aria-label="Filled variant amount" />
-    </kj-input-group>
-
-    <kj-input-group kjVariant="ghost">
-      <kj-input-group-addon [kjAriaHidden]="true">$</kj-input-group-addon>
-      <kj-input type="text" placeholder="Ghost" aria-label="Ghost variant amount" />
-    </kj-input-group>
-  `,
-})
-export class KjInputGroupVariantsExample {}

package/src/input-group/index.ts

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

package/src/input-group/input-group.css

@@ -1,125 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   .kj-input-group — flex wrapper that joins an input with
-   prefix/suffix addons into a single visually-unified field.
-   ──────────────────────────────────────────────────────────── */
-
-@layer kj.component {
-  .kj-input-group {
-    --kj-input-group-border-color: var(--kj-border-default);
-    --kj-input-group-border-width: var(--kj-border, 1px);
-    --kj-input-group-radius:       var(--kj-radius-field);
-    --kj-input-group-addon-bg:     var(--kj-bg-surface);
-    --kj-input-group-addon-fg:     var(--kj-fg-default);
-    --kj-input-group-addon-font:   var(--kj-font-sans);
-    --kj-input-group-addon-size:   var(--kj-text-sm);
-    --kj-input-group-padding-x:    var(--kj-space-md);
-    --kj-input-group-padding-y:    var(--kj-space-sm);
-
-    display: inline-flex;
-    align-items: stretch;
-    border-radius: var(--kj-input-group-radius);
-  }
-
-  /* ── Vertical layout ──────────────────────────────────────────────────── */
-  .kj-input-group[data-orientation='vertical'] {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  /* ── Shared border collapse ───────────────────────────────────────────── */
-  /* Every child (input or addon) shares the same border so they appear as
-     one component. We zero out the border-radius on inner edges and use a
-     negative margin to collapse duplicate borders. */
-
-  .kj-input-group [kjInput],
-  .kj-input-group .kj-input,
-  .kj-input-group [kjInputGroupAddon] {
-    border-radius: 0;
-    flex: 0 0 auto;
-  }
-
-  /* Give the native input flex-grow so it fills remaining space. */
-  .kj-input-group [kjInput],
-  .kj-input-group .kj-input {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  /* Horizontal: collapse left border on non-first children. */
-  .kj-input-group:not([data-orientation='vertical']) > * + [kjInput],
-  .kj-input-group:not([data-orientation='vertical']) > * + [kjInputGroupAddon],
-  .kj-input-group:not([data-orientation='vertical']) > * + kj-input-group-addon,
-  .kj-input-group:not([data-orientation='vertical']) > kj-input-group-addon + * {
-    margin-left: -1px;
-  }
-
-  /* Vertical: collapse top border on non-first children. */
-  .kj-input-group[data-orientation='vertical'] > * + [kjInput],
-  .kj-input-group[data-orientation='vertical'] > * + [kjInputGroupAddon],
-  .kj-input-group[data-orientation='vertical'] > * + kj-input-group-addon,
-  .kj-input-group[data-orientation='vertical'] > kj-input-group-addon + * {
-    margin-top: -1px;
-  }
-
-  /* ── Outer-corner rounding ──────────────────────────────────────────────
-     The first and last child get rounded corners on their outer edges only,
-     giving the group its pill/rounded-box appearance. */
-
-  /* Horizontal — first child */
-  .kj-input-group:not([data-orientation='vertical']) > :first-child,
-  .kj-input-group:not([data-orientation='vertical']) > :first-child [kjInput],
-  .kj-input-group:not([data-orientation='vertical']) > :first-child [kjInputGroupAddon] {
-    border-top-left-radius: var(--kj-input-group-radius);
-    border-bottom-left-radius: var(--kj-input-group-radius);
-  }
-
-  /* Horizontal — last child */
-  .kj-input-group:not([data-orientation='vertical']) > :last-child,
-  .kj-input-group:not([data-orientation='vertical']) > :last-child [kjInput],
-  .kj-input-group:not([data-orientation='vertical']) > :last-child [kjInputGroupAddon] {
-    border-top-right-radius: var(--kj-input-group-radius);
-    border-bottom-right-radius: var(--kj-input-group-radius);
-  }
-
-  /* Vertical — first child */
-  .kj-input-group[data-orientation='vertical'] > :first-child,
-  .kj-input-group[data-orientation='vertical'] > :first-child [kjInput] {
-    border-top-left-radius: var(--kj-input-group-radius);
-    border-top-right-radius: var(--kj-input-group-radius);
-  }
-
-  /* Vertical — last child */
-  .kj-input-group[data-orientation='vertical'] > :last-child,
-  .kj-input-group[data-orientation='vertical'] > :last-child [kjInput] {
-    border-bottom-left-radius: var(--kj-input-group-radius);
-    border-bottom-right-radius: var(--kj-input-group-radius);
-  }
-
-  /* ── Addon skin ─────────────────────────────────────────────────────── */
-  .kj-input-group__addon {
-    display: inline-flex;
-    align-items: center;
-    padding: var(--kj-input-group-padding-y) var(--kj-input-group-padding-x);
-    background: var(--kj-input-group-addon-bg);
-    color: var(--kj-input-group-addon-fg);
-    border: var(--kj-input-group-border-width) solid var(--kj-input-group-border-color);
-    font: var(--kj-input-group-addon-size) / 1.4 var(--kj-input-group-addon-font);
-    transition: var(--kj-transition);
-    white-space: nowrap;
-    user-select: none;
-  }
-
-  /* ── Focus — lift focused child above siblings so its border isn't clipped */
-  .kj-input-group [kjInput]:focus-visible,
-  .kj-input-group .kj-input:focus-visible,
-  .kj-input-group .kj-button:focus-visible {
-    position: relative;
-    z-index: 1;
-  }
-
-  /* ── Disabled state ─────────────────────────────────────────────────── */
-  .kj-input-group[data-disabled] {
-    opacity: 0.55;
-    pointer-events: none;
-  }
-}

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

@@ -1,90 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { KjInputGroupComponent, KjInputGroupAddonComponent } from './input-group';
-import { KjInputComponent } from '../input/input';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. Drives the prefix / suffix
- * addons surrounding a real `<kj-input>` plus the wrapper's orientation
- * and disabled state.
- */
-const orientation = signal<'horizontal' | 'vertical'>('horizontal');
-const prefix = signal('$');
-const suffix = signal('.00');
-const placeholder = signal('Amount');
-const disabled = signal(false);
-
-@Component({
-  selector: 'kj-input-group-playground',
-  standalone: true,
-  imports: [
-    KjInputGroupComponent,
-    KjInputGroupAddonComponent,
-    KjInputComponent,
-    FormsModule,
-  ],
-  styles: [`:host { display: block; max-width: 360px; }`],
-  template: `
-    <kj-input-group [kjOrientation]="orientation()" [kjDisabled]="disabled()">
-      @if (prefix()) {
-        <kj-input-group-addon>{{ prefix() }}</kj-input-group-addon>
-      }
-      <kj-input
-        type="text"
-        [placeholder]="placeholder()"
-        aria-label="Input group demo"
-      />
-      @if (suffix()) {
-        <kj-input-group-addon>{{ suffix() }}</kj-input-group-addon>
-      }
-    </kj-input-group>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjInputGroupPlaygroundDemo {
-  protected readonly orientation = orientation;
-  protected readonly prefix = prefix;
-  protected readonly suffix = suffix;
-  protected readonly placeholder = placeholder;
-  protected readonly disabled = disabled;
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjInputGroupPlaygroundDemo,
-  state: {
-    orientation: orientation as unknown as ReturnType<typeof signal>,
-    prefix: prefix as unknown as ReturnType<typeof signal>,
-    suffix: suffix as unknown as ReturnType<typeof signal>,
-    placeholder: placeholder as unknown as ReturnType<typeof signal>,
-    disabled: disabled as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    {
-      kind: 'chips',
-      name: 'orientation',
-      label: 'orientation',
-      options: ['horizontal', 'vertical'],
-    },
-    { kind: 'text', name: 'prefix', label: 'prefix' },
-    { kind: 'text', name: 'suffix', label: 'suffix' },
-    { kind: 'text', name: 'placeholder', label: 'placeholder' },
-    { kind: 'toggle', name: 'disabled', label: 'disabled' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      orientation: string;
-      prefix: string;
-      suffix: string;
-      placeholder: string;
-      disabled: boolean;
-    };
-    const groupAttrs: string[] = [`kjOrientation="${s.orientation}"`];
-    if (s.disabled) groupAttrs.push('[kjDisabled]="true"');
-    const slots: string[] = [];
-    if (s.prefix) slots.push(`  <kj-input-group-addon>${s.prefix}</kj-input-group-addon>`);
-    slots.push(`  <kj-input type="text" placeholder="${s.placeholder}" />`);
-    if (s.suffix) slots.push(`  <kj-input-group-addon>${s.suffix}</kj-input-group-addon>`);
-    return `<kj-input-group\n  ${groupAttrs.join('\n  ')}\n>\n${slots.join('\n')}\n</kj-input-group>`;
-  },
-};

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

@@ -1,142 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  booleanAttribute,
-  input,
-} from '@angular/core';
-import { KjInputGroup, KjInputGroupAddon } from '@kouji-ui/core';
-
-/**
- * Styled wrapper around the headless `KjInputGroup` / `KjInputGroupAddon`
- * directive family. Renders a flex row (or column) where `<kj-input-group-addon>`
- * elements flank a central `[kjInput]`, sharing collapsed borders so the
- * whole widget looks like a single field.
- *
- * All directive inputs (`kjVariant`, `kjSize`, `kjDisabled`, `kjOrientation`)
- * are forwarded to the composed `KjInputGroup` directive.
- *
- * @example
- * ```html
- * <kj-input-group>
- *   <kj-input-group-addon>$</kj-input-group-addon>
- *   <input kjInput type="text" placeholder="Amount" />
- *   <kj-input-group-addon>.00</kj-input-group-addon>
- * </kj-input-group>
- * ```
- * @doc-example Default
- *   Currency prefix and decimal suffix flanking a text input.
- *   @doc-file input-group.example.ts
- * @doc-example Usage
- *   Common input-group shapes — icon prefix, button suffix, and URL slug.
- *   @doc-file input-group.usage.example.ts
- * @doc-example With icon
- *   Decorative icon addon for search and similar affordances.
- *   @doc-file input-group.icon.example.ts
- * @doc-example With button
- *   Inline action button as a suffix (copy, submit, generate, etc.).
- *   @doc-file input-group.button.example.ts
- * @doc-example URL slug
- *   Static base URL prefix paired with an editable slug.
- *   @doc-file input-group.url.example.ts
- * @doc-example Variants
- *   Theme variants forwarded to the composed `KjInputGroup` directive.
- *   @doc-file input-group.variants.example.ts
- *
- * @doc-keyboard
- *   Tab — Moves focus to the inner input. Addons are skipped unless they project a focusable child.
- *
- * @doc-aria
- *   aria-hidden     — Set [kjAriaHidden]="true" on decorative addons (icons, currency symbols, units)
- *   data-position   — Mirrors the addon's resolved "prefix" / "suffix" position
- *   data-disabled   — Mirrors group-level [kjDisabled] for theme CSS
- *
- * @doc-touch
- *   Addons inherit the group's height — keep size ≥ `md` so the inline input
- *   stays at or above the 44 px target when it is the primary touch surface.
- *
- * @doc-a11y
- *   Decorative addons (icons, symbols) must use `[kjAriaHidden]="true"` so AT
- *   does not announce them ahead of the input value. Action addons that wrap a
- *   real `<button>` or `<a>` keep their native semantics; the group never
- *   inserts an extra `role`.
- *
- * @doc-related input,field,button
- *
- * @doc-css-var
- *   --kj-input-group-border-color — Border color shared across input and addons.
- *   --kj-input-group-border-width — Border thickness. Inherits --kj-border.
- *   --kj-input-group-radius       — Outer corner radius of the group. Inherits --kj-radius-field.
- *   --kj-input-group-addon-bg     — Background fill for prefix / suffix addons.
- *   --kj-input-group-addon-fg     — Foreground color inside addons.
- *   --kj-input-group-addon-font   — Font family used inside addons.
- *   --kj-input-group-addon-size   — Font size used inside addons.
- *   --kj-input-group-padding-x    — Horizontal padding inside addons.
- *   --kj-input-group-padding-y    — Vertical padding inside addons.
- *
- * @doc-category Library/Data input
- * @doc
- * @doc-name input-group
- * @doc-description Themed input with prefix and suffix addons such as icons, units, or buttons.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-input-group',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: KjInputGroup,
-      inputs: ['kjDisabled', 'kjOrientation'],
-    },
-  ],
-  template: `<ng-content />`,
-  styleUrl: './input-group.css',
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-input-group' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjInputGroupComponent {
-  /** Layout axis. Forwarded to `KjInputGroup`. @default 'horizontal' */
-  readonly kjOrientation = input<'horizontal' | 'vertical'>('horizontal');
-
-  /** Default variant forwarded to the group. */
-  readonly kjVariant = input<string | undefined>(undefined);
-
-  /** Default size forwarded to the group. */
-  readonly kjSize = input<string | undefined>(undefined);
-
-  /** Group-level disabled. OR-ed with any inner formControl disabled state. */
-  readonly kjDisabled = input(false, { transform: booleanAttribute });
-}
-
-/**
- * Styled prefix/suffix addon for use inside `<kj-input-group>`.
- *
- * Renders a bordered segment that visually connects to the inner input.
- * Mark decorative addons (icons, symbols) with `[kjAriaHidden]="true"`.
- *
- * @example
- * ```html
- * <kj-input-group>
- *   <kj-input-group-addon>https://</kj-input-group-addon>
- *   <input kjInput type="text" placeholder="example.com" />
- * </kj-input-group>
- * ```
- * @doc
- * @doc-name input-group
- */
-@Component({
-  selector: 'kj-input-group-addon',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: KjInputGroupAddon,
-      inputs: ['kjPosition', 'kjAriaHidden'],
-    },
-  ],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-input-group__addon' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjInputGroupAddonComponent {}

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

@@ -1,47 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { KjInputComponent } from '../input/input';
-import { KjButtonComponent } from '../button/button';
-import { KjInputGroupAddonComponent, KjInputGroupComponent } from './input-group';
-
-/**
- * Common input-group shapes — currency prefix, URL base, and an inline
- * action button. Copy-paste starting point.
- */
-@Component({
-  selector: 'kj-input-group-usage-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    KjInputGroupComponent,
-    KjInputGroupAddonComponent,
-    KjInputComponent,
-    KjButtonComponent,
-    FormsModule,
-  ],
-  styles: [`
-    :host { display: flex; flex-direction: column; gap: var(--kj-space-md); max-width: 480px; }
-  `],
-  template: `
-    <kj-input-group>
-      <kj-input-group-addon [kjAriaHidden]="true">$</kj-input-group-addon>
-      <kj-input type="text" placeholder="Amount" [(ngModel)]="amount" aria-label="Amount in dollars" />
-      <kj-input-group-addon [kjAriaHidden]="true">USD</kj-input-group-addon>
-    </kj-input-group>
-
-    <kj-input-group>
-      <kj-input-group-addon [kjAriaHidden]="true">kouji.dev/</kj-input-group-addon>
-      <kj-input type="text" placeholder="your-slug" aria-label="URL slug" />
-    </kj-input-group>
-
-    <kj-input-group>
-      <kj-input type="text" placeholder="API key" aria-label="API key" />
-      <kj-input-group-addon>
-        <kj-button kjSize="sm" kjVariant="ghost">Copy</kj-button>
-      </kj-input-group-addon>
-    </kj-input-group>
-  `,
-})
-export class KjInputGroupUsageExample {
-  readonly amount = signal('');
-}

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

@@ -1,8 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs (manually augmented)
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjInputMaskCreditCardExample } from './input-mask.credit-card.example';
-export { KjInputMaskCustomTokensExample } from './input-mask.custom-tokens.example';
-export { KjInputMaskDateExample } from './input-mask.date.example';
-export { KjInputMaskExample } from './input-mask.example';
-export { KjInputMaskUsageExample } from './input-mask.usage.example';
-export { KjInputMaskValidationExample } from './input-mask.validation.example';