@zyncat/ui 0.8.0

package/src/components/composites/pagination/Pagination.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import './pagination.css';
+import { useEffect, useRef, type HTMLAttributes } from 'react';
+import { animate } from '../../../engine';
+import { UIMotion } from '../../../tokens/motion-tokens';
+import { tokenPx } from '../../internal/utils/token-px';
+import { Icon } from '../../internal/icon/Icon';
+import { Button } from '../../primitives/button/Button';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+export interface PaginationProps {
+  /** Accessible name for the nav landmark - name the list ("Posts"), not "pagination". @default 'Pagination' */
+  ariaLabel?: string;
+  /** Items currently shown, 1-based inclusive: `[from, to]` (e.g. `[26, 50]`). */
+  range: [number, number];
+  /** Total item count - render `of N` only when the API reports one; omit for endless lists. */
+  total?: number | null;
+  /** A previous cursor exists. @default false */
+  hasPrev?: boolean;
+  /** A next cursor exists. @default false */
+  hasNext?: boolean;
+  /** Fired when the previous arrow is pressed. */
+  onPrev?: () => void;
+  /** Fired when the next arrow is pressed. */
+  onNext?: () => void;
+  /** A page fetch is in flight: both arrows go inert, the clicked arrow carries the spinner. @default false */
+  loading?: boolean;
+  /** Extra class(es) merged onto the root element. */
+  className?: string;
+  /** Standard <nav> attributes (style, data-*, aria-*, ...) forwarded to the root. */
+  htmlProps?: Omit<HTMLAttributes<HTMLElement>, 'className'> & DataAttributes;
+}
+
+let pgnTravelPx: number | null = null;
+function pgnTravel() {
+  if (pgnTravelPx == null) pgnTravelPx = tokenPx('--space-2');
+  return pgnTravelPx;
+}
+
+function pgnFormat(n: number) {
+  return n.toLocaleString('en-US').replace(/,/g, '\u2009');
+}
+
+export function Pagination({
+  ariaLabel = 'Pagination',
+  range,
+  total = null,
+  hasPrev = false,
+  hasNext = false,
+  onPrev,
+  onNext,
+  loading = false,
+  className = '',
+  htmlProps,
+}: PaginationProps) {
+  const rangeRef = useRef<HTMLSpanElement>(null);
+  const prevBtnRef = useRef<HTMLButtonElement>(null);
+  const nextBtnRef = useRef<HTMLButtonElement>(null);
+  const shownRef = useRef<[number, number]>(range);
+  const lastDirRef = useRef(0);
+
+  const from = range[0];
+  const to = range[1];
+
+  useEffect(() => {
+    const pf = shownRef.current[0],
+      pt = shownRef.current[1];
+    if (pf === from && pt === to) return;
+    const dir = from > pf ? 1 : -1;
+    shownRef.current = range;
+    if (rangeRef.current)
+      animate(rangeRef.current, { x: [dir * pgnTravel(), 0], opacity: [0, 1], timing: UIMotion.t.enter });
+  }, [from, to]);
+
+  useEffect(() => {
+    if (loading || document.activeElement !== document.body) return;
+    const d = lastDirRef.current;
+    if (d === 1 && !hasNext && hasPrev && prevBtnRef.current) prevBtnRef.current.focus();
+    if (d === -1 && !hasPrev && hasNext && nextBtnRef.current) nextBtnRef.current.focus();
+  }, [loading, hasPrev, hasNext]);
+
+  const prevBusy = loading && lastDirRef.current === -1;
+  const nextBusy = loading && lastDirRef.current === 1;
+
+  return (
+    <nav className={cx('pgn', className)} aria-label={ariaLabel} aria-busy={loading || undefined} {...htmlProps}>
+      <span className="pgn__readout" aria-live="polite">
+        <span className="pgn__range" ref={rangeRef}>
+          <b>
+            {pgnFormat(from)}-{pgnFormat(to)}
+          </b>
+          {total != null ? <span className="pgn__total"> of {pgnFormat(total)}</span> : null}
+        </span>
+      </span>
+      <div className="pgn__nav">
+        <Button
+          variant="ghost"
+          size="sm"
+          ref={prevBtnRef}
+          className="pgn__btn pgn__btn--prev"
+          loading={prevBusy}
+          disabled={!hasPrev || loading}
+          htmlProps={{ 'aria-label': 'Previous page' }}
+          onClick={() => {
+            lastDirRef.current = -1;
+            if (onPrev) onPrev();
+          }}
+        >
+          <Icon name="caret-left" size="sm" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          ref={nextBtnRef}
+          className="pgn__btn pgn__btn--next"
+          loading={nextBusy}
+          disabled={!hasNext || loading}
+          htmlProps={{ 'aria-label': 'Next page' }}
+          onClick={() => {
+            lastDirRef.current = 1;
+            if (onNext) onNext();
+          }}
+        >
+          <Icon name="caret-right" size="sm" />
+        </Button>
+      </div>
+    </nav>
+  );
+}

