@kouji-ui/components 0.1.1 → 0.1.2

package/src/cascade-select/_examples/cascade-select.data-driven.example.ts

@@ -1,119 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCascadeSelectComponent,
-  KjCascadeOptionComponent,
-  KjCascadeSubPanelComponent,
-} from '../cascade-select';
-import type { KjCascadeNode } from '@kouji-ui/core';
-
-interface GeoNode extends KjCascadeNode<string> {
-  readonly value: string;
-  readonly label: string;
-  readonly children?: readonly GeoNode[];
-}
-
-const REGIONS: readonly GeoNode[] = [
-  {
-    value: 'na',
-    label: 'North America',
-    children: [
-      {
-        value: 'us',
-        label: 'United States',
-        children: [
-          { value: 'sf', label: 'San Francisco' },
-          { value: 'la', label: 'Los Angeles' },
-          { value: 'chi', label: 'Chicago' },
-          { value: 'nyc', label: 'New York City' },
-        ],
-      },
-      {
-        value: 'ca',
-        label: 'Canada',
-        children: [
-          { value: 'tor', label: 'Toronto' },
-          { value: 'van', label: 'Vancouver' },
-        ],
-      },
-    ],
-  },
-  {
-    value: 'eu',
-    label: 'Europe',
-    children: [
-      {
-        value: 'de',
-        label: 'Germany',
-        children: [
-          { value: 'ber', label: 'Berlin' },
-          { value: 'mun', label: 'Munich' },
-        ],
-      },
-      {
-        value: 'fr',
-        label: 'France',
-        children: [
-          { value: 'par', label: 'Paris' },
-          { value: 'lyo', label: 'Lyon' },
-        ],
-      },
-    ],
-  },
-  {
-    value: 'as',
-    label: 'Asia',
-    children: [
-      { value: 'tok', label: 'Tokyo' },
-      { value: 'bei', label: 'Beijing' },
-      { value: 'sin', label: 'Singapore' },
-    ],
-  },
-];
-
-/**
- * Data-driven cascade-select example. Hierarchy is built from a data array
- * rather than inline markup. Each node drives `<kj-cascade-option>`
- * bindings including nested sub-panels.
- */
-@Component({
-  selector: 'kj-cascade-select-data-driven-example',
-  standalone: true,
-  imports: [KjCascadeSelectComponent, KjCascadeOptionComponent, KjCascadeSubPanelComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-cascade-select [(kjValue)]="selected" placeholder="Select a location">
-      @for (region of regions; track region.value) {
-        <kj-cascade-option [kjValue]="region.value" [kjLabel]="region.label">
-          <kj-cascade-sub-panel [kjOwnerOptionId]="region.value">
-            @for (country of region.children; track country.value) {
-              <kj-cascade-option [kjValue]="country.value" [kjLabel]="country.label">
-                @if (country.children?.length) {
-                  <kj-cascade-sub-panel [kjOwnerOptionId]="country.value">
-                    @for (city of country.children; track city.value) {
-                      <kj-cascade-option [kjValue]="city.value" [kjLabel]="city.label" />
-                    }
-                  </kj-cascade-sub-panel>
-                }
-              </kj-cascade-option>
-            }
-          </kj-cascade-sub-panel>
-        </kj-cascade-option>
-      }
-    </kj-cascade-select>
-
-    <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--kj-fg-default);">
-      Selected: <strong>{{ selected() ?? '—' }}</strong>
-    </p>
-  `,
-})
-export class KjCascadeSelectDataDrivenExample {
-  readonly regions = REGIONS;
-  readonly selected = signal<string | undefined>(undefined);
-}

package/src/cascade-select/_examples/cascade-select.disabled.example.ts

@@ -1,74 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCascadeSelectComponent,
-  KjCascadeOptionComponent,
-  KjCascadeSubPanelComponent,
-} from '../cascade-select';
-
-/**
- * Demonstrates per-option `kjDisabled` and a whole-cascade `[disabled]` state.
- * Disabled options are visible but non-interactive (ARIA-disabled, not native).
- */
-@Component({
-  selector: 'kj-cascade-select-disabled-example',
-  standalone: true,
-  imports: [KjCascadeSelectComponent, KjCascadeOptionComponent, KjCascadeSubPanelComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div style="display: flex; flex-direction: column; gap: 1rem; max-width: 20rem;">
-      <div>
-        <p style="margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500;">
-          Per-option disabled (Antarctica is disabled)
-        </p>
-        <kj-cascade-select [(kjValue)]="continent" placeholder="Select a continent">
-          <kj-cascade-option [kjValue]="'af'" kjLabel="Africa">
-            <kj-cascade-sub-panel kjOwnerOptionId="dis-af">
-              <kj-cascade-option [kjValue]="'eg'" kjLabel="Egypt" />
-              <kj-cascade-option [kjValue]="'ng'" kjLabel="Nigeria" />
-            </kj-cascade-sub-panel>
-          </kj-cascade-option>
-          <kj-cascade-option [kjValue]="'eu'" kjLabel="Europe">
-            <kj-cascade-sub-panel kjOwnerOptionId="dis-eu">
-              <kj-cascade-option [kjValue]="'fr'" kjLabel="France" />
-              <kj-cascade-option [kjValue]="'de'" kjLabel="Germany" />
-            </kj-cascade-sub-panel>
-          </kj-cascade-option>
-          <kj-cascade-option [kjValue]="'an'" kjLabel="Antarctica" kjDisabled />
-        </kj-cascade-select>
-        <p style="margin-top: 0.5rem; font-size: 0.75rem;">
-          Continent: <strong>{{ continent() ?? '—' }}</strong>
-        </p>
-      </div>
-
-      <hr style="border: none; border-top: 1px solid var(--kj-border-default);" />
-
-      <div>
-        <p style="margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500;">
-          Whole cascade disabled
-        </p>
-        <kj-cascade-select
-          [(kjValue)]="disabledValue"
-          placeholder="Disabled cascade"
-          [disabled]="true"
-        >
-          <kj-cascade-option [kjValue]="'us'" kjLabel="USA">
-            <kj-cascade-sub-panel kjOwnerOptionId="dis-all-us">
-              <kj-cascade-option [kjValue]="'sf'" kjLabel="San Francisco" />
-            </kj-cascade-sub-panel>
-          </kj-cascade-option>
-        </kj-cascade-select>
-      </div>
-    </div>
-  `,
-})
-export class KjCascadeSelectDisabledExample {
-  readonly continent = signal<string | undefined>(undefined);
-  readonly disabledValue = signal<string | undefined>(undefined);
-}

