@kouji-ui/core 0.1.1 → 0.1.2

package/src/tooltip/_examples/tooltip.finance.example.ts

@@ -1,97 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjTooltipTrigger, KjTooltipContent } from '../tooltip';
-import { KjButton } from '../../button/button';
-
-@Component({
-  selector: 'kj-example-tooltip-finance',
-  standalone: true,
-  imports: [KjTooltipTrigger, KjTooltipContent, KjButton],
-  styleUrls: ['../../styles/docs-themes.css'],
-  /* Closed-state `display:none` for portaled `kj-tooltip-content` comes from
-   * `packages/components/src/tooltip/tooltip.css` (docs app global styles) — not repeated here. */
-  styles: [
-    `
-      :host {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 5rem 3rem;
-        background: var(--kj-bg);
-        font-family: var(--kj-font);
-        min-height: 180px;
-        color: var(--kj-text);
-      }
-      .row {
-        display: flex;
-        gap: 1.5rem;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: center;
-      }
-      button[kjButton] {
-        padding: 4px 15px;
-        font-family: var(--kj-font);
-        font-size: 14px;
-        font-weight: 400;
-        border: 1px solid transparent;
-        border-radius: 6px;
-        cursor: pointer;
-        transition: var(--kj-transition);
-        line-height: 1.5;
-      }
-      button[kjButton][data-variant='default'] {
-        background: var(--kj-accent);
-        color: var(--kj-accent-on);
-        border-color: var(--kj-accent);
-      }
-      button[kjButton][data-variant='default']:hover {
-        background: #4096ff;
-        border-color: #4096ff;
-      }
-      button[kjButton][data-variant='link'] {
-        background: transparent;
-        color: var(--kj-accent);
-        border-color: transparent;
-      }
-      button[kjButton][data-variant='link']:hover {
-        color: #4096ff;
-      }
-      button[kjButton][data-variant='ghost'] {
-        background: transparent;
-        color: var(--kj-text);
-        border: 1px solid var(--kj-text);
-      }
-      button[kjButton][data-variant='ghost']:hover {
-        color: var(--kj-accent);
-        border-color: var(--kj-accent);
-      }
-      :global(kj-tooltip-content) {
-        background: #1f2937;
-        color: #f9fafb;
-        padding: 0.3rem 0.625rem;
-        font-size: 0.75rem;
-        border-radius: var(--kj-radius-sm);
-        white-space: nowrap;
-        pointer-events: none;
-        box-shadow: var(--kj-shadow-sm);
-      }
-    `,
-  ],
-  host: { class: 'kj-theme-finance' },
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="row">
-      <button kjButton [kjVariant]="'default'" kjTooltipTrigger #t1="kjTooltipTrigger">
-        Default
-      </button>
-      <kj-tooltip-content [kjFor]="t1">Copy to clipboard</kj-tooltip-content>
-
-      <button kjButton [kjVariant]="'link'" kjTooltipTrigger #t2="kjTooltipTrigger">Link</button>
-      <kj-tooltip-content [kjFor]="t2" [kjSide]="'bottom'">Opens below</kj-tooltip-content>
-
-      <button kjButton [kjVariant]="'ghost'" kjTooltipTrigger #t3="kjTooltipTrigger">Ghost</button>
-      <kj-tooltip-content [kjFor]="t3" [kjSide]="'right'">Opens right</kj-tooltip-content>
-    </div>
-  `,
-})
-export class TooltipFinanceExample {}

package/src/tooltip/_examples/tooltip.placements.example.ts

@@ -1,83 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjTooltipTrigger, KjTooltipContent } from '../tooltip';
-import { KjButton } from '../../button/button';
-
-@Component({
-  selector: 'kj-example-tooltip-placements',
-  standalone: true,
-  imports: [KjTooltipTrigger, KjTooltipContent, KjButton],
-  styleUrls: ['../../styles/docs-themes.css'],
-  styles: [
-    `
-      :host {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 5rem 4rem;
-        background: var(--kj-bg);
-        font-family: var(--kj-font);
-        min-height: 220px;
-      }
-      .grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr 1fr;
-        grid-template-rows: auto auto auto;
-        gap: 0.75rem;
-        place-items: center;
-      }
-      button[kjButton] {
-        padding: 0.5rem 1.25rem;
-        font-family: var(--kj-font);
-        font-size: 0.875rem;
-        border: var(--kj-btn-border);
-        cursor: pointer;
-        transition: var(--kj-transition);
-      }
-      [data-variant='default'] {
-        background: var(--kj-accent);
-        color: var(--kj-accent-on);
-      }
-      .empty {
-        width: 80px;
-      }
-      :global(kj-tooltip-content) {
-        background: var(--kj-accent);
-        color: var(--kj-accent-on);
-        padding: 0.25rem 0.625rem;
-        font-size: 0.75rem;
-        white-space: nowrap;
-        pointer-events: none;
-        transition: var(--kj-transition);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="grid">
-      <div class="empty"></div>
-      <button kjButton [kjVariant]="'default'" kjTooltipTrigger #tTop="kjTooltipTrigger">
-        Top
-      </button>
-      <kj-tooltip-content [kjFor]="tTop" [kjSide]="'top'">Top tooltip</kj-tooltip-content>
-      <div class="empty"></div>
-
-      <button kjButton [kjVariant]="'default'" kjTooltipTrigger #tLeft="kjTooltipTrigger">
-        Left
-      </button>
-      <kj-tooltip-content [kjFor]="tLeft" [kjSide]="'left'">Left tooltip</kj-tooltip-content>
-      <div class="empty"></div>
-      <button kjButton [kjVariant]="'default'" kjTooltipTrigger #tRight="kjTooltipTrigger">
-        Right
-      </button>
-      <kj-tooltip-content [kjFor]="tRight" [kjSide]="'right'">Right tooltip</kj-tooltip-content>
-
-      <div class="empty"></div>
-      <button kjButton [kjVariant]="'default'" kjTooltipTrigger #tBot="kjTooltipTrigger">
-        Bottom
-      </button>
-      <kj-tooltip-content [kjFor]="tBot" [kjSide]="'bottom'">Bottom tooltip</kj-tooltip-content>
-      <div class="empty"></div>
-    </div>
-  `,
-})
-export class TooltipPlacementsExample {}

package/src/tooltip/_examples/tooltip.retro.example.ts

@@ -1,107 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjTooltipTrigger, KjTooltipContent } from '../tooltip';
-import { KjButton } from '../../button/button';
-
-@Component({
-  selector: 'kj-example-tooltip-retro',
-  standalone: true,
-  imports: [KjTooltipTrigger, KjTooltipContent, KjButton],
-  styleUrls: ['../../styles/docs-themes.css'],
-  styles: [
-    `
-      :host {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 5rem 3rem;
-        background: var(--kj-bg);
-        font-family: var(--kj-font);
-        min-height: 180px;
-        color: var(--kj-text);
-      }
-      .row {
-        display: flex;
-        gap: 1.5rem;
-        flex-wrap: wrap;
-        align-items: center;
-        justify-content: center;
-      }
-      button[kjButton] {
-        padding: 0.35rem 0.875rem;
-        font-family: var(--kj-font);
-        font-size: 0.75rem;
-        font-weight: 700;
-        letter-spacing: 0.06em;
-        text-transform: uppercase;
-        border: var(--kj-btn-border);
-        border-radius: var(--kj-radius-md);
-        cursor: pointer;
-        box-shadow: var(--kj-shadow-sm);
-        transition: var(--kj-transition);
-      }
-      button[kjButton]:not([data-variant='link']):not([data-variant='ghost']):hover {
-        transform: translate(-1px, -1px);
-        box-shadow: var(--kj-shadow-md);
-      }
-      button[kjButton][data-variant='default'] {
-        background: var(--kj-text);
-        color: var(--kj-bg);
-      }
-      button[kjButton][data-variant='link'] {
-        background: transparent;
-        color: var(--kj-text);
-        border: none;
-        box-shadow: none;
-        border-radius: 0;
-        padding: 0.35rem 0.875rem;
-        text-decoration: none;
-      }
-      button[kjButton][data-variant='link']:hover {
-        text-decoration: underline;
-        text-decoration-thickness: 2px;
-        text-underline-offset: 4px;
-      }
-      button[kjButton][data-variant='ghost'] {
-        background: transparent;
-        color: var(--kj-text);
-        border: 2px solid transparent;
-        box-shadow: none;
-        opacity: 0.7;
-      }
-      button[kjButton][data-variant='ghost']:hover {
-        opacity: 1;
-        background: rgba(0, 0, 0, 0.06);
-      }
-      :global(kj-tooltip-content) {
-        background: var(--kj-text);
-        color: var(--kj-bg);
-        padding: 0.2rem 0.5rem;
-        font-size: 0.6875rem;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-        white-space: nowrap;
-        pointer-events: none;
-        border: 1px solid var(--kj-border);
-        box-shadow: var(--kj-shadow-sm);
-      }
-    `,
-  ],
-  host: { class: 'kj-theme-retro' },
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="row">
-      <button kjButton [kjVariant]="'default'" kjTooltipTrigger #t1="kjTooltipTrigger">
-        Default
-      </button>
-      <kj-tooltip-content [kjFor]="t1">Copy to clipboard</kj-tooltip-content>
-
-      <button kjButton [kjVariant]="'link'" kjTooltipTrigger #t2="kjTooltipTrigger">Link</button>
-      <kj-tooltip-content [kjFor]="t2" [kjSide]="'bottom'">Opens below</kj-tooltip-content>
-
-      <button kjButton [kjVariant]="'ghost'" kjTooltipTrigger #t3="kjTooltipTrigger">Ghost</button>
-      <kj-tooltip-content [kjFor]="t3" [kjSide]="'right'">Opens right</kj-tooltip-content>
-    </div>
-  `,
-})
-export class TooltipRetroExample {}

