@ihabdevteam/core 0.8.0

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

@@ -0,0 +1,266 @@
+/* ── TextField ────────────────────────────────────────────────────────── */
+.text-field {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 6px;
+  box-sizing: border-box;
+}
+.text-field--full-width {
+  display: flex;
+  width: 100%;
+}
+
+/* Label */
+.text-field__label {
+  color: var(--color-darkGray);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+/* 필수 표시는 경고가 아니라 라벨의 일부다 — 오류색 대신 메인 컬러를 쓴다 */
+.text-field__required {
+  color: var(--color-main);
+  line-height: 1;
+}
+
+/* Wrapper (border + bg + icon 슬롯) */
+.text-field__wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--color-deepWhite);
+  border: 1px solid var(--color-whiteLine);
+  border-radius: 12px;
+  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.text-field--s32 .text-field__wrap { border-radius: 8px; }
+.text-field--s40 .text-field__wrap { border-radius: 10px; }
+.text-field--s48 .text-field__wrap { border-radius: 12px; }
+.text-field--s64 .text-field__wrap { border-radius: 14px; }
+.text-field__wrap:focus-within {
+  border-color: var(--color-main);
+  background: var(--color-white);
+  box-shadow: 0 0 0 3px var(--color-main-a10);
+}
+.text-field--error .text-field__wrap {
+  border-color: var(--color-error);
+}
+.text-field--error .text-field__wrap:focus-within {
+  box-shadow: 0 0 0 3px var(--color-error-a10);
+}
+.text-field--disabled .text-field__wrap {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/* 읽기 전용은 클릭·포커스·텍스트 선택 불가, 보더 제거 */
+.text-field--readonly .text-field__input {
+  pointer-events: none;
+  user-select: none;
+}
+.text-field--readonly .text-field__wrap {
+  border-color: var(--color-darkWhite);
+}
+
+/* Input / Textarea */
+.text-field__input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--color-darkGray);
+  box-sizing: border-box;
+  padding: 0 12px;
+  margin: 0;
+}
+.text-field__input::placeholder {
+  color: var(--color-lightGray);
+}
+.text-field__input:disabled {
+  cursor: not-allowed;
+}
+.text-field__input[readonly] {
+  cursor: default;
+}
+
+/* multiline: 고정 영역 textarea (rows 로 높이 사전 확보) */
+.text-field__input--textarea {
+  resize: vertical;
+  padding: 10px 12px;
+  line-height: 1.6;
+  min-height: 80px;
+  align-self: stretch;
+}
+
+/* newline: 자동 높이 확장 textarea (한 줄에서 시작, 내용에 따라 증가) */
+.text-field__input--auto {
+  resize: none;
+  overflow: hidden;
+  padding: 0 12px;
+  line-height: 1.5;
+  align-self: stretch;
+}
+
+/* wrap: newline/multiline 모드에서 수직 정렬을 상단으로 */
+.text-field:has(.text-field__input--textarea) .text-field__wrap,
+.text-field:has(.text-field__input--auto) .text-field__wrap {
+  align-items: flex-start;
+}
+.text-field:has(.text-field__input--textarea) .text-field__icon,
+.text-field:has(.text-field__input--auto) .text-field__icon,
+.text-field:has(.text-field__input--textarea) .text-field__clear,
+.text-field:has(.text-field__input--auto) .text-field__clear {
+  margin-top: var(--spacing-s);
+}
+
+/* Size variants — 실제 총 높이 (border 포함) */
+.text-field--s32 .text-field__input:not(.text-field__input--textarea):not(.text-field__input--auto) { height: 30px; }
+.text-field--s40 .text-field__input:not(.text-field__input--textarea):not(.text-field__input--auto) { height: 38px; }
+.text-field--s48 .text-field__input:not(.text-field__input--textarea):not(.text-field__input--auto) { height: 46px; }
+/* s64 — 큰 박스 (총 높이 64px = input 62 + border 2). 텍스트 스타일은 variant가 담당.
+   line-height normal: 네이티브 input의 세로 중앙 정렬을 살림(body-2의 26px 대신). */
+.text-field--s64 .text-field__input:not(.text-field__input--textarea):not(.text-field__input--auto) {
+  height: 62px;
+  line-height: normal;
+}
+
+/* ── variant="display" — 디스플레이형 텍스트(굵게·가운데) + placeholder 오버레이 ──
+   size(박스)와 분리: 어느 size에든 붙일 수 있다. */
+.text-field--display .text-field__input {
+  font-weight: 700;
+  text-align: center;
+}
+/* display는 전용 오버레이(.text-field__placeholder)로 placeholder를 그리므로
+   네이티브 placeholder는 숨긴다(:placeholder-shown 판정은 유지). */
+.text-field--display .text-field__input::placeholder {
+  color: transparent;
+}
+/* placeholder 전용 오버레이 — wrap(position:relative) 기준 flex 정중앙.
+   pointer-events 없음으로 클릭은 input으로 통과. 값 입력 시(:not(:placeholder-shown)) 숨김. */
+.text-field--display .text-field__placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  font-weight: 400;
+  color: var(--color-lightGray);
+}
+.text-field--display .text-field__input:not(:placeholder-shown) ~ .text-field__placeholder {
+  display: none;
+}
+/* size별 디스플레이 글자/placeholder 크기 — 값은 크게, placeholder는 작은 힌트로 */
+.text-field--display.text-field--s48 .text-field__input { font-size: 22px; }
+.text-field--display.text-field--s48 .text-field__placeholder { font-size: 15px; }
+.text-field--display.text-field--s64 .text-field__input { font-size: 28px; letter-spacing: -0.3px; }
+.text-field--display.text-field--s64 .text-field__placeholder { font-size: 16px; }
+
+/* newline 초기 높이 = size 에 맞춤 (rows=1 자연 높이가 min-height를 초과하므로 height 명시) */
+.text-field--s32 .text-field__input--auto { height: 30px; min-height: 30px; padding-top: 3px;  padding-bottom: 3px;  }
+.text-field--s40 .text-field__input--auto { height: 38px; min-height: 38px; padding-top: 7px;  padding-bottom: 7px;  }
+.text-field--s48 .text-field__input--auto { height: 46px; min-height: 46px; padding-top: 11px; padding-bottom: 11px; }
+
+/* Left / Right icons */
+.text-field__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: var(--color-lightGray);
+}
+.text-field__icon--left  { margin-left: var(--spacing-s); }
+.text-field__icon--right { margin-right: var(--spacing-s); }
+/* 인라인 svg의 baseline 정렬 여백(descender gap) 때문에 아이콘이 살짝 위로 치우쳐 보이는 것을 제거 */
+.text-field__icon-svg { display: block; }
+.text-field--has-left-icon  .text-field__input { padding-left: 6px; }
+.text-field--has-right-icon .text-field__input { padding-right: 6px; }
+
+/* s32는 박스가 작아 아이콘/글자를 한 단계 축소 (icon 20→16px, body-2 16px→body-3 14px) */
+.text-field--s32 .text-field__icon { width: 16px; height: 16px; }
+.text-field--s32 .text-field__input { font-size: 14px; line-height: 22px; }
+
+/* Clear 버튼 */
+/* 지우기(×) — 공용 Button(size 24 · dot)이 모양·상태를 담당하고, 여기선 배치만 잡는다 */
+.text-field__clear {
+  flex-shrink: 0;
+  margin-right: 10px;
+}
+
+/* 자동완성 드롭다운 (suggestions) */
+.text-field__suggestions {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  margin-top: var(--spacing-xs);
+  background: var(--color-white);
+  border: 1px solid var(--color-whiteLine);
+  box-shadow: var(--shadow-dropdown);
+  border-radius: var(--radius-sm);
+  max-height: 220px;
+  overflow: auto;
+  z-index: var(--z-dropdown);
+  padding: 4px 0;
+}
+.text-field__suggestion {
+  padding: 8px 12px;
+  cursor: pointer;
+  color: var(--color-darkGray);
+}
+.text-field__suggestion.is-active,
+.text-field__suggestion:hover {
+  background: var(--color-deepWhite);
+  color: var(--color-main);
+}
+
+/* Footer (helper text only — char count는 박스 안쪽으로 이동) */
+.text-field__footer {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+}
+.text-field__helper {
+  flex: 1;
+  color: var(--color-lightGray);
+}
+.text-field--error .text-field__helper {
+  color: var(--color-error);
+}
+
+/* 글자수 카운터 — wrap 내부 우측. input(flex:1) 옆에 놓여 글자와 겹치지 않음 */
+.text-field__count {
+  flex-shrink: 0;
+  margin-right: 12px;
+  /* 입력 길이 제한을 알려주는 정보라 읽혀야 한다 (lightGray는 2.42:1) */
+  color: var(--color-gray);
+  white-space: nowrap;
+  user-select: none;
+}
+/* clear/right-icon이 함께 있으면 그 사이 간격만(끝 여백은 아이콘이 담당) */
+.text-field--has-right-icon .text-field__count,
+.text-field:has(.text-field__clear) .text-field__count {
+  margin-right: 8px;
+}
+.text-field__count--over {
+  color: var(--color-error);
+}
+/* multiline(textarea): 카운터를 절대배치로 하단 우측에 두어 textarea가 폭을 꽉 채우게 한다
+   → 네이티브 리사이즈 핸들이 박스 우측 하단 '끝'에 오도록. 카운터는 핸들 자리를 비켜 왼쪽에. */
+.text-field:has(.text-field__input--textarea) .text-field__count {
+  position: absolute;
+  right: 20px;
+  bottom: 6px;
+  margin: 0;
+  pointer-events: none;
+}
+/* auto(newline)는 리사이즈 핸들이 없으므로 기존대로 하단 우측 flex 배치 유지 */
+.text-field:has(.text-field__input--auto) .text-field__count {
+  align-self: flex-end;
+  margin-bottom: var(--spacing-s);
+}

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

