jy-headless 0.3.16 → 0.3.17

package/dist/Autocomplete/Autocomplete.js

@@ -400,3 +400,4 @@ const Autocomplete = Object.assign(AutocompleteContainer, {
 });
 
 export { Autocomplete };
+//# sourceMappingURL=Autocomplete.js.map

package/dist/Autocomplete/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Input/NumberInput.js

@@ -89,3 +89,4 @@ const NumberInput = ({ max, useThousandsSeparator, onChange, ...props }) => {
 };
 
 export { NumberInput };
+//# sourceMappingURL=NumberInput.js.map

package/dist/Input/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Input/TextInput.js

@@ -170,3 +170,4 @@ const TextInput = forwardRef(({ maxLength, onChange, pattern, onValidate, valida
 TextInput.displayName = 'TextInput';
 
 export { TextInput };
+//# sourceMappingURL=TextInput.js.map

package/dist/Input/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/Select.js

@@ -174,3 +174,4 @@ const Select = Object.assign(SelectContainer, {
 });
 
 export { Select, useSelectContext };
+//# sourceMappingURL=Select.js.map

package/dist/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Tooltip/Tooltip.js

@@ -34,3 +34,4 @@ const Tooltip = ({ direction = 'top', popover, children, key, gap = 0, autoFlip
 };
 
 export { Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/hooks/useDebounce.js

@@ -20,3 +20,4 @@ const useDebounce = (callback, delay) => {
 };
 
 export { useDebounce };
+//# sourceMappingURL=useDebounce.js.map

package/dist/hooks/useDebounce.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDebounce.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/hooks/usePortal.js

@@ -76,3 +76,4 @@ const usePortal = ({ content, key, visible = true, targetRef, popoverRef, direct
 };
 
 export { usePortal as default };
+//# sourceMappingURL=usePortal.js.map

package/dist/hooks/usePortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePortal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/hooks/useThrottle.js

@@ -30,3 +30,4 @@ const useThrottle = (callback, delay) => {
 };
 
 export { useThrottle };
+//# sourceMappingURL=useThrottle.js.map

package/dist/hooks/useThrottle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThrottle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -8,3 +8,4 @@ export { NumberInput } from './Input/NumberInput.js';
 export { TextInput } from './Input/TextInput.js';
 export { Select, useSelectContext } from './Select/Select.js';
 export { Autocomplete } from './Autocomplete/Autocomplete.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "jy-headless",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "description": "A lightweight and customizable headless UI library for React components",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "sideEffects": false,
   "repository": "https://github.com/yCZwIqY/jy-headless",
   "scripts": {
     "build": " rollup -c",
@@ -18,8 +19,8 @@
   "exports": {
     ".": {
       "import": "./dist/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     }
   },
   "keywords": [

package/dist/cjs/Autocomplete/Autocomplete.d.ts

@@ -1,110 +0,0 @@
-import React from 'react';
-import type { AutocompleteInputProps, AutocompleteOptionProps, AutocompleteOptionsProps, AutocompleteProps } from './Autocomplete.type';
-/**
- * 범용 Autocomplete(Combobox) 컴포넌트 (Compound API)
- *
- * - Compound 구성: <Autocomplete> + <Autocomplete.Input /> + <Autocomplete.Options /> + <Autocomplete.Option />
- * - a11y: combobox/listbox/option role + aria-controls/activedescendant + aria-live(결과 수 안내)
- * - 키보드: ArrowUp/Down 이동, Enter 선택, Escape 닫기, Tab 닫기
- * - IME(한글/일본어) 조합 입력 중에는 방향키/엔터 선택 로직을 막아 UX를 보호
- * - Options는 portal로 렌더링되며, outside click 시 닫힘
- *
- * ## 모드
- * 1) items 모드 (권장)
- * - <Autocomplete.Options items={...} renderItem={...} />
- * - 내부에서 filterFn으로 filtered를 만들고, Options는 filtered를 가상화로 렌더
- *
- * 2) children 모드 (간단 리스트)
- * - <Autocomplete.Options> 안에 <Autocomplete.Option />을 직접 나열
- * - 소규모 옵션에만 권장 (가상화/activeIndex 기반 aria-activedescendant는 items 모드가 더 적합)
- *
- * @example
- * // 1) items 모드 (기본 / 권장)
- * const items = [
- *   { value: 'apple', label: 'Apple' },
- *   { value: 'banana', label: 'Banana' },
- *   { value: 'grape', label: 'Grape' },
- * ];
- *
- * const [value, setValue] = useState<string | null>(null);
- *
- * <Autocomplete value={value} onChange={setValue}>
- *   <Autocomplete.Input placeholder="과일을 검색하세요" />
- *   <Autocomplete.Options
- *     items={items}
- *     renderItem={(item) => <div style={{ padding: 8 }}>{item.label}</div>}
- *   />
- * </Autocomplete>
- *
- * @example
- * // 2) 입력값(query)까지 controlled로 관리하고 싶을 때
- * const [value, setValue] = useState<string | null>(null);
- * const [inputValue, setInputValue] = useState('');
- *
- * <Autocomplete
- *   value={value}
- *   onChange={setValue}
- *   inputValue={inputValue}
- *   onInputChange={setInputValue}
- * >
- *   <Autocomplete.Input placeholder="검색어 제어" />
- *   <Autocomplete.Options
- *     items={items}
- *     renderItem={(item) => <div style={{ padding: 8 }}>{item.label}</div>}
- *   />
- * </Autocomplete>
- *
- * @example
- * // 3) filterFn 커스터마이징 (prefix match)
- * const startsWithFilter = (item, query) =>
- *   item.label.toLowerCase().startsWith(query.trim().toLowerCase());
- *
- * <Autocomplete value={value} onChange={setValue} filterFn={startsWithFilter}>
- *   <Autocomplete.Input placeholder="앞글자 매칭" />
- *   <Autocomplete.Options
- *     items={items}
- *     renderItem={(item) => <div style={{ padding: 8 }}>{item.label}</div>}
- *   />
- * </Autocomplete>
- *
- * @example
- * // 4) 가상화 옵션 조정 (많은 데이터)
- * <Autocomplete value={value} onChange={setValue}>
- *   <Autocomplete.Input placeholder="대량 데이터" />
- *   <Autocomplete.Options
- *     items={bigItems}
- *     renderItem={(item) => <div style={{ padding: 8 }}>{item.label}</div>}
- *     itemHeight={36}
- *     maxVisibleItems={8}
- *     overscan={3}
- *   />
- * </Autocomplete>
- *
- * @example
- * // 5) disabled
- * <Autocomplete value={value} onChange={setValue} disabled>
- *   <Autocomplete.Input placeholder="비활성화" />
- *   <Autocomplete.Options
- *     items={items}
- *     renderItem={(item) => <div style={{ padding: 8 }}>{item.label}</div>}
- *   />
- * </Autocomplete>
- *
- * @example
- * // 6) children 모드 (소규모 리스트에만 권장)
- * const [value, setValue] = useState<string | null>(null);
- *
- * <Autocomplete value={value} onChange={setValue}>
- *   <Autocomplete.Input placeholder="직접 옵션 나열" />
- *   <Autocomplete.Options>
- *     <Autocomplete.Option value="seoul" label="Seoul" />
- *     <Autocomplete.Option value="busan" label="Busan" />
- *     <Autocomplete.Option value="jeju" label="Jeju" disabled />
- *   </Autocomplete.Options>
- * </Autocomplete>
- */
-export declare const Autocomplete: (({ value, onChange, inputValue, onInputChange, disabled, filterFn, children, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element) & {
-    Input: ({ onKeyDown, onFocus, onChange, onCompositionStart, onCompositionEnd, ...props }: AutocompleteInputProps) => import("react/jsx-runtime").JSX.Element;
-    Options: ({ items, renderItem, itemHeight, maxVisibleItems, overscan, children, ...props }: AutocompleteOptionsProps) => React.ReactPortal | null;
-    Option: ({ value, label, disabled, children, ...props }: AutocompleteOptionProps) => import("react/jsx-runtime").JSX.Element | null;
-};

package/dist/cjs/Autocomplete/Autocomplete.js

@@ -1,404 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var usePortal = require('../hooks/usePortal.js');
-var TextInput = require('../Input/TextInput.js');
-
-const AutocompleteContext = react.createContext(null);
-const useAutocomplete = () => {
-    const ctx = react.useContext(AutocompleteContext);
-    if (!ctx)
-        throw new Error('Autocomplete components must be used within <Autocomplete>');
-    return ctx;
-};
-const defaultFilter = (item, query) => item.label.toLowerCase().includes(query.trim().toLowerCase());
-/**
- * Root
- */
-const AutocompleteContainer = ({ value, onChange, inputValue, onInputChange, disabled, filterFn = defaultFilter, children, }) => {
-    const [open, setOpen] = react.useState(false);
-    const [activeIndex, setActiveIndex] = react.useState(-1);
-    const inputRef = react.useRef(null);
-    // controlled/uncontrolled query
-    const [internalQuery, setInternalQuery] = react.useState('');
-    const query = inputValue ?? internalQuery;
-    const setQuery = (v) => {
-        onInputChange?.(v);
-        if (inputValue === undefined)
-            setInternalQuery(v);
-    };
-    const listboxId = react.useId();
-    // NOTE:
-    // - virtualization을 제대로 하려면 options data(items)가 Root에 필요하지만,
-    //   compound API 유지를 위해 Options에서 items를 주입받아 Root에서 filtered를 만들기 어렵다.
-    // 그래서 Root에서는 "filtered"를 Options에서 제공할 수 있게 설계하면 복잡해짐.
-    // ✅ 해결: Options에 items를 주면 Root가 접근할 수 있도록 "itemsRef"를 둔다.
-    const itemsRef = react.useRef([]);
-    const setItems = (items) => {
-        itemsRef.current = items;
-    };
-    const filtered = react.useMemo(() => {
-        const src = itemsRef.current ?? [];
-        if (!query.trim())
-            return src;
-        return src.filter((it) => filterFn(it, query));
-    }, [query, filterFn]);
-    const close = () => {
-        setOpen(false);
-        setActiveIndex(-1);
-    };
-    const commitByIndex = (index) => {
-        const item = filtered[index];
-        if (!item || item.disabled)
-            return;
-        onChange(item.value);
-        setQuery(item.label);
-        close();
-    };
-    // 외부 value 변경 시 input label 동기화
-    react.useEffect(() => {
-        if (!value)
-            return;
-        const found = itemsRef.current.find((i) => i.value === value);
-        if (found)
-            setQuery(found.label);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [value]);
-    const statusText = react.useMemo(() => {
-        if (!open)
-            return '';
-        const n = filtered.length;
-        if (n === 0)
-            return 'No results.';
-        if (n === 1)
-            return '1 result available.';
-        return `${n} results available.`;
-    }, [open, filtered.length]);
-    return (jsxRuntime.jsxs(AutocompleteContext.Provider, { value: {
-            open,
-            setOpen,
-            selectedValue: value,
-            setSelectedValue: onChange,
-            query,
-            setQuery,
-            disabled,
-            inputRef,
-            listboxId,
-            activeIndex,
-            setActiveIndex,
-            filtered,
-            statusText,
-            commitByIndex,
-            close,
-        }, children: [jsxRuntime.jsx(ItemsBridge, { onItems: setItems }), children] }));
-};
-/**
- * Options에서 items를 주입해주기 위한 브릿지(보이지 않는 컴포넌트)
- * - Options가 items prop을 받으면, 내부에서 window.__ 같은 걸 쓰지 않고 Root ref에 주입
- */
-const ItemsBridgeContext = react.createContext(null);
-const ItemsBridge = ({ onItems }) => {
-    return jsxRuntime.jsx(ItemsBridgeContext.Provider, { value: onItems });
-};
-const useItemsBridge = () => react.useContext(ItemsBridgeContext);
-/**
- * Input (Combobox Trigger)
- * - 포커스는 input 유지
- * - aria-activedescendant로 active option을 알려줌
- */
-// ...생략
-const Input = ({ onKeyDown, onFocus, onChange, onCompositionStart, onCompositionEnd, ...props }) => {
-    const { open, setOpen, query, setQuery, disabled, listboxId, activeIndex, setActiveIndex, filtered, commitByIndex, close, inputRef, } = useAutocomplete();
-    // ✅ IME 조합 중에는 방향키/엔터로 옵션 선택하지 않게 막기
-    const composingRef = react.useRef(false);
-    const activeId = activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined;
-    const move = (delta) => {
-        if (!filtered.length)
-            return;
-        setOpen(true);
-        setActiveIndex(activeIndex < 0 ? 0 : (activeIndex + delta + filtered.length) % filtered.length);
-    };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TextInput.TextInput, { ref: inputRef, role: 'combobox', "aria-autocomplete": 'list', "aria-expanded": open, "aria-controls": listboxId, "aria-activedescendant": activeId, disabled: disabled, value: query, onFocus: (e) => {
-                    if (!disabled) {
-                        setOpen(true);
-                        setActiveIndex(filtered.length ? 0 : -1);
-                    }
-                    onFocus?.(e);
-                }, onChange: (e) => {
-                    if (disabled)
-                        return;
-                    setQuery(e.target.value);
-                    setOpen(true);
-                    setActiveIndex(0);
-                    onChange?.(e);
-                }, onCompositionStart: (e) => {
-                    composingRef.current = true;
-                    onCompositionStart?.(e);
-                }, onCompositionEnd: (e) => {
-                    composingRef.current = false;
-                    onCompositionEnd?.(e);
-                }, onKeyDown: (e) => {
-                    if (disabled)
-                        return;
-                    // ✅ 조합중이면 Autocomplete 키처리 하지 않음
-                    if (composingRef.current) {
-                        onKeyDown?.(e);
-                        return;
-                    }
-                    switch (e.key) {
-                        case 'ArrowDown':
-                            e.preventDefault();
-                            move(1);
-                            break;
-                        case 'ArrowUp':
-                            e.preventDefault();
-                            move(-1);
-                            break;
-                        case 'Enter':
-                            if (open && activeIndex >= 0) {
-                                e.preventDefault();
-                                commitByIndex(activeIndex);
-                            }
-                            break;
-                        case 'Escape':
-                            e.preventDefault();
-                            close();
-                            break;
-                        case 'Tab':
-                            close();
-                            break;
-                    }
-                    onKeyDown?.(e);
-                }, ...props }), jsxRuntime.jsx("span", { "aria-live": 'polite', style: {
-                    position: 'absolute',
-                    width: 1,
-                    height: 1,
-                    overflow: 'hidden',
-                    clip: 'rect(0 0 0 0)',
-                    whiteSpace: 'nowrap',
-                }, children: open ? `${filtered.length} results.` : '' })] }));
-};
-/**
- * Options
- * - portal
- * - outside click close
- * - virtualization (items + renderItem provided)
- */
-const Options = ({ items, renderItem, itemHeight = 36, maxVisibleItems = 8, overscan = 3, children, ...props }) => {
-    const bridge = useItemsBridge();
-    const { open, setOpen, close, inputRef, listboxId, filtered, activeIndex, setActiveIndex, commitByIndex, } = useAutocomplete();
-    // items 주입(가상화 모드)
-    react.useEffect(() => {
-        if (items && bridge)
-            bridge(items);
-    }, [items, bridge]);
-    const popoverRef = react.useRef(null);
-    const triggerWidth = inputRef.current?.getBoundingClientRect().width;
-    // outside click
-    react.useEffect(() => {
-        if (!open)
-            return;
-        const onDown = (e) => {
-            const t = e.target;
-            if (inputRef.current?.contains(t) || popoverRef.current?.contains(t))
-                return;
-            close();
-        };
-        document.addEventListener('mousedown', onDown);
-        return () => document.removeEventListener('mousedown', onDown);
-    }, [open, close, inputRef]);
-    // scroll container ref for virtualization
-    const scrollRef = react.useRef(null);
-    // active option이 항상 보이게 스크롤 보정
-    react.useEffect(() => {
-        if (!open)
-            return;
-        if (!scrollRef.current)
-            return;
-        if (activeIndex < 0)
-            return;
-        const top = activeIndex * itemHeight;
-        const bottom = top + itemHeight;
-        const viewTop = scrollRef.current.scrollTop;
-        const viewBottom = viewTop + scrollRef.current.clientHeight;
-        if (top < viewTop)
-            scrollRef.current.scrollTop = top;
-        else if (bottom > viewBottom)
-            scrollRef.current.scrollTop = bottom - scrollRef.current.clientHeight;
-    }, [open, activeIndex, itemHeight]);
-    // virtualization range
-    const total = filtered.length;
-    const viewportCount = Math.min(maxVisibleItems, Math.max(1, total));
-    const viewportHeight = viewportCount * itemHeight;
-    const [scrollTop, setScrollTop] = react.useState(0);
-    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
-    const endIndex = Math.min(total, Math.ceil((scrollTop + viewportHeight) / itemHeight) + overscan);
-    const visible = filtered.slice(startIndex, endIndex);
-    const { portal } = usePortal({
-        visible: open,
-        targetRef: inputRef,
-        popoverRef,
-        direction: 'bottom',
-        gap: 4,
-        content: (jsxRuntime.jsx("div", { ref: popoverRef, style: { width: triggerWidth }, ...props, children: items && renderItem ? (jsxRuntime.jsx("div", { id: listboxId, role: 'listbox', ref: scrollRef, style: { maxHeight: viewportHeight, overflow: 'auto', position: 'relative' }, onScroll: (e) => setScrollTop(e.target.scrollTop), children: jsxRuntime.jsx("div", { style: { height: total * itemHeight, position: 'relative' }, children: visible.map((item, i) => {
-                        const index = startIndex + i; // filtered index
-                        const isActive = index === activeIndex;
-                        const isSelected = item.value === undefined; // selection 표시를 더 강하게 원하면 ctx.selectedValue 비교해서 쓰면 됨
-                        return (jsxRuntime.jsx("div", { id: `${listboxId}-opt-${index}`, role: 'option', "aria-selected": isSelected, "aria-disabled": item.disabled, "data-active": isActive, tabIndex: -1, onMouseEnter: () => setActiveIndex(index), onMouseDown: (e) => {
-                                // 클릭 시 input blur 방지(중요)
-                                e.preventDefault();
-                            }, onClick: () => commitByIndex(index), style: {
-                                position: 'absolute',
-                                top: index * itemHeight,
-                                left: 0,
-                                right: 0,
-                                height: itemHeight,
-                                display: 'flex',
-                                alignItems: 'center',
-                            }, children: renderItem(item) }, item.value));
-                    }) }) })) : (
-            /* ✅ children 모드(비가상화) */
-            jsxRuntime.jsx("div", { id: listboxId, role: 'listbox', children: children })) })),
-    });
-    return open ? portal : null;
-};
-/**
- * Option (children 모드 전용 / small list)
- * - a11y option role/ids만 최소 보장
- * - 가상화는 여기엔 적용하지 않음
- */
-const Option = ({ value, label, disabled, children, ...props }) => {
-    const { listboxId, filtered, query, open, setOpen, setQuery, setSelectedValue, activeIndex, setActiveIndex, } = useAutocomplete();
-    // children 모드에서 필터링은 “간단 버전”
-    const visible = react.useMemo(() => {
-        if (!query.trim())
-            return true;
-        return label.toLowerCase().includes(query.trim().toLowerCase());
-    }, [label, query]);
-    react.useMemo(() => {
-        // filtered는 items 모드에서만 의미있음.
-        // children 모드는 간단히 -1 처리(aria-activedescendant는 items 모드가 권장)
-        return -1;
-    }, []);
-    if (!visible)
-        return null;
-    return (jsxRuntime.jsx("div", { role: "option", "aria-disabled": disabled, "aria-selected": false, tabIndex: -1, onMouseDown: (e) => e.preventDefault(), onClick: () => {
-            if (disabled)
-                return;
-            setSelectedValue(value);
-            setQuery(label);
-            setOpen(false);
-            setActiveIndex(-1);
-        }, ...props, children: children ?? label }));
-};
-/**
- * 범용 Autocomplete(Combobox) 컴포넌트 (Compound API)
- *
- * - Compound 구성: <Autocomplete> + <Autocomplete.Input /> + <Autocomplete.Options /> + <Autocomplete.Option />
- * - a11y: combobox/listbox/option role + aria-controls/activedescendant + aria-live(결과 수 안내)
- * - 키보드: ArrowUp/Down 이동, Enter 선택, Escape 닫기, Tab 닫기
- * - IME(한글/일본어) 조합 입력 중에는 방향키/엔터 선택 로직을 막아 UX를 보호
- * - Options는 portal로 렌더링되며, outside click 시 닫힘
- *
- * ## 모드
- * 1) items 모드 (권장)
- * - <Autocomplete.Options items={...} renderItem={...} />
- * - 내부에서 filterFn으로 filtered를 만들고, Options는 filtered를 가상화로 렌더
- *
- * 2) children 모드 (간단 리스트)
- * - <Autocomplete.Options> 안에 <Autocomplete.Option />을 직접 나열
- * - 소규모 옵션에만 권장 (가상화/activeIndex 기반 aria-activedescendant는 items 모드가 더 적합)
- *
- * @example
- * // 1) items 모드 (기본 / 권장)
- * const items = [
- *   { value: 'apple', label: 'Apple' },
- *   { value: 'banana', label: 'Banana' },
- *   { value: 'grape', label: 'Grape' },
- * ];
- *
- * const [value, setValue] = useState<string | null>(null);
- *
- * <Autocomplete value={value} onChange={setValue}>
- *   <Autocomplete.Input placeholder="과일을 검색하세요" />
- *   <Autocomplete.Options
- *     items={items}
- *     renderItem={(item) => <div style={{ padding: 8 }}>{item.label}</div>}
- *   />
- * </Autocomplete>
- *
- * @example
- * // 2) 입력값(query)까지 controlled로 관리하고 싶을 때
- * const [value, setValue] = useState<string | null>(null);
- * const [inputValue, setInputValue] = useState('');
- *
- * <Autocomplete
- *   value={value}
- *   onChange={setValue}
- *   inputValue={inputValue}
- *   onInputChange={setInputValue}
- * >
- *   <Autocomplete.Input placeholder="검색어 제어" />
- *   <Autocomplete.Options
- *     items={items}
- *     renderItem={(item) => <div style={{ padding: 8 }}>{item.label}</div>}
- *   />
- * </Autocomplete>
- *
- * @example
- * // 3) filterFn 커스터마이징 (prefix match)
- * const startsWithFilter = (item, query) =>
- *   item.label.toLowerCase().startsWith(query.trim().toLowerCase());
- *
- * <Autocomplete value={value} onChange={setValue} filterFn={startsWithFilter}>
- *   <Autocomplete.Input placeholder="앞글자 매칭" />
- *   <Autocomplete.Options
- *     items={items}
- *     renderItem={(item) => <div style={{ padding: 8 }}>{item.label}</div>}
- *   />
- * </Autocomplete>
- *
- * @example
- * // 4) 가상화 옵션 조정 (많은 데이터)
- * <Autocomplete value={value} onChange={setValue}>
- *   <Autocomplete.Input placeholder="대량 데이터" />
- *   <Autocomplete.Options
- *     items={bigItems}
- *     renderItem={(item) => <div style={{ padding: 8 }}>{item.label}</div>}
- *     itemHeight={36}
- *     maxVisibleItems={8}
- *     overscan={3}
- *   />
- * </Autocomplete>
- *
- * @example
- * // 5) disabled
- * <Autocomplete value={value} onChange={setValue} disabled>
- *   <Autocomplete.Input placeholder="비활성화" />
- *   <Autocomplete.Options
- *     items={items}
- *     renderItem={(item) => <div style={{ padding: 8 }}>{item.label}</div>}
- *   />
- * </Autocomplete>
- *
- * @example
- * // 6) children 모드 (소규모 리스트에만 권장)
- * const [value, setValue] = useState<string | null>(null);
- *
- * <Autocomplete value={value} onChange={setValue}>
- *   <Autocomplete.Input placeholder="직접 옵션 나열" />
- *   <Autocomplete.Options>
- *     <Autocomplete.Option value="seoul" label="Seoul" />
- *     <Autocomplete.Option value="busan" label="Busan" />
- *     <Autocomplete.Option value="jeju" label="Jeju" disabled />
- *   </Autocomplete.Options>
- * </Autocomplete>
- */
-const Autocomplete = Object.assign(AutocompleteContainer, {
-    Input,
-    Options,
-    Option,
-});
-
-exports.Autocomplete = Autocomplete;

package/dist/cjs/Autocomplete/Autocomplete.type.d.ts

@@ -1,37 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { TextInputProps } from '../Input/TextInput.type';
-export type AutocompleteItem = {
-    value: string;
-    label: string;
-    disabled?: boolean;
-};
-export interface AutocompleteProps {
-    value: string | null;
-    onChange: (v: string | null) => void;
-    inputValue?: string;
-    onInputChange?: (v: string) => void;
-    disabled?: boolean;
-    /** 옵션 필터 커스터마이즈 */
-    filterFn?: (item: AutocompleteItem, query: string) => boolean;
-    children: ReactNode;
-}
-export interface AutocompleteInputProps extends TextInputProps {
-    /** label 연결용 (없으면 aria-label 필수) */
-    'aria-label'?: string;
-}
-export interface AutocompleteOptionsProps extends HTMLAttributes<HTMLDivElement> {
-    /** ✅ 가상화 모드: 데이터 기반 */
-    items?: AutocompleteItem[];
-    /** 가상화 모드에서 항목 렌더 */
-    renderItem?: (item: AutocompleteItem) => ReactNode;
-    /** virtualization 옵션 */
-    itemHeight?: number;
-    maxVisibleItems?: number;
-    overscan?: number;
-}
-export interface AutocompleteOptionProps extends HTMLAttributes<HTMLDivElement> {
-    /** children 모드(비가상화) */
-    value: string;
-    label: string;
-    disabled?: boolean;
-}

package/dist/cjs/Autocomplete/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Autocomplete';
-export * from './Autocomplete.type';