@kouji-ui/components 0.1.1

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

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

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

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

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

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

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

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

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

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

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

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

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