@kouji-ui/components 0.1.1

package/src/alert/alert.ts

@@ -0,0 +1,250 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ViewEncapsulation,
+  booleanAttribute,
+  input,
+} from '@angular/core';
+import {
+  KjAlert,
+  KjAlertActions,
+  KjAlertDescription,
+  KjAlertDismiss,
+  KjAlertIcon,
+  KjAlertTitle,
+  KjIconDirective,
+} from '@kouji-ui/core';
+import type { KjAlertMode } from '@kouji-ui/core';
+
+/**
+ * Styled wrapper around the `KjAlert` directive family. Provides the
+ * persistent in-flow notification surface (severity-aware chrome, severity
+ * border accent, banner mode, dismiss button). Visibility is consumer-managed
+ * — bind a signal via `@if` and clear it from `(kjAlertDismissed)`.
+ *
+ * Re-exposes `KjAlert`'s contract directly (variant, size, mode, static, role)
+ * with no new wrapper-layer inputs. Severity defaults: `error` → assertive,
+ * others → polite, `kjAlertStatic` → static region.
+ *
+ * @example
+ * ```html
+ * <kj-alert kjVariant="error" (kjAlertDismissed)="show.set(false)">
+ *   <kj-alert-icon />
+ *   <kj-alert-title>Could not save draft</kj-alert-title>
+ *   <kj-alert-description>Network request timed out — retry?</kj-alert-description>
+ *   <kj-alert-actions>
+ *     <kj-button (click)="retry()">Retry</kj-button>
+ *   </kj-alert-actions>
+ *   <kj-alert-dismiss />
+ * </kj-alert>
+ * ```
+ * @doc-example Default
+ *   The default playground — `info` severity with icon, title, and description.
+ *   @doc-file alert.example.ts
+ * @doc-example Usage
+ *   A walkthrough of the common shapes — severity variants, dismissible flow,
+ *   and an action button row. Use this as the copy-paste starting point.
+ *   @doc-file alert.usage.example.ts
+ * @doc-example Variants
+ *   Info / success / warning / error — severity drives the stripe and icon tint.
+ *   @doc-file alert.variants.example.ts
+ * @doc-example Dismissible
+ *   Project `<kj-alert-dismiss>` and listen to `(kjAlertDismissed)` to clear.
+ *   @doc-file alert.dismissible.example.ts
+ * @doc-example With actions
+ *   Drop `<kj-button>`s inside `<kj-alert-actions>` for retry / view-details flows.
+ *   @doc-file alert.with-actions.example.ts
+ * @doc-example Static banner
+ *   `kjAlertStatic` removes the live region — use for page-persistent notices.
+ *   @doc-file alert.banner.example.ts
+ *
+ * @doc-keyboard
+ *   Tab           — Moves focus through interactive children (actions, dismiss)
+ *   Enter|Space   — Activates the focused dismiss button or action
+ *
+ * @doc-aria
+ *   role            — `alert` for error severity (assertive), `status` otherwise (polite); `kjAlertStatic` switches to `region`
+ *   aria-live       — `assertive` for error, `polite` for info/success/warning
+ *   aria-labelledby — Wired to the title id when `<kj-alert-title>` is projected
+ *   aria-describedby — Wired to the description id when `<kj-alert-description>` is projected
+ *   data-variant    — Mirrors the severity for theme/scope hooks
+ *
+ * @doc-touch
+ *   The dismiss button defaults to `size="icon"` (44×44) so it meets WCAG 2.5.5
+ *   out of the box. Action buttons inherit `<kj-button>` size rules.
+ *
+ * @doc-a11y
+ *   Severity drives the live region politeness so screen readers announce
+ *   errors immediately but don't interrupt for routine info. Dismiss is a
+ *   real `<button>` with `aria-label="Dismiss"`; consumers can swap the
+ *   label via `kjAlertDismissLabel`. Decorative icons are `aria-hidden="true"`.
+ *
+ * @doc-related toast,dialog,banner
+ *
+ * @doc-css-var
+ *   --kj-alert-bg            — Background fill. Defaults to --kj-bg-body.
+ *   --kj-alert-fg            — Foreground (body text) color. Defaults to --kj-fg-default.
+ *   --kj-alert-border-color  — Outer border color. Defaults to --kj-border-default.
+ *   --kj-alert-accent        — Severity stripe + icon + title color. Variants set this per severity.
+ *   --kj-alert-radius        — Corner radius. Inherits --kj-radius-box.
+ *   --kj-alert-padding-x     — Horizontal padding. Sizes override.
+ *   --kj-alert-padding-y     — Vertical padding. Sizes override.
+ *   --kj-alert-gap           — Gap between icon, body, and actions.
+ *   --kj-alert-font-size     — Body font size. Sizes override.
+ *
+ * @doc-category Library/Feedback
+ * @doc
+ * @doc-name alert
+ * @doc-description Themed in-flow notification with severity variants, optional dismiss button, and action slots.
+ * @doc-is-main
+ */
+@Component({
+  selector: 'kj-alert',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: KjAlert,
+      inputs: [
+        'kjVariant',
+        'kjSize',
+        'kjAlertMode',
+        'kjAlertStatic',
+        'kjAlertRole',
+      ],
+      outputs: ['kjAlertDismissed'],
+    },
+  ],
+  template: `
+    <ng-content select="[kjAlertIcon],kj-alert-icon" />
+    <div class="kj-alert__body">
+      <ng-content select="[kjAlertTitle],kj-alert-title" />
+      <ng-content select="[kjAlertDescription],kj-alert-description" />
+      <ng-content />
+    </div>
+    <ng-content select="[kjAlertActions],kj-alert-actions" />
+    <ng-content select="[kjAlertDismiss],kj-alert-dismiss" />
+  `,
+  styleUrl: './alert.css',
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-alert' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjAlertComponent {
+  // Inputs are forwarded via `hostDirectives.inputs` above. Re-declared here
+  // only to surface them in the docs extractor (which inspects the wrapper
+  // class). The actual signal lives on the composed directive.
+  readonly kjVariant = input<string>('info');
+  readonly kjSize = input<string>('md');
+  readonly kjAlertMode = input<KjAlertMode | undefined>(undefined);
+  readonly kjAlertStatic = input(false, { transform: booleanAttribute });
+  readonly kjAlertRole = input<string | undefined>(undefined);
+}
+
+/**
+ * Decorative icon slot inside `<kj-alert>`. Wraps `KjAlertIcon` so it picks
+ * up `aria-hidden="true"` and `data-variant` from the parent alert context.
+ *
+ * @doc-category Library/Feedback
+ * @doc
+ * @doc-name alert
+ */
+@Component({
+  selector: 'kj-alert-icon',
+  standalone: true,
+  hostDirectives: [KjAlertIcon],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-alert__icon' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjAlertIconComponent {}
+
+/**
+ * Title for the alert. Apply to a heading element (or rely on the wrapper —
+ * the wrapper defaults to a `<strong>`-styled element via CSS, but consumers
+ * SHOULD use `<h3 kjAlertTitle>` when the alert lives in a content region).
+ *
+ * @doc-category Library/Feedback
+ * @doc
+ * @doc-name alert
+ */
+@Component({
+  selector: 'kj-alert-title',
+  standalone: true,
+  hostDirectives: [KjAlertTitle],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-alert__title' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjAlertTitleComponent {}
+
+/**
+ * Description body for the alert. Wires `aria-describedby` via `KjAlertDescription`.
+ *
+ * @doc-category Library/Feedback
+ * @doc
+ * @doc-name alert
+ */
+@Component({
+  selector: 'kj-alert-description',
+  standalone: true,
+  hostDirectives: [KjAlertDescription],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-alert__description' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjAlertDescriptionComponent {}
+
+/**
+ * Container for action buttons (Retry, View details, …). Sets `role="group"`
+ * with an overridable `aria-label`. Compose `<kj-button>` instances inside.
+ *
+ * @doc-category Library/Feedback
+ * @doc
+ * @doc-name alert
+ */
+@Component({
+  selector: 'kj-alert-actions',
+  standalone: true,
+  hostDirectives: [{ directive: KjAlertActions, inputs: ['kjAlertActionsLabel'] }],
+  template: `<ng-content />`,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-alert__actions' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjAlertActionsComponent {
+  readonly kjAlertActionsLabel = input<string>('Alert actions');
+}
+
+/**
+ * Dismiss button. Renders a real `<button kjAlertDismiss>` so the directive
+ * picks up the full `KjButton` chrome (focus ring, ARIA-disabled). Default
+ * content is `×`; override via projected content. Place inside `<kj-alert>`.
+ *
+ * @doc-category Library/Feedback
+ * @doc
+ * @doc-name alert
+ */
+@Component({
+  selector: 'kj-alert-dismiss',
+  standalone: true,
+  imports: [KjAlertDismiss, KjIconDirective],
+  template: `<button
+    type="button"
+    kjAlertDismiss
+    class="kj-alert__dismiss"
+    [kjAlertDismissLabel]="kjAlertDismissLabel()"
+    [kjAlertDismissVariant]="kjAlertDismissVariant()"
+    [kjAlertDismissSize]="kjAlertDismissSize()"
+  ><ng-content><i kjIcon="x"></i></ng-content></button>`,
+  encapsulation: ViewEncapsulation.None,
+  host: { style: 'display: contents;' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KjAlertDismissComponent {
+  readonly kjAlertDismissLabel = input<string>('Dismiss');
+  readonly kjAlertDismissVariant = input<string>('ghost');
+  readonly kjAlertDismissSize = input<string>('icon');
+}

package/src/alert/alert.usage.example.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { KjButtonComponent } from '../button/button';
+import {
+  KjAlertActionsComponent,
+  KjAlertComponent,
+  KjAlertDescriptionComponent,
+  KjAlertDismissComponent,
+  KjAlertIconComponent,
+  KjAlertTitleComponent,
+} from './alert';
+
+/**
+ * Common alert shapes — info, success, error with retry action, and a
+ * dismissible warning. Use this as the copy-paste starting point.
+ */
+@Component({
+  selector: 'kj-alert-usage-example',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    KjAlertComponent,
+    KjAlertIconComponent,
+    KjAlertTitleComponent,
+    KjAlertDescriptionComponent,
+    KjAlertActionsComponent,
+    KjAlertDismissComponent,
+    KjButtonComponent,
+  ],
+  styles: [`:host { display: flex; flex-direction: column; gap: var(--kj-space-md); }`],
+  template: `
+    <kj-alert kjVariant="info">
+      <kj-alert-icon>i</kj-alert-icon>
+      <kj-alert-title>New theme tokens</kj-alert-title>
+      <kj-alert-description>Try the brutalist preset in your settings.</kj-alert-description>
+    </kj-alert>
+
+    <kj-alert kjVariant="error">
+      <kj-alert-icon>!</kj-alert-icon>
+      <kj-alert-title>Could not save draft</kj-alert-title>
+      <kj-alert-description>Network request timed out.</kj-alert-description>
+      <kj-alert-actions>
+        <kj-button kjSize="sm" (click)="retry()">Retry</kj-button>
+      </kj-alert-actions>
+    </kj-alert>
+
+    @if (show()) {
+      <kj-alert kjVariant="warning" (kjAlertDismissed)="show.set(false)">
+        <kj-alert-icon>!</kj-alert-icon>
+        <kj-alert-description>Storage is 92% full.</kj-alert-description>
+        <kj-alert-dismiss />
+      </kj-alert>
+    }
+  `,
+})
+export class KjAlertUsageExample {
+  readonly show = signal(true);
+  retry(): void { /* re-fetch */ }
+}

package/src/alert/index.ts

@@ -0,0 +1,8 @@
+export {
+  KjAlertComponent,
+  KjAlertIconComponent,
+  KjAlertTitleComponent,
+  KjAlertDescriptionComponent,
+  KjAlertActionsComponent,
+  KjAlertDismissComponent,
+} from './alert';

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

@@ -0,0 +1,31 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAvatarGroupComponent } from '../avatar-group';
+import { KjAvatarComponent } from '../avatar';
+
+/**
+ * Default usage example for KjAvatarGroupComponent.
+ * Stacks four `<kj-avatar>` children with the group's defaults
+ * (`kjMax=4`, `kjShape='circle'`, `role="group"`).
+ */
+@Component({
+  selector: 'kj-avatar-group-example',
+  standalone: true,
+  imports: [KjAvatarGroupComponent, KjAvatarComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-avatar-group kjAriaLabel="collaborators">
+      <kj-avatar content="AL" alt="Ada Lovelace" />
+      <kj-avatar content="GH" alt="Grace Hopper" />
+      <kj-avatar content="AT" alt="Alan Turing" />
+      <kj-avatar content="KJ" alt="Katherine Johnson" />
+    </kj-avatar-group>
+  `,
+})
+export class KjAvatarGroupExample {}

package/src/avatar/_examples/avatar-group.list.example.ts

@@ -0,0 +1,45 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAvatarGroupComponent } from '../avatar-group';
+import { KjAvatarComponent } from '../avatar';
+
+/**
+ * Semantic `role="list"` variant: when the group's children are interactive
+ * (e.g. links to teammate profiles), set `kjRole="list"` so AT announces a
+ * list of items rather than a generic group. Each child anchor carries
+ * `role="listitem"` so the listitem semantics survive the wrapping `<a>`.
+ */
+@Component({
+  selector: 'kj-avatar-group-list-example',
+  standalone: true,
+  imports: [KjAvatarGroupComponent, KjAvatarComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+      a {
+        display: inline-flex;
+        text-decoration: none;
+        color: inherit;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-avatar-group kjRole="list" kjAriaLabel="teammates">
+      <a role="listitem" href="#ada" aria-label="Ada Lovelace">
+        <kj-avatar content="AL" alt="Ada Lovelace" />
+      </a>
+      <a role="listitem" href="#grace" aria-label="Grace Hopper">
+        <kj-avatar content="GH" alt="Grace Hopper" />
+      </a>
+      <a role="listitem" href="#alan" aria-label="Alan Turing">
+        <kj-avatar content="AT" alt="Alan Turing" />
+      </a>
+      <a role="listitem" href="#katherine" aria-label="Katherine Johnson">
+        <kj-avatar content="KJ" alt="Katherine Johnson" />
+      </a>
+    </kj-avatar-group>
+  `,
+})
+export class KjAvatarGroupListExample {}

package/src/avatar/_examples/avatar-group.overflow.example.ts

@@ -0,0 +1,33 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAvatarGroupComponent } from '../avatar-group';
+import { KjAvatarComponent } from '../avatar';
+
+/**
+ * Overflow example: seven projected avatars with `kjMax=3` cap show three
+ * faces plus a `+4` chip. The count-aware label reads `3 of 7 collaborators`.
+ */
+@Component({
+  selector: 'kj-avatar-group-overflow-example',
+  standalone: true,
+  imports: [KjAvatarGroupComponent, KjAvatarComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-avatar-group [kjMax]="3" kjAriaLabel="collaborators">
+      <kj-avatar content="AL" alt="Ada Lovelace" />
+      <kj-avatar content="GH" alt="Grace Hopper" />
+      <kj-avatar content="AT" alt="Alan Turing" />
+      <kj-avatar content="KJ" alt="Katherine Johnson" />
+      <kj-avatar content="MH" alt="Margaret Hamilton" />
+      <kj-avatar content="DK" alt="Donald Knuth" />
+      <kj-avatar content="BL" alt="Barbara Liskov" />
+    </kj-avatar-group>
+  `,
+})
+export class KjAvatarGroupOverflowExample {}

package/src/avatar/_examples/avatar-group.shapes.example.ts

@@ -0,0 +1,39 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAvatarGroupComponent } from '../avatar-group';
+import { KjAvatarComponent } from '../avatar';
+
+/**
+ * Shape propagation: `kjShape` on the group cascades to children — and to
+ * the overflow chip — via the `KJ_AVATAR_GROUP` context. Two groups
+ * demonstrate the `'circle'` (default) and `'rounded'` variants without
+ * setting `shape` on individual avatars.
+ */
+@Component({
+  selector: 'kj-avatar-group-shapes-example',
+  standalone: true,
+  imports: [KjAvatarGroupComponent, KjAvatarComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-avatar-group kjShape="circle" kjAriaLabel="circle collaborators">
+      <kj-avatar content="AL" alt="Ada Lovelace" />
+      <kj-avatar content="GH" alt="Grace Hopper" />
+      <kj-avatar content="AT" alt="Alan Turing" />
+    </kj-avatar-group>
+
+    <kj-avatar-group kjShape="rounded" kjAriaLabel="rounded collaborators">
+      <kj-avatar content="AL" alt="Ada Lovelace" />
+      <kj-avatar content="GH" alt="Grace Hopper" />
+      <kj-avatar content="AT" alt="Alan Turing" />
+    </kj-avatar-group>
+  `,
+})
+export class KjAvatarGroupShapesExample {}

package/src/avatar/_examples/avatar-group.sizes.example.ts

@@ -0,0 +1,44 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAvatarGroupComponent } from '../avatar-group';
+import { KjAvatarComponent } from '../avatar';
+
+/**
+ * Size propagation: `kjSize` on the group cascades to children via the
+ * `KJ_AVATAR_GROUP` context. Three groups render at small, medium, and
+ * large without setting `size` on each child.
+ */
+@Component({
+  selector: 'kj-avatar-group-sizes-example',
+  standalone: true,
+  imports: [KjAvatarGroupComponent, KjAvatarComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--kj-space-md);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-avatar-group kjSize="sm" kjAriaLabel="small collaborators">
+      <kj-avatar content="AL" alt="Ada Lovelace" />
+      <kj-avatar content="GH" alt="Grace Hopper" />
+      <kj-avatar content="AT" alt="Alan Turing" />
+    </kj-avatar-group>
+
+    <kj-avatar-group kjSize="md" kjAriaLabel="medium collaborators">
+      <kj-avatar content="AL" alt="Ada Lovelace" />
+      <kj-avatar content="GH" alt="Grace Hopper" />
+      <kj-avatar content="AT" alt="Alan Turing" />
+    </kj-avatar-group>
+
+    <kj-avatar-group kjSize="lg" kjAriaLabel="large collaborators">
+      <kj-avatar content="AL" alt="Ada Lovelace" />
+      <kj-avatar content="GH" alt="Grace Hopper" />
+      <kj-avatar content="AT" alt="Alan Turing" />
+    </kj-avatar-group>
+  `,
+})
+export class KjAvatarGroupSizesExample {}

package/src/avatar/_examples/avatar.default.example.ts

@@ -0,0 +1,18 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAvatarComponent } from '../avatar';
+
+@Component({
+  selector: 'kj-avatar-default-example',
+  standalone: true,
+  imports: [KjAvatarComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: ` <kj-avatar content="JD" /> `,
+})
+export class KjAvatarDefaultExample {}

package/src/avatar/_examples/avatar.initials.example.ts

@@ -0,0 +1,20 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAvatarComponent } from '../avatar';
+
+@Component({
+  selector: 'kj-avatar-initials-example',
+  standalone: true,
+  imports: [KjAvatarComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-avatar size="lg" src="https://example.invalid/missing.png" alt="Missing" content="NA" />
+  `,
+})
+export class KjAvatarInitialsExample {}

package/src/avatar/_examples/avatar.shapes.example.ts

@@ -0,0 +1,22 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAvatarComponent } from '../avatar';
+
+@Component({
+  selector: 'kj-avatar-shapes-example',
+  standalone: true,
+  imports: [KjAvatarComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        gap: 0.75rem;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-avatar shape="circle" content="C" />
+    <kj-avatar shape="rounded" content="R" />
+  `,
+})
+export class KjAvatarShapesExample {}

package/src/avatar/_examples/avatar.sizes.example.ts

@@ -0,0 +1,26 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAvatarComponent } from '../avatar';
+
+@Component({
+  selector: 'kj-avatar-sizes-example',
+  standalone: true,
+  imports: [KjAvatarComponent],
+  styles: [
+    `
+      :host {
+        display: flex;
+        gap: 0.75rem;
+        align-items: center;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-avatar size="xs" content="XS" />
+    <kj-avatar size="sm" content="SM" />
+    <kj-avatar size="md" content="MD" />
+    <kj-avatar size="lg" content="LG" />
+    <kj-avatar size="xl" content="XL" />
+  `,
+})
+export class KjAvatarSizesExample {}

package/src/avatar/_examples/avatar.with-image.example.ts

@@ -0,0 +1,20 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjAvatarComponent } from '../avatar';
+
+@Component({
+  selector: 'kj-avatar-with-image-example',
+  standalone: true,
+  imports: [KjAvatarComponent],
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <kj-avatar size="lg" src="https://i.pravatar.cc/96?img=12" alt="Jane Doe" content="JD" />
+  `,
+})
+export class KjAvatarWithImageExample {}

package/src/avatar/_examples/index.ts

@@ -0,0 +1,12 @@
+// AUTO-GENERATED by scripts/migrate-examples.mjs
+// One barrel per component folder — used by the docs app as a lazy chunk.
+export { KjAvatarDefaultExample } from './avatar.default.example';
+export { KjAvatarGroupExample } from './avatar-group.example';
+export { KjAvatarGroupListExample } from './avatar-group.list.example';
+export { KjAvatarGroupOverflowExample } from './avatar-group.overflow.example';
+export { KjAvatarGroupShapesExample } from './avatar-group.shapes.example';
+export { KjAvatarGroupSizesExample } from './avatar-group.sizes.example';
+export { KjAvatarInitialsExample } from './avatar.initials.example';
+export { KjAvatarShapesExample } from './avatar.shapes.example';
+export { KjAvatarSizesExample } from './avatar.sizes.example';
+export { KjAvatarWithImageExample } from './avatar.with-image.example';