@ihabdevteam/core 0.150.0 → 0.152.0

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

@@ -6,15 +6,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../utils/cx';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createPortal } from 'react-dom';
-import { getTodayKst } from '../utils/date';
+import { todayYmdOr } from '../utils/date';
 import Calendar from 'lucide-react/dist/esm/icons/calendar.mjs';
 import ChevronLeft from 'lucide-react/dist/esm/icons/chevron-left.mjs';
 import ChevronRight from 'lucide-react/dist/esm/icons/chevron-right.mjs';
 import Dropdown from './Dropdown';
-import { useAnchoredMenu } from '../hooks/useAnchoredMenu';
+import { useAnchoredMenu, anchoredMenuZIndex } from '../hooks/useAnchoredMenu';
 import { useCalendarMonth } from './useCalendarMonth';
 import { FOCUSABLE_SELECTOR } from '../hooks/useFocusTrap';
 import './DatePicker.css';
@@ -47,7 +47,7 @@ function buildYMOptions(viewY, 연월이름, min, max) {
     }
     return opts;
 }
-export default function DatePicker({ value, onChange, size = 48, min, max, disabled, placeholder: placeholderProp, className, }) {
+export default function DatePicker({ value, onChange, size = 48, min, max, disabled, placeholder: placeholderProp, className, today, }) {
     const { t } = useTranslation();
     /* 기본 안내 문구도 사전에서 — 예전에는 '날짜 선택' 이 박혀 있어 영어 화면에서도 한국어였다.
        달력 판의 이름(`datePicker.chooseDate`)과 같은 말이라 같은 열쇠를 쓴다. */
@@ -57,23 +57,33 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
        진작 `calendar.dow` 를 쓰고 있었고, 사전에는 영어(`Sun`·`Mon`…)도 들어 있었다. */
     const DOW = useMemo(() => t('calendar.dow', { returnObjects: true }), [t]);
     // 오늘 표시·열 때 포커스는 KST 의 날 — 기기 달력이면 해외 기기에서 하루 어긋나 min=오늘 달력이 앞 달로 열렸다
-    const 오늘ISO = getTodayKst();
-    const { viewY, viewM, prevMonth, nextMonth, setViewYM } = useCalendarMonth(value);
-    const computeStyle = useCallback((rect) => {
-        const spaceBelow = window.innerHeight - rect.bottom;
-        const dropdownH = 300;
+    const 오늘ISO = todayYmdOr(today);
+    const { viewY, viewM, prevMonth, nextMonth, setViewYM } = useCalendarMonth(value, today);
+    const panelId = useId();
+    const computeStyle = useCallback((rect, trigger) => {
+        const vh = window.innerHeight;
+        const vw = window.innerWidth;
+        /* 판의 실제 크기 — 열린 뒤에 재므로 있다. 없으면(첫 계산 전) 어림값 */
+        const 판 = typeof document !== 'undefined' ? document.getElementById(panelId) : null;
+        const dropdownH = 판?.offsetHeight || 300;
+        const 판폭 = Math.max(rect.width, 판?.offsetWidth || 0, 260);
+        const spaceBelow = vh - rect.bottom;
         const above = spaceBelow < dropdownH && rect.top > dropdownH;
+        /* **창 안으로 조인다** — 스크롤을 따라 다시 잴 때 트리거가 화면 밖으로 나가면 달력이 창 위·아래 밖까지 따라가
+           고를 수 없었다. 판이 창보다 크면 위 여백에 붙인다. */
+        const 여백 = 8;
+        const 조이기 = (v, 최대) => Math.min(Math.max(여백, v), Math.max(여백, 최대));
         return {
             position: 'fixed',
-            left: rect.left,
+            left: 조이기(rect.left, vw - 판폭 - 여백),
             width: rect.width,
             minWidth: 260,
             ...(above
-                ? { bottom: window.innerHeight - rect.top + 6 }
-                : { top: rect.bottom + 6 }),
-            zIndex: 9999,
+                ? { bottom: 조이기(vh - rect.top + 6, vh - dropdownH - 여백) }
+                : { top: 조이기(rect.bottom + 6, vh - dropdownH - 여백) }),
+            zIndex: anchoredMenuZIndex(trigger),
         };
-    }, []);
+    }, [panelId]);
     const { open, setOpen, toggle, style: dropdownStyle, triggerRef, menuRef } = useAnchoredMenu({
         computeStyle,
         onScroll: 'reposition',
@@ -230,7 +240,7 @@ export default function DatePicker({ value, onChange, size = 48, min, max, disab
     const iconSize = size === 64 ? 20 : size === 40 ? 16 : 18;
     const ymOptions = buildYMOptions(viewY, (year, month) => t('calendar.yearMonth', { year, month, defaultValue: '{{year}}년 {{month}}월' }), min, max);
     const ymValue = `${viewY}-${String(viewM + 1).padStart(2, '0')}`;
-    const dropdown = open ? createPortal(_jsxs("div", { ref: menuRef, className: "date-picker__dropdown", style: dropdownStyle, "data-tooltip-ignore": true, role: "dialog", "aria-label": t('datePicker.chooseDate', '날짜 선택'), tabIndex: -1, children: [_jsxs("div", { className: "date-picker__nav", children: [_jsx("button", { type: "button", className: "date-picker__nav-btn", onClick: prevMonth, "aria-label": t('calendar.prevMonth', '이전 달'), children: _jsx(ChevronLeft, { size: 16, strokeWidth: 2 }) }), _jsx(Dropdown, { className: "date-picker__nav-dropdown", ariaLabel: t('datePicker.selectYearMonth', '연월 선택'), options: ymOptions, value: ymValue, onChange: (v) => {
+    const dropdown = open ? createPortal(_jsxs("div", { ref: menuRef, id: panelId, className: "date-picker__dropdown", style: dropdownStyle, "data-tooltip-ignore": true, role: "dialog", "aria-label": t('datePicker.chooseDate', '날짜 선택'), tabIndex: -1, children: [_jsxs("div", { className: "date-picker__nav", children: [_jsx("button", { type: "button", className: "date-picker__nav-btn", onClick: prevMonth, "aria-label": t('calendar.prevMonth', '이전 달'), children: _jsx(ChevronLeft, { size: 16, strokeWidth: 2 }) }), _jsx(Dropdown, { className: "date-picker__nav-dropdown", ariaLabel: t('datePicker.selectYearMonth', '연월 선택'), options: ymOptions, value: ymValue, onChange: (v) => {
                             const [y, m] = v.split('-');
                             setViewYM(+y, +m - 1);
                         }, block: true, size: 40 }), _jsx("button", { type: "button", className: "date-picker__nav-btn", onClick: nextMonth, "aria-label": t('calendar.nextMonth', '다음 달'), children: _jsx(ChevronRight, { size: 16, strokeWidth: 2 }) })] }), _jsxs("div", { className: "date-picker__grid", ref: 격자Ref, onKeyDown: 격자키, children: [DOW.map(d => (_jsx("div", { className: "date-picker__dow caption-1", children: d }, d))), cells.map((d, i) => {

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

@@ -9,6 +9,7 @@ export interface DropdownOption {
 export interface DropdownProps {
     options: DropdownOption[];
     value?: string;
+    /** 고른 값으로 불린다. **값이 바뀔 때만** — 이미 고른 항목을 다시 고르면 부르지 않고 메뉴만 닫는다. */
     onChange?: (value: string) => void;
     placeholder?: string;
     disabled?: boolean;

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

@@ -4,7 +4,7 @@ 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 '../hooks/useAnchoredMenu';
+import { useAnchoredMenu, anchoredMenuZIndex } from '../hooks/useAnchoredMenu';
 import './Dropdown.css';
 /** @public */
 export default function Dropdown({ options, value, onChange, placeholder, disabled = false, block = false, size = 48, error = false, className = '', ariaLabel, ariaDescribedBy }) {
@@ -13,7 +13,7 @@ export default function Dropdown({ options, value, onChange, placeholder, disabl
     const listId = useId();
     const valueId = useId();
     const containerRef = useRef(null);
-    const computeStyle = useCallback((rect) => {
+    const computeStyle = useCallback((rect, trigger) => {
         // 아래쪽 공간이 메뉴 최대 높이(260px, Dropdown.css)보다 부족하고 위쪽에 공간이
         // 있으면 위로 뒤집는다 — DatePicker.tsx의 동일 패턴
         const menuMaxH = 260;
@@ -26,7 +26,7 @@ export default function Dropdown({ options, value, onChange, placeholder, disabl
             ...(above
                 ? { bottom: window.innerHeight - rect.top + 6 }
                 : { top: rect.bottom + 6 }),
-            zIndex: 9999,
+            zIndex: anchoredMenuZIndex(trigger),
         };
     }, []);
     const { open, setOpen, toggle: rawToggle, style: menuStyle, triggerRef, menuRef } = useAnchoredMenu({
@@ -80,9 +80,11 @@ export default function Dropdown({ options, value, onChange, placeholder, disabl
         // 열린 채 disabled 가 되면(저장 중 잠금) 남은 메뉴에서 고른 것이 그대로 onChange 로 나갔다
         if (opt.disabled || disabled)
             return;
-        onChange?.(opt.value);
+        /* **값이 바뀔 때만 onChange** — 이미 고른 것을 다시 고르면 닫기만 한다(2026-09-15 결정. SegmentedControl 은 다시 누름도 부른다) */
+        if (opt.value !== value)
+            onChange?.(opt.value);
         setOpen(false);
-    }, [onChange, setOpen, disabled]);
+    }, [onChange, setOpen, disabled, value]);
     // 막히면 열린 메뉴도 닫는다
     useEffect(() => { if (disabled)
         setOpen(false); }, [disabled, setOpen]);

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

@@ -1,5 +1,16 @@
-/** @public */
+/**
+ * @public 앱에 한 번 붙여 두는 폭죽 자리.
+ *
+ * - `active`·`trigger` 를 주면 그대로 `EffectPartyPopper` 에 넘긴다(전과 같다).
+ * - **`window` 의 `party:trigger` 이벤트를 듣는다** — `TrainingResultPopup` 이 정답률 50% 초과일 때 보낸다.
+ *   `detail` 의 `count`·`strength`·`duration` 으로 한 번 터뜨리고, 다 사라지면 걷는다. 전에는 아무도 이 이벤트를
+ *   안 들어 결과 창의 폭죽이 한 번도 안 났다. 움직임 최소화(prefers-reduced-motion: reduce)면
+ *   `EffectPartyPopper` 가 그리지 않는다. 보내는 쪽이 한 틱 미뤄 보내 StrictMode 에서도 한 번만 온다.
+ * - 이 자리가 앱에 없으면 이벤트는 아무 일도 안 한다.
+ */
 export default function EffectPartyPopperHost({ trigger, active }: {
+    /** 값이 바뀌면 다시 터진다 — EffectPartyPopper 에 그대로 넘긴다. */
     trigger?: number;
+    /** true 인 동안 그린다 — EffectPartyPopper 에 그대로 넘긴다. 이벤트로 터지는 폭죽과는 따로다. */
     active?: boolean;
 }): import("react").JSX.Element;

package/dist/packages/core/src/components/Effect/EffectPartyPopperHost.js

@@ -1,13 +1,30 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
 import EffectPartyPopper from "./EffectPartyPopper";
-/** @public */
+const 수 = (v) => (typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : undefined);
+/**
+ * @public 앱에 한 번 붙여 두는 폭죽 자리.
+ *
+ * - `active`·`trigger` 를 주면 그대로 `EffectPartyPopper` 에 넘긴다(전과 같다).
+ * - **`window` 의 `party:trigger` 이벤트를 듣는다** — `TrainingResultPopup` 이 정답률 50% 초과일 때 보낸다.
+ *   `detail` 의 `count`·`strength`·`duration` 으로 한 번 터뜨리고, 다 사라지면 걷는다. 전에는 아무도 이 이벤트를
+ *   안 들어 결과 창의 폭죽이 한 번도 안 났다. 움직임 최소화(prefers-reduced-motion: reduce)면
+ *   `EffectPartyPopper` 가 그리지 않는다. 보내는 쪽이 한 틱 미뤄 보내 StrictMode 에서도 한 번만 온다.
+ * - 이 자리가 앱에 없으면 이벤트는 아무 일도 안 한다.
+ */
 export default function EffectPartyPopperHost({ trigger = 0, active = false }) {
-    const ref = useRef(0);
+    const [터짐, set터짐] = useState(null);
     useEffect(() => {
-        ref.current = trigger;
-    }, [trigger]);
-    // The host orchestrates triggers and mounts the popper; it keeps minimal state
-    return _jsx(EffectPartyPopper, { active: active, trigger: trigger });
+        if (typeof window === 'undefined')
+            return;
+        const 받기 = (e) => {
+            const d = (e.detail ?? {});
+            set터짐((앞) => ({ n: (앞?.n ?? 0) + 1, count: 수(d.count), strength: 수(d.strength), duration: 수(d.duration) }));
+        };
+        window.addEventListener('party:trigger', 받기);
+        return () => window.removeEventListener('party:trigger', 받기);
+    }, []);
+    const 걷기 = useCallback(() => set터짐(null), []);
+    return (_jsxs(_Fragment, { children: [_jsx(EffectPartyPopper, { active: active, trigger: trigger }), 터짐 && (_jsx(EffectPartyPopper, { active: true, trigger: 터짐.n, count: 터짐.count, strength: 터짐.strength, duration: 터짐.duration, onComplete: 걷기 }))] }));
 }

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

@@ -7,10 +7,14 @@ export interface EmptyStateProps {
     message?: string;
     /** 메시지 아래 보조 안내(선택). message와 별도 문단으로 렌더 — 문자열 접합 오용 방지. */
     hint?: string;
+    /**
+     * 메시지 아래 단추(다시 시도 등). `onClick` 이 **약속(Promise)을 돌려주면 끝날 때까지(성공·실패 모두) 단추를 막는다** —
+     * 두 번 눌러 요청이 두 번 나가지 않게.
+     */
     action?: {
         label: string;
         icon?: string;
-        onClick: () => void;
+        onClick: () => void | Promise<unknown>;
     };
     /** 표 안의 빈 행처럼 좁은 자리에 넣을 때 위아래 여백을 줄인다. */
     compact?: boolean;

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

@@ -1,9 +1,12 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../utils/cx';
 import './EmptyState.css';
 import Icon from './Icon';
+import { usePendingPress } from '../hooks/usePendingPress';
 export default function EmptyState({ icon, emoji, title, message, hint, action, compact, className }) {
+    const { pending, press } = usePendingPress(action?.onClick);
     return (_jsxs("div", { className: cx('empty-state', compact && 'empty-state--compact', className), children: [emoji && _jsx("span", { className: "empty-state__emoji", children: emoji }), icon && _jsx(Icon, { icon: icon, className: "empty-state__icon" }), title && _jsx("p", { className: "empty-state__title body-2", children: title }), message && _jsx("p", { className: "empty-state__message body-3", children: message }), hint && _jsx("p", { className: "empty-state__hint caption-1", children: hint }), action && (
             // type="button" — 없으면 폼 안에서 누르는 순간 폼이 제출된다
-            _jsxs("button", { type: "button", className: "empty-state__action button button40 button40--bar button--variant-main button--align-center button--shape-rounded", onClick: action.onClick, children: [action.icon && _jsx(Icon, { icon: action.icon, className: "button__icon" }), _jsx("span", { className: "button__label button-1", children: action.label })] }))] }));
+            _jsxs("button", { type: "button", className: "empty-state__action button button40 button40--bar button--variant-main button--align-center button--shape-rounded", onClick: press, disabled: pending, "aria-busy": pending || undefined, children: [action.icon && _jsx(Icon, { icon: action.icon, className: "button__icon" }), _jsx("span", { className: "button__label button-1", children: action.label })] }))] }));
 }

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

@@ -9,8 +9,11 @@ export interface ErrorStateProps {
     /** 보조 안내(선택). */
     hint?: string;
     icon?: string;
-    /** 다시 시도 콜백 — 지정 시 '다시 시도' 버튼 노출. */
-    onRetry?: () => void;
+    /**
+     * 다시 시도 콜백 — 지정 시 '다시 시도' 버튼 노출.
+     * **약속(Promise)을 돌려주면 끝날 때까지(성공·실패 모두) 단추를 막는다** — 느린 다시 불러오기에서 두 번 눌러 요청이 두 번 나가지 않게.
+     */
+    onRetry?: () => void | Promise<unknown>;
     /** 재시도 버튼 라벨(미지정 시 공용 기본). */
     retryLabel?: string;
     className?: string;

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

@@ -5,9 +5,11 @@ import { cx } from '../utils/cx';
 import './EmptyState.css';
 import './ErrorState.css';
 import Icon from './Icon';
+import { usePendingPress } from '../hooks/usePendingPress';
 export default function ErrorState({ message, hint, icon = 'triangle-alert', onRetry, retryLabel, className }) {
     const { t } = useTranslation();
+    const { pending, press } = usePendingPress(onRetry);
     return (_jsxs("div", { className: cx('empty-state', 'error-state', className), role: "alert", children: [_jsx(Icon, { icon: icon, className: "empty-state__icon error-state__icon" }), _jsx("p", { className: "empty-state__message body-3", children: message ?? t('common.errorState.message', { defaultValue: '불러오지 못했습니다.' }) }), hint && _jsx("p", { className: "empty-state__hint caption-1", children: hint }), onRetry && (_jsxs("button", { 
                 // type="button" — 없으면 폼 안에서 다시 시도를 누르는 순간 폼이 제출된다
-                type: "button", className: "empty-state__action button button40 button40--bar button--variant-main button--align-center button--shape-rounded", onClick: onRetry, children: [_jsx(Icon, { icon: "rotate-cw", className: "button__icon" }), _jsx("span", { className: "button__label button-1", children: retryLabel ?? t('common.errorState.retry', { defaultValue: '다시 시도' }) })] }))] }));
+                type: "button", className: "empty-state__action button button40 button40--bar button--variant-main button--align-center button--shape-rounded", onClick: press, disabled: pending, "aria-busy": pending || undefined, children: [_jsx(Icon, { icon: "rotate-cw", className: "button__icon" }), _jsx("span", { className: "button__label button-1", children: retryLabel ?? t('common.errorState.retry', { defaultValue: '다시 시도' }) })] }))] }));
 }

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

@@ -1,7 +1,15 @@
 import './FileUpload.css';
 /** @public */
 export interface FileUploadProps {
-    /** 파일 선택(드래그·드롭·클릭) 시 호출. 선택된 File[]을 그대로 전달 — 업로드/네트워크는 호출부 책임 */
+    /**
+     * 파일 선택(드래그·드롭·클릭) 시 호출 — 업로드/네트워크는 호출부 책임. accept·multiple 로 거른 뒤 부른다.
+     *
+     * - **비제어(`files` 없음)**: 늘 **지금 보이는 전체 목록**을 넘긴다 — multiple 이면 앞서 고른 것 + 새로 고른 것,
+     *   아니면 새로 고른 하나. `onRemove` 가 없으면 목록에서 뺄 때도 줄어든 전체 목록으로 부른다.
+     * - **제어(`files` 줌)**: **새로 고른 것만** 넘긴다 — 목록에 합치는 일은 부모가 한다(뺄 때는 `onRemove`).
+     *
+     * 이 함수가 던져도 같은 파일을 다시 고를 수 있다(입력 값은 늘 비운다).
+     */
     onFilesSelected?: (files: File[]) => void;
     /** input accept 속성 (예: "image/*", ".pdf,.docx") */
     accept?: string;

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

@@ -83,8 +83,14 @@ export default function FileUpload({ onFilesSelected, accept, multiple = false,
         applyFiles(e.dataTransfer.files);
     };
     const handleInputChange = (e) => {
-        applyFiles(e.target.files);
-        e.target.value = '';
+        const input = e.target;
+        /* 비우기는 finally 에서 — onFilesSelected 가 던지면 값이 남아, 같은 파일을 다시 골라도 change 가 안 나 다시 시도할 수 없었다 */
+        try {
+            applyFiles(input.files);
+        }
+        finally {
+            input.value = '';
+        }
     };
     const handleBrowseClick = () => {
         if (disabled)

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

@@ -1,9 +1,11 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import Button from './Button';
 import DescriptionTooltip from './Tooltip/DescriptionTooltip';
 import { useHoverAnchor } from '../hooks/useHoverAnchor';
+import { isTouchPointer, recentlyTouched, useTouchToggle } from '../hooks/touchToggle';
 /**
  * FilterPanel 섹션 라벨 옆에 붙이는 "?" 버튼 — 마우스를 올리면 DescriptionTooltip으로 설명을 보여준다.
  * @public
@@ -11,5 +13,15 @@ import { useHoverAnchor } from '../hooks/useHoverAnchor';
 export default function FilterSectionInfo({ title, items }) {
     const { t } = useTranslation();
     const { anchorRect, openAt, close: handleClose } = useHoverAnchor();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { htmlType: "button", size: 24, type: "dot", icon: "info", variant: "transparent-gray", useBorder: false, selected: !!anchorRect, ariaLabel: t('common.info', '설명'), onPointerEnter: (e) => openAt(e.currentTarget), onPointerLeave: handleClose, onFocus: (e) => openAt(e.currentTarget), onBlur: handleClose }), anchorRect && (_jsx(DescriptionTooltip, { title: title, items: items, showIndex: items.length > 1, anchorRect: anchorRect, onClose: handleClose }))] }));
+    /* 터치 — 톡하면 열렸다 떼자마자 닫혀 설명을 읽을 수 없었다. 톡으로 열고 닫는다(마우스는 그대로).
+       트리거를 품는 자리 — 상자를 만들지 않는(display: contents) 껍데기라 배치는 그대로다. */
+    const 자리Ref = useRef(null);
+    const 톡토글 = useTouchToggle(!!anchorRect, (next, el) => { if (next && el)
+        openAt(자리Ref.current?.querySelector('button') ?? el);
+    else
+        handleClose(); }, 자리Ref);
+    return (_jsxs("span", { ref: 자리Ref, style: { display: 'contents' }, children: [_jsx(Button, { htmlType: "button", size: 24, type: "dot", icon: "info", variant: "transparent-gray", useBorder: false, selected: !!anchorRect, ariaLabel: t('common.info', '설명'), onPointerEnter: (e) => { if (!isTouchPointer(e))
+                    openAt(e.currentTarget); }, onPointerLeave: (e) => { if (!isTouchPointer(e))
+                    handleClose(); }, onClick: (e) => { 톡토글.touchPress(e.currentTarget); }, onFocus: (e) => { if (!recentlyTouched())
+                    openAt(e.currentTarget); }, onBlur: handleClose }), anchorRect && (_jsx(DescriptionTooltip, { title: title, items: items, showIndex: items.length > 1, anchorRect: anchorRect, onClose: handleClose }))] }));
 }

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

@@ -7,12 +7,13 @@ import BottomNav from './BottomNav';
 import Button from './Button';
 import Badge from './Badge';
 import MenuTooltip from './Tooltip/MenuTooltip';
-import { useAnchoredMenu } from '../hooks/useAnchoredMenu';
+import { useAnchoredMenu, anchoredMenuZIndex } from '../hooks/useAnchoredMenu';
 import { createPortal } from 'react-dom';
 // 메뉴 표면(.tooltip-content) 정의 — Tooltip.tsx를 거치지 않고 클래스만 쓰므로 명시적으로.
 import './Tooltip/Tooltip.css';
 import SideNav from './SideNav';
 import { resolveAssetUrl } from '../utils';
+import { isSafeOpenHref } from '../utils/safeHref';
 import LogoSvg from '../logo/Logo_speechear_kr.svg';
 import LogoManagerSvg from '../logo/Logo_speechearManager_kr.svg';
 import SymbolSvg from '../logo/Symbol_speechear.svg';
@@ -64,8 +65,10 @@ export default function Header({ activeKey, onChange, items, malgwiItems: _malgw
         if (it?.disabled)
             return;
         // SideNav 와 같다 — href 가 있으면 앱 안 이동이 아니라 새 창으로 연다.
+        // http(s)·상대 경로·mailto·tel 만 연다 — javascript: 같은 주소가 그대로 열렸다
         if (it?.href) {
-            window.open(it.href, '_blank', 'noopener,noreferrer');
+            if (isSafeOpenHref(it.href))
+                window.open(it.href, '_blank', 'noopener,noreferrer');
             return;
         }
         onChange?.(key);
@@ -95,14 +98,14 @@ export default function Header({ activeKey, onChange, items, malgwiItems: _malgw
     // 헤더 햄버거 — SideNav 푸터에 해당하는 유틸(알림·설정·도움말·계정·디버그)을 띄운다.
     // 데스크톱에선 SideNav 푸터에 늘 보이지만 모바일에선 그 자리가 없어, 같은 항목을
     // 하단 더보기(…)와 동일한 구성(bottomMoreItems)으로 재사용한다.
-    const computeUtilMenuStyle = useCallback((rect) => ({
+    const computeUtilMenuStyle = useCallback((rect, trigger) => ({
         position: 'fixed',
         top: rect.bottom + 8,
         right: Math.max(8, window.innerWidth - rect.right),
-        zIndex: 10000,
+        zIndex: anchoredMenuZIndex(trigger),
     }), []);
     const utilMenuId = useId();
-    const { open: utilOpen, toggle: toggleUtilMenu, close: closeUtilMenu, style: utilMenuStyle, triggerRef: utilTriggerRef, menuRef: utilMenuRef } = useAnchoredMenu({ computeStyle: computeUtilMenuStyle, onScroll: 'ignore', onResize: 'ignore' });
+    const { open: utilOpen, toggle: toggleUtilMenu, close: closeUtilMenu, style: utilMenuStyle, triggerRef: utilTriggerRef, menuRef: utilMenuRef } = useAnchoredMenu({ computeStyle: computeUtilMenuStyle, onScroll: 'ignore', onResize: 'reposition' /* 회전하면 옛 좌표에 남았다 — 다시 잰다 */ });
     const utilColumns = useMemo(() => [{
             items: bottomMoreItems.map(it => ({
                 label: it.label,

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

@@ -2,12 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import Button from './Button';
+import { formatWornDate } from '../utils/wornDate';
 import './HearingDeviceInfo.css';
 export default function HearingDeviceInfo({ devices, onAddDevice, onOpenList, onRemoveDevice }) {
     const { t } = useTranslation();
     return (_jsxs("div", { className: "hearing-device-info", children: [_jsx("div", { className: "hearing-device-info__title body-3", children: t('customers.device.title', '청각재활기기') }), _jsx("div", { className: "hearing-device-info__row", children: ['좌', '우'].map(side => {
                     const d = devices[side];
                     const sideLabel = side === '좌' ? t('device.direction.left', '좌') : t('device.direction.right', '우');
-                    return (_jsxs("div", { className: "hearing-device-info__side", children: [_jsx("span", { className: "hearing-device-info__side-label body-3", children: sideLabel }), d ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "hearing-device-info__device", children: [_jsx("span", { className: "hearing-device-info__device-name body-3", children: d.brand }), _jsxs("span", { className: "hearing-device-info__device-detail", children: [d.device, d.fitType ? ` · ${d.fitType}` : ''] }), d.productName && _jsx("span", { className: "hearing-device-info__device-product", children: d.productName }), _jsxs("span", { className: "hearing-device-info__device-date", children: [d.wornYear, ".", d.wornMonth, ".", d.wornDay] })] }), _jsxs("div", { className: "hearing-device-info__actions", children: [_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "plus", onClick: () => onAddDevice(side), showTooltipInfo: t('device.addNew', '새 기기 추가'), ariaLabel: t('device.addNew', '새 기기 추가') }), _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "list", onClick: () => onOpenList(side), showTooltipInfo: t('device.selectFromList', '목록에서 선택'), ariaLabel: t('device.selectFromList', '목록에서 선택') }), _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "danger", onClick: () => onRemoveDevice(side), showTooltipInfo: t('device.removeDevice', '착용 해제'), ariaLabel: t('device.removeDevice', '착용 해제') })] })] })) : (_jsxs("div", { className: "hearing-device-info__actions", children: [_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "plus", onClick: () => onAddDevice(side), showTooltipInfo: t('device.addNew', '새 기기 추가'), ariaLabel: t('device.addNew', '새 기기 추가') }), _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "list", onClick: () => onOpenList(side), showTooltipInfo: t('device.selectFromList', '목록에서 선택'), ariaLabel: t('device.selectFromList', '목록에서 선택') })] }))] }, side));
+                    return (_jsxs("div", { className: "hearing-device-info__side", children: [_jsx("span", { className: "hearing-device-info__side-label body-3", children: sideLabel }), d ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "hearing-device-info__device", children: [_jsx("span", { className: "hearing-device-info__device-name body-3", children: d.brand }), _jsxs("span", { className: "hearing-device-info__device-detail", children: [d.device, d.fitType ? ` · ${d.fitType}` : ''] }), d.productName && _jsx("span", { className: "hearing-device-info__device-product", children: d.productName }), formatWornDate(d.wornYear, d.wornMonth, d.wornDay) && _jsx("span", { className: "hearing-device-info__device-date", children: formatWornDate(d.wornYear, d.wornMonth, d.wornDay) })] }), _jsxs("div", { className: "hearing-device-info__actions", children: [_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "plus", onClick: () => onAddDevice(side), showTooltipInfo: t('device.addNew', '새 기기 추가'), ariaLabel: t('device.addNew', '새 기기 추가') }), _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "list", onClick: () => onOpenList(side), showTooltipInfo: t('device.selectFromList', '목록에서 선택'), ariaLabel: t('device.selectFromList', '목록에서 선택') }), _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "x", variant: "danger", onClick: () => onRemoveDevice(side), showTooltipInfo: t('device.removeDevice', '착용 해제'), ariaLabel: t('device.removeDevice', '착용 해제') })] })] })) : (_jsxs("div", { className: "hearing-device-info__actions", children: [_jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "plus", onClick: () => onAddDevice(side), showTooltipInfo: t('device.addNew', '새 기기 추가'), ariaLabel: t('device.addNew', '새 기기 추가') }), _jsx(Button, { htmlType: "button", size: 40, type: "dot", icon: "list", onClick: () => onOpenList(side), showTooltipInfo: t('device.selectFromList', '목록에서 선택'), ariaLabel: t('device.selectFromList', '목록에서 선택') })] }))] }, side));
                 }) })] }));
 }

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

@@ -6,6 +6,7 @@ export interface IconProps {
      * 아이콘 이름(lucide 이름 또는 파일 경로), 또는 그려 넣을 노드.
      *
      * 이름은 `icon` 이다 — `name` 이 아니다. 주지 않으면 아무것도 그리지 않는다.
+     * `.svg` 경로는 파일 이름이 lucide 이름이면 lucide 로 그린다(`'/images/brand/check.svg'` → lucide `check`, 의도한 동작 — useLucideIcon 참고).
      */
     icon?: ReactNode | string;
     label?: ReactNode;
@@ -33,7 +34,7 @@ export interface IconProps {
     svgClassName?: string;
     /** 감싸는 `<span>` 의 인라인 스타일. */
     wrapperStyle?: CSSProperties;
-    /** 한 변 픽셀. 크기는 클래스가 아니라 이것으로 정한다. */
+    /** 한 변 픽셀. 크기는 클래스가 아니라 이것으로 정한다. lucide·마스크·이미지(파일 경로) 모두에 적용된다. */
     size?: number;
 }
 /** @public */

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

@@ -21,9 +21,12 @@ export default function Icon(props) {
     const { iconToUse, mode, svgText, blobUrl } = useIcon(iconStr);
     // ────────────────────────────────────────────────────────────────────────────
     const createWrapper = (children, extraProps = {}) => (_jsx("span", { className: wrapperClass, style: wrapperStyle, ...extraProps, children: children }));
+    /* 이미지(파일 경로)에도 size 를 한 변 픽셀로 준다 — 전에는 lucide·마스크만 size 를 읽어 PNG·<img> 로 그린 SVG 는
+       원본 크기로 떴다. 줄 때만 박고(object-fit: contain 으로 비율 유지), 안 주면 지금처럼 클래스·원본 크기. */
+    const 이미지크기 = typeof size === 'number' ? { width: size, height: size, objectFit: 'contain' } : null;
     const createImage = (src, extraProps = {}) => (
     // 글자가 아닌 label(요소)은 alt 로 못 쓴다 — String() 하면 "[object Object]" 가 읽혔다
-    _jsx("img", { src: src, alt: typeof label === 'string' ? label : (typeof label === 'number' ? String(label) : ''), className: defaultImgClass, ...extraProps }));
+    _jsx("img", { src: src, alt: typeof label === 'string' ? label : (typeof label === 'number' ? String(label) : ''), className: defaultImgClass, ...extraProps, style: 이미지크기 ? { ...extraProps.style, ...이미지크기 } : extraProps.style }));
     if (!icon)
         return null;
     if (typeof icon !== 'string')

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

@@ -39,6 +39,34 @@
   width: 0%;
   transition: width 220ms cubic-bezier(.2,.8,.2,1);
 }
+/* 값을 모르는 막대 — 짧은 채움이 오간다 */
+.loader-bar--indeterminate .loader-bar__inner {
+  width: 40%;
+  animation: loader-bar-indeterminate 1.4s ease-in-out infinite;
+}
+@keyframes loader-bar-indeterminate {
+  0%   { transform: translateX(-150%); }
+  100% { transform: translateX(400%); }
+}
+
+/* '동작 줄이기' — 전역 규칙(styles.css)이 반복을 1 회로 줄여 **스피너가 멈추고**, 값 모르는 막대는 40% 채움으로 굳어
+   "40% 됐다" 로 보였다.
+   · 스피너는 규칙의 예외로 **천천히 한 방향으로만** 돈다(길이가 출렁이는 dash 는 끈다) — 멈춘 원은 고장으로 보인다.
+   · 값 모르는 막대는 움직이지 않는 **전체 폭** 으로 둔다(얼마나 됐다는 뜻을 싣지 않는다). */
+@media (prefers-reduced-motion: reduce) {
+  .loader-spinner__svg {
+    animation-duration: 2.4s !important;
+    animation-iteration-count: infinite !important;
+  }
+  .loader-spinner__fg {
+    animation: none !important;
+  }
+  .loader-bar--indeterminate .loader-bar__inner {
+    width: 100%;
+    animation: none !important;
+    transform: none;
+  }
+}
 
 @keyframes core-loader-rotate {
   100% { transform: rotate(360deg); }

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

@@ -5,7 +5,11 @@ export interface LoaderProps {
     variant?: 'spinner' | 'bar';
     /** 스피너 크기(px 또는 CSS 값). `variant='spinner'`일 때 적용됩니다. */
     size?: number | string;
-    /** 진행률(0–100). `variant='bar'`일 때 적용됩니다. */
+    /**
+     * 진행률(0–100). `variant='bar'`일 때 적용됩니다.
+     * 주지 않거나 `null` 이면 **얼마나 됐는지 모르는(indeterminate)** 막대 — 짧은 채움이 오가고, 낭독기에는 값(aria-valuenow) 없이
+     * "진행 중" 으로만 알린다('동작 줄이기' 에서는 움직이지 않는 전체 폭 막대).
+     */
     progress?: number | null;
     /** 접근성 이름(aria-label). 화면에 글자로 나오지는 않는다. 안 주면 i18n 의 `loader.loading`(기본 'Loading'). */
     label?: string;

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

@@ -14,8 +14,10 @@ export default function Loader(props) {
     // 기본 이름이 영문 고정이라 한국어 화면에서도 낭독기가 'Loading' 으로 읽었다 — 사전을 거친다.
     const name = label || t('loader.loading', 'Loading');
     if (variant === 'bar') {
-        const pct = Math.max(0, Math.min(100, Number(progress) || 0));
-        return (_jsx("div", { className: "loader-bar", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, "aria-label": name, children: _jsx("div", { className: "loader-bar__inner", style: { width: `${pct}%` } }) }));
+        /* 값을 모르면 0% 로 읽히고(빈 막대) 멈춘 채 보였다 — 값 없이 진행 중으로 둔다 */
+        const 모름 = progress == null || !Number.isFinite(Number(progress));
+        const pct = 모름 ? 0 : Math.max(0, Math.min(100, Number(progress)));
+        return (_jsx("div", { className: `loader-bar${모름 ? ' loader-bar--indeterminate' : ''}`, role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": 모름 ? undefined : pct, "aria-label": name, children: _jsx("div", { className: "loader-bar__inner", style: 모름 ? undefined : { width: `${pct}%` } }) }));
     }
     const dim = typeof size === 'number' ? `${size}px` : size;
     return (_jsxs("div", { className: "loader-spinner", style: { width: dim, height: dim }, role: "status", "aria-label": name, children: [_jsx("span", { style: 보이지않게, children: name }), _jsxs("svg", { className: "loader-spinner__svg", viewBox: "0 0 50 50", width: size, height: size, children: [_jsx("circle", { className: "loader-spinner__bg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4" }), _jsx("circle", { className: "loader-spinner__fg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "4", strokeLinecap: "round" })] })] }));

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

@@ -18,7 +18,7 @@ export interface NoticeBoxProps {
     children?: ReactNode;
     /** 스타일 변형. `'default'` | `'dashed'` | `'important'` */
     variant?: 'default' | 'dashed' | 'important' | string;
-    /** 닫기(×) 버튼 표시 여부 */
+    /** 닫기(×) 버튼 표시 여부 — `notices` 모드에서도 상자 전체를 닫는다 */
     dismissible?: boolean;
     className?: string;
 }

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

@@ -1,21 +1,30 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
+import { moveFocusOutside } from '../hooks/focusReturn';
 import { useTranslation } from 'react-i18next';
 import './NoticeBox.css';
 /** @public */
 export default function NoticeBox({ title = '', lines = [], notices = null, children, variant = 'default', dismissible = false, className = '', }) {
     const { t } = useTranslation();
     const [dismissed, setDismissed] = useState(false);
-    const handleDismiss = useCallback(() => setDismissed(true), []);
+    const rootRef = useRef(null);
+    /* 닫기 단추에 있던 포커스가 상자와 함께 사라져 body 로 떨어졌다 — 떼기 전에 상자 앞의 포커스 받을 곳으로 옮긴다 */
+    const handleDismiss = useCallback(() => {
+        const root = rootRef.current;
+        if (root && root.contains(document.activeElement))
+            moveFocusOutside(root);
+        setDismissed(true);
+    }, []);
     if (dismissed)
         return null;
     const baseClass = `notice-box notice-box--${variant} body-2 ${className}`.trim();
+    const 닫기단추 = dismissible && (_jsx("button", { 
+        // type="button" — 없으면 폼 안에서 닫기를 누르는 순간 폼이 제출된다
+        type: "button", className: "notice-box__dismiss", onClick: handleDismiss, "aria-label": t('common.close', '닫기'), children: "\u00D7" }));
     if (notices && Array.isArray(notices) && notices.length) {
-        return (_jsx("div", { className: baseClass, role: "note", children: notices.map((n, idx) => (_jsxs("div", { className: "notice-box__inner", children: [n.title ? _jsx("span", { className: "notice-box__title body-3", children: n.title }) : null, _jsx("div", { className: "notice-box__body", children: n.lines && n.lines.length ? (_jsx("div", { children: n.lines.map((l, i) => (_jsx("span", { className: "notice-box__line body-3", children: l }, i))) })) : (n.children ?? null) })] }, idx))) }));
+        return (_jsxs("div", { className: baseClass, role: "note", children: [notices.map((n, idx) => (_jsxs("div", { className: "notice-box__inner", children: [n.title ? _jsx("span", { className: "notice-box__title body-3", children: n.title }) : null, _jsx("div", { className: "notice-box__body", children: n.lines && n.lines.length ? (_jsx("div", { children: n.lines.map((l, i) => (_jsx("span", { className: "notice-box__line body-3", children: l }, i))) })) : (n.children ?? null) })] }, idx))), 닫기단추] }));
     }
     const content = (title || lines.length) ? (_jsxs("div", { className: "notice-box__inner", children: [title ? _jsx("span", { className: "notice-box__title body-1", children: title }) : null, _jsx("div", { className: "notice-box__body", children: lines.length ? (_jsx("ul", { children: lines.map((l, i) => (_jsx("li", { className: "notice-box__line", children: l }, i))) })) : children })] })) : (_jsx("div", { className: "notice-box__inner", children: children }));
-    return (_jsxs("div", { className: baseClass, role: "note", children: [content, dismissible && (_jsx("button", { 
-                // type="button" — 없으면 폼 안에서 닫기를 누르는 순간 폼이 제출된다
-                type: "button", className: "notice-box__dismiss", onClick: handleDismiss, "aria-label": t('common.close', '닫기'), children: "\u00D7" }))] }));
+    return (_jsxs("div", { ref: rootRef, className: baseClass, role: "note", children: [content, 닫기단추] }));
 }

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

@@ -9,6 +9,7 @@ import Dropdown from './Dropdown';
 import Button from './Button';
 import Badge from './Badge';
 import { deviceKindVariant } from '../utils/deviceKind';
+import { formatWornDate } from '../utils/wornDate';
 /* 기기 종류 배지 이름은 지금 언어로 — 값은 저장된 한국어(보청기·인공와우)라 그대로 보이면 영어 화면에도 한국어였다.
    색(deviceKindVariant)은 저장값으로 가른다. 모르는 값은 그대로 */
 const 기기종류열쇠 = { '보청기': 'hearingAid', '인공와우': 'cochlearImplant' };
@@ -159,6 +160,6 @@ export function PanelRowDevice({ devices, onRelease, emptyLabel }) {
                                (잠시 안 씀·수리 보냄 같은 경우가 실제로 있다). */
                             _jsx(Button, { htmlType: "button", size: 32, type: "dot", icon: "x", 
                                 // 좌·우 두 단추가 같은 이름이라 어느 쪽 기기를 내리는지 안 들렸다 — 이름에만 쪽을 붙인다(툴팁은 그대로)
-                                ariaLabel: `${sideLabel} ${t('customers.device.unwear', '착용 해제')}`, showTooltipInfo: t('customers.device.unwear', '착용 해제'), onClick: () => onRelease(side) }))] }), d ? (_jsxs("div", { className: "panel-row__device-info", children: [_jsxs("span", { className: "panel-row__device-kind", children: [d.device && _jsx(Badge, { size: "small", variant: deviceKindVariant(d.device), fill: "soft", label: 기기종류이름(d.device, t) }), 메타(d) && _jsx("span", { className: "panel-row__device-detail body-3", children: 메타(d) })] }), _jsx("span", { className: "panel-row__device-name body-2b", children: d.productName || d.brand }), _jsx("span", { className: "panel-row__device-date caption-1", children: t('customers.device.wornSince', { date: `${d.wornYear}.${d.wornMonth}.${d.wornDay}` }) })] })) : (_jsx("span", { className: "panel-row__device-empty body-3", children: emptyLabel ?? t('customers.device.notRegistered', '미등록') }))] }, side));
+                                ariaLabel: `${sideLabel} ${t('customers.device.unwear', '착용 해제')}`, showTooltipInfo: t('customers.device.unwear', '착용 해제'), onClick: () => onRelease(side) }))] }), d ? (_jsxs("div", { className: "panel-row__device-info", children: [_jsxs("span", { className: "panel-row__device-kind", children: [d.device && _jsx(Badge, { size: "small", variant: deviceKindVariant(d.device), fill: "soft", label: 기기종류이름(d.device, t) }), 메타(d) && _jsx("span", { className: "panel-row__device-detail body-3", children: 메타(d) })] }), _jsx("span", { className: "panel-row__device-name body-2b", children: d.productName || d.brand }), formatWornDate(d.wornYear, d.wornMonth, d.wornDay) && (_jsx("span", { className: "panel-row__device-date caption-1", children: t('customers.device.wornSince', { date: formatWornDate(d.wornYear, d.wornMonth, d.wornDay) }) }))] })) : (_jsx("span", { className: "panel-row__device-empty body-3", children: emptyLabel ?? t('customers.device.notRegistered', '미등록') }))] }, side));
         }) }));
 }

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

