@kouji-ui/components 0.1.1 → 0.1.2

package/src/speed-dial/speed-dial.css

@@ -1,137 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   .kj-speed-dial — viewport-anchored FAB + fan-out action cluster
-   The root component is a positioning shell (fixed when
-   data-position="*-*"). The trigger and actions are buttons that
-   theme through .kj-button — overrides target the kj-button-*
-   tokens so theme presets still apply.
-   ──────────────────────────────────────────────────────────── */
-
-@layer kj.component {
-  .kj-speed-dial {
-    --kj-speed-dial-gap:           var(--kj-space-md);
-    --kj-speed-dial-edge:          var(--kj-space-2xl);
-    --kj-speed-dial-trigger-size:  3.5rem;
-    --kj-speed-dial-action-size:   2.75rem;
-    --kj-speed-dial-shadow:        0 6px 16px rgb(0 0 0 / 0.18);
-    --kj-speed-dial-stagger:       30ms;
-    --kj-speed-dial-duration:      180ms;
-
-    position: relative;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--kj-speed-dial-gap);
-    z-index: 100;
-  }
-
-  .kj-speed-dial[data-direction='up']    { flex-direction: column-reverse; }
-  .kj-speed-dial[data-direction='down']  { flex-direction: column; }
-  .kj-speed-dial[data-direction='left']  { flex-direction: row-reverse; }
-  .kj-speed-dial[data-direction='right'] { flex-direction: row; }
-
-  .kj-speed-dial[data-position='bottom-right'] {
-    position: fixed;
-    right:  var(--kj-speed-dial-edge);
-    bottom: var(--kj-speed-dial-edge);
-  }
-  .kj-speed-dial[data-position='bottom-left'] {
-    position: fixed;
-    left:   var(--kj-speed-dial-edge);
-    bottom: var(--kj-speed-dial-edge);
-  }
-  .kj-speed-dial[data-position='top-right'] {
-    position: fixed;
-    right: var(--kj-speed-dial-edge);
-    top:   var(--kj-speed-dial-edge);
-  }
-  .kj-speed-dial[data-position='top-left'] {
-    position: fixed;
-    left: var(--kj-speed-dial-edge);
-    top:  var(--kj-speed-dial-edge);
-  }
-
-  .kj-speed-dial-trigger {
-    --kj-button-radius:    9999px;
-    --kj-button-padding-x: 0;
-    --kj-button-padding-y: 0;
-    --kj-button-shadow:    var(--kj-speed-dial-shadow);
-
-    width:  var(--kj-speed-dial-trigger-size);
-    height: var(--kj-speed-dial-trigger-size);
-    min-width: var(--kj-speed-dial-trigger-size);
-    flex: 0 0 auto;
-  }
-
-  .kj-speed-dial-trigger[data-state='open'] > * {
-    transform: rotate(45deg);
-    transition: transform var(--kj-speed-dial-duration) ease;
-  }
-  .kj-speed-dial-trigger > * {
-    display: inline-flex;
-    transition: transform var(--kj-speed-dial-duration) ease;
-  }
-
-  .kj-speed-dial-actions {
-    display: inline-flex;
-    gap: var(--kj-speed-dial-gap);
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity var(--kj-speed-dial-duration) ease;
-  }
-  .kj-speed-dial-actions[data-direction='up']    { flex-direction: column-reverse; }
-  .kj-speed-dial-actions[data-direction='down']  { flex-direction: column; }
-  .kj-speed-dial-actions[data-direction='left']  { flex-direction: row-reverse; }
-  .kj-speed-dial-actions[data-direction='right'] { flex-direction: row; }
-
-  .kj-speed-dial-actions[aria-hidden='true'] {
-    visibility: hidden;
-    pointer-events: none;
-  }
-  .kj-speed-dial-actions[data-expanded] {
-    opacity: 1;
-    visibility: visible;
-    pointer-events: auto;
-  }
-
-  .kj-speed-dial-actions[data-direction='up']    > * { transform: translateY(8px); }
-  .kj-speed-dial-actions[data-direction='down']  > * { transform: translateY(-8px); }
-  .kj-speed-dial-actions[data-direction='left']  > * { transform: translateX(8px); }
-  .kj-speed-dial-actions[data-direction='right'] > * { transform: translateX(-8px); }
-  .kj-speed-dial-actions[data-expanded] > * {
-    transform: translate3d(0, 0, 0);
-    transition: transform var(--kj-speed-dial-duration) ease,
-                opacity   var(--kj-speed-dial-duration) ease;
-    transition-delay: calc(var(--kj-speed-dial-stagger) * var(--kj-speed-dial-i, 0));
-  }
-  .kj-speed-dial-actions > *:nth-child(1) { --kj-speed-dial-i: 0; }
-  .kj-speed-dial-actions > *:nth-child(2) { --kj-speed-dial-i: 1; }
-  .kj-speed-dial-actions > *:nth-child(3) { --kj-speed-dial-i: 2; }
-  .kj-speed-dial-actions > *:nth-child(4) { --kj-speed-dial-i: 3; }
-  .kj-speed-dial-actions > *:nth-child(5) { --kj-speed-dial-i: 4; }
-  .kj-speed-dial-actions > *:nth-child(6) { --kj-speed-dial-i: 5; }
-
-  .kj-speed-dial-action {
-    --kj-button-radius:    9999px;
-    --kj-button-padding-x: 0;
-    --kj-button-padding-y: 0;
-    --kj-button-shadow:    var(--kj-speed-dial-shadow);
-
-    width:  var(--kj-speed-dial-action-size);
-    height: var(--kj-speed-dial-action-size);
-    min-width: var(--kj-speed-dial-action-size);
-    flex: 0 0 auto;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .kj-speed-dial-trigger > *,
-    .kj-speed-dial-actions,
-    .kj-speed-dial-actions > * {
-      transition: none;
-    }
-    .kj-speed-dial-actions > * {
-      transform: none;
-    }
-  }
-}

