@kouji-ui/core 0.0.4 → 0.1.1

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

@@ -0,0 +1,103 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { KjPopoverTrigger } from '../popover-trigger';
+import { KjPopoverContent } from '../popover-content';
+import { KjPopoverTitle } from '../popover-title';
+import { KjPopoverClose } from '../popover-close';
+
+@Component({
+  selector: 'kj-example-popover-retro',
+  standalone: true,
+  imports: [KjPopoverTrigger, KjPopoverContent, KjPopoverTitle, KjPopoverClose],
+  styleUrls: ['../../styles/docs-themes.css'],
+  host: { class: 'kj-theme-retro' },
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        padding: 3rem 2rem 10rem;
+        background: var(--kj-bg);
+        font-family: var(--kj-font);
+        min-height: 220px;
+        color: var(--kj-text);
+      }
+      button {
+        padding: 0.4rem 1rem;
+        font-family: var(--kj-font);
+        font-size: 0.8rem;
+        font-weight: 700;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        background: var(--kj-surface);
+        color: var(--kj-text);
+        border: var(--kj-btn-border);
+        border-radius: 0;
+        cursor: pointer;
+        box-shadow: var(--kj-shadow-sm);
+        transition: var(--kj-transition);
+      }
+      button:hover {
+        transform: translate(-1px, -1px);
+        box-shadow: var(--kj-shadow-md);
+      }
+      kj-popover-content {
+        display: block;
+        z-index: 20;
+        background: var(--kj-bg);
+        border: var(--kj-btn-border);
+        box-shadow: var(--kj-shadow-hard);
+        padding: 1rem;
+        min-width: 14rem;
+        font-family: var(--kj-font);
+      }
+      .popover-title {
+        font-size: 0.75rem;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        margin: 0 0 0.5rem;
+        border-bottom: var(--kj-btn-border);
+        padding-bottom: 0.375rem;
+        color: var(--kj-text);
+      }
+      .popover-body {
+        font-size: 0.75rem;
+        color: var(--kj-text-muted);
+        margin: 0.5rem 0 1rem;
+        line-height: 1.6;
+      }
+      .popover-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.5rem;
+      }
+      .popover-footer button {
+        padding: 0.3rem 0.75rem;
+        font-size: 0.7rem;
+        box-shadow: var(--kj-shadow-sm);
+      }
+      .popover-footer button:hover {
+        box-shadow: var(--kj-shadow-md);
+      }
+      .btn-primary {
+        background: var(--kj-accent);
+        color: var(--kj-accent-on);
+        border-color: var(--kj-border);
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  template: `
+    <button kjPopoverTrigger #t="kjPopoverTrigger">Settings</button>
+    <kj-popover-content [kjFor]="t">
+      <h3 kjPopoverTitle class="popover-title">Notifications</h3>
+      <p class="popover-body">Configure notification frequency and delivery preferences.</p>
+      <div class="popover-footer">
+        <button kjPopoverClose>Cancel</button>
+        <button kjPopoverClose class="btn-primary">Save</button>
+      </div>
+    </kj-popover-content>
+  `,
+})
+export class PopoverRetroExample {}

package/src/popover/index.ts

@@ -1,12 +1,5 @@
-export {
-  KjPopover,
-  KjPopoverTrigger,
-  KjPopoverContent,
-  KjPopoverClose,
-} from './popover';
-export {
-  KJ_POPOVER,
-  type KjPopoverContext,
-  type KjPopoverSide,
-  type KjPopoverAlign,
-} from './popover.context';
+export * from './popover-trigger';
+export * from './popover-content';
+export * from './popover-arrow';
+export * from './popover-close';
+export * from './popover-title';

package/src/popover/popover-arrow.ts

@@ -0,0 +1,30 @@
+import { Directive } from '@angular/core';
+
+/**
+ * Optional decorative arrow rendered inside `[kjPopoverContent]`.
+ *
+ * Pure styling hook — has no behaviour. Consumer CSS reads `data-side` from
+ * the parent panel host (set by the position strategy) to position and
+ * rotate the arrow. `aria-hidden="true"` keeps it out of the AT tree
+ * (matches `KjTooltipArrow`).
+ *
+ * @example
+ * ```html
+ * <kj-popover-content [kjFor]="t">
+ *   <h3 kjPopoverTitle>Profile</h3>
+ *   <span kjPopoverArrow></span>
+ * </kj-popover-content>
+ * ```
+ *
+ * @doc-category Core/Overlay
+ */
+@Directive({
+  selector: '[kjPopoverArrow]',
+  standalone: true,
+  host: {
+    'class': 'kj-popover-arrow',
+    'aria-hidden': 'true',
+    'data-kj-popover-arrow': '',
+  },
+})
+export class KjPopoverArrow {}

