@kouji-ui/components 0.1.1 → 0.1.2

package/src/dialog/dialog.css

@@ -1,56 +0,0 @@
-@layer kj.component {
-  .kj-dialog-overlay {
-    position: fixed;
-    inset: 0;
-    background: rgb(0 0 0 / 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-  }
-  .kj-dialog {
-    display: flex;
-    flex-direction: column;
-    background: var(--kj-bg-elevated);
-    color: var(--kj-fg-default);
-    border-radius: var(--kj-radius-box);
-    box-shadow: var(--kj-shadow-lg);
-    min-width: 24rem;
-    max-width: min(40rem, calc(100vw - 2rem));
-    max-height: calc(100vh - 4rem);
-    overflow: hidden;
-    padding: var(--kj-space-xl);
-  }
-  .kj-dialog-header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: var(--kj-space-lg) var(--kj-space-xl);
-    border-bottom: var(--kj-border) solid var(--kj-border-muted);
-  }
-  .kj-dialog-header[data-align="center"] { justify-content: center; }
-  .kj-dialog-title {
-    display: block;
-    margin: 0;
-    font: 600 1.125rem / 1.3 var(--kj-font-sans);
-    color: var(--kj-fg-default);
-  }
-  .kj-dialog-body {
-    flex: 1;
-    color: var(--kj-fg-default);
-    font: 0.9375rem / 1.5 var(--kj-font-sans);
-  }
-  .kj-dialog-body[data-padded] { padding: var(--kj-space-lg) var(--kj-space-xl); }
-  .kj-dialog-body[data-scroll] { overflow-y: auto; }
-  .kj-dialog-footer {
-    display: flex;
-    align-items: center;
-    gap: var(--kj-space-sm);
-    padding: var(--kj-space-lg) var(--kj-space-xl);
-    border-top: var(--kj-border) solid var(--kj-border-muted);
-  }
-  .kj-dialog-footer[data-align="start"]   { justify-content: flex-start; }
-  .kj-dialog-footer[data-align="center"]  { justify-content: center; }
-  .kj-dialog-footer[data-align="end"]     { justify-content: flex-end; }
-  .kj-dialog-footer[data-align="between"] { justify-content: space-between; }
-}

package/src/dialog/dialog.playground.ts