package/src/tooltip/index.ts

@@ -1,4 +0,0 @@
-export * from './tooltip-trigger';
-export * from './tooltip-content';
-export * from './tooltip-arrow';
-export * from './tooltip-group';

package/src/tooltip/tooltip-arrow.ts

@@ -1,31 +0,0 @@
-import { Directive } from '@angular/core';
-
-/**
- * Optional decorative arrow rendered inside `[kjTooltipContent]`.
- *
- * Pure styling hook — has no behaviour. The wrapper / consumer CSS reads
- * `data-side` from the parent `[kjTooltipContent]` to position and rotate
- * the arrow. `aria-hidden="true"` keeps it out of the AT tree.
- *
- * @example
- * ```html
- * <ng-template #tip>
- *   <div kjTooltipContent>
- *     Save to disk
- *     <span kjTooltipArrow></span>
- *   </div>
- * </ng-template>
- * ```
- *
- * @doc-category Core/Overlay
- */
-@Directive({
-  selector: '[kjTooltipArrow]',
-  standalone: true,
-  host: {
-    'class': 'kj-tooltip-arrow',
-    'aria-hidden': 'true',
-    'data-kj-tooltip-arrow': '',
-  },
-})
-export class KjTooltipArrow {}

package/src/tooltip/tooltip-content.ts