@@ -0,0 +1,86 @@
+import { type Ref, type FocusEvent, type KeyboardEvent } from 'react';
+import './TextField.css';
+/** @public */
+export interface TextFieldProps {
+    /** 입력 값 (controlled). 주지 않으면 uncontrolled 모드 */
+    value?: string;
+    /** uncontrolled 모드 초기값 (value를 주지 않을 때 사용) */
+    defaultValue?: string;
+    /** DOM name 속성. 비제어 폼에서 FormData 로 값을 읽을 때 필요하다. */
+    name?: string;
+    /** 내부 input/textarea 노드 ref — uncontrolled 제어용 */
+    inputRef?: Ref<HTMLInputElement | HTMLTextAreaElement | null>;
+    /** 값 변경 콜백 */
+    onChange?: (value: string) => void;
+    /** 입력 필드 위에 표시할 라벨 */
+    label?: string;
+    /** 화면에 보이는 라벨 없이(placeholder만 쓸 때) 스크린리더용 이름을 지정. label이 있으면 무시됨 */
+    ariaLabel?: string;
+    /** 필수 항목 표시 (*) */
+    required?: boolean;
+    /** placeholder 텍스트 */
+    placeholder?: string;
+    /** 입력 타입 */
+    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+    /** 비활성 상태 */
+    disabled?: boolean;
+    /** 읽기 전용 */
+    readOnly?: boolean;
+    /** 에러 메시지 — 설정 시 빨간 테두리 + 에러 텍스트 표시 */
+    error?: string;
+    /** 입력 필드 아래 도움말 텍스트 */
+    helperText?: string;
+    /** 최대 글자 수 — 설정 시 글자수 카운터 표시 */
+    maxLength?: number;
+    /** 필드 크기 (실제 높이 px). 박스 치수만 결정 — 텍스트 스타일은 variant가 담당 */
+    size?: 32 | 40 | 48 | 64;
+    /**
+     * 텍스트 스타일 변형 (size와 분리)
+     * - `input`   — 일반 입력 (기본)
+     * - `display` — 디스플레이형: 굵게·가운데 + placeholder 오버레이(세로 정중앙)
+     */
+    variant?: 'input' | 'display';
+    /** 부모 너비 100% 채우기 */
+    fullWidth?: boolean;
+    /**
+     * 개행(Enter) 허용 + 자동 높이 확장.
+     * 기본 input과 동일하게 한 줄로 시작하고, 내용이 늘어나면 높이가 자동으로 커집니다.
+     */
+    newline?: boolean;
+    /**
+     * textarea 고정 영역 모드 — rows 로 높이를 미리 확보합니다.
+     * 개행(Enter) 입력 가능, 영역은 고정 (수동 resize 가능).
+     */
+    multiline?: boolean;
+    /** multiline 모드 기본 행 수 */
+    rows?: number;
+    /** maxLength 카운터 표시 여부 (기본 true) */
+    showCount?: boolean;
+    /** 왼쪽 아이콘 이름 */
+    leftIcon?: string;
+    /** 오른쪽 아이콘 이름 */
+    rightIcon?: string;
+    /** 입력값 지우기 버튼 표시 여부 */
+    clearable?: boolean;
+    /** datalist id — 자동완성 옵션 연결 (single-line input에만 적용) */
+    list?: string;
+    /** 모바일 키패드 종류 힌트 */
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    autoComplete?: string;
+    className?: string;
+    onFocus?: (e: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur?: (e: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Enter 키 입력 시 호출(IME 조합 중에는 무시). onKeyDown과 함께 동작 */
+    onEnter?: () => void;
+    autoFocus?: boolean;
+    /**
+     * 자동완성 후보 목록 — 지정하면 콤보박스(입력 중 후보 드롭다운 + 키보드 네비게이션)로 동작한다.
+     * 필터링은 현재 값 기준으로 동작하므로 controlled(value+onChange) 사용을 전제로 한다.
+     */
+    suggestions?: string[];
+    /** 포커스 시 입력이 비어 있어도 전체 후보 목록을 표시 (suggestions와 함께 사용) */
+    openOnFocus?: boolean;
+}
+/** @public */
+export default function TextField(props: TextFieldProps): import("react").JSX.Element;

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

@@ -0,0 +1,149 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import { useId, useEffect, useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import Icon from './Icon';
+import Button from './Button';
+import { useComboboxSuggestions } from './useComboboxSuggestions';
+import './TextField.css';
+/** @public */
+export default function TextField(props) {
+    const { value, defaultValue, name, inputRef, onChange, label, ariaLabel, required, placeholder, type = 'text', disabled = false, readOnly = false, error, helperText, maxLength, size = 48, variant = 'input', fullWidth = false, newline = false, multiline = false, rows = 3, leftIcon, rightIcon, clearable = false, list, showCount = true, className = '', onFocus, onBlur, onKeyDown, onEnter, inputMode, autoComplete, autoFocus, suggestions, openOnFocus = false, } = props;
+    const { t } = useTranslation();
+    const uid = useId();
+    const inputId = `tf-${uid}`;
+    const helperId = `tf-helper-${uid}`;
+    const autoRef = useRef(null);
+    const combobox = useComboboxSuggestions({
+        value: value ?? '',
+        onChange,
+        suggestions: suggestions ?? [],
+        openOnFocus,
+    });
+    // 외부 inputRef + 내부 autoRef 동시 연결 — 외부에서 전달받은 ref 객체(.current)에 노드를 채우는
+    // React의 표준 ref 병합/전달(forwarding) 패턴이며, 이 외에 구현할 방법이 없다
+    /* eslint-disable react-hooks/immutability */
+    const setNodeRef = useCallback((node) => {
+        autoRef.current = node;
+        if (typeof inputRef === 'function')
+            inputRef(node);
+        else if (inputRef)
+            inputRef.current = node;
+    }, [inputRef]);
+    /* eslint-enable react-hooks/immutability */
+    const isControlled = value !== undefined;
+    /* 비밀번호는 value 를 React 에 넘기지 않는다 — 위 useEffect 주석 참고 */
+    const isPasswordControlled = isControlled && type === 'password';
+    const len = (value ?? '').length;
+    /*
+     * React 는 controlled input 의 값을 node.defaultValue(= HTML value 속성)에 동기화한다.
+     * 일반 입력에서는 무해하지만 비밀번호에서는 그 속성이 outerHTML 직렬화 경로
+     * (스크린샷·DOM 공유, 세션 리플레이, 확장 프로그램, 오류 리포터)로 평문이 새는 통로다.
+     *
+     * 사후에 속성을 지워도 React 의 restoreControlledState 가 다시 써 버리므로,
+     * 아예 React 에 값을 넘기지 않고(아래 sharedInputProps) 프로퍼티만 여기서 맞춘다.
+     * DOM 프로퍼티는 직렬화되지 않아 평문이 남지 않고, controlled 의미는 그대로 유지된다.
+     */
+    useEffect(() => {
+        const node = autoRef.current;
+        if (!isPasswordControlled || !node)
+            return;
+        const next = value ?? '';
+        if (node.value !== next)
+            node.value = next;
+    }, [isPasswordControlled, value]);
+    // newline 자동 높이 조정 — value 바뀔 때마다 scrollHeight 에 맞춤
+    useEffect(() => {
+        if (!newline || !autoRef.current)
+            return;
+        const el = autoRef.current;
+        el.style.height = ''; // CSS min-height 기준으로 리셋
+        if (el.scrollHeight > el.clientHeight) {
+            el.style.height = `${el.scrollHeight}px`;
+        }
+    }, [value, newline]);
+    const isOver = maxLength != null && len > maxLength;
+    const iconSize = size === 32 ? 16 : 20;
+    const cls = cx('text-field', `text-field--s${size}`, variant === 'display' ? 'text-field--display' : '', fullWidth ? 'text-field--full-width' : '', disabled ? 'text-field--disabled' : '', readOnly ? 'text-field--readonly' : '', error ? 'text-field--error' : '', leftIcon ? 'text-field--has-left-icon' : '', (rightIcon || clearable) ? 'text-field--has-right-icon' : '', className);
+    const sharedInputProps = {
+        id: inputId,
+        // controlled면 value, uncontrolled면 defaultValue (IME 조합 충돌 회피)
+        // 단 비밀번호는 둘 다 넘기지 않는다 — 어느 쪽이든 HTML value 속성에 평문이 박힌다
+        ...(isPasswordControlled ? {} : isControlled ? { value } : { defaultValue }),
+        ref: setNodeRef,
+        placeholder,
+        name,
+        disabled,
+        readOnly,
+        autoFocus,
+        tabIndex: readOnly ? -1 : undefined,
+        maxLength,
+        list,
+        inputMode,
+        autoComplete,
+        'aria-label': !label && ariaLabel ? ariaLabel : undefined,
+        'aria-required': required,
+        'aria-invalid': !!error,
+        'aria-describedby': (helperText || error) ? helperId : undefined,
+        // aria-expanded·aria-controls·aria-activedescendant 는 콤보박스 속성이라 role 없이는
+        // 스크린리더가 그냥 입력칸으로 읽고 "후보 n개"를 알리지 않는다 — 역할을 함께 준다.
+        role: suggestions ? 'combobox' : undefined,
+        'aria-autocomplete': suggestions ? 'list' : undefined,
+        'aria-haspopup': suggestions ? 'listbox' : undefined,
+        'aria-expanded': suggestions ? combobox.open : undefined,
+        'aria-controls': suggestions ? combobox.listId : undefined,
+        'aria-activedescendant': suggestions && combobox.activeIdx >= 0 ? `${combobox.listId}-option-${combobox.activeIdx}` : undefined,
+        onChange: (e) => onChange?.(e.target.value),
+        onFocus: ((e) => {
+            onFocus?.(e);
+            if (suggestions)
+                combobox.handleFocus();
+        }),
+        onBlur: ((e) => {
+            onBlur?.(e);
+            if (suggestions)
+                combobox.handleBlur();
+        }),
+        onKeyDown: ((e) => {
+            if (onEnter && e.key === 'Enter' && !e.nativeEvent.isComposing) {
+                e.preventDefault();
+                onEnter();
+            }
+            onKeyDown?.(e);
+            if (suggestions)
+                combobox.handleKeyDown(e);
+        }),
+    };
+    const showClear = clearable && !disabled && !readOnly && len > 0;
+    const renderInput = () => {
+        if (newline) {
+            // 자동 높이 확장 textarea — overflow hidden + resize none
+            return (_jsx("textarea", { ...sharedInputProps, className: "text-field__input text-field__input--auto body-2", rows: 1 }));
+        }
+        if (multiline) {
+            // 고정 영역 textarea — rows 로 높이 미리 확보
+            return (_jsx("textarea", { ...sharedInputProps, className: "text-field__input text-field__input--textarea body-2", rows: rows }));
+        }
+        return (_jsx("input", { ...sharedInputProps, type: type, className: "text-field__input body-2" }));
+    };
+    // variant="display"는 값과 placeholder 글자 크기가 크게 달라 네이티브 ::placeholder로는
+    // 세로 중앙을 못 맞춘다. 전용 오버레이 div를 flex로 정중앙 정렬하고,
+    // 값이 있으면(:placeholder-shown 해제) CSS로 숨긴다.
+    const showPlaceholderOverlay = variant === 'display' && !newline && !multiline && !!placeholder;
+    const renderInputArea = () => (_jsxs(_Fragment, { children: [renderInput(), showPlaceholderOverlay && (_jsx("span", { className: "text-field__placeholder", "aria-hidden": "true", children: placeholder }))] }));
+    return (_jsxs("div", { className: cls, children: [label && (_jsxs("label", { htmlFor: inputId, className: "text-field__label caption-1", children: [label, required && _jsx("span", { className: "text-field__required", children: "*" })] })), _jsxs("div", { className: "text-field__wrap", children: [leftIcon && (_jsx("span", { className: "text-field__icon text-field__icon--left", children: _jsx(Icon, { icon: leftIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) })), renderInputArea(), maxLength != null && showCount && (_jsxs("span", { className: `text-field__count caption-2${isOver ? ' text-field__count--over' : ''}`, children: [len, "/", maxLength] })), showClear && (_jsx(Button, { size: 24, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, className: "text-field__clear", ariaLabel: t('textField.clearAriaLabel', '입력값 지우기'), 
+                        // 폼 안에서 쓰일 때 기본값(submit)으로 눌려 폼이 제출되지 않도록.
+                        htmlType: "button", 
+                        // mousedown 은 포커스가 입력에서 떠나는 것만 막는다(preventDefault 는 click 을 막지 않는다).
+                        onMouseDown: (e) => { e.preventDefault(); }, 
+                        // 지우는 일은 click 에서 한다 — mousedown 에서만 처리하면 물리적 마우스 누름
+                        // 외에는 아무 반응이 없어, 이름표(aria-label)만 달린 못 누르는 버튼이 된다
+                        // (스크린리더의 활성화는 click 을 보낸다).
+                        onClick: () => onChange?.(''), tabIndex: -1 })), rightIcon && !showClear && (_jsx("span", { className: "text-field__icon text-field__icon--right", children: _jsx(Icon, { icon: rightIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) }))] }), suggestions && combobox.open && combobox.filtered.length > 0 && (_jsx("ul", { id: combobox.listId, className: "text-field__suggestions", role: "listbox", children: combobox.filtered.map((s, i) => (_jsx("li", { id: `${combobox.listId}-option-${i}`, role: "option", "aria-selected": i === combobox.activeIdx, className: `text-field__suggestion body-2${i === combobox.activeIdx ? ' is-active' : ''}`, 
+                    // 선택은 click 에서 한다. onMouseDown 만 두면 마우스로는 눌리지만 스크린리더가
+                    // 이 option 을 활성화할 때는 click 만 발생해 아무 일도 일어나지 않는다.
+                    // mousedown 에서는 기본 동작(포커스 이동 → 입력 blur)을 막아, click 이 도달하기
+                    // 전에 목록이 닫히지 않게 한다 — blur 쪽 120ms 딜레이에 기대지 않아도 된다.
+                    onMouseDown: e => e.preventDefault(), onClick: () => { combobox.handleSelect(s); autoRef.current?.focus(); }, children: s }, `${s}-${i}`))) })), (helperText || error) && (_jsx("div", { className: "text-field__footer", children: _jsx("span", { id: helperId, className: "text-field__helper caption-1", role: error ? 'alert' : undefined, children: error || helperText }) }))] }));
+}

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

@@ -0,0 +1,62 @@
+/* 연혁/로드맵 — 그룹 제목 + 라벨/내용 행 목록 */
+.timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 56px;
+}
+
+.timeline__title {
+  font-size: var(--text-h1-size);
+  line-height: var(--text-h1-line);
+  letter-spacing: var(--text-h1-spacing);
+  font-weight: var(--text-h1-weight);
+  margin: 0;
+  color: var(--color-text-primary);
+}
+
+.timeline__rows {
+  margin: var(--spacing-m) 0 0;
+  padding: 0;
+  list-style: none;
+  border-top: 1px solid var(--color-border);
+}
+
+.timeline__row {
+  display: flex;
+  gap: 40px;
+  padding: var(--spacing-l) 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.timeline__label {
+  font-size: var(--text-body-2-size);
+  line-height: var(--text-body-2-line);
+  font-weight: var(--text-body-2-weight-bold);
+  flex-shrink: 0;
+  width: 28px;
+  padding-top: 1px;
+  color: var(--color-text-primary);
+}
+
+.timeline__items {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.timeline__items > p {
+  font-size: var(--text-body-2-size);
+  line-height: var(--text-body-2-line);
+  font-weight: var(--text-body-2-weight);
+  margin: 0;
+  color: var(--color-text-primary);
+}
+
+@media (max-width: 767px) {
+  .timeline {
+    gap: 40px;
+  }
+  .timeline__row {
+    gap: var(--spacing-xl);
+  }
+}

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

@@ -0,0 +1,26 @@
+import './Timeline.css';
+import type { ReactNode } from 'react';
+/** @public */
+export interface TimelineEntry {
+    /** 행 왼쪽 라벨 — 월("04"), 분기("Q1") 등 */
+    label?: string;
+    /** 한 행에 여러 줄이 올 수 있다 */
+    items: ReactNode[];
+}
+/** @public */
+export interface TimelineGroup {
+    /** 그룹 제목 — 연도("2026") 등 */
+    title: string;
+    entries: TimelineEntry[];
+}
+/** @public */
+export interface TimelineProps {
+    groups: TimelineGroup[];
+    className?: string;
+}
+/**
+ * 그룹 제목 아래로 라벨+내용 행을 쌓는 연혁/로드맵 목록.
+ * 연도별 회사 연혁, 분기별 로드맵 등에 사용.
+ * @public
+ */
+export default function Timeline({ groups, className }: TimelineProps): import("react").JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './Timeline.css';
+/**
+ * 그룹 제목 아래로 라벨+내용 행을 쌓는 연혁/로드맵 목록.
+ * 연도별 회사 연혁, 분기별 로드맵 등에 사용.
+ * @public
+ */
+export default function Timeline({ groups, className = '' }) {
+    return (_jsx("div", { className: cx('timeline', className), children: groups.map((group) => (_jsxs("section", { className: "timeline__group", children: [_jsx("h3", { className: "timeline__title", children: group.title }), _jsx("ul", { className: "timeline__rows", children: group.entries.map((entry, i) => (_jsxs("li", { className: "timeline__row", children: [entry.label ? (_jsx("span", { className: "timeline__label", children: entry.label })) : null, _jsx("div", { className: "timeline__items", children: entry.items.map((item, j) => (_jsx("p", { children: item }, j))) })] }, `${entry.label ?? ''}-${i}`))) })] }, group.title))) }));
+}

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

@@ -0,0 +1,76 @@
+.toast{
+  /* fix to viewport so positioning is consistent regardless of app layout/scroll */
+  position:fixed;
+  left:50%;
+  transform:translateX(-50%);
+  z-index: var(--z-toast); /* 최상위: 사이드바/모달/페이지팝업/알림 모두 위 */
+  pointer-events:none;
+  will-change: transform, opacity;
+  
+}
+
+.toast__inner{
+  pointer-events:auto;
+  background:var(--color-main);
+  color:#ffffff;
+  padding:var(--spacing-content);
+  border-radius: var(--radius-m);
+  box-shadow:var(--shadow-popup);
+  /* allow the notice to use available viewport width, capped for readability */
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  max-width: min(520px, calc(100vw - 32px));
+  margin: 0;
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  text-align:center;
+  min-height: 60px;
+  min-width: min(360px, calc(100vw - 32px));
+}
+
+.toast__inner--normal {
+  border: 2px solid transparent;
+  background:
+    linear-gradient(var(--color-white), var(--color-white)) padding-box,
+    linear-gradient(135deg, var(--color-main), var(--color-sub)) border-box;
+  color: var(--color-black);
+}
+
+.toast__inner--notice {
+  background: linear-gradient(135deg, var(--color-main), var(--color-sub));
+  color: #ffffff;
+}
+
+.toast__inner--warning {
+  background: var(--color-error);
+  color: #ffffff;
+}
+
+/* Top */
+.toast--top{
+  top:18px;
+  /* start above the view and slide down; keep horizontal centering via translateX(-50%) */
+  transform:translateX(-50%) translateY(-100%);
+  transition: transform 260ms cubic-bezier(.22,.9,.3,1), opacity 180ms ease-out;
+  opacity:0;
+}
+.toast--top.is-visible{
+  transform:translateX(-50%) translateY(0);
+  opacity:1;
+}
+
+/* Bottom */
+.toast--bottom{
+  bottom:18px;
+  /* start below the view and slide up; keep horizontal centering via translateX(-50%) */
+  transform:translateX(-50%) translateY(100%);
+  transition: transform 260ms cubic-bezier(.22,.9,.3,1), opacity 180ms ease-out;
+  opacity:0;
+}
+.toast--bottom.is-visible{
+  transform:translateX(-50%) translateY(0);
+  opacity:1;
+}