@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Dialog.css

@@ -0,0 +1,98 @@
+/* 모달 오버레이 — body 로 portal 되어 스코프 밖에 놓이므로 토큰을 직접 참조한다 */
+.dialog {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal, 2200);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  background: var(--color-popupBlock, rgb(16 24 32 / 0.6));
+}
+
+.dialog__surface {
+  position: relative;
+  width: 100%;
+  max-height: calc(100vh - 64px);
+  overflow: auto;
+  border-radius: var(--radius-dialog, 20px);
+  background: var(--color-pureWhite, #fff);
+  outline: none;
+  box-shadow: var(--shadow-popup);
+}
+
+.dialog__surface--sm { max-width: 420px; }
+.dialog__surface--md { max-width: 640px; }
+.dialog__surface--lg { max-width: 1000px; }
+
+/* 라이트박스처럼 표면 없이 콘텐츠만 띄울 때 */
+.dialog__surface--full {
+  max-width: 1000px;
+  background: none;
+  box-shadow: none;
+  overflow: visible;
+}
+
+.dialog__header {
+  padding: 24px 24px 0;
+}
+
+.dialog__title {
+  margin: 0;
+  color: var(--color-black);
+}
+
+.dialog__close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: 0;
+  border-radius: var(--radius-full, 999px);
+  background: none;
+  color: var(--color-gray);
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.dialog__close:hover {
+  background: var(--color-darkWhite);
+  color: var(--color-black);
+}
+
+.dialog__close > svg {
+  width: 20px;
+  height: 20px;
+}
+
+.dialog__surface--full .dialog__close {
+  top: -48px;
+  right: 0;
+  background: rgb(255 255 255 / 0.1);
+  color: var(--color-pureWhite);
+}
+
+.dialog__surface--full .dialog__close:hover {
+  background: rgb(255 255 255 / 0.2);
+}
+
+.dialog__body {
+  padding: 24px;
+}
+
+.dialog__surface--full .dialog__body {
+  padding: 0;
+}
+
+@media (max-width: 639px) {
+  .dialog {
+    padding: 16px;
+  }
+  .dialog__body {
+    padding: 20px;
+  }
+}

package/dist/packages/core/src/components/Dialog.d.ts

@@ -0,0 +1,31 @@
+import './Dialog.css';
+import type { ReactNode } from 'react';
+/** @public */
+export type DialogSize = 'sm' | 'md' | 'lg' | 'full';
+/** @public */
+export interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    /** 스크린리더용 이름. title 을 주면 그것이 이름이 되므로 생략해도 된다. */
+    ariaLabel?: string;
+    /** 상단 제목 — 주면 헤더 영역이 생긴다. */
+    title?: ReactNode;
+    children?: ReactNode;
+    /** 콘텐츠 최대 너비. 기본 'md' */
+    size?: DialogSize;
+    /** 배경 클릭으로 닫을지. 기본 true */
+    closeOnBackdrop?: boolean;
+    /** Esc 로 닫을지. 기본 true */
+    closeOnEscape?: boolean;
+    /** 우상단 닫기 버튼 표시. 기본 true */
+    showClose?: boolean;
+    /** 배경/컨테이너에 덧붙일 클래스 */
+    className?: string;
+    contentClassName?: string;
+}
+/**
+ * 모달 오버레이. 포커스 복귀·본문 스크롤 잠금·Esc 닫기를 포함하며 body 로 portal 한다.
+ * 라이트박스, 확인창 등 오버레이가 필요한 모든 자리의 기반으로 쓴다.
+ * @public
+ */
+export default function Dialog({ open, onClose, ariaLabel, title, children, size, closeOnBackdrop, closeOnEscape, showClose, className, contentClassName, }: DialogProps): import("react").ReactPortal | null;