package/src/components/composites/pagination/pagination.css

@@ -0,0 +1,43 @@
+/* Pagination - cursor strip: layout, mono readout, square arrows + directional caret nudge (on Button vocabulary). */
+
+.pgn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+/* mono tabular readout; .pgn__range is the node Motion slides - keep it transformable (inline-block) */
+.pgn__readout {
+  font: var(--type-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  white-space: nowrap;
+}
+.pgn__range {
+  display: inline-block;
+}
+.pgn__range b {
+  font-weight: var(--weight-medium);
+  color: var(--text-body);
+}
+
+/* arrows kept adjacent (not flanking the readout) so repeated paging needs no mouse travel and a growing readout never shifts them */
+.pgn__nav {
+  display: flex;
+  gap: var(--space-1);
+}
+.pgn__btn {
+  width: var(--control-height-sm);
+  padding: 0;
+}
+
+/* Caret nudges toward its direction on hover - a 1px optical cue. */
+.pgn__btn .icon {
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.pgn__btn--prev:hover:not(:disabled) .icon {
+  transform: translateX(calc(var(--space-px) * -1));
+}
+.pgn__btn--next:hover:not(:disabled) .icon {
+  transform: translateX(var(--space-px));
+}

package/src/components/composites/popover/Popover.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import './popover.css';
+import { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode, type RefObject } from 'react';
+import { Presence } from '../../../motion/presence';
+import { useMotion, type MotionSpecs } from '../../../motion/use-motion';
+import { resolveMotionTiming } from '../../../motion/motion-timing';
+import type { DisableableAnimation } from '../../../motion/timing';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import { ovCloneTrigger, useOverlayEntry, useOutsidePress, OverlayPortal } from '../../internal/overlay/layer';
+import { useReturnFocus } from '../../internal/overlay/focus';
+import { useAnchorPosition } from '../../internal/overlay/position';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+const POPOVER_TIMING = {
+  open: { duration: 'base', ease: 'entrance' },
+  close: { duration: 'fast', ease: 'exit' },
+} as const;
+
+export interface PopoverProps {
+  /** Controlled open state. Omit to stay uncontrolled. */
+  open?: boolean;
+  /** Initial state when uncontrolled. Default false. */
+  defaultOpen?: boolean;
+  /** Fires whenever the open state changes. Pair with `open` for controlled use. */
+  onOpenChange?: (open: boolean) => void;
+
+  /** Cloned to toggle the panel; required as the anchor. */
+  trigger?: ReactElement | null;
+
+  /** Preferred side; flips to the opposite side when cramped. Default 'bottom'. */
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  /** Cross-axis alignment against the trigger. Default 'start'. */
+  align?: 'start' | 'center' | 'end';
+  /** Caret tracking the trigger center. Default false. */
+  arrow?: boolean;
+
+  /** Esc + outside-press dismissal. Default true. */
+  dismissible?: boolean;
+
+  /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */
+  id?: string;
+  /** Standard attributes (className, style, data-*, ...) forwarded to the popover panel. */
+  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'base'/'entrance', close 'fast'/'exit' */
+  animation?: DisableableAnimation;
+  /** The ENTIRE surface - paint AND semantics. Drive dismissal with `open`/`onOpenChange`. */
+  children: ReactNode;
+}
+
+function PopoverPanel({
+  panelId,
+  side,
+  align,
+  arrow,
+  dismissible,
+  requestClose,
+  triggerRef,
+  htmlProps,
+  animate,
+  exit,
+  children,
+}: {
+  panelId: string;
+  side: 'top' | 'bottom' | 'left' | 'right';
+  align: 'start' | 'center' | 'end';
+  arrow: boolean;
+  dismissible: boolean;
+  requestClose: () => void;
+  triggerRef: RefObject<HTMLElement>;
+  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+  children: ReactNode;
+} & MotionSpecs) {
+  const panelRef = useRef<HTMLElement>(null);
+  const entry = useOverlayEntry({ nodeRef: panelRef, dismissible, requestClose });
+  useMotion(panelRef, { animate, exit });
+  useReturnFocus(panelRef);
+  useAnchorPosition({ side, align, arrow, triggerRef, panelRef });
+  useOutsidePress({ entry, refs: [triggerRef, panelRef], enabled: dismissible, onPress: requestClose });
+  return (
+    <div
+      {...htmlProps}
+      id={panelId}
+      ref={panelRef as RefObject<HTMLDivElement>}
+      className={cx('overlay-popover', htmlProps?.className)}
+    >
+      {arrow && <span className="overlay-popover__arrow" aria-hidden="true"></span>}
+      {children}
+    </div>
+  );
+}
+
+export function Popover({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  trigger = null,
+  side = 'bottom',
+  align = 'start',
+  arrow = false,
+  dismissible = true,
+  id,
+  htmlProps,
+  animation,
+  children,
+}: PopoverProps) {
+  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
+  const triggerRef = useRef<HTMLElement>(null);
+  const autoId = useId();
+  const panelId = id || 'popover-' + autoId;
+  const close = () => setOpen(false);
+  const timings = resolveMotionTiming(animation, POPOVER_TIMING);
+
+  return (
+    <Fragment>
+      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(!open), panelId, haspopup: 'true', triggerRef })}
+      <OverlayPortal>
+        <Presence>
+          {open && (
+            <PopoverPanel
+              key="panel"
+              animate={{ opacity: [0, 1], scale: [0.96, 1], timing: timings.open }}
+              exit={{ opacity: [0], scale: [0.96], timing: timings.close }}
+              panelId={panelId}
+              side={side}
+              align={align}
+              arrow={arrow}
+              dismissible={dismissible}
+              requestClose={close}
+              triggerRef={triggerRef}
+              htmlProps={htmlProps}
+            >
+              {children}
+            </PopoverPanel>
+          )}
+        </Presence>
+      </OverlayPortal>
+    </Fragment>
+  );
+}