@@ -1,38 +0,0 @@
-// tooltip-content.ts
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, inject, input } from '@angular/core';
-import { KjOverlayPanel } from '../primitives/overlay/panel';
-import {
-  KJ_OVERLAY_MOUNT_STRATEGY,
-  KJ_OVERLAY_POSITION_STRATEGY,
-  KJ_OVERLAY_PANEL_ROLE,
-} from '../primitives/overlay/tokens';
-import type { KjSide, KjAlign } from '../primitives/overlay/types';
-import { bodyPortal } from '../primitives/overlay/strategies/mount/body-portal';
-import { anchoredTo } from '../primitives/overlay/strategies/position/anchored-to';
-
-@Component({
-  selector: 'kj-tooltip-content',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjOverlayPanel, inputs: ['kjFor'] },
-  ],
-  providers: [
-    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'tooltip' as const },
-    { provide: KJ_OVERLAY_MOUNT_STRATEGY, useFactory: () => bodyPortal() },
-    { provide: KJ_OVERLAY_POSITION_STRATEGY, useFactory: () => anchoredTo() },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  host: { class: 'kj-tooltip-content' },
-  template: `<ng-content />`,
-})
-export class KjTooltipContent {
-  readonly kjSide   = input<KjSide>('top');
-  readonly kjAlign  = input<KjAlign>('center');
-  readonly kjOffset = input<number, unknown>(8, { transform: (v) => Number(v) || 8 });
-
-  constructor() {
-    const pos = inject(KJ_OVERLAY_POSITION_STRATEGY) as ReturnType<typeof anchoredTo>;
-    pos.configure({ side: this.kjSide, align: this.kjAlign, offset: this.kjOffset });
-  }
-}

package/src/tooltip/tooltip-group.ts

@@ -1,32 +0,0 @@
-import { Directive, output } from '@angular/core';
-
-/**
- * Coordinates "skip-delay" timing between sibling tooltips.
- *
- * **Note (overlay primitives migration):** The skip-delay coordination
- * context was removed during the overlay-primitives migration; this
- * directive is currently a no-op marker that preserves the public selector
- * and analytics outputs. Re-instating coordinated open delays is a
- * follow-up — track via the trigger-event strategy on `KjTooltipTrigger`.
- *
- * @example
- * ```html
- * <div kjTooltipGroup>
- *   <button kjButton [kjTooltip]="'Bold'">B</button>
- *   <button kjButton [kjTooltip]="'Italic'">I</button>
- * </div>
- * ```
- *
- * @doc-category Core/Overlay
- */
-@Directive({
-  selector: '[kjTooltipGroup]',
-  standalone: true,
-  exportAs: 'kjTooltipGroup',
-})
-export class KjTooltipGroup {
-  /** Fires whenever any tooltip in this group opens. Convenience analytics hook. */
-  readonly kjTooltipOpened = output<void>();
-  /** Fires whenever any tooltip in this group closes. Convenience analytics hook. */
-  readonly kjTooltipClosed = output<void>();
-}