package/src/popover/popover-close.ts

@@ -0,0 +1,36 @@
+import { Directive, inject } from '@angular/core';
+import { KjOverlayController } from '../primitives/overlay/controller';
+import { KjOverlayPanel } from '../primitives/overlay/panel';
+
+/**
+ * Convenience close button. Place inside a `[kjPopoverContent]` panel.
+ * Calls the overlay controller's `close('programmatic')` on click.
+ *
+ * @example
+ * ```html
+ * <kj-popover-content [kjFor]="t">
+ *   …
+ *   <button kjPopoverClose>Close</button>
+ * </kj-popover-content>
+ * ```
+ *
+ * @doc-category Core/Overlay
+ */
+@Directive({
+  selector: '[kjPopoverClose]',
+  standalone: true,
+  host: {
+    '(click)': 'onClick($event)',
+  },
+})
+export class KjPopoverClose {
+  private readonly _panel = inject(KjOverlayPanel, { optional: true });
+  private get controller(): KjOverlayController | null {
+    return this._panel?.controller ?? null;
+  }
+
+  protected onClick(event: MouseEvent): void {
+    event.stopPropagation();
+    this.controller?.close('programmatic');
+  }
+}

package/src/popover/popover-content.ts

@@ -0,0 +1,41 @@
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, booleanAttribute, inject, input } from '@angular/core';
+import { KjOverlayPanel } from '../primitives/overlay/panel';
+import {
+  KJ_OVERLAY_MOUNT_STRATEGY,
+  KJ_OVERLAY_POSITION_STRATEGY,
+  KJ_OVERLAY_FOCUS_TRAP_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';
+import { tabCycle } from '../primitives/overlay/strategies/focus-trap/tab-cycle';
+
+@Component({
+  selector: 'kj-popover-content',
+  standalone: true,
+  hostDirectives: [{ directive: KjOverlayPanel, inputs: ['kjFor'] }],
+  providers: [
+    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'dialog' as const },
+    { provide: KJ_OVERLAY_MOUNT_STRATEGY, useFactory: () => bodyPortal() },
+    { provide: KJ_OVERLAY_POSITION_STRATEGY, useFactory: () => anchoredTo() },
+    { provide: KJ_OVERLAY_FOCUS_TRAP_STRATEGY, useFactory: () => tabCycle({ returnFocus: true }) },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'kj-popover-content' },
+  template: `<ng-content />`,
+})
+export class KjPopoverContent {
+  readonly kjSide   = input<KjSide>('bottom');
+  readonly kjAlign  = input<KjAlign>('center');
+  readonly kjOffset = input<number, unknown>(8, { transform: (v) => Number(v) || 8 });
+  readonly kjTrap   = input(false, { transform: booleanAttribute });
+
+  constructor() {
+    const pos = inject(KJ_OVERLAY_POSITION_STRATEGY) as ReturnType<typeof anchoredTo>;
+    pos.configure({ side: this.kjSide, align: this.kjAlign, offset: this.kjOffset });
+    const trap = inject(KJ_OVERLAY_FOCUS_TRAP_STRATEGY) as ReturnType<typeof tabCycle>;
+    trap.configure({ enabled: () => this.kjTrap() });
+  }
+}

package/src/popover/popover-title.ts

@@ -0,0 +1,39 @@
+import { Directive } from '@angular/core';
+
+let _popoverTitleIdCounter = 0;
+/** Allocate a stable id used for the panel's `aria-labelledby`. */
+export function nextPopoverTitleId(): string {
+  return `kj-popover-title-${++_popoverTitleIdCounter}`;
+}
+
+/**
+ * Marks the heading element inside the popover content. Generates a stable
+ * id so consumer code (or a future panel-level hook) can wire
+ * `aria-labelledby`.
+ *
+ * Mirrors `KjDialogTitle` in the dialog family — applied to whatever heading
+ * level the consumer's information architecture wants (`<h2>` … `<h4>`),
+ * the directive does not override `role`.
+ *
+ * @example
+ * ```html
+ * <kj-popover-content [kjFor]="t">
+ *   <h2 kjPopoverTitle>Profile settings</h2>
+ *   …
+ * </kj-popover-content>
+ * ```
+ *
+ * @doc-category Core/Overlay
+ */
+@Directive({
+  selector: '[kjPopoverTitle]',
+  standalone: true,
+  host: {
+    'class': 'kj-popover-title',
+    '[attr.id]': 'titleId',
+  },
+})
+export class KjPopoverTitle {
+  /** Auto-generated id used for the panel's `aria-labelledby`. */
+  readonly titleId = nextPopoverTitleId();
+}

