@kouji-ui/components 0.1.1 → 0.1.3

package/src/stepper/stepper.ts

@@ -1,242 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
-import {
-  KjStep,
-  KjStepContent,
-  KjStepLabel,
-  KjStepper,
-  KjStepperNext,
-  KjStepperPrevious,
-  KjStepperReset,
-} from '@kouji-ui/core';
-
-/**
- * Styled root wrapper around the headless `KjStepper` directive.
- *
- * Renders an `<ol>` host carrying the directive, projects `<kj-step>` children,
- * and exposes the same kj-prefixed inputs as the directive — `kjActiveStep`
- * (two-way), `kjLinear`, `kjOrientation`, `kjLoop`, `kjArrowNavigation`,
- * `kjResetStepStates`.
- *
- * @example
- * ```html
- * <kj-stepper [(kjActiveStep)]="step" [kjLinear]="true">
- *   <kj-step [kjStepCompleted]="form1.valid()">
- *     <kj-step-label>Account</kj-step-label>
- *     <kj-step-content>...</kj-step-content>
- *   </kj-step>
- *   <kj-step>
- *     <kj-step-label>Confirm</kj-step-label>
- *     <kj-step-content>...</kj-step-content>
- *   </kj-step>
- * </kj-stepper>
- * ```
- *
- * @doc-example Default
- *   The default playground — three-step linear wizard with completion gating.
- *   @doc-file stepper.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common stepper usages — linear vs non-linear,
- *   active step tracking, and Next / Previous / Reset commands.
- *   @doc-file stepper.usage.example.ts
- * @doc-example Non-linear
- *   `[kjLinear]="false"` lets the user jump to any step regardless of order.
- *   @doc-file stepper.non-linear.example.ts
- * @doc-example Vertical
- *   `kjOrientation="vertical"` stacks the steps top-to-bottom.
- *   @doc-file stepper.vertical.example.ts
- * @doc-example With error
- *   `[kjStepError]="true"` marks a step as failed; theme swaps the indicator.
- *   @doc-file stepper.with-error.example.ts
- * @doc-example Optional step
- *   `[kjStepOptional]="true"` lets the user skip without blocking advancement.
- *   @doc-file stepper.optional-step.example.ts
- *
- * @doc-keyboard
- *   ArrowRight|ArrowDown — Moves focus to the next step label (orientation-aware)
- *   ArrowLeft|ArrowUp    — Moves focus to the previous step label
- *   Home                 — Moves focus to the first step
- *   End                  — Moves focus to the last step
- *   Enter|Space          — Activates the focused step label (gated by `kjLinear`)
- *   Tab                  — Leaves the step list and moves into the active step content
- *
- * @doc-aria
- *   role="list"          — applied to the `<ol>` host of `<kj-stepper>`
- *   aria-current="step"  — set on the active step indicator
- *   aria-disabled        — set on steps that cannot be activated (linear + uncompleted)
- *   aria-orientation     — reflects `kjOrientation` ("horizontal" | "vertical")
- *   hidden / inert       — applied to inactive `<kj-step-content>` panels
- *
- * @doc-touch
- *   Step labels default to a ~44px hit area at `md` density. Pair with
- *   `kjOrientation="vertical"` on narrow viewports so labels stay tappable.
- *
- * @doc-a11y
- *   Implements the WAI-ARIA Wizard pattern. Roving tabindex via
- *   `KjRovingTabindex` keeps the step list as a single Tab stop; arrow keys
- *   move focus between labels. Linear mode disables steps the user has not
- *   yet earned — non-linear mode treats every step as freely reachable.
- *
- * @doc-related tabs,progress-bar,form
- *
- * @doc-css-var
- *   --kj-stepper-gap             — Vertical gap between steps in the list.
- *   --kj-stepper-indicator-size  — Diameter of the numbered step indicator circle.
- *   --kj-stepper-bg              — Default step indicator background.
- *   --kj-stepper-border          — Default step indicator and content border color.
- *   --kj-stepper-active          — Background/border color for the active step indicator.
- *   --kj-stepper-active-fg       — Foreground color rendered on top of the active indicator.
- *   --kj-stepper-completed       — Background color for steps marked completed (with check mark).
- *   --kj-stepper-error           — Background color for steps marked in error state.
- *   --kj-stepper-muted           — Foreground color for inactive step labels.
- *
- * @doc-category Library/Navigation
- * @doc
- * @doc-name stepper
- * @doc-description Themed multi-step wizard with linear or non-linear progression and built-in navigation controls.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-stepper',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: KjStepper,
-      inputs: [
-        'kjActiveStep',
-        'kjLinear',
-        'kjOrientation',
-        'kjLoop',
-        'kjArrowNavigation',
-        'kjResetStepStates',
-      ],
-      outputs: ['kjActiveStepChange'],
-    },
-  ],
-  template: `<ng-content />`,
-  styleUrl: './stepper.css',
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    class: 'kj-stepper',
-    role: 'list',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjStepperComponent {}
-
-/**
- * Single step within a `<kj-stepper>`. Forwards completion / error / optional /
- * disabled / key state down to the headless `KjStep` directive.
- *
- * Project a `<kj-step-label>` and (optionally) a `<kj-step-content>` inside.
- * @doc
- * @doc-name stepper
- */
-@Component({
-  selector: 'kj-step',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: KjStep,
-      inputs: [
-        'kjStepCompleted',
-        'kjStepError',
-        'kjStepOptional',
-        'kjStepDisabled',
-        'kjStepKey',
-      ],
-    },
-  ],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-step' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjStepComponent {}
-
-/**
- * Header / clickable label for a `<kj-step>`. Renders an inner `<button>`
- * carrying `[kjStepLabel]` so APG wizard semantics and roving tabindex
- * stay correct.
- * @doc
- * @doc-name stepper
- */
-@Component({
-  selector: 'kj-step-label',
-  standalone: true,
-  imports: [KjStepLabel],
-  template: `<button type="button" kjStepLabel class="kj-step__label"><ng-content /></button>`,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjStepLabelComponent {}
-
-/**
- * Content panel for a `<kj-step>`. Renders an inner `<section>` carrying
- * `[kjStepContent]`; the directive host-binds `[hidden]` / `[inert]` so the
- * panel is visible only when its parent step is active.
- * @doc
- * @doc-name stepper
- */
-@Component({
-  selector: 'kj-step-content',
-  standalone: true,
-  imports: [KjStepContent],
-  template: `<section kjStepContent class="kj-step__content"><ng-content /></section>`,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjStepContentComponent {}
-
-/**
- * Stepper-level *Next* command. Renders a `<button>` with `[kjStepperNext]`,
- * which host-binds `[disabled]` from the parent's `canAdvance()`.
- * @doc
- * @doc-name stepper
- */
-@Component({
-  selector: 'kj-stepper-next',
-  standalone: true,
-  imports: [KjStepperNext],
-  template: `<button type="button" kjStepperNext class="kj-stepper-action kj-stepper-action--next"><ng-content /></button>`,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjStepperNextComponent {}
-
-/**
- * Stepper-level *Previous* command. Renders a `<button>` with
- * `[kjStepperPrevious]`, which host-binds `[disabled]` from the parent's
- * `canRetreat()`.
- * @doc
- * @doc-name stepper
- */
-@Component({
-  selector: 'kj-stepper-previous',
-  standalone: true,
-  imports: [KjStepperPrevious],
-  template: `<button type="button" kjStepperPrevious class="kj-stepper-action kj-stepper-action--previous"><ng-content /></button>`,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjStepperPreviousComponent {}
-
-/**
- * Stepper-level *Reset* command. Renders a `<button>` with `[kjStepperReset]`;
- * never gated.
- * @doc
- * @doc-name stepper
- */
-@Component({
-  selector: 'kj-stepper-reset',
-  standalone: true,
-  imports: [KjStepperReset],
-  template: `<button type="button" kjStepperReset class="kj-stepper-action kj-stepper-action--reset"><ng-content /></button>`,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjStepperResetComponent {}

package/src/table/_examples/index.ts

@@ -1,23 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjTableColumnPinningExample } from './table.column-pinning.example';
-export { KjTableColumnResizeExample } from './table.column-resize.example';
-export { KjTableColumnVisibilityExample } from './table.column-visibility.example';
-export { KjTableDensityExample } from './table.density.example';
-export { KjTableEditableExample } from './table.editable.example';
-export { KjTableEmptyAndErrorExample } from './table.empty-and-error.example';
-export { KjTableExample } from './table.example';
-export { KjTableExportExample } from './table.export.example';
-export { KjTableFilterableExample } from './table.filterable.example';
-export { KjTableGroupingExample } from './table.grouping.example';
-export { KjTableKeyboardExample } from './table.keyboard.example';
-export { KjTableMasterDetailExample } from './table.master-detail.example';
-export { KjTablePersistenceExample } from './table.persistence.example';
-export { KjTablePlayground } from './table.playground';
-export { KjTableRowPinningExample } from './table.row-pinning.example';
-export { KjTableSelectionExample } from './table.selection.example';
-export { KjTableServerModeExample } from './table.server-mode.example';
-export { KjTableSortableExample } from './table.sortable.example';
-export { KjTableThemingExample } from './table.theming.example';
-export { KjTableUsageExample } from './table.usage.example';
-export { KjTableVirtualizedExample } from './table.virtualized.example';

package/src/table/_examples/table.column-pinning.example.ts

@@ -1,55 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { kjColumn, type KjColumnDef } from '@kouji-ui/core';
-import { KjTableComponent } from '../table';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  joined: string;
-  status: string;
-  salary: number;
-  actions: string;
-}
-
-/**
- * Column pinning — the `id` column is pinned left and the `actions` column is
- * pinned right via `kjPin`. Unpinned columns between them scroll horizontally
- * inside the table viewport while pinned columns stay fixed.
- *
- */
-@Component({
-  selector: 'kj-table-column-pinning-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [KjTableComponent],
-  styles: [`
-    :host { display: block; }
-    .kj-table-body { overflow-x: auto; }
-  `],
-  template: `
-    <kj-table [kjData]="rows()" [kjColumns]="cols" [kjGetRowId]="getRowId" />
-  `,
-})
-export class KjTableColumnPinningExample {
-  protected readonly getRowId = (r: User): string => r.id;
-
-  protected readonly cols: KjColumnDef<User>[] = [
-    kjColumn<User>({ accessorKey: 'id',      header: 'ID',      kjPin: 'left'  }),
-    kjColumn<User>({ accessorKey: 'name',    header: 'Name'   }),
-    kjColumn<User>({ accessorKey: 'email',   header: 'Email'  }),
-    kjColumn<User>({ accessorKey: 'role',    header: 'Role'   }),
-    kjColumn<User>({ accessorKey: 'joined',  header: 'Joined' }),
-    kjColumn<User>({ accessorKey: 'status',  header: 'Status' }),
-    kjColumn<User>({ accessorKey: 'salary',  header: 'Salary' }),
-    kjColumn<User>({ accessorKey: 'actions', header: 'Actions', kjPin: 'right' }),
-  ];
-
-  protected readonly rows = signal<User[]>([
-    { id: '1', name: 'Alice Chen', email: 'alice@example.com', role: 'admin',  joined: '2024-01-15', status: 'active',  salary: 95000, actions: '⋯' },
-    { id: '2', name: 'Bob Lin',    email: 'bob@example.com',   role: 'editor', joined: '2024-03-22', status: 'active',  salary: 72000, actions: '⋯' },
-    { id: '3', name: 'Carla Diaz', email: 'carla@example.com', role: 'viewer', joined: '2024-05-10', status: 'invited', salary: 58000, actions: '⋯' },
-    { id: '4', name: 'Dan Park',   email: 'dan@example.com',   role: 'editor', joined: '2024-06-01', status: 'active',  salary: 74000, actions: '⋯' },
-  ]);
-}

package/src/table/_examples/table.column-resize.example.ts

@@ -1,49 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { kjColumn, type KjColumnDef } from '@kouji-ui/core';
-import { KjTableComponent } from '../table';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-}
-
-/**
- * Column resizing — drag the handle on the right edge of any `<th>` to resize
- * that column. `[kjEnableResize]="true"` opts the table into resize mode and
- * renders the handles via the underlying TanStack column-sizing model.
- *
- */
-@Component({
-  selector: 'kj-table-column-resize-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [KjTableComponent],
-  styles: [`:host { display: block; }`],
-  template: `
-    <kj-table
-      [kjData]="rows()"
-      [kjColumns]="cols"
-      [kjGetRowId]="getRowId"
-      [kjEnableResize]="true"
-    />
-  `,
-})
-export class KjTableColumnResizeExample {
-  protected readonly getRowId = (r: User): string => r.id;
-
-  protected readonly cols: KjColumnDef<User>[] = [
-    kjColumn<User>({ accessorKey: 'id',    header: 'ID',    size: 80,  enableResizing: true }),
-    kjColumn<User>({ accessorKey: 'name',  header: 'Name',  size: 180, enableResizing: true }),
-    kjColumn<User>({ accessorKey: 'email', header: 'Email', size: 240, enableResizing: true }),
-    kjColumn<User>({ accessorKey: 'role',  header: 'Role',  size: 120, enableResizing: true }),
-  ];
-
-  protected readonly rows = signal<User[]>([
-    { id: '1', name: 'Alice Chen', email: 'alice@example.com', role: 'admin'  },
-    { id: '2', name: 'Bob Lin',    email: 'bob@example.com',   role: 'editor' },
-    { id: '3', name: 'Carla Diaz', email: 'carla@example.com', role: 'viewer' },
-    { id: '4', name: 'Dan Park',   email: 'dan@example.com',   role: 'editor' },
-  ]);
-}

package/src/table/_examples/table.column-visibility.example.ts

@@ -1,52 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { kjColumn, type KjColumnDef } from '@kouji-ui/core';
-import { KjTableComponent } from '../table';
-import { KjTableToolbarComponent } from '../table-toolbar';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  joined: string;
-  status: string;
-}
-
-/**
- * Column visibility — the toolbar exposes a built-in visibility menu listing
- * every leaf column with a checkbox. Toggling writes `columnVisibility` into
- * the table state, hiding columns instantly.
- *
- */
-@Component({
-  selector: 'kj-table-column-visibility-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [KjTableComponent, KjTableToolbarComponent],
-  styles: [`:host { display: block; }`],
-  template: `
-    <kj-table [kjData]="rows()" [kjColumns]="cols" [kjGetRowId]="getRowId">
-      <kj-table-toolbar kjToolbar />
-    </kj-table>
-  `,
-})
-export class KjTableColumnVisibilityExample {
-  protected readonly getRowId = (r: User): string => r.id;
-
-  protected readonly cols: KjColumnDef<User>[] = [
-    kjColumn<User>({ accessorKey: 'id',     header: 'ID' }),
-    kjColumn<User>({ accessorKey: 'name',   header: 'Name' }),
-    kjColumn<User>({ accessorKey: 'email',  header: 'Email' }),
-    kjColumn<User>({ accessorKey: 'role',   header: 'Role' }),
-    kjColumn<User>({ accessorKey: 'joined', header: 'Joined' }),
-    kjColumn<User>({ accessorKey: 'status', header: 'Status' }),
-  ];
-
-  protected readonly rows = signal<User[]>([
-    { id: '1', name: 'Alice Chen', email: 'alice@example.com', role: 'admin',  joined: '2024-01-15', status: 'active' },
-    { id: '2', name: 'Bob Lin',    email: 'bob@example.com',   role: 'editor', joined: '2024-03-22', status: 'active' },
-    { id: '3', name: 'Carla Diaz', email: 'carla@example.com', role: 'viewer', joined: '2024-05-10', status: 'invited' },
-    { id: '4', name: 'Dan Park',   email: 'dan@example.com',   role: 'editor', joined: '2024-06-01', status: 'active' },
-    { id: '5', name: 'Eve Tran',   email: 'eve@example.com',   role: 'admin',  joined: '2024-07-18', status: 'paused' },
-  ]);
-}

package/src/table/_examples/table.density.example.ts

@@ -1,71 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  signal,
-} from '@angular/core';
-import { kjColumn } from '@kouji-ui/core';
-import { KjTableComponent } from '../table';
-import { KjButtonGroupComponent } from '../../button-group/button-group';
-import { KjButtonComponent } from '../../button/button';
-
-interface User {
-  readonly id: string;
-  readonly name: string;
-  readonly email: string;
-  readonly role: string;
-}
-
-const ROWS: User[] = [
-  { id: '1', name: 'Alice', email: 'alice@x.io', role: 'Admin'  },
-  { id: '2', name: 'Bob',   email: 'bob@x.io',   role: 'Editor' },
-  { id: '3', name: 'Carol', email: 'carol@x.io', role: 'Viewer' },
-];
-
-type Density = 'compact' | 'standard' | 'comfortable';
-
-/**
- * Density toggle: a `<kj-button-group>` of three `<kj-button kjPressed>`
- * options writes the current density into a signal which the host table
- * binds via `[kjDensity]`. Using styled Kj* primitives keeps the pressed
- * state consistent with the rest of the theme (focus ring, tokens, AAA
- * contrast) — no native `<button>` chrome to hand-roll.
- */
-@Component({
-  selector: 'kj-table-density-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [KjTableComponent, KjButtonGroupComponent, KjButtonComponent],
-  styles: [`
-    :host { display: block; }
-    kj-button-group { margin-bottom: var(--kj-space-md, 0.75rem); }
-  `],
-  template: `
-    <kj-button-group kjAriaLabel="Row density">
-      @for (d of densities; track d) {
-        <kj-button
-          kjVariant="outline"
-          kjSize="sm"
-          [kjPressed]="density() === d"
-          (click)="density.set(d)"
-        >{{ d }}</kj-button>
-      }
-    </kj-button-group>
-
-    <kj-table
-      [kjData]="data()"
-      [kjColumns]="cols"
-      [kjDensity]="density()"
-    />
-  `,
-})
-export class KjTableDensityExample {
-  protected readonly densities: readonly Density[] = ['compact', 'standard', 'comfortable'];
-  protected readonly density = signal<Density>('standard');
-  protected readonly data = signal<User[]>(ROWS);
-
-  protected readonly cols = [
-    kjColumn<User>({ accessorKey: 'name',  header: 'Name'  }),
-    kjColumn<User>({ accessorKey: 'email', header: 'Email' }),
-    kjColumn<User>({ accessorKey: 'role',  header: 'Role'  }),
-  ];
-}

package/src/table/_examples/table.editable.example.ts

@@ -1,85 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { kjColumn, type KjColumnDef } from '@kouji-ui/core';
-import { KjTableComponent, type KjCellEditEvent } from '../table';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  salary: number;
-}
-
-/**
- * Inline editing — double-click a cell to mount its editor. Enter commits,
- * Escape cancels. The `role` column uses a select editor; `salary` uses a
- * number editor; `name` and `email` use text editors.
- *
- */
-@Component({
-  selector: 'kj-table-editable-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [KjTableComponent],
-  styles: [`:host { display: block; }`],
-  template: `
-    <kj-table
-      [kjData]="rows()"
-      [kjColumns]="cols"
-      [kjGetRowId]="getRowId"
-      [kjEditOnDoubleClick]="true"
-      (cellEdit)="onEdit($any($event))"
-    />
-  `,
-})
-export class KjTableEditableExample {
-  protected readonly getRowId = (r: User): string => r.id;
-
-  protected readonly cols: KjColumnDef<User>[] = [
-    kjColumn<User>({ accessorKey: 'id', header: 'ID' }),
-    kjColumn<User>({
-      accessorKey: 'name',
-      header: 'Name',
-      kjEditable: true,
-      kjType: 'text',
-    }),
-    kjColumn<User>({
-      accessorKey: 'email',
-      header: 'Email',
-      kjEditable: true,
-      kjType: 'text',
-    }),
-    kjColumn<User>({
-      accessorKey: 'role',
-      header: 'Role',
-      kjEditable: true,
-      kjType: 'select',
-      kjSelectOptions: [
-        { value: 'admin', label: 'Admin' },
-        { value: 'editor', label: 'Editor' },
-        { value: 'viewer', label: 'Viewer' },
-      ],
-    }),
-    kjColumn<User>({
-      accessorKey: 'salary',
-      header: 'Salary',
-      kjEditable: true,
-      kjType: 'number',
-    }),
-  ];
-
-  protected readonly rows = signal<User[]>([
-    { id: '1', name: 'Alice Chen',  email: 'alice@example.com',  role: 'admin',  salary: 95000 },
-    { id: '2', name: 'Bob Lin',     email: 'bob@example.com',    role: 'editor', salary: 72000 },
-    { id: '3', name: 'Carla Diaz',  email: 'carla@example.com',  role: 'viewer', salary: 58000 },
-    { id: '4', name: 'Dan Park',    email: 'dan@example.com',    role: 'editor', salary: 74000 },
-  ]);
-
-  protected onEdit(event: KjCellEditEvent<User>): void {
-    this.rows.update(rs =>
-      rs.map(r =>
-        r.id === event.row.id ? { ...r, [event.columnId]: event.newValue } : r,
-      ),
-    );
-  }
-}