@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,132 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import { useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from './Button';
+import { copyText } from '../utils/clipboard';
+import './CodeBox.css';
+function toText(children) {
+    if (typeof children === 'string')
+        return children;
+    if (typeof children === 'number')
+        return String(children);
+    if (Array.isArray(children))
+        return children.map(toText).join('');
+    return '';
+}
+/** 공통 들여쓰기 제거 + 앞뒤 빈 줄 정리 */
+function dedent(input) {
+    let s = input.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+    s = s.replace(/^\n+/, '').replace(/\n+$/, '');
+    const lines = s.split('\n').map(l => l.replace(/\t/g, '  '));
+    const nonEmpty = lines.filter(l => l.trim().length > 0);
+    const minIndent = nonEmpty.length > 0
+        ? Math.min(...nonEmpty.map(l => (l.match(/^ */)?.[0].length ?? 0)))
+        : 0;
+    return lines.map(l => l.slice(minIndent)).join('\n');
+}
+const BASH_COMMANDS = new Set(['pnpm', 'npm', 'yarn', 'node', 'git', 'curl', 'docker', 'cat', 'ls', 'cd', 'rm', 'mv', 'cp', 'echo', 'export']);
+const KEYWORDS = /^(?:const|let|var|function|return|if|else|for|while|switch|case|break|import|from|export|class|new|try|catch|finally|throw|await|async|null|true|false|this|typeof|instanceof)\b/;
+/** 아주 단순한 토크나이저 — 문법 하이라이트용 */
+function tokenize(code, lang) {
+    let s = code;
+    const tokens = [];
+    const isBash = /sh|bash/.test(lang.toLowerCase());
+    const push = (type, content) => tokens.push({ type, content });
+    while (s.length > 0) {
+        const ws = s.match(/^\s+/);
+        if (ws) {
+            push('whitespace', ws[0]);
+            s = s.slice(ws[0].length);
+            continue;
+        }
+        if (!isBash && s.startsWith('//')) {
+            const idx = s.indexOf('\n');
+            const c = idx === -1 ? s : s.slice(0, idx);
+            push('comment', c);
+            s = s.slice(c.length);
+            continue;
+        }
+        if (isBash && s.startsWith('#')) {
+            const idx = s.indexOf('\n');
+            const c = idx === -1 ? s : s.slice(0, idx);
+            push('comment', c);
+            s = s.slice(c.length);
+            continue;
+        }
+        const block = s.match(/^\/\*[\s\S]*?\*\//);
+        if (block) {
+            push('comment', block[0]);
+            s = s.slice(block[0].length);
+            continue;
+        }
+        const str = s.match(/^(`(?:\\.|[^`])*`|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')/);
+        if (str) {
+            push('string', str[0]);
+            s = s.slice(str[0].length);
+            continue;
+        }
+        const num = s.match(/^\d+(?:\.\d+)?/);
+        if (num) {
+            push('number', num[0]);
+            s = s.slice(num[0].length);
+            continue;
+        }
+        const kw = s.match(KEYWORDS);
+        if (kw) {
+            push('keyword', kw[0]);
+            s = s.slice(kw[0].length);
+            continue;
+        }
+        const id = s.match(/^[A-Za-z_$][A-Za-z0-9_$-]*/);
+        if (id) {
+            const t = id[0];
+            push(isBash && BASH_COMMANDS.has(t) ? 'command' : 'identifier', t);
+            s = s.slice(t.length);
+            continue;
+        }
+        const op = s.match(/^[=+\-*/%<>!&|^~?:]+/);
+        if (op) {
+            push('operator', op[0]);
+            s = s.slice(op[0].length);
+            continue;
+        }
+        const p = s.match(/^[()[\]{};.,]/);
+        if (p) {
+            push('punctuation', p[0]);
+            s = s.slice(1);
+            continue;
+        }
+        push('other', s[0]);
+        s = s.slice(1);
+    }
+    return tokens;
+}
+/** @public 코드 스니펫 표시 + 복사 버튼 (디자인 시스템). */
+export default function CodeBox({ children, language = 'bash', title = '', showCopy = true, size = 'default', className = '' }) {
+    const { t } = useTranslation();
+    const [copied, setCopied] = useState(false);
+    const codeText = dedent(toText(children));
+    const copyTimerRef = useRef(null);
+    useEffect(() => () => { if (copyTimerRef.current)
+        clearTimeout(copyTimerRef.current); }, []);
+    const handleCopy = async () => {
+        try {
+            // 공용 copyText(execCommand 우선 → Async API 폴백, iframe/비-secure 대응).
+            const ok = await copyText(codeText);
+            if (!ok)
+                return;
+            setCopied(true);
+            // 2초 안에 재클릭하면 이전 타이머가 먼저 만료돼 "복사됨" 표시가 조기에
+            // 사라지던 문제 — 재예약 전 이전 타이머를 취소한다
+            if (copyTimerRef.current)
+                clearTimeout(copyTimerRef.current);
+            copyTimerRef.current = setTimeout(() => setCopied(false), 2000);
+        }
+        catch { /* 복사 실패 무시 */ }
+    };
+    const tokens = tokenize(codeText, language);
+    const tokenTypo = size === 'small' ? 'caption-1' : 'body-3';
+    return (_jsxs("div", { className: cx('code-box', size === 'small' ? 'code-box--small' : '', className), children: [(title || showCopy) && (_jsxs("div", { className: "code-box__header", role: "toolbar", "aria-label": t('common.codeBlock', '코드 블록'), children: [_jsx("div", { className: "code-box__title caption-1", children: title }), showCopy && (_jsx(Button, { className: "code-box__copy", size: 40, type: "dot", variant: "transparent-gray", useBorder: false, icon: copied ? 'check' : 'copy', onClick: handleCopy, ariaLabel: copied ? t('common.copied', '복사됨') : t('common.copyCode', '코드 복사') }))] })), _jsx("pre", { className: "code-box__inner", "data-lang": language, children: _jsx("code", { children: tokens.map((t, i) => (_jsx("span", { className: `code-token ${t.type} ${tokenTypo}`, children: t.content }, i))) }) })] }));
+}

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

@@ -0,0 +1,40 @@
+.color-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+}
+
+.color-picker__swatch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  transition: transform 0.12s, box-shadow 0.12s;
+}
+
+/* sizes — same scale as Button, radius matches Button's rounded shape at each size */
+.color-picker__swatch--32 { width: 32px; height: 32px; border-radius: 8px; }
+.color-picker__swatch--40 { width: 40px; height: 40px; border-radius: 10px; }
+.color-picker__swatch--48 { width: 48px; height: 48px; border-radius: 12px; }
+
+.color-picker__swatch:hover {
+  transform: scale(1.08);
+}
+
+.color-picker__swatch:focus-visible {
+  outline: 2px solid var(--color-main);
+  outline-offset: 2px;
+}
+
+.color-picker__check {
+  color: #ffffff;
+}
+
+/* svg 기본 vertical-align: baseline 때문에 span 하단에 여백이 생겨 아이콘이
+   살짝 위로 치우쳐 보이는 문제 보정 */
+.color-picker__check svg {
+  display: block;
+}

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

@@ -0,0 +1,17 @@
+import './ColorPicker.css';
+/** @public */
+export type ColorPickerSize = 32 | 40 | 48;
+/** @public */
+export interface ColorPickerProps {
+    /** 현재 선택된 색상 (hex) */
+    value?: string;
+    /** 색상 선택 콜백 */
+    onChange: (hex: string) => void;
+    /** 선택 가능한 색상 팔레트. 기본값은 디자인 시스템 브랜드 색상 */
+    palette?: string[];
+    /** 스와치 크기 — Button과 동일한 체계 (32 / 40 / 48), radius도 Button rounded와 동일하게 맞춤 */
+    size?: ColorPickerSize;
+    className?: string;
+}
+/** @public */
+export default function ColorPicker({ value, onChange, palette, size, className, }: ColorPickerProps): import("react").JSX.Element;

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

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import Icon from './Icon';
+import './ColorPicker.css';
+const CHECK_ICON_SIZE = 20;
+const DEFAULT_PALETTE = [
+    '#499cdf', // main
+    '#4dcdc0', // sub
+    '#2fae9e', // success
+    '#e6b94e', // warn
+    '#d9534f', // error
+    '#e06b68', // like
+    '#bfc7d1', // disabled
+];
+/** @public */
+export default function ColorPicker({ value, onChange, palette = DEFAULT_PALETTE, size = 40, className = '', }) {
+    const { t } = useTranslation();
+    return (_jsx("div", { className: `color-picker ${className}`.trim(), role: "group", children: palette.map(hex => {
+            const isSelected = value?.toLowerCase() === hex.toLowerCase();
+            return (_jsx("button", { type: "button", className: `color-picker__swatch color-picker__swatch--${size}`, style: { backgroundColor: hex }, onClick: () => onChange(hex), "aria-pressed": isSelected, "aria-label": isSelected ? `${hex} ${t('colorPicker.selected', '선택됨')}` : hex, children: isSelected && (_jsx(Icon, { icon: "check", size: CHECK_ICON_SIZE, className: "color-picker__check" })) }, hex));
+        }) }));
+}

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

@@ -0,0 +1,33 @@
+.company-meta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-xs);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: var(--text-caption-1-size);
+  color: var(--color-gray);
+}
+
+.company-meta__item {
+  display: flex;
+  align-items: center;
+}
+
+.company-meta__divider {
+  display: none;
+  padding-inline: var(--spacing-m);
+  color: var(--color-whiteLine);
+}
+
+@media (min-width: 640px) {
+  .company-meta {
+    flex-direction: row;
+    gap: 0;
+  }
+
+  .company-meta__divider {
+    display: inline;
+  }
+}

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

@@ -0,0 +1,14 @@
+import './CompanyMeta.css';
+/** @public */
+export interface CompanyMetaProps {
+    /** 표시할 항목들. 예: ["(주)아이해브", "대표 : 홍길동", "주소 : …"] */
+    items: readonly string[];
+    className?: string;
+}
+/**
+ * 푸터의 사업자 정보 한 줄.
+ * 좁은 화면에서는 세로로 쌓이고, 넓어지면 구분선과 함께 한 줄로 붙는다.
+ *
+ * @public
+ */
+export default function CompanyMeta({ items, className }: CompanyMetaProps): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './CompanyMeta.css';
+/**
+ * 푸터의 사업자 정보 한 줄.
+ * 좁은 화면에서는 세로로 쌓이고, 넓어지면 구분선과 함께 한 줄로 붙는다.
+ *
+ * @public
+ */
+export default function CompanyMeta({ items, className = '' }) {
+    return (_jsx("ul", { className: cx('company-meta', className), children: items.map((item, i) => (_jsxs("li", { className: "company-meta__item", children: [i > 0 ? (_jsx("span", { "aria-hidden": true, className: "company-meta__divider", children: "|" })) : null, item] }, item))) }));
+}

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

@@ -0,0 +1,47 @@
+/* 72×72 정사각 타일 — 좌상단 아이콘 + 우하단 숫자 */
+.count-tile {
+  position: relative;
+  box-sizing: border-box;
+  width: 72px;
+  height: 72px;
+  padding: 12px;
+  flex-shrink: 0;
+  border: 1px solid var(--color-darkWhite);
+  border-radius: 16px;
+  background: var(--color-deepWhite);
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.count-tile__icon {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  color: var(--color-main);
+}
+
+.count-tile__count {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  line-height: 1;
+  color: var(--color-darkGray);
+}
+
+/* 클릭 가능한 경우 호버 강조 */
+.count-tile--clickable { cursor: pointer; }
+.count-tile--clickable:hover {
+  background: var(--color-white);
+}
+
+/* 모바일 — 기본 60×60. 72px일 땐 카드 안에 4개가 못 들어가 3+1로 어정쩡하게 갈라졌다.
+   60px이면 4개(60×4 + 6×3 = 258)가 카드 안에 한 줄로 들어간다. */
+@media (max-width: 767px) {
+  .count-tile {
+    width: 60px;
+    height: 60px;
+    padding: 10px;
+    border-radius: 14px;
+  }
+  .count-tile__icon  { top: 8px; left: 8px; }
+  .count-tile__count { right: 8px; bottom: 8px; }
+}

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

@@ -0,0 +1,22 @@
+import './CountTile.css';
+import type { ReactNode, MouseEvent } from 'react';
+/** @public */
+export interface CountTileProps {
+    /** 좌측 상단 아이콘 — Lucide 아이콘 이름 또는 노드 */
+    icon: string | ReactNode;
+    /** 우측 하단 숫자 */
+    count: number | string;
+    /** 접근성 라벨 (예: 훈련 타입 이름) */
+    title?: string;
+    className?: string;
+    /** 클릭 핸들러 — 설정 시 버튼처럼 동작 */
+    onClick?: (e: MouseEvent) => void;
+    onMouseEnter?: (e: MouseEvent) => void;
+    onMouseLeave?: (e: MouseEvent) => void;
+}
+/**
+ * 72×72 정사각 타일. 좌상단에 아이콘, 우하단에 숫자를 배치한다.
+ * 훈련 카드의 타입별 문항 수 표시 등에 사용.
+ * @public
+ */
+export default function CountTile({ icon, count, title, className, onClick, onMouseEnter, onMouseLeave }: CountTileProps): import("react").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './CountTile.css';
+import Icon from './Icon';
+/**
+ * 72×72 정사각 타일. 좌상단에 아이콘, 우하단에 숫자를 배치한다.
+ * 훈련 카드의 타입별 문항 수 표시 등에 사용.
+ * @public
+ */
+export default function CountTile({ icon, count, title, className = '', onClick, onMouseEnter, onMouseLeave }) {
+    const cls = cx('count-tile', onClick && 'count-tile--clickable', className);
+    return (_jsxs("div", { className: cls, onClick: onClick, 
+        /* role="button" + tabIndex 만 있고 키 처리가 없으면, 키보드 사용자는 여기 멈추고도
+           누를 수가 없다 — `<div>` 는 브라우저가 Enter·Space 를 대신 처리해 주지 않는다.
+           Space 의 기본 스크롤도 막는다(2026-08-28, Badge·Accordion 과 같은 처리). */
+        onKeyDown: onClick ? (e) => {
+            if (e.key !== 'Enter' && e.key !== ' ')
+                return;
+            /* onClick 이 MouseEvent 를 받으므로 가짜로 만들지 않고 **DOM 이 진짜 클릭을
+               내게** 한다 — 그래야 이벤트의 target·currentTarget 도 실제와 같다. */
+            e.preventDefault();
+            e.currentTarget.click();
+        } : undefined, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: onClick ? 'button' : 'img', tabIndex: onClick ? 0 : undefined, "aria-label": title ? `${title} ${count}` : String(count), children: [_jsx(Icon, { icon: icon, size: 20, className: "count-tile__icon" }), _jsx("span", { className: "count-tile__count h5", "aria-hidden": "true", children: count })] }));
+}

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

@@ -0,0 +1,151 @@
+.date-picker {
+  position: relative;
+  width: 100%;
+}
+
+/* Trigger */
+.date-picker__trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  box-sizing: border-box;
+  border: 1px solid var(--color-whiteLine);
+  background: var(--color-deepWhite);
+  color: var(--color-darkGray);
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
+}
+.date-picker--s40 .date-picker__trigger { height: 40px; border-radius: 10px; }
+.date-picker--s48 .date-picker__trigger { height: 48px; border-radius: 12px; }
+.date-picker--s64 .date-picker__trigger { height: 64px; border-radius: 14px; }
+
+.date-picker--open .date-picker__trigger,
+.date-picker__trigger:focus {
+  outline: none;
+  border-color: var(--color-main);
+  background: var(--color-white);
+  box-shadow: 0 0 0 3px var(--color-main-a10);
+}
+.date-picker__trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.date-picker__placeholder { color: var(--color-lightGray); white-space: nowrap; }
+.date-picker__value       { color: var(--color-darkGray); white-space: nowrap; }
+
+.date-picker__icon {
+  flex-shrink: 0;
+  color: var(--color-lightGray);
+  transition: color 0.12s;
+}
+.date-picker--open .date-picker__icon { color: var(--color-main); }
+
+/* Dropdown */
+.date-picker__dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 200;
+  background: var(--color-white);
+  border: 1px solid var(--color-whiteLine);
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
+  padding: 12px;
+  min-width: 260px;
+  box-sizing: border-box;
+}
+
+/* Nav */
+.date-picker__nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+/* Nav Dropdown (Dropdown 컴포넌트를 nav 타이틀로 사용) */
+.date-picker__nav-dropdown { flex: 1; margin: 0 4px; }
+.date-picker__nav-dropdown .dropdown__trigger {
+  height: 32px !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  justify-content: center !important;
+  gap: 4px !important;
+  border-radius: 6px !important;
+  transition: background 0.12s, color 0.12s !important;
+}
+.date-picker__nav-dropdown .dropdown__trigger:hover,
+.date-picker__nav-dropdown.dropdown--open .dropdown__trigger {
+  background: var(--color-deepWhite) !important;
+}
+.date-picker__nav-dropdown .dropdown__trigger-label {
+  font-weight: 600 !important;
+  color: var(--color-darkGray) !important;
+  flex: unset !important;
+}
+.date-picker__nav-btn {
+  width: 28px; height: 28px;
+  display: flex; align-items: center; justify-content: center;
+  border: 1px solid var(--color-whiteLine);
+  border-radius: 8px;
+  background: var(--color-deepWhite);
+  color: var(--color-darkGray);
+  cursor: pointer;
+  transition: border-color 0.12s, color 0.12s;
+}
+.date-picker__nav-btn:hover { border-color: var(--color-main); color: var(--color-main); }
+
+/* Grid */
+.date-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+.date-picker__dow {
+  text-align: center;
+  color: var(--color-lightGray);
+  font-weight: 600;
+  padding: 4px 0 6px;
+}
+.date-picker__dow:first-child { color: var(--color-error); }
+.date-picker__dow:last-child  { color: var(--color-main); }
+
+/* Day buttons */
+.date-picker__day {
+  width: 100%;
+  aspect-ratio: 1;
+  display: flex; align-items: center; justify-content: center;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--color-darkGray);
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+.date-picker__day:hover:not(:disabled) {
+  background: var(--color-main-a10);
+  color: var(--color-main);
+}
+.date-picker__day--sun:hover:not(:disabled) { color: var(--color-error); }
+.date-picker__day--sat:hover:not(:disabled) { color: var(--color-main); }
+.date-picker__day--sun { color: var(--color-error); }
+.date-picker__day--sat { color: var(--color-main); }
+.date-picker__day--today {
+  font-weight: 700;
+  outline: 1.5px solid var(--color-main);
+  outline-offset: -1.5px;
+}
+.date-picker__day--selected {
+  background: var(--color-main) !important;
+  color: #ffffff !important;
+  font-weight: 700;
+}
+.date-picker__day--disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+

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

@@ -0,0 +1,13 @@
+import './DatePicker.css';
+/** @public */
+export interface DatePickerProps {
+    value: string;
+    onChange: (v: string) => void;
+    size?: 40 | 48 | 64;
+    min?: string;
+    max?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+}
+export default function DatePicker({ value, onChange, size, min, max, disabled, placeholder, className, }: DatePickerProps): import("react").JSX.Element;

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

@@ -0,0 +1,107 @@
+/// <reference path="../types/lucide-deep-imports.d.ts" />
+// ↑ deep import 에 타입을 붙이는 앰비언트 선언. 이 파일에 붙여 두는 이유:
+// 소비 앱은 tsconfig 의 paths 로 core 소스를 직접 보는데, 그 include 에는
+// core 의 types/ 가 안 걸려 선언이 로드되지 않는다(관측: speechear TS7016 159개).
+// 참조를 쓰는 파일에 두면 import 를 타고 따라온다.
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { createPortal } from 'react-dom';
+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 './useAnchoredMenu';
+import { useCalendarMonth } from './useCalendarMonth';
+import './DatePicker.css';
+const DOW = ['일', '월', '화', '수', '목', '금', '토'];
+function daysInMonth(y, m) { return new Date(y, m + 1, 0).getDate(); }
+function firstDay(y, m) { return new Date(y, m, 1).getDay(); }
+function toISO(y, m, d) {
+    return `${y}-${String(m + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+}
+function formatDisplay(iso) {
+    if (!iso)
+        return '';
+    const [y, m, d] = iso.split('-');
+    return `${y}. ${m}. ${d}.`;
+}
+function buildYMOptions(viewY, min, max) {
+    const startY = min ? +min.split('-')[0] : viewY - 10;
+    const endY = max ? +max.split('-')[0] : viewY + 10;
+    const opts = [];
+    for (let y = startY; y <= endY; y++) {
+        for (let m = 0; m < 12; m++) {
+            const ym = `${y}-${String(m + 1).padStart(2, '0')}`;
+            if (min && ym < min.slice(0, 7))
+                continue;
+            if (max && ym > max.slice(0, 7))
+                continue;
+            opts.push({ value: ym, label: `${y}년 ${m + 1}월` });
+        }
+    }
+    return opts;
+}
+export default function DatePicker({ value, onChange, size = 48, min, max, disabled, placeholder = '날짜 선택', className, }) {
+    const { t } = useTranslation();
+    const today = new Date();
+    const { viewY, viewM, prevMonth, nextMonth, setViewYM } = useCalendarMonth(value);
+    const computeStyle = useCallback((rect) => {
+        const spaceBelow = window.innerHeight - rect.bottom;
+        const dropdownH = 300;
+        const above = spaceBelow < dropdownH && rect.top > dropdownH;
+        return {
+            position: 'fixed',
+            left: rect.left,
+            width: rect.width,
+            minWidth: 260,
+            ...(above
+                ? { bottom: window.innerHeight - rect.top + 6 }
+                : { top: rect.bottom + 6 }),
+            zIndex: 9999,
+        };
+    }, []);
+    const { open, setOpen, toggle, style: dropdownStyle, triggerRef, menuRef } = useAnchoredMenu({
+        computeStyle,
+        onScroll: 'reposition',
+        onResize: 'reposition',
+        // Dropdown 메뉴는 DatePicker 외부에 portal 되므로 예외 처리
+        ignoreOutsideClickSelector: '.dropdown__menu',
+    });
+    const selectDay = useCallback((d) => {
+        onChange(toISO(viewY, viewM, d));
+        setOpen(false);
+    }, [viewY, viewM, onChange, setOpen]);
+    const isDisabledDay = (d) => {
+        const iso = toISO(viewY, viewM, d);
+        if (min && iso < min)
+            return true;
+        if (max && iso > max)
+            return true;
+        return false;
+    };
+    const cells = [];
+    for (let i = 0; i < firstDay(viewY, viewM); i++)
+        cells.push(null);
+    for (let d = 1; d <= daysInMonth(viewY, viewM); d++)
+        cells.push(d);
+    const iconSize = size === 64 ? 20 : size === 40 ? 16 : 18;
+    const ymOptions = buildYMOptions(viewY, 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, 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", children: [DOW.map(d => (_jsx("div", { className: "date-picker__dow caption-1", children: d }, d))), cells.map((d, i) => {
+                        if (d === null)
+                            return _jsx("div", {}, `e${i}`);
+                        const iso = toISO(viewY, viewM, d);
+                        const isSelected = iso === value;
+                        const isToday = iso === toISO(today.getFullYear(), today.getMonth(), today.getDate());
+                        const dis = isDisabledDay(d);
+                        const col = (i % 7);
+                        return (_jsx("button", { type: "button", disabled: dis, onClick: () => !dis && selectDay(d), className: cx('date-picker__day caption-1', isSelected && 'date-picker__day--selected', isToday && !isSelected && 'date-picker__day--today', dis && 'date-picker__day--disabled', col === 0 && 'date-picker__day--sun', col === 6 && 'date-picker__day--sat'), children: d }, d));
+                    })] })] }), document.body) : null;
+    return (_jsxs("div", { className: cx('date-picker', `date-picker--s${size}`, open && 'date-picker--open', className), children: [_jsxs("button", { ref: triggerRef, type: "button", className: "date-picker__trigger body-2", onClick: () => !disabled && toggle(), disabled: disabled, "aria-haspopup": "true", "aria-expanded": open, children: [_jsx("span", { className: value ? 'date-picker__value' : 'date-picker__placeholder', children: value ? formatDisplay(value) : placeholder }), _jsx(Calendar, { size: iconSize, className: "date-picker__icon", strokeWidth: 1.5 })] }), dropdown] }));
+}