package/dist/packages/core/src/components/Dialog.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { createPortal } from 'react-dom';
+import { cx } from '../utils/cx';
+import { pushEsc } from '../hooks/escStack';
+import './Dialog.css';
+function CloseIcon() {
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, children: _jsx("path", { d: "M6 6l12 12M18 6 6 18" }) }));
+}
+/**
+ * 모달 오버레이. 포커스 복귀·본문 스크롤 잠금·Esc 닫기를 포함하며 body 로 portal 한다.
+ * 라이트박스, 확인창 등 오버레이가 필요한 모든 자리의 기반으로 쓴다.
+ * @public
+ */
+export default function Dialog({ open, onClose, ariaLabel, title, children, size = 'md', closeOnBackdrop = true, closeOnEscape = true, showClose = true, className, contentClassName, }) {
+    const { t } = useTranslation();
+    /* 제목이 있으면 aria-label 을 지웠는데, **그 제목을 이름으로 잇는 것이 없었다** —
+       결과적으로 제목이 있는 대화상자가 오히려 이름 없이 열렸다(낭독기가 "대화상자"라고만
+       읽는다). 보이는 제목을 그대로 이름으로 쓴다. */
+    const titleId = useId();
+    const surfaceRef = useRef(null);
+    const lastFocused = useRef(null);
+    const handleClose = useCallback(() => onClose(), [onClose]);
+    useEffect(() => {
+        if (!open) {
+            lastFocused.current?.focus();
+            lastFocused.current = null;
+            return;
+        }
+        lastFocused.current = document.activeElement;
+        const { overflow } = document.body.style;
+        document.body.style.overflow = 'hidden';
+        surfaceRef.current?.focus();
+        /* ESC 는 **공유 스택**에 맡긴다 — 예전에는 window 에서 직접 들었다.
+           그러면 이 창이 팝업 **위에** 떠 있을 때 어긋난다: 스택은 document 에서 듣고
+           제 차례를 처리하며 stopPropagation 하므로 window 까지 가지 않는다. 결과는
+           **아래 팝업이 닫히고 이 확인창만 남는** 꼴이다 — 닫으려던 것은 그대로 있고
+           뒤에 있던 화면이 사라진다.
+           스택에 올리면 맨 위 하나만 닫힌다(그것이 이 창이다). */
+        const 뗌 = closeOnEscape ? pushEsc(handleClose) : undefined;
+        return () => {
+            뗌?.();
+            document.body.style.overflow = overflow;
+        };
+    }, [open, closeOnEscape, handleClose]);
+    if (!open || typeof document === 'undefined')
+        return null;
+    return createPortal(_jsx("div", { className: cx('dialog', className), onClick: closeOnBackdrop ? handleClose : undefined, children: _jsxs("div", { ref: surfaceRef, role: "dialog", "aria-modal": "true", "aria-label": title ? undefined : ariaLabel, "aria-labelledby": title ? titleId : undefined, tabIndex: -1, className: cx('dialog__surface', `dialog__surface--${size}`, contentClassName), onClick: (e) => e.stopPropagation(), children: [title ? (_jsx("div", { className: "dialog__header", children: _jsx("h2", { id: titleId, className: "dialog__title h4b", children: title }) })) : null, showClose ? (_jsx("button", { type: "button", className: "dialog__close", "aria-label": t('common.close', '닫기'), onClick: handleClose, children: _jsx(CloseIcon, {}) })) : null, _jsx("div", { className: "dialog__body", children: children })] }) }), document.body);
+}

package/dist/packages/core/src/components/Divider.css

@@ -0,0 +1,33 @@
+.divider--horizontal {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border: none;
+  border-top: 1px solid var(--color-whiteLine);
+}
+
+.divider--vertical {
+  display: inline-block;
+  width: 1px;
+  height: 1em;
+  vertical-align: middle;
+  border: none;
+  border-left: 1px solid var(--color-whiteLine);
+}
+
+.divider--labeled {
+  border-top: none;
+  gap: var(--spacing-s);
+}
+
+.divider__line {
+  flex: 1 1 auto;
+  height: 1px;
+  background: var(--color-whiteLine);
+}
+
+.divider__label {
+  flex: 0 0 auto;
+  color: var(--color-gray);
+  white-space: nowrap;
+}

package/dist/packages/core/src/components/Divider.d.ts