package/src/components/composites/popover/popover.css

@@ -0,0 +1,69 @@
+/* popover.css - anchored panel paint: fixed coords from useAnchorPosition; entrance origin = arrow tip, else the aligned edge (inset --space-4), else center. */
+.overlay-popover {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: max-content;
+  outline: none;
+}
+
+.overlay-popover[data-align='start'] {
+  --ov-origin: var(--space-4);
+}
+.overlay-popover[data-align='center'] {
+  --ov-origin: 50%;
+}
+.overlay-popover[data-align='end'] {
+  --ov-origin: calc(100% - var(--space-4));
+}
+
+.overlay-popover[data-side='bottom'] {
+  transform-origin: var(--overlay-arrow-x, var(--ov-origin)) top;
+}
+.overlay-popover[data-side='top'] {
+  transform-origin: var(--overlay-arrow-x, var(--ov-origin)) bottom;
+}
+.overlay-popover[data-side='right'] {
+  transform-origin: left var(--overlay-arrow-y, var(--ov-origin));
+}
+.overlay-popover[data-side='left'] {
+  transform-origin: right var(--overlay-arrow-y, var(--ov-origin));
+}
+
+/* Arrow - a rotated square on the panel edge (--overlay-arrow-x/y); only its two outward edges keep the hairline, the panel covers the rest (must be opaque). */
+.overlay-popover__arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--overlay-arrow-bg, var(--bg-surface-raised));
+  border: var(--border-hairline) solid var(--border-default);
+  pointer-events: none;
+}
+.overlay-popover[data-side='bottom'] .overlay-popover__arrow {
+  top: -5px;
+  left: var(--overlay-arrow-x, 50%);
+  transform: translateX(-50%) rotate(45deg);
+  border-right: none;
+  border-bottom: none;
+}
+.overlay-popover[data-side='top'] .overlay-popover__arrow {
+  bottom: -5px;
+  left: var(--overlay-arrow-x, 50%);
+  transform: translateX(-50%) rotate(45deg);
+  border-left: none;
+  border-top: none;
+}
+.overlay-popover[data-side='right'] .overlay-popover__arrow {
+  left: -5px;
+  top: var(--overlay-arrow-y, 50%);
+  transform: translateY(-50%) rotate(45deg);
+  border-right: none;
+  border-top: none;
+}
+.overlay-popover[data-side='left'] .overlay-popover__arrow {
+  right: -5px;
+  top: var(--overlay-arrow-y, 50%);
+  transform: translateY(-50%) rotate(45deg);
+  border-left: none;
+  border-bottom: none;
+}