package/src/popover/popover-trigger.ts

@@ -0,0 +1,40 @@
+import { Directive, booleanAttribute, inject, input } 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 { onClick } from '../primitives/overlay/strategies/trigger-event/on-click';
+
+export type KjPopoverTriggerKind = 'click' | 'hover';
+
+@Directive({
+  selector: '[kjPopoverTrigger]',
+  exportAs: 'kjPopoverTrigger',
+  standalone: true,
+  hostDirectives: [{ directive: KjOverlayTrigger, inputs: ['kjOpen'] }],
+  providers: [
+    KjOverlayController,
+    // For an MVP we resolve at construction; reactive switch is a follow-up.
+    {
+      provide: KJ_OVERLAY_TRIGGER_EVENT_STRATEGY,
+      useFactory: () => onClick(),
+    },
+    { provide: KJ_OVERLAY_PANEL_ROLE, useValue: 'dialog' as const },
+  ],
+})
+export class KjPopoverTrigger {
+  readonly kjTrigger = input<KjPopoverTriggerKind>('click');
+  readonly kjDisabled = input(false, { transform: booleanAttribute });
+
+  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/popover/popover.spec.ts

@@ -1,52 +1,59 @@
-import { render, fireEvent } from '@testing-library/angular';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import {
-  KjPopover, KjPopoverTrigger,
-  KjPopoverContent, KjPopoverClose,
-} from './popover';
-
-expect.extend(toHaveNoViolations);
-const imports = [KjPopover, KjPopoverTrigger, KjPopoverContent, KjPopoverClose];
-const template = `<div kjPopover><button kjPopoverTrigger>Open</button><div kjPopoverContent role="dialog" aria-label="Options">Content</div></div>`;
+import { Component } from '@angular/core';
+import { render } from '@testing-library/angular';
+import { describe, it, expect } from 'vitest';
+import { KjPopoverTrigger } from './popover-trigger';
+import { KjPopoverContent } from './popover-content';
 
 describe('KjPopover', () => {
-  it('content hidden by default', async () => {
-    const { container } = await render(template, { imports });
-    expect(container.querySelector('[kjPopoverContent]')).toHaveAttribute('hidden', '');
-  });
-
-  it('trigger toggles content', async () => {
-    const { container } = await render(template, { imports });
-    fireEvent.click(container.querySelector('[kjPopoverTrigger]')!);
-    expect(container.querySelector('[kjPopoverContent]')).not.toHaveAttribute('hidden');
-  });
-
-  it('trigger sets aria-expanded', async () => {
-    const { container } = await render(template, { imports });
-    const t = container.querySelector('[kjPopoverTrigger]')!;
-    expect(t).toHaveAttribute('aria-expanded', 'false');
-    fireEvent.click(t);
-    expect(t).toHaveAttribute('aria-expanded', 'true');
-  });
-
-  it('trigger sets aria-controls pointing to content id', async () => {
-    const { container } = await render(template, { imports });
-    const t = container.querySelector('[kjPopoverTrigger]')!;
-    const c = container.querySelector('[kjPopoverContent]')!;
-    expect(t.getAttribute('aria-controls')).toBe(c.id);
+  it('trigger has aria-haspopup=dialog and aria-expanded=false initially', async () => {
+    @Component({
+      selector: 'kj-pop-host',
+      standalone: true,
+      imports: [KjPopoverTrigger, KjPopoverContent],
+      template: `
+        <button kjPopoverTrigger #t="kjPopoverTrigger">Open</button>
+        <kj-popover-content [kjFor]="t">Hi</kj-popover-content>
+      `,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const btn = container.querySelector('button')!;
+    expect(btn.getAttribute('aria-haspopup')).toBe('dialog');
+    expect(btn.getAttribute('aria-expanded')).toBe('false');
   });
 
-  it('kjPopoverClose closes the popover', async () => {
-    const closeTemplate = `<div kjPopover><button kjPopoverTrigger>Open</button><div kjPopoverContent role="dialog" aria-label="Options"><button kjPopoverClose>Close</button></div></div>`;
-    const { container } = await render(closeTemplate, { imports });
-    fireEvent.click(container.querySelector('[kjPopoverTrigger]')!);
-    expect(container.querySelector('[kjPopoverContent]')).not.toHaveAttribute('hidden');
-    fireEvent.click(container.querySelector('[kjPopoverClose]')!);
-    expect(container.querySelector('[kjPopoverContent]')).toHaveAttribute('hidden', '');
+  it('panel has role=dialog and is hidden initially', async () => {
+    @Component({
+      selector: 'kj-pop-host',
+      standalone: true,
+      imports: [KjPopoverTrigger, KjPopoverContent],
+      template: `
+        <button kjPopoverTrigger #t="kjPopoverTrigger">Open</button>
+        <kj-popover-content [kjFor]="t">Hi</kj-popover-content>
+      `,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const panel = container.querySelector('kj-popover-content') as HTMLElement;
+    expect(panel.getAttribute('role')).toBe('dialog');
+    expect(panel.hasAttribute('hidden')).toBe(true);
   });
 
-  it('passes axe audit', async () => {
-    const { container } = await render(template, { imports });
-    expect(await axe(container)).toHaveNoViolations();
+  it('kjTrigger="hover" keeps role=dialog and aria-haspopup=dialog', async () => {
+    @Component({
+      selector: 'kj-pop-host',
+      standalone: true,
+      imports: [KjPopoverTrigger, KjPopoverContent],
+      template: `
+        <button kjPopoverTrigger kjTrigger="hover" #t="kjPopoverTrigger">Open</button>
+        <kj-popover-content [kjFor]="t">Hi</kj-popover-content>
+      `,
+    })
+    class Host {}
+    const { container } = await render(Host);
+    const btn = container.querySelector('button')!;
+    const panel = container.querySelector('kj-popover-content') as HTMLElement;
+    expect(btn.getAttribute('aria-haspopup')).toBe('dialog');
+    expect(panel.getAttribute('role')).toBe('dialog');
   });
 });

package/src/popover/popover.ts

@@ -1,124 +1,5 @@
-import { Directive, inject, input, signal } from '@angular/core';
-import { KJ_POPOVER, KjPopoverContext, type KjPopoverSide, type KjPopoverAlign } from './popover.context';
-
-let _popoverIdCounter = 0;
-
-/**
- * Root popover container. Manages open state, ARIA wiring, and click-outside dismissal.
- * Pairs with `[kjPopoverTrigger]` and `[kjPopoverContent]`.
- *
- * Click outside or Escape closes the popover. Clicking the trigger toggles it.
- * `aria-expanded` and `aria-controls` are automatically set on the trigger.
- *
- * @example
- * ```html
- * <div kjPopover>
- *   <button kjPopoverTrigger>Options</button>
- *   <div kjPopoverContent>
- *     <p>Popover body</p>
- *     <button kjPopoverClose>Done</button>
- *   </div>
- * </div>
- * ```
- * @doc
- *  @doc-example Basic
- *    @doc-theme default
- *      @doc-file popover.example.ts
- *    @doc-theme retro
- *      @doc-file popover.retro.example.ts
- *    @doc-theme finance
- *      @doc-file popover.finance.example.ts
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjPopover]',
-  standalone: true,
-  providers: [{ provide: KJ_POPOVER, useExisting: KjPopover }],
-  exportAs: 'kjPopover',
-})
-export class KjPopover implements KjPopoverContext {
-  /** Preferred side for the popover panel. Used via `data-side` for CSS. Defaults to `'bottom'`. */
-  kjPopoverSide = input<KjPopoverSide>('bottom');
-  /** Alignment along the cross-axis. Used via `data-align` for CSS. Defaults to `'start'`. */
-  kjPopoverAlign = input<KjPopoverAlign>('start');
-
-  readonly open = signal(false);
-  readonly popoverId = `kj-popover-${++_popoverIdCounter}`;
-
-  toggle(): void {
-    this.open.update(v => !v);
-  }
-
-  hide(): void {
-    this.open.set(false);
-  }
-}
-
-/**
- * Trigger button that toggles the popover. Automatically sets `aria-expanded`
- * and `aria-controls` on the host element.
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjPopoverTrigger]',
-  standalone: true,
-  host: {
-    '[attr.aria-expanded]': 'ctx.open().toString()',
-    '[attr.aria-haspopup]': '"dialog"',
-    '[attr.aria-controls]': 'ctx.popoverId',
-    // stopPropagation prevents the document:click on kjPopoverContent from immediately closing
-    '(click)': '$event.stopPropagation(); ctx.toggle()',
-  },
-})
-export class KjPopoverTrigger {
-  readonly ctx = inject(KJ_POPOVER);
-}
-
-/**
- * Popover content panel. Hidden when closed. Uses `hidden` attribute for
- * accessibility-compliant visibility. Click-outside and Escape both dismiss it.
- *
- * Clicks inside the panel are stopped so they don't bubble to the document listener.
- *
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjPopoverContent]',
-  standalone: true,
-  host: {
-    '[attr.id]': 'ctx.popoverId',
-    '[attr.hidden]': '!ctx.open() ? "" : null',
-    '[attr.data-side]': 'ctx.kjPopoverSide()',
-    '[attr.data-align]': 'ctx.kjPopoverAlign()',
-    // Prevent clicks inside from closing the popover
-    '(click)': '$event.stopPropagation()',
-    // Close on Escape
-    '(document:keydown.escape)': 'ctx.open() && ctx.hide()',
-    // Close on any click outside (trigger stopPropagation prevents self-close)
-    '(document:click)': 'ctx.open() && ctx.hide()',
-  },
-})
-export class KjPopoverContent {
-  readonly ctx = inject(KJ_POPOVER);
-}
-
-/**
- * Closes the parent popover when clicked. Place inside `[kjPopoverContent]`.
- *
- * @example
- * ```html
- * <button kjPopoverClose>Done</button>
- * ```
- * @category Core/Overlays
- */
-@Directive({
-  selector: '[kjPopoverClose]',
-  standalone: true,
-  host: {
-    '(click)': 'ctx.hide()',
-  },
-})
-export class KjPopoverClose {
-  readonly ctx = inject(KJ_POPOVER);
-}
+export * from './popover-trigger';
+export * from './popover-content';
+export * from './popover-arrow';
+export * from './popover-close';
+export * from './popover-title';

package/src/presets/bind-presets.spec.ts

@@ -0,0 +1,50 @@
+import { InjectionToken } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it } from 'vitest';
+import { KJ_VARIANT_PRESET } from './variant';
+import { KJ_SIZE_PRESET } from './size';
+import { bindPresets } from './bind-presets';
+
+interface DummyConfig {
+  variants: string[];
+  sizes: string[];
+  defaults: { variant: string; size: string };
+}
+
+const DUMMY_CONFIG = new InjectionToken<DummyConfig>('dummy.config');
+
+describe('bindPresets', () => {
+  it('translates a config token into KJ_VARIANT_PRESET', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: DUMMY_CONFIG,
+          useValue: {
+            variants: ['a', 'b'],
+            sizes: ['s', 'm'],
+            defaults: { variant: 'b', size: 'm' },
+          },
+        },
+        ...bindPresets(DUMMY_CONFIG),
+      ],
+    });
+    expect(TestBed.inject(KJ_VARIANT_PRESET)).toEqual({ values: ['a', 'b'], default: 'b' });
+  });
+
+  it('translates a config token into KJ_SIZE_PRESET', () => {
+    TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: DUMMY_CONFIG,
+          useValue: {
+            variants: ['a'],
+            sizes: ['s', 'm', 'l'],
+            defaults: { variant: 'a', size: 'l' },
+          },
+        },
+        ...bindPresets(DUMMY_CONFIG),
+      ],
+    });
+    expect(TestBed.inject(KJ_SIZE_PRESET)).toEqual({ values: ['s', 'm', 'l'], default: 'l' });
+  });
+});