@@ -0,0 +1,13 @@
+import './Divider.css';
+/** @public */
+export type DividerOrientation = 'horizontal' | 'vertical';
+/** @public */
+export interface DividerProps {
+    /** 방향. 기본값 'horizontal' */
+    orientation?: DividerOrientation;
+    /** 중앙에 표시할 레이블 (예: "또는" / "or"). vertical에서는 무시됨 */
+    label?: string;
+    className?: string;
+}
+/** @public */
+export default function Divider({ orientation, label, className }: DividerProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Divider.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './Divider.css';
+/** @public */
+export default function Divider({ orientation = 'horizontal', label, className = '' }) {
+    const cls = cx('divider', `divider--${orientation}`, label && orientation === 'horizontal' ? 'divider--labeled' : '', className);
+    if (orientation === 'vertical') {
+        return _jsx("div", { className: cls, role: "separator", "aria-orientation": "vertical" });
+    }
+    if (label) {
+        return (_jsxs("div", { className: cls, role: "separator", "aria-orientation": "horizontal", children: [_jsx("span", { className: "divider__line" }), _jsx("span", { className: "divider__label caption-1", children: label }), _jsx("span", { className: "divider__line" })] }));
+    }
+    return _jsx("div", { className: cls, role: "separator", "aria-orientation": "horizontal" });
+}

package/dist/packages/core/src/components/Dropdown.css

@@ -0,0 +1,175 @@
+/* Dropdown component */
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown--block {
+  display: block;
+  width: 100%;
+}
+
+/* block 모드는 컨테이너 너비를 따르므로 trigger 최소 너비 강제 해제 */
+.dropdown--block .dropdown__trigger {
+  min-width: 0;
+}
+
+/* Size variants — 실제 높이 px + 버튼과 동일한 round */
+.dropdown--s40 .dropdown__trigger { height: 40px; border-radius: 10px; }
+.dropdown--s48 .dropdown__trigger { height: 48px; border-radius: 12px; }
+
+/* Trigger button */
+.dropdown__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+  width: 100%;
+  height: 48px;
+  padding: 0 12px;
+  border: 1px solid var(--color-whiteLine);
+  border-radius: 12px;
+  box-sizing: border-box;
+  background: var(--color-deepWhite);
+  font-family: var(--font-family);
+  color: var(--color-darkGray);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+  white-space: nowrap;
+  min-width: 120px;
+}
+
+.dropdown__trigger:hover:not(:disabled) {
+  border-color: var(--color-main);
+}
+
+.dropdown__trigger:focus-visible {
+  outline: none;
+  border-color: var(--color-main);
+  box-shadow: 0 0 0 3px var(--color-main-a10);
+}
+
+.dropdown__trigger:disabled {
+  opacity: 0.5;
+  cursor: default;
+  background: var(--color-deepWhite);
+}
+
+.dropdown--open .dropdown__trigger {
+  border-color: var(--color-main);
+  background: var(--color-white);
+  box-shadow: 0 0 0 3px var(--color-main-a10);
+}
+
+.dropdown--error .dropdown__trigger {
+  border: 1px solid var(--color-error);
+}
+
+.dropdown--error .dropdown__trigger:hover:not(:disabled),
+.dropdown--error.dropdown--open .dropdown__trigger {
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 15%, transparent);
+}
+
+.dropdown__trigger-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dropdown__trigger-label--placeholder {
+  color: var(--color-lightGray);
+}
+
+.dropdown__chevron {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--color-gray);
+  transition: transform 0.2s;
+}
+
+.dropdown--open .dropdown__chevron {
+  transform: rotate(180deg);
+}
+
+/* Menu */
+.dropdown__menu {
+  background: var(--color-white);
+  border: 1.5px solid var(--color-whiteLine);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-dropdown);
+  padding: 6px;
+  box-sizing: border-box;
+  animation: dropdown-appear 0.12s ease;
+  max-height: 260px;
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+}
+
+.dropdown__menu--up {
+  top: auto;
+  bottom: calc(100% + 6px);
+}
+
+@keyframes dropdown-appear {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Options */
+.dropdown__option {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+  padding: 9px 12px;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  font-family: var(--font-family);
+  color: var(--color-darkGray);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.1s, color 0.1s;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+
+.dropdown__option:hover {
+  background: var(--color-deepWhite);
+}
+
+.dropdown__option--active {
+  background: var(--color-main-a10);
+  color: var(--color-main);
+}
+
+.dropdown__option--disabled {
+  opacity: 0.4;
+  cursor: default;
+  pointer-events: none;
+}
+
+.dropdown__option-check {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  color: var(--color-main);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dropdown__option-check svg {
+  width: 14px;
+  height: 14px;
+}
+
+.dropdown__divider {
+  height: 1px;
+  background: var(--color-darkWhite);
+  margin: 4px 0;
+}

package/dist/packages/core/src/components/Dropdown.d.ts

@@ -0,0 +1,23 @@
+import './Dropdown.css';
+/** @public */
+export interface DropdownOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+/** @public */
+export interface DropdownProps {
+    options: DropdownOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    block?: boolean;
+    size?: 40 | 48;
+    error?: boolean;
+    className?: string;
+    /** 화면에 보이는 라벨 없이 스크린리더용 이름을 지정할 때 사용 */
+    ariaLabel?: string;
+}
+/** @public */
+export default function Dropdown({ options, value, onChange, placeholder, disabled, block, size, error, className, ariaLabel }: DropdownProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Dropdown.js

@@ -0,0 +1,117 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { useAnchoredMenu } from './useAnchoredMenu';
+import './Dropdown.css';
+/** @public */
+export default function Dropdown({ options, value, onChange, placeholder, disabled = false, block = false, size = 48, error = false, className = '', ariaLabel }) {
+    const { t } = useTranslation();
+    const resolvedPlaceholder = placeholder ?? t('dropdown.placeholder', '선택');
+    const listId = useId();
+    const containerRef = useRef(null);
+    const computeStyle = useCallback((rect) => {
+        // 아래쪽 공간이 메뉴 최대 높이(260px, Dropdown.css)보다 부족하고 위쪽에 공간이
+        // 있으면 위로 뒤집는다 — DatePicker.tsx의 동일 패턴
+        const menuMaxH = 260;
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const above = spaceBelow < menuMaxH && rect.top > menuMaxH;
+        return {
+            position: 'fixed',
+            left: rect.left,
+            minWidth: rect.width,
+            ...(above
+                ? { bottom: window.innerHeight - rect.top + 6 }
+                : { top: rect.bottom + 6 }),
+            zIndex: 9999,
+        };
+    }, []);
+    const { open, setOpen, toggle: rawToggle, style: menuStyle, triggerRef, menuRef } = useAnchoredMenu({
+        computeStyle,
+    });
+    const [activeIdx, setActiveIdx] = useState(-1);
+    const handleMenuLeave = useCallback(() => setActiveIdx(-1), []);
+    const selected = options.find(o => o.value === value);
+    // 열릴 때 activeIdx 초기화 + 선택 항목을 메뉴 중앙으로 스크롤
+    // 열릴 때 activeIdx를 초기화하는 의도된 동기화다
+    /* eslint-disable react-hooks/set-state-in-effect */
+    useEffect(() => {
+        if (open) {
+            const idx = options.findIndex(o => o.value === value);
+            setActiveIdx(idx >= 0 ? idx : 0);
+            requestAnimationFrame(() => {
+                const menu = menuRef.current;
+                if (!menu)
+                    return;
+                const activeEl = menu.querySelectorAll('.dropdown__option')[idx];
+                // menu는 position: fixed로 포탈되어 있어 scrollIntoView를 쓰면 브라우저가
+                // (효과 없는) window 스크롤을 시도해 useAnchoredMenu의 onScroll:'close'가
+                // 반응, 메뉴가 열리자마자 닫혀버린다. 메뉴 자체의 scrollTop만 직접 조정한다.
+                if (activeEl) {
+                    menu.scrollTop = Math.max(0, activeEl.offsetTop - menu.clientHeight / 2 + activeEl.clientHeight / 2);
+                }
+            });
+        }
+    }, [open, options, value, menuRef]);
+    /* eslint-enable react-hooks/set-state-in-effect */
+    const toggle = useCallback(() => { if (!disabled)
+        rawToggle(); }, [disabled, rawToggle]);
+    const select = useCallback((opt) => {
+        if (opt.disabled)
+            return;
+        onChange?.(opt.value);
+        setOpen(false);
+    }, [onChange, setOpen]);
+    const handleKeyDown = useCallback((e) => {
+        if (disabled)
+            return;
+        if (!open) {
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                setOpen(true);
+            }
+            return;
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            setOpen(false);
+            return;
+        } // 상위 팝업의 ESC 닫기보다 우선(드롭다운만 닫음)
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActiveIdx(i => {
+                let next = i + 1;
+                while (next < options.length && options[next].disabled)
+                    next++;
+                return next < options.length ? next : i;
+            });
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActiveIdx(i => {
+                let prev = i - 1;
+                while (prev >= 0 && options[prev].disabled)
+                    prev--;
+                return prev >= 0 ? prev : i;
+            });
+        }
+        else if (e.key === 'Enter' && activeIdx >= 0) {
+            e.preventDefault();
+            select(options[activeIdx]);
+        }
+    }, [disabled, open, options, activeIdx, select, setOpen]);
+    const menu = open ? (_jsx("div", { ref: menuRef, id: listId, className: "dropdown__menu", role: "listbox", style: menuStyle, onMouseLeave: handleMenuLeave, children: options.map((opt, i) => (_jsxs("button", { id: `${listId}-option-${i}`, type: "button", role: "option", "aria-selected": opt.value === value, className: cx('dropdown__option body-2', opt.value === value ? 'dropdown__option--active' : '', i === activeIdx ? 'dropdown__option--active' : '', opt.disabled ? 'dropdown__option--disabled' : ''), 
+            // 선택은 click 에서 한다. onMouseDown 만 두면 마우스로는 눌리지만 스크린리더가
+            // 항목을 활성화할 때는 click 만 발생해 **아무 일도 일어나지 않는다**.
+            // mousedown 에서는 기본 동작(포커스 이동 → 트리거 blur → 메뉴 닫힘)만 막아,
+            // click 이 도달하기 전에 메뉴가 사라지지 않게 한다.
+            onMouseDown: e => e.preventDefault(), onClick: () => select(opt), onMouseEnter: () => setActiveIdx(i), disabled: opt.disabled, children: [_jsx("span", { className: "dropdown__option-check", children: opt.value === value && (_jsx("svg", { viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "2 7 5.5 10.5 12 3.5" }) })) }), opt.label] }, opt.value))) })) : null;
+    return (_jsxs("div", { ref: containerRef, className: cx('dropdown', `dropdown--s${size}`, open ? 'dropdown--open' : '', block ? 'dropdown--block' : '', error ? 'dropdown--error' : '', className), onKeyDown: handleKeyDown, children: [_jsxs("button", { ref: triggerRef, type: "button", className: "dropdown__trigger", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && activeIdx >= 0 ? `${listId}-option-${activeIdx}` : undefined, "aria-label": ariaLabel, "aria-invalid": error || undefined, disabled: disabled, onClick: toggle, children: [_jsx("span", { className: `dropdown__trigger-label body-2${!selected ? ' dropdown__trigger-label--placeholder' : ''}`, children: selected ? selected.label : resolvedPlaceholder }), _jsx("svg", { className: "dropdown__chevron", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "4 6 8 10 12 6" }) })] }), typeof document !== 'undefined' && createPortal(menu, 
+            // 코어 CSS를 .ihabdevteam-core-scope 로 스코프한 소비자(플레이그라운드 등)에서도
+            // body로 portal된 메뉴가 스타일을 잃지 않도록, 가까운 scope 안으로 portal
+            // createPortal의 target은 렌더링 시점에 동기적으로 결정되어야 하므로 ref 읽기를 effect로 옮길 수 없다
+            // eslint-disable-next-line react-hooks/refs
+            containerRef.current?.closest('.ihabdevteam-core-scope') ?? document.body)] }));
+}

package/dist/packages/core/src/components/Effect/EffectPartyPopper.css

@@ -0,0 +1,25 @@
+.party-container {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.confetti {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  transform: translate3d(0,0,0);
+  will-change: transform, opacity;
+  opacity: 0;
+}
+.confetti--left { transform-origin: left bottom; }
+.confetti--right { transform-origin: right bottom; }
+
+/* Simple fade-in / fade-out to smooth appearing particles */
+.confetti.show {
+  display: block;
+  opacity: 1;
+  transition: opacity 200ms linear;
+}

package/dist/packages/core/src/components/Effect/EffectPartyPopper.d.ts

@@ -0,0 +1,11 @@
+import "./EffectPartyPopper.css";
+/** @public */
+export default function EffectPartyPopper({ active, count, duration, strength, // multiplier for speed/spread
+onComplete, trigger, }: {
+    active?: boolean;
+    count?: number;
+    duration?: number;
+    strength?: number;
+    onComplete?: () => void;
+    trigger?: number;
+}): import("react").JSX.Element | null;