@blotch/dolan 0.0.0-stage → 22.2.1

package/dist/ui/components/toggle/toggle.test.ts

@@ -0,0 +1,186 @@
+import { Component } from '@angular/core';
+import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { describe, expect, it } from 'vitest';
+import { setInputSignal } from '../../../test-utils/set-input-signal';
+import { UiToggle, UiToggleGroup, UiToggleGroupItem } from './toggle';
+
+@Component({
+  standalone: true,
+  imports: [UiToggle, LYNX_ELEMENTS],
+  template: `<ui-toggle><text>Bold</text></ui-toggle>`,
+})
+class ToggleHost {}
+
+describe('UiToggle', () => {
+  it('renders projected content', async () => {
+    const { getByText } = await render(ToggleHost);
+    expect(getByText('Bold')).toBeTruthy();
+  });
+
+  it('onTap flips the pressed model', async () => {
+    const { componentRef } = await render(UiToggle);
+    const inst = componentRef.instance as unknown as UiToggle & {
+      onTap: () => void;
+    };
+    inst.onTap();
+    expect(inst.pressed()).toBe(true);
+    inst.onTap();
+    expect(inst.pressed()).toBe(false);
+  });
+
+  it('onTap is a no-op when disabled', async () => {
+    const { componentRef } = await render(UiToggle);
+    const inst = componentRef.instance as unknown as UiToggle & {
+      onTap: () => void;
+    };
+    setInputSignal(inst.disabled, true);
+    await waitForUpdate();
+    inst.onTap();
+    expect(inst.pressed()).toBe(false);
+  });
+
+  it('press handlers run cleanly (enabled + disabled)', async () => {
+    const { componentRef } = await render(UiToggle);
+    const inst = componentRef.instance as unknown as UiToggle & {
+      onPressStart: () => void;
+      onPressEnd: () => void;
+      onPressCancel: () => void;
+    };
+    expect(() => inst.onPressStart()).not.toThrow();
+    expect(() => inst.onPressEnd()).not.toThrow();
+    expect(() => inst.onPressCancel()).not.toThrow();
+    setInputSignal((inst as unknown as UiToggle).disabled, true);
+    await waitForUpdate();
+    expect(() => inst.onPressStart()).not.toThrow();
+    expect(() => inst.onPressEnd()).not.toThrow();
+    expect(() => inst.onPressCancel()).not.toThrow();
+  });
+
+  it('applies the accent background when pressed', async () => {
+    const { componentRef, container } = await render(UiToggle);
+    const inst = componentRef.instance as UiToggle;
+    inst.pressed.set(true);
+    await waitForUpdate();
+    const view = container.querySelector('view');
+    expect(view?.getAttribute('class')).toContain('bg-accent');
+  });
+
+  it('applies outline variant and small size classes', async () => {
+    const { componentRef, container } = await render(UiToggle);
+    const inst = componentRef.instance as UiToggle;
+    setInputSignal(inst.variant, 'outline');
+    setInputSignal(inst.size, 'sm');
+    await waitForUpdate();
+    const view = container.querySelector('view');
+    expect(view?.getAttribute('class')).toContain('border-border');
+    expect(view?.getAttribute('class')).toContain('h-9');
+  });
+
+  it('applies large size classes', async () => {
+    const { componentRef, container } = await render(UiToggle);
+    const inst = componentRef.instance as UiToggle;
+    setInputSignal(inst.size, 'lg');
+    await waitForUpdate();
+    expect(container.querySelector('view')?.getAttribute('class')).toContain(
+      'h-11',
+    );
+  });
+});
+
+describe('UiToggleGroup', () => {
+  it('single mode replaces selection and allows deselection', async () => {
+    const { componentRef } = await render(UiToggleGroup);
+    const inst = componentRef.instance as UiToggleGroup;
+    inst.toggle('a');
+    expect(inst.value()).toEqual(['a']);
+    inst.toggle('b');
+    expect(inst.value()).toEqual(['b']);
+    // Tap active item again to deselect (unique to single-mode).
+    inst.toggle('b');
+    expect(inst.value()).toEqual([]);
+  });
+
+  it('multiple mode toggles individual items', async () => {
+    const { componentRef } = await render(UiToggleGroup);
+    const inst = componentRef.instance as UiToggleGroup;
+    setInputSignal(inst.type, 'multiple');
+    await waitForUpdate();
+    inst.toggle('a');
+    inst.toggle('b');
+    expect(inst.value()).toEqual(['a', 'b']);
+    inst.toggle('a');
+    expect(inst.value()).toEqual(['b']);
+  });
+
+  it('toggle() is a no-op when the group is disabled', async () => {
+    const { componentRef } = await render(UiToggleGroup);
+    const inst = componentRef.instance as UiToggleGroup;
+    setInputSignal(inst.disabled, true);
+    await waitForUpdate();
+    inst.toggle('a');
+    expect(inst.value()).toEqual([]);
+  });
+
+  it('isSelected reflects the current value list', async () => {
+    const { componentRef } = await render(UiToggleGroup);
+    const inst = componentRef.instance as UiToggleGroup;
+    inst.toggle('a');
+    expect(inst.isSelected('a')).toBe(true);
+    expect(inst.isSelected('b')).toBe(false);
+  });
+});
+
+describe('UiToggleGroupItem', () => {
+  const renderItem = async (
+    parentValue: string[] = [],
+    parentDisabled = false,
+  ) => {
+    const parentResult = await render(UiToggleGroup);
+    const parent = parentResult.componentRef.instance as UiToggleGroup;
+    if (parentValue.length) parent.value.set(parentValue);
+    if (parentDisabled) setInputSignal(parent.disabled, true);
+    await waitForUpdate();
+
+    const itemResult = await render(UiToggleGroupItem, {
+      providers: [{ provide: UiToggleGroup, useValue: parent }],
+    });
+    const item = itemResult.componentRef.instance as UiToggleGroupItem;
+    setInputSignal(item.itemValue, 'a');
+    await waitForUpdate();
+    return { parent, item, itemResult };
+  };
+
+  it('onTap delegates to the parent group', async () => {
+    const { parent, item } = await renderItem();
+    (item as unknown as { onTap: () => void }).onTap();
+    expect(parent.value()).toEqual(['a']);
+  });
+
+  it('highlights when selected', async () => {
+    const { itemResult } = await renderItem(['a']);
+    const view = itemResult.container.querySelector('view');
+    expect(view?.getAttribute('class')).toContain('bg-accent');
+  });
+
+  it('press handlers run cleanly (enabled + disabled)', async () => {
+    const { item } = await renderItem();
+    const cast = item as unknown as {
+      onPressStart: () => void;
+      onPressEnd: () => void;
+      onPressCancel: () => void;
+    };
+    expect(() => cast.onPressStart()).not.toThrow();
+    expect(() => cast.onPressEnd()).not.toThrow();
+
+    const disabled = await renderItem([], true);
+    const cast2 = disabled.item as unknown as {
+      onPressStart: () => void;
+      onPressEnd: () => void;
+      onPressCancel: () => void;
+    };
+    expect(() => cast2.onPressStart()).not.toThrow();
+    expect(() => cast2.onPressEnd()).not.toThrow();
+    expect(() => cast2.onPressCancel()).not.toThrow();
+  });
+});

