@kouji-ui/components 0.1.1 → 0.1.2

package/src/tabs/_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 { KjTabsControlledExample } from './tabs.controlled.example';
-export { KjTabsDisabledExample } from './tabs.disabled.example';
-export { KjTabsExample } from './tabs.example';
-export { KjTabsManualActivationExample } from './tabs.manual-activation.example';
-export { KjTabsUsageExample } from './tabs.usage.example';
-export { KjTabsVerticalExample } from './tabs.vertical.example';

package/src/tabs/_examples/tabs.controlled.example.ts

@@ -1,59 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent } from '../tabs';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * Controlled example — the active value is bound through a `signal` and
- * driven by external `<kj-button>` controls. Demonstrates the `[(value)]`
- * two-way binding and programmatic activation through the model.
- */
-@Component({
-  selector: 'kj-tabs-controlled-example',
-  standalone: true,
-  imports: [
-    KjTabsComponent,
-    KjTabListComponent,
-    KjTabComponent,
-    KjTabPanelComponent,
-    KjButtonComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .toolbar {
-        display: flex;
-        gap: var(--kj-space-sm);
-        margin-bottom: var(--kj-space-lg);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="toolbar">
-      <kj-button kjVariant="outline" kjSize="sm" (click)="active.set('overview')"
-        >Go to Overview</kj-button
-      >
-      <kj-button kjVariant="outline" kjSize="sm" (click)="active.set('settings')"
-        >Go to Settings</kj-button
-      >
-      <kj-button kjVariant="outline" kjSize="sm" (click)="active.set('about')"
-        >Go to About</kj-button
-      >
-    </div>
-    <kj-tabs [(value)]="active">
-      <kj-tab-list>
-        <kj-tab value="overview">Overview</kj-tab>
-        <kj-tab value="settings">Settings</kj-tab>
-        <kj-tab value="about">About</kj-tab>
-      </kj-tab-list>
-      <kj-tab-panel value="overview">Overview content.</kj-tab-panel>
-      <kj-tab-panel value="settings">Settings content.</kj-tab-panel>
-      <kj-tab-panel value="about">About content.</kj-tab-panel>
-    </kj-tabs>
-  `,
-})
-export class KjTabsControlledExample {
-  readonly active = signal('overview');
-}

package/src/tabs/_examples/tabs.disabled.example.ts

@@ -1,34 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent } from '../tabs';
-
-/**
- * Disabled-tab example — the middle tab announces `aria-disabled="true"` and
- * cannot be activated by click or Enter/Space, but it remains in the roving
- * sequence so users can still discover it via Home/End and arrow keys.
- */
-@Component({
-  selector: 'kj-tabs-disabled-example',
-  standalone: true,
-  imports: [KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-tabs>
-      <kj-tab-list>
-        <kj-tab value="one">Tab one</kj-tab>
-        <kj-tab value="two" [disabled]="true">Tab two (disabled)</kj-tab>
-        <kj-tab value="three">Tab three</kj-tab>
-      </kj-tab-list>
-      <kj-tab-panel value="one">First panel.</kj-tab-panel>
-      <kj-tab-panel value="two">Second panel — unreachable while disabled.</kj-tab-panel>
-      <kj-tab-panel value="three">Third panel.</kj-tab-panel>
-    </kj-tabs>
-  `,
-})
-export class KjTabsDisabledExample {}

package/src/tabs/_examples/tabs.example.ts

@@ -1,34 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent } from '../tabs';
-
-/**
- * Default tabs example — three tabs, automatic activation, horizontal.
- * The active value is uncontrolled; the directive reconciles to the first
- * registered tab on mount.
- */
-@Component({
-  selector: 'kj-tabs-example',
-  standalone: true,
-  imports: [KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-tabs>
-      <kj-tab-list>
-        <kj-tab value="overview">Overview</kj-tab>
-        <kj-tab value="api">API</kj-tab>
-        <kj-tab value="examples">Examples</kj-tab>
-      </kj-tab-list>
-      <kj-tab-panel value="overview">Overview content.</kj-tab-panel>
-      <kj-tab-panel value="api">API content.</kj-tab-panel>
-      <kj-tab-panel value="examples">Examples content.</kj-tab-panel>
-    </kj-tabs>
-  `,
-})
-export class KjTabsExample {}

package/src/tabs/_examples/tabs.manual-activation.example.ts

@@ -1,34 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent } from '../tabs';
-
-/**
- * Manual activation example — focus moves with arrow keys but Enter or Space
- * is required to activate the focused tab. Use this mode when activation has
- * cost (network call, expensive panel render).
- */
-@Component({
-  selector: 'kj-tabs-manual-activation-example',
-  standalone: true,
-  imports: [KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-tabs activationMode="manual">
-      <kj-tab-list>
-        <kj-tab value="reports">Reports</kj-tab>
-        <kj-tab value="analytics">Analytics</kj-tab>
-        <kj-tab value="exports">Exports</kj-tab>
-      </kj-tab-list>
-      <kj-tab-panel value="reports">Reports panel (mounted on activation).</kj-tab-panel>
-      <kj-tab-panel value="analytics">Analytics panel (mounted on activation).</kj-tab-panel>
-      <kj-tab-panel value="exports">Exports panel (mounted on activation).</kj-tab-panel>
-    </kj-tabs>
-  `,
-})
-export class KjTabsManualActivationExample {}

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

@@ -1,43 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent } from '../tabs';
-
-/**
- * A walkthrough of the most common tabs usages — controlled value, a disabled
- * tab in the strip, and a panel that reads from the active value to drive
- * companion UI. Use this as the copy-paste starting point.
- */
-@Component({
-  selector: 'kj-tabs-usage-example',
-  standalone: true,
-  imports: [KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-      .readout {
-        font: 0.875rem var(--kj-font-sans);
-        color: var(--kj-fg-muted);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <p class="readout">Active: {{ active() }}</p>
-    <kj-tabs [(value)]="active">
-      <kj-tab-list>
-        <kj-tab value="overview">Overview</kj-tab>
-        <kj-tab value="billing">Billing</kj-tab>
-        <kj-tab value="archived" [disabled]="true">Archived</kj-tab>
-      </kj-tab-list>
-      <kj-tab-panel value="overview">Overview content.</kj-tab-panel>
-      <kj-tab-panel value="billing">Billing content.</kj-tab-panel>
-      <kj-tab-panel value="archived">Archived content.</kj-tab-panel>
-    </kj-tabs>
-  `,
-})
-export class KjTabsUsageExample {
-  readonly active = signal('overview');
-}

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

@@ -1,33 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent } from '../tabs';
-
-/**
- * Vertical orientation example — the tab strip flips to a column and the
- * arrow-key axis switches to ArrowUp/ArrowDown.
- */
-@Component({
-  selector: 'kj-tabs-vertical-example',
-  standalone: true,
-  imports: [KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-tabs orientation="vertical">
-      <kj-tab-list>
-        <kj-tab value="profile">Profile</kj-tab>
-        <kj-tab value="team">Team</kj-tab>
-        <kj-tab value="billing">Billing</kj-tab>
-      </kj-tab-list>
-      <kj-tab-panel value="profile">Profile content.</kj-tab-panel>
-      <kj-tab-panel value="team">Team content.</kj-tab-panel>
-      <kj-tab-panel value="billing">Billing content.</kj-tab-panel>
-    </kj-tabs>
-  `,
-})
-export class KjTabsVerticalExample {}

package/src/tabs/index.ts

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

package/src/tabs/tabs.css

@@ -1,80 +0,0 @@
-@layer kj.component {
-  .kj-tabs { display: block; }
-  .kj-tabs[data-orientation="vertical"] { display: grid; grid-template-columns: auto 1fr; gap: var(--kj-space-lg); }
-
-  .kj-tab-list {
-    display: flex;
-    border-bottom: 1px solid var(--kj-border-default);
-    margin-bottom: var(--kj-space-lg);
-  }
-  .kj-tabs[data-orientation="vertical"] .kj-tab-list { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--kj-border-default); margin: 0; }
-
-  .kj-tab {
-    background: none;
-    border: 0;
-    border-bottom: 2px solid transparent;
-    color: var(--kj-fg-default);
-    opacity: 0.6;
-    padding: var(--kj-space-sm) var(--kj-space-md);
-    font: 0.875rem var(--kj-font-sans);
-    cursor: pointer;
-    margin-bottom: -1px;
-    transition: var(--kj-transition);
-  }
-  .kj-tab[aria-selected="true"] { opacity: 1; border-bottom-color: var(--kj-bg-primary); }
-  .kj-tab:hover { opacity: 1; }
-  .kj-tab:focus-visible { outline: 2px solid var(--kj-bg-primary); outline-offset: 2px; }
-  .kj-tab:disabled, .kj-tab[aria-disabled="true"] { opacity: 0.3; cursor: not-allowed; }
-
-  /* Pills variant — a small "tray" container with each active tab popping
-     to the page-body color and an inset 1px ring. Matches the design's
-     showcase view-mode toggle. */
-  .kj-tabs[data-variant="pills"] {
-    /* The host becomes the tray itself when only a tab-list is rendered
-       (e.g. used purely as a view-mode toggle). */
-    display: inline-block;
-  }
-  .kj-tabs[data-variant="pills"] .kj-tab-list {
-    display: inline-flex;
-    gap: 4px;
-    padding: 4px;
-    background-color: var(--kj-bg-surface);
-    border: 1px solid var(--kj-border-default);
-    border-radius: var(--kj-radius-field);
-    width: fit-content;
-    margin-bottom: 0;
-  }
-  .kj-tabs[data-variant="pills"] .kj-tab {
-    border-bottom: 0;
-    border-radius: calc(var(--kj-radius-field) - 2px);
-    margin: 0;
-    padding: var(--kj-space-xs, 0.375rem) var(--kj-space-md);
-    color: var(--kj-fg-muted);
-    opacity: 1;
-    transition: background-color var(--kj-transition),
-                color var(--kj-transition),
-                box-shadow var(--kj-transition);
-  }
-  .kj-tabs[data-variant="pills"] .kj-tab:hover { color: var(--kj-fg-default); }
-  .kj-tabs[data-variant="pills"] .kj-tab[aria-selected="true"] {
-    background-color: var(--kj-bg-body);
-    color: var(--kj-fg-default);
-    box-shadow: inset 0 0 0 1px var(--kj-border-default);
-  }
-
-  .kj-tabs[data-orientation="vertical"] .kj-tab { border-bottom: 0; border-right: 2px solid transparent; margin: 0 -1px 0 0; text-align: left; }
-  .kj-tabs[data-orientation="vertical"] .kj-tab[aria-selected="true"] { border-right-color: var(--kj-bg-primary); }
-
-  .kj-tab-panel {
-    /* Default `display: block` — without it the host renders as inline
-       (default for unknown custom elements), which collapses any block
-       child's width to the inline flow width. That broke the virtualized
-       table demo: `.kj-table-body` couldn't get a non-zero ResizeObserver
-       rect, so the virtualizer rendered 0 visible rows. */
-    display: block;
-    color: var(--kj-fg-default);
-    font: 0.875rem var(--kj-font-sans);
-    line-height: 1.5;
-  }
-  .kj-tab-panel[hidden] { display: none; }
-}

package/src/tabs/tabs.playground.ts

@@ -1,88 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import {
-  KjTabsComponent,
-  KjTabListComponent,
-  KjTabComponent,
-  KjTabPanelComponent,
-} from './tabs';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals.
- */
-const tabCount = signal<2 | 3 | 4>(3);
-const active = signal<'overview' | 'api' | 'examples' | 'changelog'>('overview');
-const variant = signal<'default' | 'pills'>('default');
-const activationMode = signal<'automatic' | 'manual'>('automatic');
-
-const TAB_DEFS = [
-  { value: 'overview', label: 'Overview', body: 'High-level summary of what this surface does.' },
-  { value: 'api', label: 'API', body: 'Inputs, outputs, and accepted value shapes.' },
-  { value: 'examples', label: 'Examples', body: 'Copy-pasteable patterns for common scenarios.' },
-  { value: 'changelog', label: 'Changelog', body: 'Recent release notes.' },
-] as const;
-
-@Component({
-  selector: 'kj-tabs-playground',
-  standalone: true,
-  imports: [KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent],
-  template: `
-    <kj-tabs
-      [value]="active()"
-      (valueChange)="active.set($any($event))"
-      [variant]="variant()"
-      [activationMode]="activationMode()"
-    >
-      <kj-tab-list>
-        @for (t of tabs(); track t.value) {
-          <kj-tab [value]="t.value">{{ t.label }}</kj-tab>
-        }
-      </kj-tab-list>
-      @for (t of tabs(); track t.value) {
-        <kj-tab-panel [value]="t.value">{{ t.body }}</kj-tab-panel>
-      }
-    </kj-tabs>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjTabsPlaygroundDemo {
-  protected readonly active = active;
-  protected readonly variant = variant;
-  protected readonly activationMode = activationMode;
-  protected readonly tabs = computed(() => TAB_DEFS.slice(0, tabCount()));
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjTabsPlaygroundDemo,
-  state: {
-    tabCount: tabCount as unknown as ReturnType<typeof signal>,
-    active: active as unknown as ReturnType<typeof signal>,
-    variant: variant as unknown as ReturnType<typeof signal>,
-    activationMode: activationMode as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    { kind: 'chips', name: 'tabCount', label: 'tabs', options: [2, 3, 4] },
-    { kind: 'chips', name: 'active', label: 'active', options: ['overview', 'api', 'examples', 'changelog'] },
-    { kind: 'chips', name: 'variant', label: 'variant', options: ['default', 'pills'] },
-    { kind: 'chips', name: 'activationMode', label: 'activation', options: ['automatic', 'manual'] },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      tabCount: number;
-      active: string;
-      variant: string;
-      activationMode: string;
-    };
-    const tabs = TAB_DEFS.slice(0, s.tabCount);
-    const triggers = tabs
-      .map((t) => `    <kj-tab value="${t.value}">${t.label}</kj-tab>`)
-      .join('\n');
-    const panels = tabs
-      .map((t) => `  <kj-tab-panel value="${t.value}">${t.body}</kj-tab-panel>`)
-      .join('\n');
-    const attrs: string[] = [`[value]="'${s.active}'"`];
-    if (s.variant !== 'default') attrs.push(`variant="${s.variant}"`);
-    if (s.activationMode !== 'automatic') attrs.push(`activationMode="${s.activationMode}"`);
-    return `<kj-tabs\n  ${attrs.join('\n  ')}\n>\n  <kj-tab-list>\n${triggers}\n  </kj-tab-list>\n${panels}\n</kj-tabs>`;
-  },
-};

package/src/tabs/tabs.spec.ts

@@ -1,135 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, test, beforeEach } from 'vitest';
-import { KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent } from './tabs';
-
-const imports = [KjTabsComponent, KjTabListComponent, KjTabComponent, KjTabPanelComponent];
-
-@Component({
-  standalone: true,
-  imports,
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-tabs [(value)]="active" [orientation]="orientation">
-      <kj-tab-list>
-        <kj-tab value="overview">Overview</kj-tab>
-        <kj-tab value="api">API</kj-tab>
-        <kj-tab value="examples">Examples</kj-tab>
-      </kj-tab-list>
-      <kj-tab-panel value="overview"
-        ><span data-testid="panel-overview">Overview body</span></kj-tab-panel
-      >
-      <kj-tab-panel value="api"><span data-testid="panel-api">API body</span></kj-tab-panel>
-      <kj-tab-panel value="examples"
-        ><span data-testid="panel-examples">Examples body</span></kj-tab-panel
-      >
-    </kj-tabs>
-  `,
-})
-class HostComponent {
-  active = signal('overview');
-  orientation: 'horizontal' | 'vertical' = 'horizontal';
-}
-
-@Component({
-  standalone: true,
-  imports,
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-tabs>
-      <kj-tab-list>
-        <kj-tab value="x">X</kj-tab>
-        <kj-tab value="y">Y</kj-tab>
-      </kj-tab-list>
-      <kj-tab-panel value="x">X body</kj-tab-panel>
-      <kj-tab-panel value="y">Y body</kj-tab-panel>
-    </kj-tabs>
-  `,
-})
-class DefaultValueHost {}
-
-describe('KjTabsComponent (wrapper)', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({ imports: [HostComponent, DefaultValueHost] });
-  });
-
-  test('renders the projected children — tablist, tabs, panels', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const root: HTMLElement = fixture.nativeElement;
-
-    const list = root.querySelector('kj-tab-list');
-    expect(list).not.toBeNull();
-    expect(list!.getAttribute('role')).toBe('tablist');
-
-    const tabs = root.querySelectorAll('button.kj-tab');
-    expect(tabs.length).toBe(3);
-    tabs.forEach((tab) => expect(tab.getAttribute('role')).toBe('tab'));
-
-    const panels = root.querySelectorAll('kj-tab-panel');
-    expect(panels.length).toBe(3);
-    panels.forEach((panel) => expect(panel.getAttribute('role')).toBe('tabpanel'));
-  });
-
-  test('aliased inputs forward to the host directive — value, orientation, activationMode', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const root: HTMLElement = fixture.nativeElement;
-    const tabsHost = root.querySelector('kj-tabs')!;
-
-    // `value` model alias: first tab is selected via the bound signal.
-    const tabs = root.querySelectorAll<HTMLButtonElement>('button.kj-tab');
-    expect(tabs[0].getAttribute('aria-selected')).toBe('true');
-    expect(tabs[1].getAttribute('aria-selected')).toBe('false');
-
-    // `orientation` alias forwarded to KjTabs directive — reflected as data-orientation.
-    expect(tabsHost.getAttribute('data-orientation')).toBe('horizontal');
-  });
-
-  test('default value activates the first tab when value is left unset', async () => {
-    const fixture = TestBed.createComponent(DefaultValueHost);
-    fixture.detectChanges();
-    // Reconciliation runs in a microtask.
-    await Promise.resolve();
-    fixture.detectChanges();
-    await new Promise<void>((r) => setTimeout(r, 0));
-    fixture.detectChanges();
-
-    const root = fixture.nativeElement as HTMLElement;
-    const tabs = root.querySelectorAll<HTMLButtonElement>('button.kj-tab');
-    expect(tabs[0].getAttribute('aria-selected')).toBe('true');
-    expect(tabs[1].getAttribute('aria-selected')).toBe('false');
-  });
-
-  test('programmatic value change activates the corresponding panel', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    fixture.componentInstance.active.set('api');
-    fixture.detectChanges();
-
-    const root: HTMLElement = fixture.nativeElement;
-    const tabs = root.querySelectorAll<HTMLButtonElement>('button.kj-tab');
-    expect(tabs[0].getAttribute('aria-selected')).toBe('false');
-    expect(tabs[1].getAttribute('aria-selected')).toBe('true');
-
-    const panels = root.querySelectorAll<HTMLElement>('kj-tab-panel');
-    expect(panels[0].hasAttribute('hidden')).toBe(true);
-    expect(panels[1].hasAttribute('hidden')).toBe(false);
-    // Lazy-then-persistent: api panel content mounts on activation.
-    expect(root.querySelector('[data-testid="panel-api"]')).not.toBeNull();
-  });
-
-  test('orientation propagates to the tablist (aria-orientation + data-orientation)', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.orientation = 'vertical';
-    fixture.detectChanges();
-
-    const root: HTMLElement = fixture.nativeElement;
-    const tabsHost = root.querySelector('kj-tabs')!;
-    const list = root.querySelector('kj-tab-list')!;
-
-    expect(tabsHost.getAttribute('data-orientation')).toBe('vertical');
-    expect(list.getAttribute('aria-orientation')).toBe('vertical');
-    expect(list.getAttribute('data-orientation')).toBe('vertical');
-  });
-});