package/src/components/composites/select/MultiSelect.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import './select.css';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import { CheckGlyph } from '../../primitives/checkbox/check-glyph';
+import { useListbox, ListboxPanel, SelectTrigger, type SelectOption, type SelectGroup } from './core';
+import type { DisableableAnimation } from '../../../motion/timing';
+import type { DataAttributes } from '../../../dom-props';
+import { cx } from '../../internal/utils/cx';
+
+export type { SelectOption, SelectGroup } from './core';
+
+export interface MultiSelectProps {
+  /** The choices - a flat `SelectOption[]`, or `SelectGroup[]` to render labeled sections. @default [] */
+  options: SelectOption[] | SelectGroup[];
+  /** Controlled value - the array of selected option `value`s. Omit for uncontrolled (use `defaultValue`). */
+  value?: string[];
+  /** Initial selection when uncontrolled. @default [] */
+  defaultValue?: string[];
+  /** Fires with the NEXT array and the option that was toggled. Committing keeps the menu open. */
+  onChange?: (value: string[], toggled: SelectOption) => void;
+  /** Trigger text when nothing is selected. @default 'Select options' */
+  placeholder?: string;
+  /** Control height. @default 'md' */
+  size?: 'sm' | 'md' | 'lg';
+  /** Disabled - trigger is inert and the menu cannot open. @default false */
+  disabled?: boolean;
+  /** Danger ring + border. @default false */
+  invalid?: boolean;
+  /** Skeleton rows in the menu; trigger reads "Loading...". @default false */
+  loading?: boolean;
+  /** Type-to-filter field pinned above the list. @default false */
+  searchable?: boolean;
+  /** Placeholder for the `searchable` filter input. @default 'Filter options' */
+  searchPlaceholder?: string;
+  /** Your own icon node pinned before the trigger label; else the sole selected option's icon. */
+  leadingIcon?: ReactNode;
+  /** Base id for the trigger/menu/list ids and a11y wiring; auto-generated if omitted. */
+  id?: string;
+  /** Accessible name for the trigger and listbox - supply when there is no visible label. */
+  ariaLabel?: string;
+  /** Standard <div> attributes (className, style, data-*, ...) forwarded to the select root. */
+  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+  /** Menu open/close timing - motion tokens only, or `null` to disable. @default duration 'base' + ease 'entrance'/'exit' */
+  animation?: DisableableAnimation;
+}
+
+function CheckboxTick({ checked }: { checked: boolean }) {
+  return (
+    <span className="cbx" aria-hidden="true">
+      <CheckGlyph checked={checked} readOnly tabIndex={-1} />
+    </span>
+  );
+}
+
+export function MultiSelect({
+  options = [],
+  value: controlledValue,
+  defaultValue = [],
+  onChange,
+  placeholder = 'Select options',
+  size = 'md',
+  disabled = false,
+  invalid = false,
+  loading = false,
+  searchable = false,
+  searchPlaceholder = 'Filter options',
+  leadingIcon = null,
+  id,
+  ariaLabel,
+  htmlProps,
+  animation,
+}: MultiSelectProps) {
+  const [value, setValue] = useControllable<string[], SelectOption>(
+    controlledValue,
+    defaultValue,
+    onChange as ((next: string[], opt?: SelectOption) => void) | undefined,
+  );
+  const values = Array.isArray(value) ? value : [];
+  const isSelected = (v: string) => values.indexOf(v) !== -1;
+
+  const lb = useListbox({
+    options,
+    disabled,
+    loading,
+    searchable,
+    id,
+    idPrefix: 'mselect-',
+    isSelected,
+    onCommit: (opt) =>
+      setValue(isSelected(opt.value) ? values.filter((v) => v !== opt.value) : [...values, opt.value], opt),
+    closeOnCommit: false,
+  });
+
+  const selectedOptions = lb.flat.filter((o) => isSelected(o.value));
+  const isPlaceholder = !loading && selectedOptions.length === 0;
+
+  return (
+    <div
+      {...htmlProps}
+      className={cx('select', htmlProps?.className)}
+      data-multiple="true"
+      data-size={size}
+      data-open={lb.open ? 'true' : undefined}
+      data-disabled={disabled ? 'true' : undefined}
+      data-invalid={invalid ? 'true' : undefined}
+      data-loading={loading ? 'true' : undefined}
+    >
+      <SelectTrigger
+        lb={lb}
+        disabled={disabled}
+        invalid={invalid}
+        ariaLabel={ariaLabel}
+        leading={leadingIcon || (selectedOptions.length === 1 && selectedOptions[0].icon) || null}
+        text={loading ? 'Loading...' : isPlaceholder ? placeholder : selectedOptions[0].label}
+        isPlaceholder={isPlaceholder}
+        count={selectedOptions.length - 1}
+      />
+      <ListboxPanel
+        lb={lb}
+        loading={loading}
+        searchable={searchable}
+        searchPlaceholder={searchPlaceholder}
+        ariaLabel={ariaLabel}
+        multiple
+        animation={animation}
+        size={size}
+        check={(sel) => <CheckboxTick checked={sel} />}
+      />
+    </div>
+  );
+}