package/src/cascade-select/_examples/cascade-select.example.ts

@@ -1,80 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCascadeSelectComponent,
-  KjCascadeOptionComponent,
-  KjCascadeSubPanelComponent,
-} from '../cascade-select';
-
-/**
- * Default cascade-select example: Country → State → City (3 levels).
- * Selecting a city value commits it via `[(kjValue)]`.
- *
- * `<kj-cascade-sub-panel>` automatically binds to its parent
- * `<kj-cascade-option>` — no `kjOwnerOptionId` needed.
- */
-@Component({
-  selector: 'kj-cascade-select-example',
-  standalone: true,
-  imports: [KjCascadeSelectComponent, KjCascadeOptionComponent, KjCascadeSubPanelComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-cascade-select [(kjValue)]="selectedCity" placeholder="Select a city">
-      <kj-cascade-option [kjValue]="'us'" kjLabel="USA">
-        <kj-cascade-sub-panel>
-          <kj-cascade-option [kjValue]="'ca'" kjLabel="California">
-            <kj-cascade-sub-panel>
-              <kj-cascade-option [kjValue]="'sf'" kjLabel="San Francisco" />
-              <kj-cascade-option [kjValue]="'la'" kjLabel="Los Angeles" />
-              <kj-cascade-option [kjValue]="'sd'" kjLabel="San Diego" />
-            </kj-cascade-sub-panel>
-          </kj-cascade-option>
-          <kj-cascade-option [kjValue]="'ny'" kjLabel="New York">
-            <kj-cascade-sub-panel>
-              <kj-cascade-option [kjValue]="'nyc'" kjLabel="New York City" />
-              <kj-cascade-option [kjValue]="'buf'" kjLabel="Buffalo" />
-            </kj-cascade-sub-panel>
-          </kj-cascade-option>
-        </kj-cascade-sub-panel>
-      </kj-cascade-option>
-
-      <kj-cascade-option [kjValue]="'gb'" kjLabel="United Kingdom">
-        <kj-cascade-sub-panel>
-          <kj-cascade-option [kjValue]="'eng'" kjLabel="England">
-            <kj-cascade-sub-panel>
-              <kj-cascade-option [kjValue]="'lon'" kjLabel="London" />
-              <kj-cascade-option [kjValue]="'man'" kjLabel="Manchester" />
-            </kj-cascade-sub-panel>
-          </kj-cascade-option>
-          <kj-cascade-option [kjValue]="'sco'" kjLabel="Scotland">
-            <kj-cascade-sub-panel>
-              <kj-cascade-option [kjValue]="'edi'" kjLabel="Edinburgh" />
-              <kj-cascade-option [kjValue]="'gla'" kjLabel="Glasgow" />
-            </kj-cascade-sub-panel>
-          </kj-cascade-option>
-        </kj-cascade-sub-panel>
-      </kj-cascade-option>
-
-      <kj-cascade-option [kjValue]="'jp'" kjLabel="Japan">
-        <kj-cascade-sub-panel>
-          <kj-cascade-option [kjValue]="'tok'" kjLabel="Tokyo" />
-          <kj-cascade-option [kjValue]="'osa'" kjLabel="Osaka" />
-          <kj-cascade-option [kjValue]="'kyo'" kjLabel="Kyoto" />
-        </kj-cascade-sub-panel>
-      </kj-cascade-option>
-    </kj-cascade-select>
-
-    <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--kj-fg-default);">
-      Selected: <strong>{{ selectedCity() ?? '—' }}</strong>
-    </p>
-  `,
-})
-export class KjCascadeSelectExample {
-  readonly selectedCity = signal<string | undefined>(undefined);
-}

package/src/cascade-select/_examples/cascade-select.field.example.ts

@@ -1,73 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCascadeSelectComponent,
-  KjCascadeOptionComponent,
-  KjCascadeSubPanelComponent,
-} from '../cascade-select';
-
-/**
- * Cascade select wrapped in a `<div kjField>` with a label and helper hint.
- * Demonstrates `KjField` integration — the field label is programmatically
- * associated with the trigger via `aria-labelledby`.
- */
-@Component({
-  selector: 'kj-cascade-select-field-example',
-  standalone: true,
-  imports: [KjCascadeSelectComponent, KjCascadeOptionComponent, KjCascadeSubPanelComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div style="display: flex; flex-direction: column; gap: 0.25rem; max-width: 20rem;">
-      <label
-        for="cascade-delivery-location"
-        style="font-size: 0.875rem; font-weight: 500; color: var(--kj-fg-default);"
-      >
-        Delivery location
-      </label>
-      <kj-cascade-select
-        id="cascade-delivery-location"
-        [(kjValue)]="location"
-        placeholder="Select a city"
-      >
-        <kj-cascade-option [kjValue]="'us'" kjLabel="United States">
-          <kj-cascade-sub-panel kjOwnerOptionId="field-us">
-            <kj-cascade-option [kjValue]="'ca'" kjLabel="California">
-              <kj-cascade-sub-panel kjOwnerOptionId="field-ca">
-                <kj-cascade-option [kjValue]="'sf'" kjLabel="San Francisco" />
-                <kj-cascade-option [kjValue]="'la'" kjLabel="Los Angeles" />
-              </kj-cascade-sub-panel>
-            </kj-cascade-option>
-            <kj-cascade-option [kjValue]="'tx'" kjLabel="Texas">
-              <kj-cascade-sub-panel kjOwnerOptionId="field-tx">
-                <kj-cascade-option [kjValue]="'hou'" kjLabel="Houston" />
-                <kj-cascade-option [kjValue]="'dal'" kjLabel="Dallas" />
-              </kj-cascade-sub-panel>
-            </kj-cascade-option>
-          </kj-cascade-sub-panel>
-        </kj-cascade-option>
-        <kj-cascade-option [kjValue]="'ca-c'" kjLabel="Canada">
-          <kj-cascade-sub-panel kjOwnerOptionId="field-ca-c">
-            <kj-cascade-option [kjValue]="'tor'" kjLabel="Toronto" />
-            <kj-cascade-option [kjValue]="'van'" kjLabel="Vancouver" />
-          </kj-cascade-sub-panel>
-        </kj-cascade-option>
-      </kj-cascade-select>
-      <span style="font-size: 0.75rem; color: var(--kj-fg-muted, #888);">
-        Choose your country, state, then city.
-      </span>
-    </div>
-
-    <p style="margin-top: 1rem; font-size: 0.875rem;">
-      Selected: <strong>{{ location() ?? '—' }}</strong>
-    </p>
-  `,
-})
-export class KjCascadeSelectFieldExample {
-  readonly location = signal<string | undefined>(undefined);
-}