@@ -1,136 +0,0 @@
-import { ChangeDetectionStrategy, Component, effect, inject, signal } from '@angular/core';
-import { KjDialog, KjDialogService } from './dialog';
-import { KjButtonComponent } from '../button/button';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. The `open` toggle drives the
- * service-launched dialog; the title / message text + actions toggle are
- * baked into the body component via a small registry signal so the live
- * dialog reflects the knobs while open.
- */
-const title = signal('Save changes?');
-const message = signal('Your edits will be applied immediately.');
-const showCancel = signal(true);
-
-// Bridge signal — read by the body component below. Module-scope because the
-// dialog body is instantiated through KjDialogService and cannot accept inputs.
-const open = signal(false);
-
-@Component({
-  selector: 'kj-dialog-playground-body',
-  standalone: true,
-  imports: [KjDialog, KjButtonComponent],
-  template: `
-    <kj-dialog>
-      <h2 style="margin:0 0 var(--kj-space-md)">{{ title() }}</h2>
-      <p>{{ message() }}</p>
-      <div style="display:flex; gap: var(--kj-space-sm); justify-content: flex-end; margin-top: var(--kj-space-lg)">
-        @if (showCancel()) {
-          <kj-button kjVariant="ghost">Cancel</kj-button>
-        }
-        <kj-button kjVariant="default">Save</kj-button>
-      </div>
-    </kj-dialog>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-class KjDialogPlaygroundBody {
-  protected readonly title = title;
-  protected readonly message = message;
-  protected readonly showCancel = showCancel;
-}
-
-@Component({
-  selector: 'kj-dialog-playground',
-  standalone: true,
-  imports: [KjButtonComponent],
-  styles: [`
-    :host { display: flex; flex-direction: column; gap: var(--kj-space-lg); align-items: flex-start; min-height: 12rem; }
-    .pg-static {
-      width: min(24rem, 100%);
-      background: var(--kj-bg-elevated);
-      color: var(--kj-fg-default);
-      border: var(--kj-border) solid var(--kj-border-default);
-      border-radius: var(--kj-radius-box);
-      padding: var(--kj-space-xl);
-      box-shadow: var(--kj-shadow-lg);
-      font: 0.9375rem / 1.5 var(--kj-font-sans);
-    }
-    .pg-static h3 { margin: 0 0 var(--kj-space-md); font-size: 1.125rem; }
-    .pg-static p { margin: 0; color: var(--kj-fg-muted); }
-    .pg-static__actions { display: flex; gap: var(--kj-space-sm); justify-content: flex-end; margin-top: var(--kj-space-lg); }
-  `],
-  template: `
-    <kj-button (click)="onOpen()">Open dialog</kj-button>
-    <div class="pg-static" role="dialog" aria-label="Dialog preview">
-      <h3>{{ title() }}</h3>
-      <p>{{ message() }}</p>
-      <div class="pg-static__actions">
-        @if (showCancel()) {
-          <kj-button kjVariant="ghost">Cancel</kj-button>
-        }
-        <kj-button kjVariant="default">Save</kj-button>
-      </div>
-    </div>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjDialogPlaygroundDemo {
-  private readonly dialog = inject(KjDialogService);
-
-  protected readonly title = title;
-  protected readonly message = message;
-  protected readonly showCancel = showCancel;
-  protected readonly open = open;
-
-  constructor() {
-    // React to the open knob — open the dialog when toggled true, ignore when
-    // toggled back to false (the dialog manages its own close lifecycle).
-    effect(() => {
-      if (open()) {
-        const ref = this.dialog.open(KjDialogPlaygroundBody);
-        ref.afterClosed$.subscribe(() => open.set(false));
-      }
-    });
-  }
-
-  protected onOpen(): void {
-    open.set(true);
-  }
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjDialogPlaygroundDemo,
-  state: {
-    title: title as unknown as ReturnType<typeof signal>,
-    message: message as unknown as ReturnType<typeof signal>,
-    showCancel: showCancel as unknown as ReturnType<typeof signal>,
-    open: open as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    { kind: 'text', name: 'title', label: 'title' },
-    { kind: 'text', name: 'message', label: 'message' },
-    { kind: 'toggle', name: 'showCancel', label: 'show cancel' },
-    { kind: 'toggle', name: 'open', label: 'open' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      title: string;
-      message: string;
-      showCancel: boolean;
-      open: boolean;
-    };
-    const lines: string[] = [];
-    lines.push(`<kj-button (click)="open()">Open dialog</kj-button>`);
-    lines.push('');
-    lines.push('// dialog body component');
-    lines.push('<kj-dialog>');
-    lines.push(`  <h2>${s.title}</h2>`);
-    lines.push(`  <p>${s.message}</p>`);
-    if (s.showCancel) lines.push('  <kj-button kjVariant="ghost">Cancel</kj-button>');
-    lines.push('  <kj-button kjVariant="default">Save</kj-button>');
-    lines.push('</kj-dialog>');
-    return lines.join('\n');
-  },
-};

package/src/dialog/dialog.ts

@@ -1,82 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-
-export {
-  KjDialog,
-  KjDialogService,
-  KjDialogRef,
-  type KjDialogOpenOptions,
-} from '@kouji-ui/core';
-
-/**
- * Service-launched modal dialog. Inject `KjDialogService` and call `open()`
- * with a template; mount `[kjDialog]` once near your trigger to host the
- * panel. The wrapper component exists purely to give the dialog suite a
- * dedicated documentation page.
- *
- * @doc-keyboard
- *   Escape         — Closes the dialog (only the topmost overlay receives Escape when nested)
- *   Tab            — Cycles focus within the dialog (focus trap via `tabCycle({ returnFocus: true })`)
- *   Shift+Tab      — Cycles focus backward, wrapping at the first focusable element
- *
- * @doc-aria
- *   role           — "dialog" by default; the service sets "alertdialog" when opened with `alert: true`
- *   aria-modal     — "true" when a backdrop with `inertSiblings` is active (the default for modal dialogs)
- *   aria-labelledby — wire to the id of your `<kj-dialog-title>` so the dialog has an accessible name
- *   aria-describedby — wire to the id of your description node when the title alone is not sufficient
- *
- * @doc-touch
- *   The dialog surface itself is not a touch target. Footer action buttons should use `size="lg"` (44px) to meet WCAG 2.5.5 — the confirmation, scrollable, and with-form examples follow this pattern.
- *
- * @doc-a11y
- *   Focus is trapped inside the dialog while it is open and returned to the
- *   triggering element on close (`returnFocus: true`). Siblings outside the
- *   dialog are marked `inert` while it is open, so assistive tech sees only
- *   the dialog tree. When stacking dialogs (nested overlays), only the topmost
- *   overlay receives Escape and outside-click, preventing accidental dismissal
- *   of background dialogs. The wrapper does not generate an accessible name —
- *   you must provide one via `aria-labelledby` (pointing to a visible heading)
- *   or `aria-label`.
- *
- * @doc-related drawer,popover,confirm-popup
- *
- * @doc
- * @doc-name dialog
- * @doc-is-main
- * @doc-example Default
- *   The simplest service-launched dialog — open a body component from a button.
- *   @doc-file dialog.default.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common dialog usages — open a confirmation and
- *   resolve through `afterClosed$`.
- *   @doc-file dialog.usage.example.ts
- * @doc-example Confirmation
- *   Yes/no confirmation with a typed result via `KjDialogRef<T, R>`.
- *   @doc-file dialog.confirmation.example.ts
- * @doc-example Scrollable
- *   Long bodies scroll inside the panel while the header / footer stay pinned.
- *   @doc-file dialog.scrollable.example.ts
- * @doc-example With form
- *   A reactive form lives inside the panel; submit closes with the value.
- *   @doc-file dialog.with-form.example.ts
- * @doc-example Nested overlays
- *   Open another dialog from inside a dialog — only the topmost gets Escape.
- *   @doc-file dialog.nested.example.ts
- *
- * @doc-css-var
- *   --kj-bg-elevated  — Panel background fill. Inherited from the theme.
- *   --kj-radius-box   — Panel corner radius. Inherited from the theme.
- *   --kj-shadow-lg    — Box shadow under the panel. Inherited from the theme.
- *   --kj-space-xl     — Default panel padding.
- *
- * @doc-category Library/Overlay
- */
-@Component({
-  selector: 'kj-dialog-shell',
-  standalone: true,
-  template: `<ng-content />`,
-  styleUrl: './dialog.css',
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjDialogComponent {}

package/src/dialog/index.ts

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

package/src/divider/_examples/divider.example.ts

@@ -1,27 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjDividerComponent } from '../divider';
-
-/**
- * Default usage example for KjDividerComponent.
- * Renders a horizontal rule between two short text blocks so the
- * separator's spacing and stroke are visible against real content.
- */
-@Component({
-  selector: 'kj-divider-example',
-  standalone: true,
-  imports: [KjDividerComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <p>Above the divider — the first paragraph of content.</p>
-    <kj-divider />
-    <p>Below the divider — the second paragraph of content.</p>
-  `,
-})
-export class KjDividerExample {}

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

@@ -1,33 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjDividerComponent } from '../divider';
-
-/**
- * Size presets — `sm` / `md` / `lg` — stacked vertically. The size
- * routing pairs a thicker stroke with looser surrounding spacing,
- * so the visual rhythm changes alongside the rule thickness.
- */
-@Component({
-  selector: 'kj-divider-sizes-example',
-  standalone: true,
-  imports: [KjDividerComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <p>Small — tight spacing, hairline rule.</p>
-    <kj-divider kjSize="sm" />
-    <p>Medium — the default size.</p>
-    <kj-divider kjSize="md" />
-    <p>Large — generous spacing, thicker rule.</p>
-    <kj-divider kjSize="lg" />
-    <p>Trailing content for the largest size.</p>
-  `,
-})
-export class KjDividerSizesExample {}

package/src/divider/_examples/divider.structural.example.ts

@@ -1,55 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjDividerComponent } from '../divider';
-
-/**
- * Structural (semantic) divider between two page sections. With
- * `kjStructural="true"` the rule keeps the implicit `role="separator"`
- * from the underlying `<hr>` and drops the decorative `aria-hidden`,
- * so assistive technologies announce the break between the two
- * regions that aren't already demarcated by surrounding landmark
- * or heading structure.
- */
-@Component({
-  selector: 'kj-divider-structural-example',
-  standalone: true,
-  imports: [KjDividerComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-      section {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-xs);
-      }
-      ul {
-        margin: 0;
-        padding-inline-start: var(--kj-space-lg);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <section>
-      <p>Account preferences — tune how your profile is presented.</p>
-      <ul>
-        <li>Display name</li>
-        <li>Avatar</li>
-      </ul>
-    </section>
-
-    <kj-divider [kjStructural]="true" />
-
-    <section>
-      <p>Notifications — choose which events reach your inbox.</p>
-      <ul>
-        <li>Mentions</li>
-        <li>Weekly digest</li>
-      </ul>
-    </section>
-  `,
-})
-export class KjDividerStructuralExample {}

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

@@ -1,48 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjDividerComponent } from '../divider';
-
-/**
- * A walkthrough of the most common divider usages — a structural horizontal
- * separator, a labelled rule, and a vertical divider inside a flex row.
- */
-@Component({
-  selector: 'kj-divider-usage-example',
-  standalone: true,
-  imports: [KjDividerComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-lg);
-      }
-      .row {
-        display: flex;
-        align-items: center;
-        gap: var(--kj-space-md);
-        height: 2rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <section>
-      <p>First section content.</p>
-      <kj-divider [kjStructural]="true" />
-      <p>Second section content.</p>
-    </section>
-
-    <section>
-      <kj-divider [kjStructural]="true">OR</kj-divider>
-    </section>
-
-    <div class="row">
-      <span>Item A</span>
-      <kj-divider kjOrientation="vertical" />
-      <span>Item B</span>
-      <kj-divider kjOrientation="vertical" />
-      <span>Item C</span>
-    </div>
-  `,
-})
-export class KjDividerUsageExample {}

package/src/divider/_examples/divider.variants.example.ts

@@ -1,33 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjDividerComponent } from '../divider';
-
-/**
- * Line-style variants — `solid` / `dashed` / `dotted` — stacked
- * vertically with short content between each pair so the stroke of
- * each variant reads against real surrounding text.
- */
-@Component({
-  selector: 'kj-divider-variants-example',
-  standalone: true,
-  imports: [KjDividerComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <p>Solid — the default rule style.</p>
-    <kj-divider kjVariant="solid" />
-    <p>Dashed — repeats short strokes.</p>
-    <kj-divider kjVariant="dashed" />
-    <p>Dotted — repeats round dots.</p>
-    <kj-divider kjVariant="dotted" />
-    <p>Trailing content for the last variant.</p>
-  `,
-})
-export class KjDividerVariantsExample {}

package/src/divider/_examples/divider.vertical.example.ts

@@ -1,38 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjDividerComponent } from '../divider';
-
-/**
- * Vertical orientation between two inline elements. The wrapper's
- * `display: contents` host means the `<kj-divider>` element itself
- * does not introduce an extra block-level box, so the surrounding
- * row-flex strip lays out the rule between the two siblings.
- */
-@Component({
-  selector: 'kj-divider-vertical-example',
-  standalone: true,
-  imports: [KjDividerComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .row {
-        display: flex;
-        align-items: center;
-        gap: var(--kj-space-md);
-        min-block-size: 2rem;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="row">
-      <span>Inbox</span>
-      <kj-divider kjOrientation="vertical" />
-      <span>Drafts</span>
-      <kj-divider kjOrientation="vertical" />
-      <span>Sent</span>
-    </div>
-  `,
-})
-export class KjDividerVerticalExample {}

package/src/divider/_examples/divider.with-content.example.ts

@@ -1,38 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjDividerComponent } from '../divider';
-
-/**
- * Divider with a label nestled into the rule. The canonical "OR"
- * sign-in divider plus a labelled section break — both are
- * structural because the label *is* the demarcation between the
- * two regions it separates.
- */
-@Component({
-  selector: 'kj-divider-with-content-example',
-  standalone: true,
-  imports: [KjDividerComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-lg);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div>
-      <p>Sign in with your password.</p>
-      <kj-divider [kjStructural]="true">OR</kj-divider>
-      <p>Continue with a single sign-on provider.</p>
-    </div>
-
-    <div>
-      <p>Recent activity from earlier this week.</p>
-      <kj-divider [kjStructural]="true">Today</kj-divider>
-      <p>Activity from the last twenty-four hours.</p>
-    </div>
-  `,
-})
-export class KjDividerWithContentExample {}

package/src/divider/_examples/index.ts

@@ -1,9 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjDividerExample } from './divider.example';
-export { KjDividerSizesExample } from './divider.sizes.example';
-export { KjDividerStructuralExample } from './divider.structural.example';
-export { KjDividerUsageExample } from './divider.usage.example';
-export { KjDividerVariantsExample } from './divider.variants.example';
-export { KjDividerVerticalExample } from './divider.vertical.example';
-export { KjDividerWithContentExample } from './divider.with-content.example';

package/src/divider/divider.css

@@ -1,93 +0,0 @@
-@layer kj.component {
-  .kj-divider {
-    --kj-divider-color:     var(--kj-border-default, color-mix(in oklch, var(--kj-fg-default) 20%, transparent));
-    --kj-divider-thickness: 1px;
-    --kj-divider-spacing:   var(--kj-space-md, 1rem);
-    --kj-divider-gap:       var(--kj-space-md, 1rem);
-
-    border: 0;
-    color: inherit;
-  }
-
-  /* Rule-only (the <hr> branch and any <div> with no projected label). */
-  .kj-divider[data-with-content="false"] {
-    block-size: var(--kj-divider-thickness);
-    inline-size: 100%;
-    margin-block: var(--kj-divider-spacing);
-    background-color: var(--kj-divider-color);
-  }
-
-  /* Vertical, rule-only — flips the axis using logical sizing. */
-  .kj-divider[data-with-content="false"][data-orientation="vertical"] {
-    inline-size: var(--kj-divider-thickness);
-    block-size: auto;
-    align-self: stretch;
-    margin-block: 0;
-    margin-inline: var(--kj-divider-spacing);
-  }
-
-  /* With-content (label nestled into the rule). */
-  .kj-divider[data-with-content="true"] {
-    display: flex;
-    align-items: center;
-    gap: var(--kj-divider-gap);
-    margin-block: var(--kj-divider-spacing);
-  }
-
-  .kj-divider[data-with-content="true"][data-orientation="vertical"] {
-    flex-direction: column;
-    block-size: 100%;
-    margin-block: 0;
-    margin-inline: var(--kj-divider-spacing);
-  }
-
-  .kj-divider[data-with-content="true"]::before,
-  .kj-divider[data-with-content="true"]::after {
-    content: "";
-    flex: 1 1 0;
-    background-color: var(--kj-divider-color);
-    block-size: var(--kj-divider-thickness);
-  }
-
-  .kj-divider[data-with-content="true"][data-orientation="vertical"]::before,
-  .kj-divider[data-with-content="true"][data-orientation="vertical"]::after {
-    inline-size: var(--kj-divider-thickness);
-    block-size: auto;
-  }
-
-  /* Alignment of the projected label within the rule. */
-  .kj-divider[data-with-content="true"][data-align="start"]::before  { flex-grow: 0; flex-basis: 1rem; }
-  .kj-divider[data-with-content="true"][data-align="end"]::after     { flex-grow: 0; flex-basis: 1rem; }
-
-  /* Variant routing — line style. */
-  .kj-divider[data-variant="dashed"][data-with-content="false"] {
-    background-color: transparent;
-    border-block-start: var(--kj-divider-thickness) dashed var(--kj-divider-color);
-    block-size: 0;
-  }
-  .kj-divider[data-variant="dashed"][data-with-content="false"][data-orientation="vertical"] {
-    border-block-start: 0;
-    border-inline-start: var(--kj-divider-thickness) dashed var(--kj-divider-color);
-    inline-size: 0;
-  }
-  .kj-divider[data-variant="dotted"][data-with-content="false"] {
-    background-color: transparent;
-    border-block-start: var(--kj-divider-thickness) dotted var(--kj-divider-color);
-    block-size: 0;
-  }
-  .kj-divider[data-variant="dotted"][data-with-content="false"][data-orientation="vertical"] {
-    border-block-start: 0;
-    border-inline-start: var(--kj-divider-thickness) dotted var(--kj-divider-color);
-    inline-size: 0;
-  }
-
-  /* Size routing — spacing + thickness. */
-  .kj-divider[data-size="sm"] { --kj-divider-spacing: var(--kj-space-sm, 0.5rem); --kj-divider-thickness: 1px; }
-  .kj-divider[data-size="lg"] { --kj-divider-spacing: var(--kj-space-lg, 2rem);  --kj-divider-thickness: 2px; }
-
-  .kj-divider__content {
-    color: var(--kj-fg-default);
-    font: inherit;
-    white-space: nowrap;
-  }
-}