@@ -25,11 +25,17 @@ export interface PassCardProps {
     endDate?: string;
     /**
      * 전환으로 일시정지되어 남은 시간(초)이 알려진 경우에만 지정.
-     * 지정하면 우측 하단에 "사용량%·남은 시간"을 이 값 기준으로 표시하고,
+     * 지정하면 우측 하단에 "사용량%·남은 시간"을 이 값 기준으로 표시하고(`product` 가 없어 전체 기간을 모르면 남은 시간만),
      * 지정 없이 state==='active'면 endDate에서 카드가 스스로 계산한다(pending인데
      * 이 값도 없으면 = 한 번도 안 쓴 새 이용권 → 전체 기간이 그대로 남은 것으로 표시).
      */
     remainingSeconds?: number;
+    /**
+     * 선택. true 면 종료일 **당일(KST)까지** 쓸 수 있는 이용권으로 보고 남은 날에 그 날을 넣는다 — 마지막 날이 "0초 남음·0%" 가
+     * 아니라 "1일 남음" 이 된다(말귀 개인 이용권: 종료일까지 이용). 기본 false(종료일 0시에 끝나는 것으로 센다 — 지금 동작).
+     * `endDate` 로 셀 때만 쓴다(`remainingSeconds` 를 주면 그 값 그대로).
+     */
+    endInclusive?: boolean;
     state?: PassCardState;
     /** @deprecated 읽지 않는다 — 대기 순서는 카드에 그리지 않는다. 넘겨도 화면은 같다. */
     queueIndex?: number;
@@ -62,4 +68,4 @@ export interface PassCardProps {
     onDelete?: () => void;
 }
 /** @public */
-export default function PassCard({ product, showPrice, plan, type, endDate, remainingSeconds, state, bg, bgOnly, textColor, subColor, copyrightColor, logoSrc, label, price, originalPrice, discountLabel, onUse, onRefund, onDelete }: PassCardProps): import("react").JSX.Element;
+export default function PassCard({ product, showPrice, plan, type, endDate, remainingSeconds, endInclusive, state, bg, bgOnly, textColor, subColor, copyrightColor, logoSrc, label, price, originalPrice, discountLabel, onUse, onRefund, onDelete }: PassCardProps): import("react").JSX.Element;