@kouji-ui/components 0.1.1 → 0.1.2

package/src/date-picker/date-picker.playground.ts

@@ -1,79 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { KjDatePickerComponent } from './date-picker';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. Knobs cover the placeholder, the
- * first-day-of-week, and the read-only / disabled postures. The seeded value
- * tracks today's date so the popover anchors against a populated field.
- */
-const placeholder = signal('Pick a date');
-const firstDayOfWeek = signal<0 | 1 | 6>(0);
-const readonly = signal(false);
-const disabled = signal(false);
-const value = signal<Date | null>(new Date());
-
-@Component({
-  selector: 'kj-date-picker-playground',
-  standalone: true,
-  imports: [KjDatePickerComponent],
-  styles: [`
-    :host { display: flex; flex-direction: column; gap: var(--kj-space-md); min-height: 20rem; }
-    .selected { font-family: var(--kj-font-mono, monospace); color: var(--kj-fg-muted); font-size: 0.875rem; }
-  `],
-  template: `
-    <kj-date-picker
-      [(kjValue)]="value"
-      [kjPlaceholder]="placeholder()"
-      [kjFirstDayOfWeek]="firstDayOfWeek()"
-      [kjReadonly]="readonly()"
-      [kjDisabled]="disabled()"
-    />
-    <p class="selected">Selected: {{ value()?.toDateString() ?? '—' }}</p>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjDatePickerPlaygroundDemo {
-  protected readonly placeholder = placeholder;
-  protected readonly firstDayOfWeek = firstDayOfWeek;
-  protected readonly readonly = readonly;
-  protected readonly disabled = disabled;
-  protected readonly value = value;
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjDatePickerPlaygroundDemo,
-  state: {
-    placeholder: placeholder as unknown as ReturnType<typeof signal>,
-    firstDayOfWeek: firstDayOfWeek as unknown as ReturnType<typeof signal>,
-    readonly: readonly as unknown as ReturnType<typeof signal>,
-    disabled: disabled as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    { kind: 'text', name: 'placeholder', label: 'placeholder' },
-    {
-      kind: 'chips',
-      name: 'firstDayOfWeek',
-      label: 'week starts',
-      options: [0, 1, 6],
-    },
-    { kind: 'toggle', name: 'readonly', label: 'read-only' },
-    { kind: 'toggle', name: 'disabled', label: 'disabled' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      placeholder: string;
-      firstDayOfWeek: number;
-      readonly: boolean;
-      disabled: boolean;
-    };
-    const attrs: string[] = [
-      `kjPlaceholder="${s.placeholder}"`,
-      `[kjFirstDayOfWeek]="${s.firstDayOfWeek}"`,
-      '[(kjValue)]="when"',
-    ];
-    if (s.readonly) attrs.push('[kjReadonly]="true"');
-    if (s.disabled) attrs.push('[kjDisabled]="true"');
-    return `<kj-date-picker\n  ${attrs.join('\n  ')}\n/>`;
-  },
-};

package/src/date-picker/date-picker.spec.ts

@@ -1,71 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, test, beforeEach } from 'vitest';
-import { KjDatePickerComponent } from './date-picker';
-
-@Component({
-  standalone: true,
-  imports: [KjDatePickerComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-date-picker [(kjValue)]="value" [(kjOpen)]="open" />`,
-})
-class HostComponent {
-  value = signal<Date | null>(null);
-  open = signal(false);
-}
-
-describe('KjDatePickerComponent', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({ imports: [HostComponent] });
-  });
-
-  test('renders an input + toggle button', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    expect(fixture.nativeElement.querySelector('input.kj-date-picker__input')).not.toBeNull();
-    expect(fixture.nativeElement.querySelector('button.kj-date-picker__toggle')).not.toBeNull();
-  });
-
-  test('toggle button has aria-haspopup="dialog" + aria-controls', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const toggle = fixture.nativeElement.querySelector('button.kj-date-picker__toggle');
-    expect(toggle.getAttribute('aria-haspopup')).toBe('dialog');
-    expect(toggle.getAttribute('aria-controls')).toMatch(/^kj-date-picker-panel-/);
-  });
-
-  test('toggle click opens the panel', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const toggle = fixture.nativeElement.querySelector(
-      'button.kj-date-picker__toggle',
-    ) as HTMLButtonElement;
-    toggle.click();
-    fixture.detectChanges();
-    expect(fixture.componentInstance.open()).toBe(true);
-    const panel = fixture.nativeElement.querySelector('.kj-date-picker__panel');
-    expect(panel.hasAttribute('hidden')).toBe(false);
-  });
-
-  test('panel is hidden initially', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const panel = fixture.nativeElement.querySelector('.kj-date-picker__panel');
-    expect(panel.hasAttribute('hidden')).toBe(true);
-  });
-
-  test('clicking a calendar day selects and closes', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.open.set(true);
-    fixture.componentInstance.value.set(new Date(2025, 3, 15));
-    fixture.detectChanges();
-    const cells = fixture.nativeElement.querySelectorAll('button.kj-calendar__day');
-    expect(cells.length).toBe(42);
-    // Click cell 15 (some interior cell that is in-month)
-    const cell = cells[20] as HTMLButtonElement;
-    cell.click();
-    fixture.detectChanges();
-    expect(fixture.componentInstance.open()).toBe(false);
-    expect(fixture.componentInstance.value()).not.toBeNull();
-  });
-});