package/src/speed-dial/speed-dial.playground.ts

@@ -1,137 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import {
-  KjSpeedDialActionComponent,
-  KjSpeedDialActionsComponent,
-  KjSpeedDialComponent,
-  KjSpeedDialTriggerComponent,
-} from './speed-dial';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-type KjSpeedDialDirection = 'up' | 'down' | 'left' | 'right';
-type KjSpeedDialPosition = 'static' | 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-
-const direction = signal<KjSpeedDialDirection>('up');
-const position = signal<KjSpeedDialPosition>('static');
-const actionCount = signal<2 | 3 | 4 | 5>(3);
-const triggerVariant = signal<'default' | 'outline' | 'ghost' | 'destructive'>('default');
-const disabled = signal(false);
-const openOnHover = signal(false);
-
-const ACTIONS: ReadonlyArray<{ label: string; glyph: string }> = [
-  { label: 'Edit', glyph: 'E' },
-  { label: 'Share', glyph: 'S' },
-  { label: 'Delete', glyph: 'D' },
-  { label: 'Archive', glyph: 'A' },
-  { label: 'Pin', glyph: 'P' },
-];
-
-@Component({
-  selector: 'kj-speed-dial-playground',
-  standalone: true,
-  imports: [
-    KjSpeedDialComponent,
-    KjSpeedDialTriggerComponent,
-    KjSpeedDialActionsComponent,
-    KjSpeedDialActionComponent,
-  ],
-  template: `
-    <kj-speed-dial
-      [kjDirection]="direction()"
-      [kjPosition]="position()"
-      [kjDisabled]="disabled()"
-      [kjOpenOnHover]="openOnHover()"
-    >
-      <kj-speed-dial-trigger
-        [kjVariant]="triggerVariant()"
-        kjAriaLabel="Open quick actions"
-      >
-        +
-      </kj-speed-dial-trigger>
-      <kj-speed-dial-actions>
-        @for (action of visibleActions(); track action.label) {
-          <kj-speed-dial-action [kjAriaLabel]="action.label">
-            {{ action.glyph }}
-          </kj-speed-dial-action>
-        }
-      </kj-speed-dial-actions>
-    </kj-speed-dial>
-  `,
-  styles: [`
-    :host {
-      display: flex;
-      justify-content: flex-end;
-      align-items: flex-end;
-      padding: var(--kj-space-2xl);
-      min-height: 14rem;
-    }
-  `],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjSpeedDialPlaygroundDemo {
-  protected readonly direction = direction;
-  protected readonly position = position;
-  protected readonly actionCount = actionCount;
-  protected readonly triggerVariant = triggerVariant;
-  protected readonly disabled = disabled;
-  protected readonly openOnHover = openOnHover;
-
-  protected readonly visibleActions = computed(() => ACTIONS.slice(0, actionCount()));
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjSpeedDialPlaygroundDemo,
-  state: {
-    direction: direction as unknown as ReturnType<typeof signal>,
-    position: position as unknown as ReturnType<typeof signal>,
-    actionCount: actionCount as unknown as ReturnType<typeof signal>,
-    triggerVariant: triggerVariant as unknown as ReturnType<typeof signal>,
-    disabled: disabled as unknown as ReturnType<typeof signal>,
-    openOnHover: openOnHover as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    {
-      kind: 'chips',
-      name: 'direction',
-      label: 'direction',
-      options: ['up', 'down', 'left', 'right'],
-    },
-    {
-      kind: 'chips',
-      name: 'position',
-      label: 'position',
-      options: ['static', 'bottom-right', 'bottom-left', 'top-right', 'top-left'],
-    },
-    { kind: 'chips', name: 'actionCount', label: 'actions', options: [2, 3, 4, 5] },
-    {
-      kind: 'chips',
-      name: 'triggerVariant',
-      label: 'trigger variant',
-      options: ['default', 'outline', 'ghost', 'destructive'],
-    },
-    { kind: 'toggle', name: 'disabled', label: 'disabled' },
-    { kind: 'toggle', name: 'openOnHover', label: 'open on hover' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      direction: string;
-      position: string;
-      actionCount: number;
-      triggerVariant: string;
-      disabled: boolean;
-      openOnHover: boolean;
-    };
-    const attrs: string[] = [
-      `kjDirection="${s.direction}"`,
-      `kjPosition="${s.position}"`,
-    ];
-    if (s.disabled) attrs.push('[kjDisabled]="true"');
-    if (s.openOnHover) attrs.push('[kjOpenOnHover]="true"');
-    const actions = ACTIONS.slice(0, s.actionCount)
-      .map(
-        (a) =>
-          `    <kj-speed-dial-action kjAriaLabel="${a.label}">${a.glyph}</kj-speed-dial-action>`,
-      )
-      .join('\n');
-    return `<kj-speed-dial\n  ${attrs.join('\n  ')}\n>\n  <kj-speed-dial-trigger kjVariant="${s.triggerVariant}" kjAriaLabel="Open quick actions">+</kj-speed-dial-trigger>\n  <kj-speed-dial-actions>\n${actions}\n  </kj-speed-dial-actions>\n</kj-speed-dial>`;
-  },
-};

package/src/speed-dial/speed-dial.spec.ts

@@ -1,191 +0,0 @@
-import { Component } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { beforeEach, describe, expect, test } from 'vitest';
-
-import {
-  KjSpeedDialActionComponent,
-  KjSpeedDialActionsComponent,
-  KjSpeedDialComponent,
-  KjSpeedDialTriggerComponent,
-} from './speed-dial';
-
-const wrappers = [
-  KjSpeedDialComponent,
-  KjSpeedDialTriggerComponent,
-  KjSpeedDialActionsComponent,
-  KjSpeedDialActionComponent,
-];
-
-describe('KjSpeedDialComponent (wrapper)', () => {
-  beforeEach(() => {
-    TestBed.resetTestingModule();
-    TestBed.configureTestingModule({});
-  });
-
-  test('renders a trigger and actions container with menu role', () => {
-    @Component({
-      standalone: true,
-      imports: wrappers,
-      template: `
-        <kj-speed-dial kjPosition="static">
-          <kj-speed-dial-trigger kjAriaLabel="Open">+</kj-speed-dial-trigger>
-          <kj-speed-dial-actions>
-            <kj-speed-dial-action kjAriaLabel="Edit">E</kj-speed-dial-action>
-          </kj-speed-dial-actions>
-        </kj-speed-dial>
-      `,
-    })
-    class Host {}
-
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-
-    const trigger = fixture.nativeElement.querySelector('button.kj-speed-dial-trigger') as HTMLButtonElement;
-    expect(trigger).not.toBeNull();
-    expect(trigger.getAttribute('aria-haspopup')).toBe('menu');
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-    expect(trigger.getAttribute('aria-label')).toBe('Open');
-
-    const actionsContainer = fixture.nativeElement.querySelector('kj-speed-dial-actions') as HTMLElement;
-    expect(actionsContainer).not.toBeNull();
-    expect(actionsContainer.getAttribute('role')).toBe('menu');
-    expect(actionsContainer.getAttribute('aria-hidden')).toBe('true');
-    expect(trigger.getAttribute('aria-controls')).toBe(actionsContainer.id);
-
-    const action = fixture.nativeElement.querySelector('button.kj-speed-dial-action') as HTMLButtonElement;
-    expect(action).not.toBeNull();
-    expect(action.getAttribute('role')).toBe('menuitem');
-  });
-
-  test('clicking the trigger toggles aria-expanded and reveals actions', () => {
-    @Component({
-      standalone: true,
-      imports: wrappers,
-      template: `
-        <kj-speed-dial kjPosition="static">
-          <kj-speed-dial-trigger kjAriaLabel="Open">+</kj-speed-dial-trigger>
-          <kj-speed-dial-actions>
-            <kj-speed-dial-action kjAriaLabel="Edit">E</kj-speed-dial-action>
-          </kj-speed-dial-actions>
-        </kj-speed-dial>
-      `,
-    })
-    class Host {}
-
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-
-    const trigger = fixture.nativeElement.querySelector('button.kj-speed-dial-trigger') as HTMLButtonElement;
-    const actions = fixture.nativeElement.querySelector('kj-speed-dial-actions') as HTMLElement;
-
-    trigger.click();
-    fixture.detectChanges();
-    expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    expect(actions.getAttribute('aria-hidden')).toBeNull();
-    expect(actions.getAttribute('data-expanded')).toBe('');
-
-    trigger.click();
-    fixture.detectChanges();
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-    expect(actions.getAttribute('aria-hidden')).toBe('true');
-  });
-
-  test('reflects kjDirection as data-direction on the host and actions', () => {
-    @Component({
-      standalone: true,
-      imports: wrappers,
-      template: `
-        <kj-speed-dial kjDirection="right" kjPosition="static">
-          <kj-speed-dial-trigger kjAriaLabel="Open">+</kj-speed-dial-trigger>
-          <kj-speed-dial-actions>
-            <kj-speed-dial-action kjAriaLabel="A">A</kj-speed-dial-action>
-          </kj-speed-dial-actions>
-        </kj-speed-dial>
-      `,
-    })
-    class Host {}
-
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-
-    const root = fixture.nativeElement.querySelector('kj-speed-dial') as HTMLElement;
-    const actions = fixture.nativeElement.querySelector('kj-speed-dial-actions') as HTMLElement;
-    expect(root.getAttribute('data-direction')).toBe('right');
-    expect(actions.getAttribute('data-direction')).toBe('right');
-  });
-
-  test('reflects kjPosition as data-position', () => {
-    @Component({
-      standalone: true,
-      imports: wrappers,
-      template: `
-        <kj-speed-dial kjPosition="bottom-left">
-          <kj-speed-dial-trigger kjAriaLabel="Open">+</kj-speed-dial-trigger>
-          <kj-speed-dial-actions>
-            <kj-speed-dial-action kjAriaLabel="A">A</kj-speed-dial-action>
-          </kj-speed-dial-actions>
-        </kj-speed-dial>
-      `,
-    })
-    class Host {}
-
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-    const root = fixture.nativeElement.querySelector('kj-speed-dial') as HTMLElement;
-    expect(root.getAttribute('data-position')).toBe('bottom-left');
-  });
-
-  test('clicking an action closes the dial', () => {
-    @Component({
-      standalone: true,
-      imports: wrappers,
-      template: `
-        <kj-speed-dial kjPosition="static">
-          <kj-speed-dial-trigger kjAriaLabel="Open">+</kj-speed-dial-trigger>
-          <kj-speed-dial-actions>
-            <kj-speed-dial-action kjAriaLabel="Edit">E</kj-speed-dial-action>
-          </kj-speed-dial-actions>
-        </kj-speed-dial>
-      `,
-    })
-    class Host {}
-
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-
-    const trigger = fixture.nativeElement.querySelector('button.kj-speed-dial-trigger') as HTMLButtonElement;
-    const action = fixture.nativeElement.querySelector('button.kj-speed-dial-action') as HTMLButtonElement;
-
-    trigger.click();
-    fixture.detectChanges();
-    expect(trigger.getAttribute('aria-expanded')).toBe('true');
-
-    action.click();
-    fixture.detectChanges();
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-  });
-
-  test('kjDisabled on the root prevents opening', () => {
-    @Component({
-      standalone: true,
-      imports: wrappers,
-      template: `
-        <kj-speed-dial [kjDisabled]="true" kjPosition="static">
-          <kj-speed-dial-trigger kjAriaLabel="Open" [kjDisabled]="true">+</kj-speed-dial-trigger>
-          <kj-speed-dial-actions>
-            <kj-speed-dial-action kjAriaLabel="A">A</kj-speed-dial-action>
-          </kj-speed-dial-actions>
-        </kj-speed-dial>
-      `,
-    })
-    class Host {}
-
-    const fixture = TestBed.createComponent(Host);
-    fixture.detectChanges();
-
-    const trigger = fixture.nativeElement.querySelector('button.kj-speed-dial-trigger') as HTMLButtonElement;
-    trigger.click();
-    fixture.detectChanges();
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-  });
-});