@kouji-ui/components 0.1.1 → 0.1.2

package/src/pagination/pagination.ts

@@ -1,432 +0,0 @@
-import {
-  Component,
-  ChangeDetectionStrategy,
-  ModelSignal,
-  ViewEncapsulation,
-  input,
-  model,
-} from '@angular/core';
-import {
-  KjIconDirective,
-  KjPagination,
-  KjPaginationItem,
-  KjPaginationPrevious,
-  KjPaginationNext,
-  KjPaginationFirst,
-  KjPaginationLast,
-  KjPaginationEllipsis,
-  KjPaginationInfo,
-} from '@kouji-ui/core';
-
-/**
- * Styled wrapper around the headless `KjPagination` directive — root of the
- * pagination compound. Re-maps the `kjPage` / `kjTotalPages` /
- * `kjSiblingCount` / `kjBoundaryCount` / `kjVariant` / `kjSize` inputs and
- * mirrors the `kjPageChange` output. Hosts `<nav aria-label="Pagination">`
- * via the underlying directive.
- *
- * Compose the eight wrappers — `<kj-pagination>`, `<kj-pagination-item>`,
- * `<kj-pagination-previous>`, `<kj-pagination-next>`, `<kj-pagination-first>`,
- * `<kj-pagination-last>`, `<kj-pagination-ellipsis>`, `<kj-pagination-info>`
- * — to mirror the directive family. The root exposes the directive's
- * `pages()` computed via the `#p="kjPagination"` template ref so the
- * `@for` over numeric tokens / ellipsis tokens lives in the consumer's
- * template (the same tag-agnostic compound shape as the directives).
- *
- * @example
- * ```html
- * <kj-pagination [(kjPage)]="page" [kjTotalPages]="10" #p="kjPagination">
- *   <kj-pagination-previous>Previous</kj-pagination-previous>
- *   @for (token of p.pages(); track token) {
- *     @if (token === 'ellipsis-left' || token === 'ellipsis-right') {
- *       <kj-pagination-ellipsis>…</kj-pagination-ellipsis>
- *     } @else {
- *       <kj-pagination-item [kjPage]="token">{{ token }}</kj-pagination-item>
- *     }
- *   }
- *   <kj-pagination-next>Next</kj-pagination-next>
- * </kj-pagination>
- * ```
- *
- * @doc-example Default
- *   The canonical hand-authored compound — First / Prev / pages / Next / Last.
- *   @doc-file pagination.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common usages via the `<kj-pagination-default>`
- *   convenience wrapper. Use this as the copy-paste starting point.
- *   @doc-file pagination.usage.example.ts
- * @doc-example Large dataset (ellipsis)
- *   Larger total counts surface the ellipsis windowing pattern.
- *   @doc-file pagination.large.example.ts
- * @doc-example Boundaries
- *   First / Last buttons jump to the edges of the range.
- *   @doc-file pagination.boundaries.example.ts
- * @doc-example Compact
- *   `kjSize="sm"` shrinks the row for dense table footers.
- *   @doc-file pagination.compact.example.ts
- * @doc-example With info
- *   `<kj-pagination-info>` renders the localised "Page N of M" status.
- *   @doc-file pagination.with-info.example.ts
- *
- * @doc-keyboard
- *   Tab          — Moves focus across the visible page / boundary buttons
- *   Enter|Space  — Activates the focused button (navigates to that page)
- *
- * @doc-aria
- *   role="navigation"  — On the host `<nav>` (provided by the directive)
- *   aria-label         — "Pagination" by default; localise via the directive's input
- *   aria-current="page" — Reflected on the active page item
- *   aria-disabled      — Reflected on boundary buttons when at range edges
- *   data-active        — Mirrors the current page for theme/scope hooks
- *
- * @doc-touch
- *   Items render at 2.75rem (44px) square via `--kj-pagination-item-size` —
- *   meets WCAG 2.5.5 by default. `kjSize="sm"` drops to 32px and relies on
- *   the inline-text-link exception; reserve for dense desktop tables.
- *
- * @doc-a11y
- *   The compound emits real `<button>` elements so native focus and click
- *   semantics are preserved. The ellipsis indicator is `aria-hidden` with a
- *   visually-hidden "More pages" label appended at render time. Boundary
- *   buttons reflect their disabled state via `aria-disabled` rather than
- *   `disabled` so they remain focusable (and announce a reason).
- *
- * @doc-related table,list,carousel
- *
- * @doc-css-var
- *   --kj-pagination-gap                  — Gap between adjacent page items and boundary controls.
- *   --kj-pagination-item-size            — Min width/height of each item. 2.75rem for WCAG 2.5.5.
- *   --kj-pagination-item-radius          — Corner radius for items and boundary buttons.
- *   --kj-pagination-item-bg              — Item background fill. Variants override.
- *   --kj-pagination-item-bg-hover        — Item hover background fill.
- *   --kj-pagination-item-bg-current      — Background fill on the active page.
- *   --kj-pagination-item-fg              — Item foreground (label) color.
- *   --kj-pagination-item-fg-current      — Label color on the active page.
- *   --kj-pagination-item-border-color    — Item border color. Variants override.
- *   --kj-pagination-item-border-width    — Item border thickness. Inherits --kj-border.
- *   --kj-pagination-item-font            — Item font family. Defaults to --kj-font-sans.
- *   --kj-pagination-item-font-size       — Item font size. Sizes override.
- *   --kj-pagination-ellipsis-color       — Color of the ellipsis gap glyph.
- *   --kj-pagination-info-color           — Color of the trailing "Page N of M" info text.
- *
- * @doc-category Library/Navigation
- * @doc
- * @doc-name pagination
- * @doc-description Themed pagination control with ellipsis windowing, accessible nav, and two-way page binding.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-pagination',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: KjPagination,
-      inputs: [
-        'kjPage',
-        'kjTotalPages',
-        'kjSiblingCount',
-        'kjBoundaryCount',
-        'kjVariant',
-        'kjSize',
-      ],
-      outputs: ['kjPageChange'],
-    },
-  ],
-  template: `<ng-content />`,
-  styleUrl: './pagination.css',
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-pagination' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjPaginationComponent {}
-
-/**
- * Per-page button within a `<kj-pagination>`. Wraps `KjPaginationItem` and
- * forwards the required `kjPage` plus optional `kjDisabled` / `kjVariant` /
- * `kjSize` inputs. Reflects `aria-current="page"` on the active page.
- *
- * @doc-category Library/Navigation
- * @doc
- * @doc-name pagination
- */
-@Component({
-  selector: 'kj-pagination-item',
-  standalone: true,
-  imports: [KjPaginationItem],
-  template: `
-    <button
-      type="button"
-      kjPaginationItem
-      class="kj-pagination-item"
-      [kjPage]="kjPage()"
-      [kjDisabled]="kjDisabled()"
-      [kjVariant]="kjVariant()"
-      [kjSize]="kjSize()"
-    >
-      <ng-content />
-    </button>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjPaginationItemComponent {
-  /** Page number this item navigates to (1-indexed). Required. */
-  readonly kjPage = input.required<number>();
-  /** Per-item disabled state. Suppresses click and reflects `aria-disabled`. */
-  readonly kjDisabled = input<boolean>(false);
-  readonly kjVariant = input<string | undefined>(undefined);
-  readonly kjSize = input<string | undefined>(undefined);
-}
-
-/**
- * Boundary control that retreats one page. Disabled (via `aria-disabled`)
- * when the parent is on page 1 or the dataset is empty.
- *
- * @doc-category Library/Navigation
- * @doc
- * @doc-name pagination
- */
-@Component({
-  selector: 'kj-pagination-previous',
-  standalone: true,
-  imports: [KjPaginationPrevious],
-  template: `
-    <button
-      type="button"
-      kjPaginationPrevious
-      class="kj-pagination-action kj-pagination-action--previous"
-      [kjVariant]="kjVariant()"
-      [kjSize]="kjSize()"
-    >
-      <ng-content />
-    </button>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjPaginationPreviousComponent {
-  readonly kjVariant = input<string | undefined>(undefined);
-  readonly kjSize = input<string | undefined>(undefined);
-}
-
-/**
- * Boundary control that advances one page. Disabled when the parent is on
- * the last page or the dataset is empty.
- *
- * @doc-category Library/Navigation
- * @doc
- * @doc-name pagination
- */
-@Component({
-  selector: 'kj-pagination-next',
-  standalone: true,
-  imports: [KjPaginationNext],
-  template: `
-    <button
-      type="button"
-      kjPaginationNext
-      class="kj-pagination-action kj-pagination-action--next"
-      [kjVariant]="kjVariant()"
-      [kjSize]="kjSize()"
-    >
-      <ng-content />
-    </button>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjPaginationNextComponent {
-  readonly kjVariant = input<string | undefined>(undefined);
-  readonly kjSize = input<string | undefined>(undefined);
-}
-
-/**
- * Boundary control that jumps to page 1. Disabled when already on the
- * first page or the dataset is empty.
- *
- * @doc-category Library/Navigation
- * @doc
- * @doc-name pagination
- */
-@Component({
-  selector: 'kj-pagination-first',
-  standalone: true,
-  imports: [KjPaginationFirst],
-  template: `
-    <button
-      type="button"
-      kjPaginationFirst
-      class="kj-pagination-action kj-pagination-action--first"
-      [kjVariant]="kjVariant()"
-      [kjSize]="kjSize()"
-    >
-      <ng-content />
-    </button>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjPaginationFirstComponent {
-  readonly kjVariant = input<string | undefined>(undefined);
-  readonly kjSize = input<string | undefined>(undefined);
-}
-
-/**
- * Boundary control that jumps to the last page. Disabled when already on
- * the last page or the dataset is empty.
- *
- * @doc-category Library/Navigation
- * @doc
- * @doc-name pagination
- */
-@Component({
-  selector: 'kj-pagination-last',
-  standalone: true,
-  imports: [KjPaginationLast],
-  template: `
-    <button
-      type="button"
-      kjPaginationLast
-      class="kj-pagination-action kj-pagination-action--last"
-      [kjVariant]="kjVariant()"
-      [kjSize]="kjSize()"
-    >
-      <ng-content />
-    </button>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjPaginationLastComponent {
-  readonly kjVariant = input<string | undefined>(undefined);
-  readonly kjSize = input<string | undefined>(undefined);
-}
-
-/**
- * Gap indicator within a `<kj-pagination>`. Wraps `KjPaginationEllipsis`;
- * the visible glyph is decorative, an AT-readable visually-hidden label
- * ("More pages") is appended at render time.
- *
- * @doc-category Library/Navigation
- * @doc
- * @doc-name pagination
- */
-@Component({
-  selector: 'kj-pagination-ellipsis',
-  standalone: true,
-  hostDirectives: [KjPaginationEllipsis],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-pagination-ellipsis' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjPaginationEllipsisComponent {}
-
-/**
- * Renders the localised "Page N of M" status text for a `<kj-pagination>`.
- * Wraps `KjPaginationInfo`; when the consumer projects their own content
- * the directive yields and the projection wins.
- *
- * @doc-category Library/Navigation
- * @doc
- * @doc-name pagination
- */
-@Component({
-  selector: 'kj-pagination-info',
-  standalone: true,
-  hostDirectives: [KjPaginationInfo],
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-pagination-info' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjPaginationInfoComponent {}
-
-/**
- * Convenience wrapper that auto-renders the canonical pagination layout
- * (Previous, First, page tokens with ellipsis, Last, Next) given just
- * `kjPage` + `kjTotalPages`. Use this for the 80% case where the consumer
- * does not need to hand-author the layout.
- *
- * Drop down to the compound (`<kj-pagination>` + child wrappers + `@for`)
- * when more control is required.
- *
- * @example
- * ```html
- * <kj-pagination-default [(kjPage)]="page" [kjTotalPages]="10" />
- * ```
- *
- * @doc-category Library/Navigation
- * @doc
- * @doc-name pagination
- */
-@Component({
-  selector: 'kj-pagination-default',
-  standalone: true,
-  imports: [
-    KjPaginationComponent,
-    KjPaginationItemComponent,
-    KjPaginationPreviousComponent,
-    KjPaginationNextComponent,
-    KjPaginationFirstComponent,
-    KjPaginationLastComponent,
-    KjPaginationEllipsisComponent,
-    KjPaginationInfoComponent,
-    KjIconDirective,
-  ],
-  template: `
-    <kj-pagination
-      [(kjPage)]="kjPage"
-      [kjTotalPages]="kjTotalPages()"
-      [kjSiblingCount]="kjSiblingCount()"
-      [kjBoundaryCount]="kjBoundaryCount()"
-      [kjVariant]="kjVariant()"
-      [kjSize]="kjSize()"
-      #p="kjPagination"
-    >
-      @if (kjShowFirstLast()) {
-        <kj-pagination-first>«</kj-pagination-first>
-      }
-      <kj-pagination-previous>‹</kj-pagination-previous>
-      @for (token of p.pages(); track token) {
-        @if (token === 'ellipsis-left' || token === 'ellipsis-right') {
-          <kj-pagination-ellipsis>…</kj-pagination-ellipsis>
-        } @else {
-          <kj-pagination-item [kjPage]="token">{{ token }}</kj-pagination-item>
-        }
-      }
-      <kj-pagination-next><i kjIcon="chevron-right"></i></kj-pagination-next>
-      @if (kjShowFirstLast()) {
-        <kj-pagination-last>»</kj-pagination-last>
-      }
-      @if (kjShowInfo()) {
-        <kj-pagination-info />
-      }
-    </kj-pagination>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjPaginationDefaultComponent {
-  /**
-   * Current page (1-indexed). Two-way bound.
-   * Field annotation matches the directive's so ng-packagr does not narrow
-   * the model signal and break the `[(kjPage)]` binding through the wrapper.
-   */
-  readonly kjPage: ModelSignal<number> = model<number>(1);
-  readonly kjTotalPages = input.required<number>();
-  readonly kjSiblingCount = input<number>(1);
-  readonly kjBoundaryCount = input<number>(1);
-  readonly kjVariant = input<string>('default');
-  readonly kjSize = input<string>('md');
-  /** Render the First / Last boundary buttons. Default `true`. */
-  readonly kjShowFirstLast = input<boolean>(true);
-  /** Render the trailing "Page N of M" info span. Default `false`. */
-  readonly kjShowInfo = input<boolean>(false);
-}

package/src/pagination/pagination.usage.example.ts

@@ -1,50 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjPaginationDefaultComponent } from './pagination';
-
-/**
- * A walkthrough of the most common pagination usages — the
- * `<kj-pagination-default>` convenience wrapper with a small dataset, a
- * larger one that exposes ellipsis windowing, and a layout that surfaces the
- * trailing "Page N of M" info text.
- */
-@Component({
-  selector: 'kj-pagination-usage-example',
-  standalone: true,
-  imports: [KjPaginationDefaultComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-lg);
-      }
-      .label {
-        font-size: 0.75rem;
-        color: var(--kj-fg-default);
-        opacity: 0.7;
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div>
-      <span class="label">Compact (5 pages)</span>
-      <kj-pagination-default [(kjPage)]="pageA" [kjTotalPages]="5" />
-    </div>
-    <div>
-      <span class="label">Large (20 pages)</span>
-      <kj-pagination-default [(kjPage)]="pageB" [kjTotalPages]="20" />
-    </div>
-    <div>
-      <span class="label">With info</span>
-      <kj-pagination-default [(kjPage)]="pageC" [kjTotalPages]="10" [kjShowInfo]="true" />
-    </div>
-  `,
-})
-export class KjPaginationUsageExample {
-  readonly pageA = signal(1);
-  readonly pageB = signal(7);
-  readonly pageC = signal(3);
-}

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

@@ -1,6 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjPasswordInputExample } from './password-input.example';
-export { KjPasswordInputStrengthExample } from './password-input.strength.example';
-export { KjPasswordInputToggleExample } from './password-input.toggle.example';
-export { KjPasswordInputWithRulesExample } from './password-input.with-rules.example';

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

@@ -1,24 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjPasswordInputComponent } from '../password-input';
-
-/**
- * Default usage example for KjPasswordInputComponent.
- * Login-form shape: type="password", show/hide toggle, no meter, no Caps Lock warning.
- */
-@Component({
-  selector: 'kj-password-input-example',
-  standalone: true,
-  imports: [KjPasswordInputComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-password-input kjAutocomplete="current-password" kjPlaceholder="Enter your password" />
-  `,
-})
-export class KjPasswordInputExample {}

package/src/password-input/_examples/password-input.strength.example.ts

@@ -1,45 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjPasswordInputComponent } from '../password-input';
-
-/**
- * Strength meter example. `kjShowStrength` enables the four-segment bar; the
- * built-in heuristic scorer drives it. Use `[kjStrengthScorer]` on the
- * directive (core API) to swap in `zxcvbn` or a server-side checker.
- */
-@Component({
-  selector: 'kj-password-input-strength-example',
-  standalone: true,
-  imports: [KjPasswordInputComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .row {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-sm);
-        max-width: 360px;
-      }
-      label {
-        font-size: var(--kj-text-xs);
-        color: var(--kj-fg-muted);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="row">
-      <label for="signup-pw">Choose a password</label>
-      <kj-password-input
-        kjAutocomplete="new-password"
-        kjPlaceholder="Mix letters, numbers, symbols"
-        [kjShowStrength]="true"
-        [(kjValue)]="value"
-      />
-    </div>
-  `,
-})
-export class KjPasswordInputStrengthExample {
-  readonly value = signal('');
-}

package/src/password-input/_examples/password-input.toggle.example.ts

@@ -1,43 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjPasswordInputComponent } from '../password-input';
-
-/**
- * Show / hide toggle example. The toggle is on by default; the example wires
- * a two-way `[(kjRevealed)]` so the parent component can inspect the state.
- */
-@Component({
-  selector: 'kj-password-input-toggle-example',
-  standalone: true,
-  imports: [KjPasswordInputComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .row {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-sm);
-        max-width: 360px;
-      }
-      .state {
-        font-size: var(--kj-text-xs);
-        color: var(--kj-fg-muted);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="row">
-      <kj-password-input
-        kjAutocomplete="current-password"
-        kjPlaceholder="Click the eye to reveal"
-        [(kjRevealed)]="revealed"
-      />
-      <span class="state">revealed: {{ revealed() }}</span>
-    </div>
-  `,
-})
-export class KjPasswordInputToggleExample {
-  readonly revealed = signal(false);
-}

package/src/password-input/_examples/password-input.with-rules.example.ts

@@ -1,78 +0,0 @@
-import { Component, computed, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjPasswordInputComponent } from '../password-input';
-
-/**
- * Validation-rules display example. Renders a checklist of policy rules
- * alongside the password input; each rule flips green when satisfied. The
- * strength meter and Caps Lock warning are both on so the example shows the
- * full sign-up shape.
- */
-@Component({
-  selector: 'kj-password-input-with-rules-example',
-  standalone: true,
-  imports: [KjPasswordInputComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .row {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-sm);
-        max-width: 380px;
-      }
-      label {
-        font-size: var(--kj-text-xs);
-        color: var(--kj-fg-muted);
-      }
-      .rules {
-        list-style: none;
-        padding: 0;
-        margin: var(--kj-space-xs) 0 0;
-        display: grid;
-        gap: 0.25rem;
-        font-size: var(--kj-text-xs);
-      }
-      .rules li {
-        color: var(--kj-fg-muted);
-      }
-      .rules li[data-pass='true'] {
-        color: var(--kj-fg-success, #059669);
-      }
-      .rules li::before {
-        content: '○ ';
-      }
-      .rules li[data-pass='true']::before {
-        content: '✓ ';
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="row">
-      <label for="signup-pw">Create a password</label>
-      <kj-password-input
-        kjAutocomplete="new-password"
-        kjPlaceholder="At least 8 characters"
-        [kjShowStrength]="true"
-        [kjShowCapsLockWarning]="true"
-        [(kjValue)]="value"
-      />
-
-      <ul class="rules" aria-label="Password requirements">
-        <li [attr.data-pass]="hasMinLength()">8+ characters</li>
-        <li [attr.data-pass]="hasUpper()">An uppercase letter</li>
-        <li [attr.data-pass]="hasNumber()">A number</li>
-        <li [attr.data-pass]="hasSymbol()">A symbol</li>
-      </ul>
-    </div>
-  `,
-})
-export class KjPasswordInputWithRulesExample {
-  readonly value = signal('');
-  readonly hasMinLength = computed(() => this.value().length >= 8);
-  readonly hasUpper = computed(() => /[A-Z]/.test(this.value()));
-  readonly hasNumber = computed(() => /\d/.test(this.value()));
-  readonly hasSymbol = computed(() => /[^a-zA-Z0-9]/.test(this.value()));
-}

package/src/password-input/index.ts

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