package/src/date-picker/date-picker.ts

@@ -1,185 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  booleanAttribute,
-  input,
-  model,
-} from '@angular/core';
-import {
-  KjDatePicker,
-  KjDatePickerCalendar,
-  KjDatePickerTrigger,
-} from '@kouji-ui/core';
-import { KjCalendarComponent } from '../calendar/calendar';
-
-/**
- * Styled Date Picker. Pairs a typed `<input>` with a popover calendar for
- * single-date selection.
- *
- * Native `Date` only — locale-aware formatting and parsing via
- * `Intl.DateTimeFormat`. The input is the focusable form control; the toggle
- * button to its right opens the calendar; clicking a day cell commits the
- * value and closes the popover.
- *
- * **Accessibility (WCAG 2.1 AAA):**
- * - input has `role="combobox"` + `aria-haspopup="dialog"` + `aria-expanded`
- *   + `aria-controls` per APG combobox+dialog pattern.
- * - panel has `role="dialog"` and `aria-modal="false"` (non-modal popup —
- *   Esc + outside-click close, focus restored to the input on close).
- * - keyboard: ArrowDown / Alt+ArrowDown opens; Escape closes; Enter parses
- *   and commits typed text. Inside the calendar, the full APG day-grid
- *   keyboard contract applies.
- *
- * @doc-example Default
- *   Typed input plus a popover calendar bound to a `signal<Date>`.
- *   @doc-file date-picker.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common date-picker usages — two-way binding,
- *   min / max bounds, and a read-only field.
- *   @doc-file date-picker.usage.example.ts
- * @doc-example Min / max bounds
- *   `[kjMin]` / `[kjMax]` block out-of-range days in the calendar.
- *   @doc-file date-picker.with-min-max.example.ts
- * @doc-example Disabled dates
- *   `[kjDisabledDates]` predicate disables individual cells (e.g. weekends).
- *   @doc-file date-picker.disabled-dates.example.ts
- * @doc-example Locale
- *   `kjLocale="fr-FR"` flips formatting, parsing, and first day of week.
- *   @doc-file date-picker.locale.example.ts
- * @doc-example Read-only
- *   `[kjReadonly]="true"` displays the value but blocks typing and selection.
- *   @doc-file date-picker.readonly.example.ts
- *
- * @doc-keyboard
- *   ArrowDown|Alt+ArrowDown — Opens the calendar popover from the input
- *   Escape                  — Closes the popover and restores focus to the input
- *   Enter                   — Parses the typed value and commits it (or selects the focused day in the calendar)
- *   ArrowLeft|ArrowRight    — In the calendar, moves the focused day by 1
- *   ArrowUp|ArrowDown       — In the calendar, moves the focused day by 7 (one week)
- *   PageUp|PageDown         — In the calendar, moves the focused day by 1 month
- *   Home|End                — In the calendar, jumps to the first / last day of the week
- *
- * @doc-aria
- *   role="combobox"   — On the input
- *   aria-haspopup     — "dialog" on the input
- *   aria-expanded     — Reflects open / closed state
- *   aria-controls     — Links the input to the calendar dialog id
- *   role="dialog"     — On the panel; `aria-modal="false"` (non-modal popup)
- *   role="grid"       — On the day grid (inherited from `<kj-calendar>`)
- *
- * @doc-css-var
- *   --kj-date-picker-input-height — Input height. `data-size="sm|lg"` overrides; default 2.25rem.
- *
- * @doc-touch
- *   The default 2.25rem (36px) input relies on the inline-control exception
- *   inside form rows. Use `kjSize="lg"` on the host (or override
- *   `--kj-date-picker-input-height`) to reach the full 44px touch target.
- *
- * @doc-a11y
- *   Follows the APG combobox + dialog pattern — the input is the focusable
- *   form control, the popover is non-modal (Esc / outside-click close), and
- *   focus is restored to the input on close. Min / max / disabled-dates
- *   predicates apply to both keyboard navigation and pointer selection.
- *
- * @doc-related calendar,time-picker,field
- *
- * @doc-category Library/Data input
- * @doc
- * @doc-name date-picker
- * @doc-description Themed single-date picker pairing a typed input with a popover calendar and locale-aware parsing.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-date-picker',
-  standalone: true,
-  imports: [
-    KjDatePicker,
-    KjDatePickerTrigger,
-    KjDatePickerCalendar,
-    KjCalendarComponent,
-  ],
-  template: `
-    <div
-      kjDatePicker
-      class="kj-date-picker"
-      #picker="kjDatePicker"
-      [attr.data-size]="kjSize() === 'md' ? null : kjSize()"
-      [kjValue]="kjValue() ?? null!"
-      (kjValueChange)="kjValue.set($event)"
-      [(kjOpen)]="kjOpen"
-      [kjMin]="kjMin() ?? null!"
-      [kjMax]="kjMax() ?? null!"
-      [kjDisabledDates]="kjDisabledDates() ?? null!"
-      [kjLocale]="kjLocale()"
-      [kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
-      [kjReadonly]="kjReadonly()"
-      [kjDisabled]="kjDisabled()"
-    >
-      <input
-        kjDatePickerTrigger
-        #trig="kjDatePickerTrigger"
-        class="kj-date-picker__input"
-        [placeholder]="kjPlaceholder()"
-      />
-      <div
-        kjDatePickerCalendar
-        [kjFor]="trig"
-        class="kj-date-picker__panel"
-      >
-        <kj-calendar
-          [(kjValue)]="kjValue"
-          [kjMin]="kjMin()"
-          [kjMax]="kjMax()"
-          [kjDisabledDates]="kjDisabledDates()"
-          [kjLocale]="kjLocale()"
-          [kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
-          (kjValueChange)="onCalendarSelect($event, picker)"
-        />
-      </div>
-    </div>
-  `,
-  styleUrl: './date-picker.css',
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-date-picker-host', style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjDatePickerComponent {
-  /** Currently selected date. Two-way bindable — `[(kjValue)]`. `null` clears. */
-  readonly kjValue = model<Date | null>(null);
-
-  /** Two-way bindable open state for the popover. */
-  readonly kjOpen = model<boolean>(false);
-
-  /** Earliest selectable date (inclusive). `null` = open. */
-  readonly kjMin = input<Date | null>(null);
-
-  /** Latest selectable date (inclusive). `null` = open. */
-  readonly kjMax = input<Date | null>(null);
-
-  /** Per-date predicate; `false` disables the cell. */
-  readonly kjDisabledDates = input<((d: Date) => boolean) | null>(null);
-
-  /** BCP-47 locale tag. Defaults to Angular's `LOCALE_ID`. */
-  readonly kjLocale = input<string>('');
-
-  /** First day of the week override (0=Sun … 6=Sat). */
-  readonly kjFirstDayOfWeek = input<number | null>(null);
-
-  /** Placeholder text for the input. */
-  readonly kjPlaceholder = input<string>('');
-
-  /** Read-only — value displays but cannot be edited. */
-  readonly kjReadonly = input<boolean, boolean | string>(false, { transform: booleanAttribute });
-
-  /** Disable the entire picker. */
-  readonly kjDisabled = input<boolean, boolean | string>(false, { transform: booleanAttribute });
-
-  /** Size tier — matches `KjInput`. `xs` (28px) for filter rows / inline editors. */
-  readonly kjSize = input<'xs' | 'sm' | 'md' | 'lg'>('md');
-
-  /** @internal — wired from the projected calendar. */
-  onCalendarSelect(date: Date | null, picker: KjDatePicker): void {
-    if (date) picker.selectDate(date);
-  }
-}