package/src/components/composites/select/Select.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import './select.css';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import { useListbox, ListboxPanel, SelectTrigger, type SelectOption, type SelectGroup } from './core';
+import type { DisableableAnimation } from '../../../motion/timing';
+import type { DataAttributes } from '../../../dom-props';
+import { ButtonProps } from '../../primitives/button/Button';
+import { cx } from '../../internal/utils/cx';
+
+export type { SelectOption, SelectGroup } from './core';
+
+export interface SelectProps {
+  /** The choices - a flat `SelectOption[]`, or `SelectGroup[]` to render labeled sections. @default [] */
+  options: SelectOption[] | SelectGroup[];
+  /** Controlled value - matches an option's `value`, or `null` for none. Omit for uncontrolled (use `defaultValue`). */
+  value?: string | null;
+  /** Initial value when uncontrolled. @default null */
+  defaultValue?: string | null;
+  /** Fires on commit - gets the new `value` and its full `SelectOption`. Committing closes the menu. */
+  onChange?: (value: string, option: SelectOption) => void;
+  /** Trigger text when nothing is selected. @default 'Select an option' */
+  placeholder?: string;
+  /** Control height. @default 'md' */
+  size?: 'sm' | 'md' | 'lg';
+  /** Disabled - trigger is inert and the menu cannot open. @default false */
+  disabled?: boolean;
+  /** Danger ring + border. @default false */
+  invalid?: boolean;
+  /** Skeleton rows in the menu; trigger reads "Loading...". @default false */
+  loading?: boolean;
+  /** Type-to-filter field pinned above the list. @default false */
+  searchable?: boolean;
+  /** Placeholder for the `searchable` filter input. @default 'Filter options' */
+  searchPlaceholder?: string;
+  /** Your own icon node pinned before the trigger label; else the selected option's icon. */
+  leadingIcon?: ReactNode;
+  /** Base id for the trigger/menu/list ids and a11y wiring; auto-generated if omitted. */
+  id?: string;
+  /** Accessible name for the trigger and listbox - supply when there is no visible label. */
+  ariaLabel?: string;
+  /** Standard <div> attributes (className, style, data-*, ...) forwarded to the select root. */
+  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+  /** Menu open/close timing - motion tokens only, or `null` to disable. @default duration 'base' + ease 'entrance'/'exit' */
+  animation?: DisableableAnimation;
+  /** Trigger props */
+  triggerProps?: ButtonProps;
+  /** Show check icon on selected value */
+  showCheck?: boolean;
+}
+
+export function Select({
+  options = [],
+  value: controlledValue,
+  defaultValue = null,
+  onChange,
+  placeholder = 'Select an option',
+  size = 'md',
+  disabled = false,
+  invalid = false,
+  loading = false,
+  searchable = false,
+  searchPlaceholder = 'Filter options',
+  leadingIcon = null,
+  id,
+  ariaLabel,
+  htmlProps,
+  animation,
+  triggerProps,
+  showCheck = true,
+}: SelectProps) {
+  const [value, setValue] = useControllable<string | null, SelectOption>(controlledValue, defaultValue, onChange);
+
+  const lb = useListbox({
+    options,
+    disabled,
+    loading,
+    searchable,
+    id,
+    idPrefix: 'select-',
+    isSelected: (v) => v === value && value != null,
+    onCommit: (opt) => setValue(opt.value, opt),
+    closeOnCommit: true,
+  });
+
+  const selected = lb.flat.find((o) => o.value === value) || null;
+  const isPlaceholder = !loading && !selected;
+
+  return (
+    <div
+      {...htmlProps}
+      className={cx('select', htmlProps?.className)}
+      data-size={size}
+      data-open={lb.open ? 'true' : undefined}
+      data-disabled={disabled ? 'true' : undefined}
+      data-invalid={invalid ? 'true' : undefined}
+      data-loading={loading ? 'true' : undefined}
+    >
+      <SelectTrigger
+        lb={lb}
+        disabled={disabled}
+        invalid={invalid}
+        ariaLabel={ariaLabel}
+        leading={leadingIcon || (selected && selected.icon) || null}
+        text={loading ? 'Loading...' : isPlaceholder ? placeholder : selected.label}
+        isPlaceholder={isPlaceholder}
+        {...triggerProps}
+      />
+      <ListboxPanel
+        lb={lb}
+        loading={loading}
+        searchable={searchable}
+        searchPlaceholder={searchPlaceholder}
+        ariaLabel={ariaLabel}
+        animation={animation}
+        size={size}
+        {...(!showCheck && { check: () => null })}
+      />
+    </div>
+  );
+}

package/src/components/composites/select/core/index.ts

@@ -0,0 +1,4 @@
+export { useListbox, type ListboxState } from './use-listbox';
+export { SelectTrigger } from './trigger';
+export { ListboxPanel } from './panel';
+export type { SelectOption, SelectGroup } from './types';