package/src/presets/bind-presets.ts

@@ -0,0 +1,43 @@
+import { InjectionToken, Provider, inject } from '@angular/core';
+import { KJ_VARIANT_PRESET } from './variant';
+import { KJ_SIZE_PRESET } from './size';
+
+/**
+ * Generic shape every per-component config must expose to be consumable by
+ * `bindPresets`. Consumers free to add fields beyond these.
+ *
+ * @internal
+ */
+export interface KjBindablePresetConfig {
+  variants: string[];
+  sizes: string[];
+  defaults: { variant: string; size: string };
+}
+
+/**
+ * Returns providers that translate a per-component config token into the
+ * shared preset tokens (`KJ_VARIANT_PRESET`, `KJ_SIZE_PRESET`). Spread into a
+ * consumer directive's `providers` array.
+ *
+ * @internal
+ */
+export function bindPresets<T extends KjBindablePresetConfig>(
+  configToken: InjectionToken<T>,
+): Provider[] {
+  return [
+    {
+      provide: KJ_VARIANT_PRESET,
+      useFactory: () => {
+        const c = inject(configToken);
+        return { values: c.variants, default: c.defaults.variant };
+      },
+    },
+    {
+      provide: KJ_SIZE_PRESET,
+      useFactory: () => {
+        const c = inject(configToken);
+        return { values: c.sizes, default: c.defaults.size };
+      },
+    },
+  ];
+}

package/src/presets/index.ts

@@ -0,0 +1,3 @@
+export * from './variant';
+export * from './size';
+export * from './bind-presets';