package/src/date-picker/index.ts

@@ -1 +0,0 @@
-export { KjDatePickerComponent } from './date-picker';

package/src/dialog/_examples/dialog.confirmation.example.ts

@@ -1,30 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { KjDialog, KjDialogService } from '@kouji-ui/core';
-import { KjButtonComponent } from '../../button/button';
-
-// TODO(wrapper-overlay): re-skin once styled wrapper layer lands.
-@Component({
-  selector: 'kj-dialog-confirmation-body',
-  standalone: true,
-  imports: [KjDialog],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-dialog [kjAlert]="true"
-    ><h2>Confirm</h2>
-    <p>Are you sure?</p></kj-dialog
-  >`,
-})
-class ConfirmationBody {}
-
-@Component({
-  selector: 'kj-dialog-confirmation-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-button (click)="open()">Confirm</kj-button>`,
-})
-export class KjDialogConfirmationExample {
-  private readonly dialog = inject(KjDialogService);
-  open(): void {
-    this.dialog.open(ConfirmationBody, { alert: true });
-  }
-}

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

@@ -1,30 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { KjDialog, KjDialogService } from '@kouji-ui/core';
-import { KjButtonComponent } from '../../button/button';
-
-// TODO(wrapper-overlay): re-skin via wrapper layer once styled overlay components land.
-@Component({
-  selector: 'kj-dialog-default-body',
-  standalone: true,
-  imports: [KjDialog],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-dialog
-    ><h2>Hello</h2>
-    <p>Dialog body</p></kj-dialog
-  >`,
-})
-class DialogBody {}
-
-@Component({
-  selector: 'kj-dialog-default-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-button (click)="open()">Open dialog</kj-button>`,
-})
-export class KjDialogDefaultExample {
-  private readonly dialog = inject(KjDialogService);
-  open(): void {
-    this.dialog.open(DialogBody);
-  }
-}