package/src/cascade-select/_examples/cascade-select.path.example.ts

@@ -1,85 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCascadeSelectComponent,
-  KjCascadeOptionComponent,
-  KjCascadeSubPanelComponent,
-} from '../cascade-select';
-
-const LABELS: Record<string, string> = {
-  us: 'USA',
-  gb: 'UK',
-  ca: 'California',
-  ny: 'New York',
-  sf: 'San Francisco',
-  la: 'Los Angeles',
-  nyc: 'New York City',
-  lon: 'London',
-};
-
-/**
- * Demonstrates `(kjCascadePathChange)` — the full path from root to leaf
- * is emitted on every selection and rendered as a breadcrumb.
- */
-@Component({
-  selector: 'kj-cascade-select-path-example',
-  standalone: true,
-  imports: [KjCascadeSelectComponent, KjCascadeOptionComponent, KjCascadeSubPanelComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div style="margin-bottom: 0.75rem; font-size: 0.875rem; color: var(--kj-fg-default);">
-      Path: <span style="font-weight: 600;">{{ breadcrumb() }}</span>
-    </div>
-
-    <kj-cascade-select
-      [(kjValue)]="selectedCity"
-      (kjCascadePathChange)="onPathChange($event)"
-      placeholder="Select a city"
-    >
-      <kj-cascade-option [kjValue]="'us'" kjLabel="USA">
-        <kj-cascade-sub-panel kjOwnerOptionId="path-us">
-          <kj-cascade-option [kjValue]="'ca'" kjLabel="California">
-            <kj-cascade-sub-panel kjOwnerOptionId="path-ca">
-              <kj-cascade-option [kjValue]="'sf'" kjLabel="San Francisco" />
-              <kj-cascade-option [kjValue]="'la'" kjLabel="Los Angeles" />
-            </kj-cascade-sub-panel>
-          </kj-cascade-option>
-          <kj-cascade-option [kjValue]="'ny'" kjLabel="New York">
-            <kj-cascade-sub-panel kjOwnerOptionId="path-ny">
-              <kj-cascade-option [kjValue]="'nyc'" kjLabel="New York City" />
-            </kj-cascade-sub-panel>
-          </kj-cascade-option>
-        </kj-cascade-sub-panel>
-      </kj-cascade-option>
-      <kj-cascade-option [kjValue]="'gb'" kjLabel="United Kingdom">
-        <kj-cascade-sub-panel kjOwnerOptionId="path-gb">
-          <kj-cascade-option [kjValue]="'lon'" kjLabel="London" />
-        </kj-cascade-sub-panel>
-      </kj-cascade-option>
-    </kj-cascade-select>
-
-    <p style="margin-top: 1rem; font-size: 0.875rem; color: var(--kj-fg-default);">
-      Selected value: <strong>{{ selectedCity() ?? '—' }}</strong>
-    </p>
-  `,
-})
-export class KjCascadeSelectPathExample {
-  readonly selectedCity = signal<string | undefined>(undefined);
-  readonly path = signal<readonly unknown[]>([]);
-
-  readonly breadcrumb = () => {
-    const p = this.path();
-    if (!p.length) return '—';
-    return p.map((v) => LABELS[v as string] ?? String(v)).join(' › ');
-  };
-
-  onPathChange(p: readonly unknown[]): void {
-    this.path.set(p);
-  }
-}

package/src/cascade-select/_examples/index.ts

@@ -1,7 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjCascadeSelectDataDrivenExample } from './cascade-select.data-driven.example';
-export { KjCascadeSelectDisabledExample } from './cascade-select.disabled.example';
-export { KjCascadeSelectExample } from './cascade-select.example';
-export { KjCascadeSelectFieldExample } from './cascade-select.field.example';
-export { KjCascadeSelectPathExample } from './cascade-select.path.example';

package/src/cascade-select/cascade-select.css

@@ -1,120 +0,0 @@
-@layer kj.component {
-  /* ── Root ────────────────────────────────────────────────────────────── */
-  .kj-cascade-select {
-    position: relative;
-    display: inline-block;
-    min-width: 12rem;
-  }
-
-  /* ── Trigger button ──────────────────────────────────────────────────── */
-  .kj-cascade-trigger {
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--kj-space-sm);
-    background: var(--kj-bg-field);
-    color: var(--kj-fg-default);
-    border: 1px solid var(--kj-border-default);
-    border-radius: var(--kj-radius-field);
-    padding: var(--kj-space-sm) var(--kj-space-md);
-    font: 0.875rem var(--kj-font-sans);
-    cursor: pointer;
-    min-height: 2.75rem; /* 44px touch target */
-  }
-  .kj-cascade-trigger:focus-visible {
-    outline: 2px solid var(--kj-border-focus);
-    outline-offset: 2px;
-  }
-  .kj-cascade-select[data-disabled] .kj-cascade-trigger {
-    opacity: 0.45;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  /* ── Root panel ──────────────────────────────────────────────────────── */
-  .kj-cascade-panel {
-    box-sizing: border-box;
-    background: var(--kj-bg-elevated);
-    border: 1px solid var(--kj-border-default);
-    border-radius: var(--kj-radius-field);
-    box-shadow: var(--kj-shadow-md);
-    padding: 4px;
-    min-width: 12rem;
-    max-height: 20rem;
-    overflow: auto;
-    z-index: 200;
-  }
-  .kj-cascade-panel[hidden] { display: none; }
-
-  /* ── Sub-panel ───────────────────────────────────────────────────────── */
-  /* `position: fixed` so the sub-panel escapes the root panel's
-     `overflow: auto`. Coords are written inline by the sub-panel directive
-     based on the parent option's bounding rect. */
-  .kj-cascade-sub-panel {
-    position: fixed;
-    background: var(--kj-bg-elevated);
-    border: 1px solid var(--kj-border-default);
-    border-radius: var(--kj-radius-field);
-    box-shadow: var(--kj-shadow-md);
-    padding: 4px;
-    min-width: 12rem;
-    max-height: 20rem;
-    overflow: auto;
-    z-index: 1001;
-  }
-  .kj-cascade-sub-panel[hidden] { display: none; }
-
-  /* ── Option row ──────────────────────────────────────────────────────── */
-  .kj-cascade-option {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--kj-space-sm) var(--kj-space-md);
-    border-radius: var(--kj-radius-selector);
-    cursor: pointer;
-    color: var(--kj-fg-default);
-    font: 0.875rem var(--kj-font-sans);
-    min-height: 2.75rem; /* 44px touch target */
-    position: relative;
-  }
-  .kj-cascade-option:hover,
-  .kj-cascade-option[data-active] {
-    background: var(--kj-bg-surface);
-  }
-  .kj-cascade-option[aria-selected="true"] {
-    background: var(--kj-bg-primary-subtle, var(--kj-bg-surface));
-    color: var(--kj-fg-primary, var(--kj-fg-default));
-  }
-  .kj-cascade-option[data-disabled] {
-    opacity: 0.45;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-  .kj-cascade-option[data-active-path] {
-    font-weight: 500;
-  }
-
-  /* ── Option label ────────────────────────────────────────────────────── */
-  .kj-cascade-option-label {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  /* ── Chevron ─────────────────────────────────────────────────────────── */
-  .kj-cascade-option-chevron {
-    flex-shrink: 0;
-    font-size: 1rem;
-    color: var(--kj-fg-muted, currentColor);
-    opacity: 0.6;
-    margin-left: var(--kj-space-sm);
-  }
-  /* Hide chevron on leaf options (data-leaf="true" is set on the host element) */
-  [data-leaf="true"] .kj-cascade-option-chevron,
-  [data-leaf="true"].kj-cascade-option .kj-cascade-option-chevron {
-    display: none;
-  }
-}