package/src/tooltip/tooltip-trigger.ts

@@ -1,47 +0,0 @@
-import { Directive, inject, input, booleanAttribute } from '@angular/core';
-import { KjOverlayTrigger } from '../primitives/overlay/trigger';
-import type { KjOverlayPanel } from '../primitives/overlay/panel';
-import { KjOverlayController } from '../primitives/overlay/controller';
-import {
-  KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
-  KJ_OVERLAY_PANEL_ROLE,
-} from '../primitives/overlay/tokens';
-import { onHover, type KjOnHoverStrategy } from '../primitives/overlay/strategies/trigger-event/on-hover';
-
-@Directive({
-  selector: '[kjTooltipTrigger]',
-  exportAs: 'kjTooltipTrigger',
-  standalone: true,
-  hostDirectives: [
-    { directive: KjOverlayTrigger, inputs: ['kjOpen'] },
-  ],
-  providers: [
-    KjOverlayController,
-    {
-      provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
-      useFactory: () => onHover({ openDelay: 200, closeDelay: 0 }),
-    },
-    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'tooltip' as const },
-  ],
-})
-export class KjTooltipTrigger {
-  readonly kjOpenDelay  = input<number, unknown>(200, { transform: (v) => Number(v) || 200 });
-  readonly kjCloseDelay = input<number, unknown>(0,   { transform: (v) => Number(v) || 0 });
-  readonly kjDisabled   = input(false, { transform: booleanAttribute });
-
-  constructor() {
-    const strat = inject(KJ_OVERLAY_TRIGGER_EVENT_STRATEGY) as KjOnHoverStrategy;
-    if ('configure' in strat) {
-      strat.configure({ openDelay: this.kjOpenDelay, closeDelay: this.kjCloseDelay });
-    }
-  }
-
-  private readonly _overlayTrigger = inject(KjOverlayTrigger, { self: true });
-  /** The controller of the composed `KjOverlayTrigger`, exposed for sibling `[kjFor]` panels. */
-  get controller(): KjOverlayController {
-    return this._overlayTrigger.controller;
-  }
-  attachPanel(panel: KjOverlayPanel): void {
-    this._overlayTrigger.attachPanel(panel);
-  }
-}

package/src/tooltip/tooltip.spec.ts

@@ -1,40 +0,0 @@
-import { Component } from '@angular/core';
-import { render } from '@testing-library/angular';
-import { describe, it, expect } from 'vitest';
-import { KjTooltipTrigger } from './tooltip-trigger';
-import { KjTooltipContent } from './tooltip-content';
-
-describe('KjTooltip', () => {
-  it('trigger has aria-expanded false initially', async () => {
-    @Component({
-      selector: 'kj-tt-host',
-      standalone: true,
-      imports: [KjTooltipTrigger, KjTooltipContent],
-      template: `
-        <button kjTooltipTrigger #t="kjTooltipTrigger">Hover</button>
-        <kj-tooltip-content [kjFor]="t">Hi</kj-tooltip-content>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const btn = container.querySelector('button')!;
-    expect(btn.getAttribute('aria-expanded')).toBe('false');
-  });
-
-  it('panel is hidden + has role=tooltip', async () => {
-    @Component({
-      selector: 'kj-tt-host',
-      standalone: true,
-      imports: [KjTooltipTrigger, KjTooltipContent],
-      template: `
-        <button kjTooltipTrigger #t="kjTooltipTrigger">Hover</button>
-        <kj-tooltip-content [kjFor]="t">Hi</kj-tooltip-content>
-      `,
-    })
-    class Host {}
-    const { container } = await render(Host);
-    const panel = container.querySelector('kj-tooltip-content') as HTMLElement;
-    expect(panel.getAttribute('role')).toBe('tooltip');
-    expect(panel.hasAttribute('hidden')).toBe(true);
-  });
-});

package/src/tooltip/tooltip.ts

@@ -1,5 +0,0 @@
-// tooltip.ts
-export * from './tooltip-trigger';
-export * from './tooltip-content';
-export * from './tooltip-arrow';
-export * from './tooltip-group';

package/src/tree-select/index.ts

@@ -1,12 +0,0 @@
-export {
-  KjTreeSelect,
-  KjTreeSelectNode,
-  KjTreeSelectToggle,
-} from './tree-select';
-export { KjTreeSelectTrigger } from './tree-select-trigger';
-export { KjTreeSelectContent } from './tree-select-content';
-export {
-  KJ_TREE_SELECT,
-  type KjTreeNode,
-  type KjTreeSelectContext,
-} from './tree-select.context';