package/src/dialog/_examples/dialog.nested.example.ts

@@ -1,86 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjDialog,
-  KjDialogService,
-  KjDialogRef,
-  KjPopoverTrigger,
-  KjPopoverContent,
-  KjPopoverTitle,
-  KjPopoverClose,
-  KjTooltipTrigger,
-  KjTooltipContent,
-} from '@kouji-ui/core';
-import { KjButtonComponent } from '../../button/button';
-
-@Component({
-  selector: 'kj-dialog-nested-outer-body',
-  standalone: true,
-  imports: [
-    KjDialog,
-    KjButtonComponent,
-    KjPopoverTrigger,
-    KjPopoverContent,
-    KjPopoverTitle,
-    KjPopoverClose,
-    KjTooltipTrigger,
-    KjTooltipContent,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-dialog>
-      <h2>Outer dialog</h2>
-      <p>Open overlays from inside a modal — popover, tooltip, or another dialog.</p>
-
-      <kj-button kjTooltipTrigger #tt="kjTooltipTrigger">Hover for tooltip</kj-button>
-      <kj-tooltip-content [kjFor]="tt">Tooltip from inside a dialog</kj-tooltip-content>
-
-      <kj-button kjPopoverTrigger #pp="kjPopoverTrigger">Open popover</kj-button>
-      <kj-popover-content [kjFor]="pp">
-        <h3 kjPopoverTitle>Nested popover</h3>
-        <p>Anchored to a button inside the dialog.</p>
-        <kj-button kjPopoverClose>Close</kj-button>
-      </kj-popover-content>
-
-      <kj-button (click)="openInner()">Open another dialog</kj-button>
-      <kj-button (click)="ref.close()">Done</kj-button>
-    </kj-dialog>
-  `,
-})
-class OuterBody {
-  protected readonly ref = inject(KjDialogRef);
-  private readonly dialog = inject(KjDialogService);
-  protected openInner(): void {
-    this.dialog.open(InnerBody);
-  }
-}
-
-@Component({
-  selector: 'kj-dialog-nested-inner-body',
-  standalone: true,
-  imports: [KjDialog, KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-dialog>
-      <h2>Inner dialog</h2>
-      <p>Stacked above the outer dialog.</p>
-      <kj-button (click)="ref.close()">Close</kj-button>
-    </kj-dialog>
-  `,
-})
-class InnerBody {
-  protected readonly ref = inject(KjDialogRef);
-}
-
-@Component({
-  selector: 'kj-dialog-nested-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-button (click)="open()">Open dialog</kj-button>`,
-})
-export class KjDialogNestedExample {
-  private readonly dialog = inject(KjDialogService);
-  open(): void {
-    this.dialog.open(OuterBody);
-  }
-}

package/src/dialog/_examples/dialog.scrollable.example.ts

@@ -1,30 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { KjDialog, KjDialogService } from '@kouji-ui/core';
-import { KjButtonComponent } from '../../button/button';
-
-// TODO(wrapper-overlay): re-skin scrollable demo.
-@Component({
-  selector: 'kj-dialog-scrollable-body',
-  standalone: true,
-  imports: [KjDialog],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-dialog
-    ><h2>Long content</h2>
-    <div style="max-height:60vh; overflow:auto"><p>Lorem ipsum…</p></div></kj-dialog
-  >`,
-})
-class ScrollableBody {}
-
-@Component({
-  selector: 'kj-dialog-scrollable-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-button (click)="open()">Open scrollable</kj-button>`,
-})
-export class KjDialogScrollableExample {
-  private readonly dialog = inject(KjDialogService);
-  open(): void {
-    this.dialog.open(ScrollableBody);
-  }
-}

package/src/dialog/_examples/dialog.usage.example.ts

@@ -1,57 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { KjDialog, KjDialogRef, KjDialogService } from '@kouji-ui/core';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * A walkthrough of the most common dialog usages — open a body, resolve the
- * confirmation via the typed `KjDialogRef`, and react to the result through
- * `afterClosed$`.
- */
-@Component({
-  selector: 'kj-dialog-usage-body',
-  standalone: true,
-  imports: [KjDialog, KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-dialog>
-      <h2 style="margin:0 0 var(--kj-space-md)">Save changes?</h2>
-      <p>Your edits will be applied immediately.</p>
-      <div
-        style="display:flex; gap: var(--kj-space-sm); justify-content: flex-end; margin-top: var(--kj-space-lg)"
-      >
-        <kj-button kjVariant="ghost" (click)="ref.close(false)">Cancel</kj-button>
-        <kj-button kjVariant="default" (click)="ref.close(true)">Save</kj-button>
-      </div>
-    </kj-dialog>
-  `,
-})
-class DialogUsageBody {
-  protected readonly ref = inject<KjDialogRef<DialogUsageBody, boolean>>(KjDialogRef);
-}
-
-@Component({
-  selector: 'kj-dialog-usage-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        gap: var(--kj-space-md);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: ` <kj-button (click)="openConfirm()">Open confirmation</kj-button> `,
-})
-export class KjDialogUsageExample {
-  private readonly dialog = inject(KjDialogService);
-
-  openConfirm(): void {
-    const ref = this.dialog.open<DialogUsageBody, boolean>(DialogUsageBody);
-    ref.afterClosed$.subscribe((result) => {
-      /* handle the confirmation result */
-      void result;
-    });
-  }
-}

package/src/dialog/_examples/dialog.with-form.example.ts

@@ -1,48 +0,0 @@
-import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
-import { KjDialog, KjDialogService, KjDialogRef } from '@kouji-ui/core';
-import { KjButtonComponent } from '../../button/button';
-import { KjInputComponent } from '../../input/input';
-import { KjFieldComponent, KjFieldLabelComponent } from '../../field/field';
-
-@Component({
-  selector: 'kj-dialog-form-body',
-  standalone: true,
-  imports: [KjDialog, KjButtonComponent, KjInputComponent, KjFieldComponent, KjFieldLabelComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-dialog>
-      <h2 style="margin: 0 0 var(--kj-space-md);">Edit profile</h2>
-      <kj-field>
-        <kj-field-label>Display name</kj-field-label>
-        <kj-input placeholder="Jane Doe" />
-      </kj-field>
-      <kj-field>
-        <kj-field-label>Email</kj-field-label>
-        <kj-input placeholder="jane@example.com" />
-      </kj-field>
-      <div
-        style="display: flex; gap: var(--kj-space-sm); justify-content: flex-end; margin-top: var(--kj-space-lg);"
-      >
-        <kj-button kjVariant="ghost" (click)="ref.close()">Cancel</kj-button>
-        <kj-button (click)="ref.close('saved')">Save</kj-button>
-      </div>
-    </kj-dialog>
-  `,
-})
-class FormBody {
-  protected readonly ref = inject(KjDialogRef);
-}
-
-@Component({
-  selector: 'kj-dialog-with-form-example',
-  standalone: true,
-  imports: [KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-button (click)="open()">Open form</kj-button>`,
-})
-export class KjDialogWithFormExample {
-  private readonly dialog = inject(KjDialogService);
-  open(): void {
-    this.dialog.open(FormBody);
-  }
-}

package/src/dialog/_examples/index.ts

@@ -1,8 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjDialogConfirmationExample } from './dialog.confirmation.example';
-export { KjDialogDefaultExample } from './dialog.default.example';
-export { KjDialogNestedExample } from './dialog.nested.example';
-export { KjDialogScrollableExample } from './dialog.scrollable.example';
-export { KjDialogUsageExample } from './dialog.usage.example';
-export { KjDialogWithFormExample } from './dialog.with-form.example';