@kouji-ui/components 0.1.1

package/src/pagination/pagination.ts

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

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

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

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

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

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

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

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