package/dist/ui/components/toggle/toggle.ts

@@ -0,0 +1,218 @@
+import {
+  type ElementRef,
+  Component,
+  ViewEncapsulation,
+  computed,
+  inject,
+  input,
+  model,
+  viewChild,
+} from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import {
+  type AnimationHandle,
+  pressDown,
+  pressRelease,
+} from '../../utils/animate';
+import { cn } from '../../utils/cn';
+
+const toggleVariants = cva('items-center rounded-md flex justify-center', {
+  variants: {
+    variant: {
+      default: '',
+      outline: 'border border-border',
+    },
+    size: {
+      default: 'h-10 px-3',
+      sm: 'h-9 px-2.5',
+      lg: 'h-11 px-5',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default',
+  },
+});
+
+export type ToggleVariant = NonNullable<
+  VariantProps<typeof toggleVariants>['variant']
+>;
+export type ToggleSize = NonNullable<
+  VariantProps<typeof toggleVariants>['size']
+>;
+
+@Component({
+  selector: 'ui-toggle',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view
+      #container
+      [class]="containerClass()"
+      (bindtouchstart)="onPressStart()"
+      (bindtouchend)="onPressEnd()"
+      (bindtouchcancel)="onPressCancel()"
+      (bindmousedown)="onPressStart()"
+      (bindmouseup)="onPressEnd()"
+      (bindmouseleave)="onPressCancel()"
+      (bindtap)="onTap()"
+    >
+      <ng-content />
+    </view>
+  `,
+})
+export class UiToggle {
+  readonly pressed = model(false);
+  readonly variant = input<ToggleVariant>('default');
+  readonly size = input<ToggleSize>('default');
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly containerRef = viewChild<ElementRef>('container');
+  #pressAnim?: AnimationHandle;
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      toggleVariants({ variant: this.variant(), size: this.size() }),
+      this.pressed() ? 'bg-accent' : 'bg-transparent',
+      this.disabled() && 'opacity-50',
+      this.userClass(),
+    ),
+  );
+
+  protected onPressStart(): void {
+    if (this.disabled()) return;
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressDown(this.containerRef()?.nativeElement);
+  }
+
+  protected onPressEnd(): void {
+    if (this.disabled()) return;
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onPressCancel(): void {
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onTap(): void {
+    if (this.disabled()) return;
+    this.pressed.update((v) => !v);
+  }
+}
+
+@Component({
+  selector: 'ui-toggle-group',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view [class]="containerClass()">
+      <ng-content />
+    </view>
+  `,
+})
+export class UiToggleGroup {
+  readonly type = input<'single' | 'multiple'>('single');
+  readonly value = model<string[]>([]);
+  readonly variant = input<ToggleVariant>('default');
+  readonly size = input<ToggleSize>('default');
+  readonly disabled = input(false);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly containerClass = computed(() =>
+    cn('flex-row items-center gap-1 flex', this.userClass()),
+  );
+
+  toggle(val: string): void {
+    if (this.disabled()) return;
+    if (this.type() === 'single') {
+      const current = this.value();
+      // Single mode allows deselection: tapping the active item again clears
+      // the selection to []. This differs from a radio group, which requires
+      // one item to always be selected.
+      this.value.set(current.includes(val) ? [] : [val]);
+    } else {
+      this.value.update((list) =>
+        list.includes(val) ? list.filter((v) => v !== val) : [...list, val],
+      );
+    }
+  }
+
+  isSelected(val: string): boolean {
+    return this.value().includes(val);
+  }
+}
+
+@Component({
+  selector: 'ui-toggle-group-item',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `
+    <view
+      #container
+      [class]="containerClass()"
+      (bindtouchstart)="onPressStart()"
+      (bindtouchend)="onPressEnd()"
+      (bindtouchcancel)="onPressCancel()"
+      (bindmousedown)="onPressStart()"
+      (bindmouseup)="onPressEnd()"
+      (bindmouseleave)="onPressCancel()"
+      (bindtap)="onTap()"
+    >
+      <ng-content />
+    </view>
+  `,
+})
+export class UiToggleGroupItem {
+  readonly #group = inject(UiToggleGroup);
+
+  readonly itemValue = input.required<string>({ alias: 'value' });
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly containerRef = viewChild<ElementRef>('container');
+  #pressAnim?: AnimationHandle;
+
+  protected readonly isSelected = computed(() =>
+    this.#group.isSelected(this.itemValue()),
+  );
+
+  protected readonly containerClass = computed(() =>
+    cn(
+      toggleVariants({
+        variant: this.#group.variant(),
+        size: this.#group.size(),
+      }),
+      this.isSelected() ? 'bg-accent' : 'bg-transparent',
+      this.#group.disabled() && 'opacity-50',
+      this.userClass(),
+    ),
+  );
+
+  protected onPressStart(): void {
+    if (this.#group.disabled()) return;
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressDown(this.containerRef()?.nativeElement);
+  }
+
+  protected onPressEnd(): void {
+    if (this.#group.disabled()) return;
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onPressCancel(): void {
+    this.#pressAnim?.cancel();
+    this.#pressAnim = pressRelease(this.containerRef()?.nativeElement);
+  }
+
+  protected onTap(): void {
+    this.#group.toggle(this.itemValue());
+  }
+}

package/dist/ui/components/typography/index.ts

@@ -0,0 +1,5 @@
+export {
+  UiText,
+  typographyVariants,
+  type TypographyVariant,
+} from './typography';

package/dist/ui/components/typography/typography.test.ts

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { render } from '@blotch/angular-lynx-testing-library';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { describe, expect, it } from 'vitest';
+import { UiText, typographyVariants } from './typography';
+
+@Component({
+  standalone: true,
+  imports: [UiText, LYNX_ELEMENTS],
+  template: `<ui-text [variant]="variant">Hello</ui-text>`,
+})
+class TypographyHost {
+  variant:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'p'
+    | 'lead'
+    | 'large'
+    | 'small'
+    | 'muted' = 'p';
+}
+
+describe('typographyVariants', () => {
+  it('returns default variant classes', () => {
+    expect(typographyVariants()).toContain('text-base');
+  });
+
+  it.each([
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'p',
+    'lead',
+    'large',
+    'small',
+    'muted',
+  ] as const)('returns %s variant classes', (variant) => {
+    expect(typographyVariants({ variant })).toBeTruthy();
+  });
+});
+
+describe('UiText', () => {
+  it('renders projected content', async () => {
+    const { getByText } = await render(TypographyHost);
+    expect(getByText('Hello')).toBeTruthy();
+  });
+
+  it('renders with no host wrapper (uses default input value)', async () => {
+    const { getByText } = await render(UiText);
+    expect(getByText).toBeTruthy();
+  });
+});

package/dist/ui/components/typography/typography.ts

@@ -0,0 +1,44 @@
+import { Component, ViewEncapsulation, computed, input } from '@angular/core';
+import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../utils/cn';
+
+export const typographyVariants = cva('', {
+  variants: {
+    variant: {
+      h1: 'text-4xl font-bold text-foreground',
+      h2: 'text-3xl font-semibold text-foreground',
+      h3: 'text-2xl font-semibold text-foreground',
+      h4: 'text-xl font-semibold text-foreground',
+      p: 'text-base text-foreground',
+      lead: 'text-xl text-muted-foreground',
+      large: 'text-lg font-semibold text-foreground',
+      small: 'text-sm font-medium text-foreground',
+      muted: 'text-sm text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'p',
+  },
+});
+
+export type TypographyVariant = NonNullable<
+  VariantProps<typeof typographyVariants>['variant']
+>;
+
+@Component({
+  selector: 'ui-text',
+  standalone: true,
+  imports: [LYNX_ELEMENTS],
+  encapsulation: ViewEncapsulation.None,
+  template: `<text [class]="textClass()"><ng-content /></text>`,
+})
+export class UiText {
+  readonly variant = input<TypographyVariant>('p');
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  protected readonly textClass = computed(() =>
+    cn(typographyVariants({ variant: this.variant() }), this.userClass()),
+  );
+}

package/dist/ui/theme/dark.css

@@ -0,0 +1,41 @@
+/*
+ * @blotch/ui dark theme
+ *
+ * Complete rgba() color values referenced directly via var(--x) — see
+ * default.css for why complete rgba values are used instead of HSL on Lynx.
+ *
+ * Apply via a `.dark` class on the page element, or import as an
+ * alternative to default.css.
+ */
+
+page.dark {
+  --background: rgba(9, 9, 11, 1);
+  --foreground: rgba(250, 250, 250, 1);
+
+  --card: rgba(9, 9, 11, 1);
+  --card-foreground: rgba(250, 250, 250, 1);
+
+  --primary: rgba(250, 250, 250, 1);
+  --primary-foreground: rgba(24, 24, 27, 1);
+
+  --secondary: rgba(39, 39, 42, 1);
+  --secondary-foreground: rgba(250, 250, 250, 1);
+
+  --muted: rgba(39, 39, 42, 1);
+  --muted-foreground: rgba(161, 161, 170, 1);
+
+  --accent: rgba(39, 39, 42, 1);
+  --accent-foreground: rgba(250, 250, 250, 1);
+
+  --destructive: rgba(127, 29, 29, 1);
+  --destructive-foreground: rgba(250, 250, 250, 1);
+  --destructive-subtle: rgba(127, 29, 29, 0.1);
+
+  --border: rgba(39, 39, 42, 1);
+  --input: rgba(39, 39, 42, 1);
+  --ring: rgba(212, 212, 216, 1);
+  /* Translucent variant of --ring for a softer focus outline (see default.css). */
+  --ring-subtle: rgba(212, 212, 216, 0.4);
+
+  --radius: 8px;
+}

package/dist/ui/theme/default.css

@@ -0,0 +1,56 @@
+/*
+ * @blotch/ui default theme — light mode
+ *
+ * CSS custom properties hold COMPLETE rgba() color values (e.g.
+ * `--primary: rgba(24, 24, 27, 1)`), referenced directly via `var(--x)` by the
+ * tailwind plugin. This is the pattern used by the official React Lynx Tailwind
+ * example.
+ *
+ * Why not the shadcn/ui approach (raw HSL channels wrapped in
+ * `hsl(var(--x) / <alpha-value>)`): Lynx's native CSS engine only parses
+ * comma-separated hsl(), but Tailwind emits the modern space-separated form
+ * `hsl(var(--x) / 1)`, which Lynx silently drops (transparent). Storing complete
+ * rgba() values and referencing them directly sidesteps color-function parsing
+ * entirely and renders correctly on Lynx.
+ *
+ * Tradeoff: Tailwind opacity modifiers on semantic colors (e.g. bg-primary/50)
+ * do NOT work, because the color is an opaque value with no separable channels.
+ * Where a translucent semantic color is genuinely needed, add a dedicated
+ * rgba() variable (see --destructive-subtle) or use a solid token.
+ *
+ * Apply to `page` (Lynx root element) or import globally.
+ */
+
+page {
+  --background: rgba(255, 255, 255, 1);
+  --foreground: rgba(9, 9, 11, 1);
+
+  --card: rgba(255, 255, 255, 1);
+  --card-foreground: rgba(9, 9, 11, 1);
+
+  --primary: rgba(24, 24, 27, 1);
+  --primary-foreground: rgba(250, 250, 250, 1);
+
+  --secondary: rgba(244, 244, 245, 1);
+  --secondary-foreground: rgba(24, 24, 27, 1);
+
+  --muted: rgba(244, 244, 245, 1);
+  --muted-foreground: rgba(113, 113, 122, 1);
+
+  --accent: rgba(244, 244, 245, 1);
+  --accent-foreground: rgba(24, 24, 27, 1);
+
+  --destructive: rgba(239, 68, 68, 1);
+  --destructive-foreground: rgba(250, 250, 250, 1);
+  --destructive-subtle: rgba(239, 68, 68, 0.1);
+
+  --border: rgba(228, 228, 231, 1);
+  --input: rgba(228, 228, 231, 1);
+  --ring: rgba(24, 24, 27, 1);
+  /* Translucent variant of --ring for a softer focus outline. A separate
+     pre-composed value is needed because Tailwind opacity modifiers can't
+     apply to the opaque --ring, and Lynx can't inject alpha into it either. */
+  --ring-subtle: rgba(24, 24, 27, 0.4);
+
+  --radius: 8px;
+}