@loword/loword-design-system 0.0.18 → 0.1.1

package/README.md

@@ -3,15 +3,15 @@
 [![npm version](https://img.shields.io/npm/v/@loword/loword-design-system.svg)](https://www.npmjs.com/package/@loword/loword-design-system)
 [![license](https://img.shields.io/npm/l/@loword/loword-design-system.svg)](./LICENSE)
 
-로워드 디자인 시스템 — React 19 컴포넌트 패키지. Tailwind CSS v4 기반이며 NPM(ESM)으로 배포됩니다.
+로워드 디자인 시스템 — React 19 컴포넌트 패키지입니다. Tailwind CSS v4를 쓰고 NPM(ESM)으로 배포합니다.
 
-> 모든 공개 컴포넌트는 `LD` 접두사를 사용합니다 (예: `LDButton`, `LDModal`, `LDInput`).
+> 공개 컴포넌트는 `LD` 접두사를 붙입니다 (예: `LDButton`, `LDModal`, `LDInput`).
 
 ## 요구사항
 
 - **React 19** / **React DOM 19** (peer dependency)
-- **Tailwind CSS v4** — 스타일 적용을 위해 필요
-- **Next.js 15** — 일부 컴포넌트(`LDTanstackTable`, `LDBreadCrumb`)는 `next/navigation`·`next/link`에 의존하므로 Next 환경에서만 동작 (optional)
+- **Tailwind CSS v4** — `theme.css` 경로로 쓸 때만 필요합니다. 완성된 `styles.css`만 쓴다면 없어도 됩니다.
+- **Next.js 15** (optional) — `LDTanstackTable`·`LDCollapsibleTanstackTable`·`TableField`는 `next/navigation`을 무조건 호출하므로 Next 환경에서만 돕니다.
 
 ## 설치
 
@@ -21,16 +21,23 @@ npm install @loword/loword-design-system
 pnpm add @loword/loword-design-system
 ```
 
-특정 컴포넌트(Editor, Carousel, Drawer, Table, Select, DatePicker 등)는 해당 기능의 라이브러리를 **optional peer dependency**로 사용합니다. 그 컴포넌트를 쓸 때만 함께 설치하세요 — 예: `@tiptap/*`(Editor), `embla-carousel-react`(Carousel), `vaul`(Drawer), `@radix-ui/*`(Modal/Popover/Tooltip/Select), `@tanstack/react-table`(Table), `react-day-picker`·`dayjs`(DatePicker), `react-hot-toast`(Toast).
+Editor·Carousel·Drawer·Table·Select·DatePicker 같은 일부 컴포넌트는 뒤에 깔린 라이브러리를 **optional peer dependency**로 둡니다. 해당 컴포넌트를 쓸 때만 같이 설치하면 됩니다 — `@tiptap/*`(Editor), `embla-carousel-react`(Carousel), `vaul`(Drawer), `@radix-ui/*`(Accordion/Modal/Popover/Tabs/Tooltip), `@tanstack/react-table`(Table), `react-day-picker`·`dayjs`(DatePicker), `react-hot-toast`(Toast).
 
 ## 설정
 
-스타일시트를 앱 진입점에서 **한 번** import 합니다.
+스타일시트는 앱 진입점에서 **한 번**만 import 합니다.
 
 ```ts
 import '@loword/loword-design-system/styles.css';
 ```
 
+`styles.css`는 컴파일이 끝난 CSS라 이것만으로 컴포넌트가 제대로 보입니다. 반면 자기 코드에서 `display40`, `bg-mono600` 같은 디자인 시스템 클래스를 직접 쓰려면 raw `@theme`/`@utility` 진입점인 `theme.css`를 앱의 Tailwind 엔트리에 따로 `@import` 해야 합니다.
+
+```css
+@import 'tailwindcss';
+@import '@loword/loword-design-system/theme.css';
+```
+
 ## 사용
 
 ```tsx
@@ -48,12 +55,14 @@ export default function Example() {
 명령형 API 예시:
 
 ```tsx
-import { openModal, Toast } from '@loword/loword-design-system';
+import { LDModal, LDToast } from '@loword/loword-design-system';
 
-const result = await openModal({ title: '삭제할까요?', /* ... */ });
-Toast.success('저장되었습니다');
+const result = await LDModal({ title: '삭제할까요?' /* ... */ });
+LDToast.success('저장되었습니다');
 ```
 
+> `openModal`은 `LDModal`의 하위호환 별칭(`@deprecated`)입니다. 새로 쓰는 코드에서는 `LDModal`을 씁니다.
+
 ### import 방식
 
 ```ts
@@ -66,19 +75,21 @@ import LDButton from '@loword/loword-design-system/components/LDButton/LDButton'
 
 ## 컴포넌트
 
-**기본/입력**: `LDButton` · `LDInput` · `LDCheckbox` · `LDCheckboxGroup` · `LDRadio` · `LDRadioGroup` · `LDSelect` · `LDMultiSelect` · `LDToggleButton` · `LDSlider` · `LDOTPInput` · `LDFileUploadBase`
+**기본/입력**: `LDButton` · `LDInput` · `LDTextarea` · `LDCheckbox` · `LDCheckboxGroup` · `LDRadio` · `LDRadioGroup` · `LDSelect` · `LDMultiSelect` · `LDAutoComplete` · `LDToggleButton` · `LDSegmented` · `LDSlider` · `LDRate` · `LDOTPInput` · `LDFileUpload` · `LDFileUploadList` · `LDImageUpload` · `LDImageUploadList` · `LDDaumPostButton`
 
 **날짜/시간**: `LDCalendar` · `LDDataCalendar` · `LDDatePicker` · `LDDateRangePicker` · `LDTimePicker`
 
-**레이아웃/표시**: `LDBadge` · `LDAvatar` · `LDDivider` · `LDCallout` · `LDSkeleton` · `LDSpinner` · `LDLoadingDots` · `LDScrollArea` · `LDBreadCrumb` · `LDMenuBar` · `LDLNBBase`
+**레이아웃/표시**: `LDBadge` · `LDAvatar` · `LDDivider` · `LDCallout` · `LDEmpty` · `LDSkeleton` · `LDSpinner` · `LDLoadingDots` · `LDProgressBar` · `LDScrollArea` · `LDAccordion` · `LDTeamHistory`
+
+**내비게이션**: `LDBreadCrumb` · `LDMenuBar` · `LDTabs` · `LDSectionNav` · `LDPagination` · `LDLNB` · `LDLNBBase`
 
-**오버레이/피드백/내비**: `LDModal` (+ `openModal`) · `LDDrawer` · `LDPopover` · `LDTooltip` · `LDToast` · `LDToaster`
+**오버레이/피드백**: `LDModal` · `LDModalView` · `LDDrawer` · `LDPopover` · `LDTooltip` · `LDToast` · `LDToaster` · `LDNotification`
 
-**콘텐츠**: `LDEditor` · `LDViewer` · `LDCarousel` · `LDTable` · `LDTanstackTable` · `LDPagination`
+**콘텐츠/데이터**: `LDEditor` · `LDViewer` · `LDCarousel` · `LDChart` · `LDTable` · `LDTanstackTable` · `LDCollapsibleTanstackTable` · `TableField`
 
-**폼 연동 / 헬퍼** (LD 접두사 없음): `Form` · `NativeForm` · `FormField` · `FormErrorMessage` · `FormInput` · `FormSelect` · `FormMultiSelect` · `FormCheckbox` · `FormCheckboxGroup` · `FormRadioGroup` · `FormDatePicker` · `FormDateRangePicker` · `FormTimePicker` · `FormToggleButton` · `TableField` · `LucideIcon`
+**폼 연동**: `LDForm` · `LDNativeForm` · `LDFormField` · `LDFormErrorMessage` · `LDFormInput` · `LDFormTextarea` · `LDFormSelect` · `LDFormMultiSelect` · `LDFormCheckbox` · `LDFormCheckboxGroup` · `LDFormRadioGroup` · `LDFormDatePicker` · `LDFormDateRangePicker` · `LDFormTimePicker` · `LDFormToggleButton` · `LDFormOTPInput` · `LDFormRate`
 
-> 폼 래퍼(`Form*`, `TableField`)와 `LucideIcon`은 디자인 컴포넌트가 아니므로 원래 이름을 유지합니다.
+> barrel의 값 export는 `TableField`(TanStack Table 연동 래퍼) · `openModal`(`LDModal`의 하위호환 별칭) · `TextareaContent` 셋 말고는 전부 `LD` 접두사입니다. 타입 export에는 예외가 조금 더 있습니다.
 
 ## 빠른 시작 (개발)
 
@@ -87,17 +98,22 @@ pnpm install          # 의존성 설치
 pnpm storybook        # Storybook 개발 서버 (port 6006)
 pnpm build            # 프로덕션 빌드
 pnpm check-types      # 타입 체크
-pnpm lint             # 린트 (--max-warnings 0)
+pnpm lint             # ESLint (--fix 포함, src + .storybook)
+pnpm prettier         # Prettier
+pnpm test             # vitest (utils 유닛 + 스토리 브라우저 실행 + a11y)
 ```
 
 ## 문서
 
-- **아키텍처 및 상세 가이드**: [docs/architecture.md](./docs/architecture.md)
+- **아키텍처와 상세 가이드**: [docs/architecture.md](./docs/architecture.md)
   - 3-Layer 구조 (Base → Custom → Function)
-  - 컴포넌트 목록 및 특수 구조
-  - 스타일 체계 (디자인 토큰, `cn()`)
-  - Storybook 스타일 제어 및 stories 생성 방법
-  - Props 문서화 (JSDoc)
+  - 컴포넌트 목록과 특수 구조
+  - 스타일 체계 (디자인 토큰, `cn()`, `tv()`)
+  - 타입 · 테스트 · 린트/포매팅 체계
+  - Storybook 스타일 제어와 stories 생성 방법
+- **프리셋 스타일 작성 규칙**: [docs/style-conventions.md](./docs/style-conventions.md)
+- **CSS 캐스케이드 레이어**: [docs/css-layers.md](./docs/css-layers.md) — 컴포넌트 스타일이 왜 이기고 지는지, className override가 안 먹을 때의 진단 순서
+- **타입 컨벤션**: [docs/type-conventions.md](./docs/type-conventions.md)
 - **변경 이력**: [docs/CHANGELOG.md](./docs/CHANGELOG.md)
 
 ## 라이선스

package/dist/components/LDAccordion/AccordionBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDAccordion/AccordionBase.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,KAAK,SAAS,GACV;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAeN,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkBD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAgBD,eAAO,MAAM,aAAa;8CAzEuB,SAAS;qDAoBF,SAAS;uCAkBvB,YAAY;uCAqBZ,YAAY;CAmBrD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"AccordionBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDAccordion/AccordionBase.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,SAAS,GACV;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GACD;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAeN,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAaD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAUD,eAAO,MAAM,aAAa;8CA9DuB,SAAS;qDAoBF,SAAS;uCAkBvB,YAAY;uCAgBZ,YAAY;CAarD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/LDAccordion/AccordionBase.js

@@ -1,19 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as RadixAccordion from '@radix-ui/react-accordion';
-import cn from '../../utils/cn.js';
 const Root = ({ className, children, ...props }) => {
     return (
     // Radix의 single/multiple 판별 유니온을 그대로 위임한다.
-    _jsx(RadixAccordion.Root, { ...props, className: cn('w-full', className), children: children }));
+    _jsx(RadixAccordion.Root, { ...props, className: className, children: children }));
 };
 const Item = ({ value, disabled, className, children }) => {
     return (_jsx(RadixAccordion.Item, { value: value, disabled: disabled, className: className, children: children }));
 };
 const Trigger = ({ className, children }) => {
-    return (_jsx(RadixAccordion.Header, { className: "flex", children: _jsx(RadixAccordion.Trigger, { className: cn('flex w-full items-center justify-between cursor-pointer disabled:cursor-not-allowed', className), children: children }) }));
+    return (_jsx(RadixAccordion.Header, { children: _jsx(RadixAccordion.Trigger, { className: className, children: children }) }));
 };
 const Content = ({ className, children }) => {
-    return (_jsx(RadixAccordion.Content, { className: cn('overflow-hidden', 'data-[state=open]:accordion-down data-[state=closed]:accordion-up', className), children: children }));
+    return (_jsx(RadixAccordion.Content, { className: className, children: children }));
 };
 export const AccordionBase = {
     Root,

package/dist/components/LDAccordion/LDAccordion.d.ts

@@ -1,4 +1,7 @@
-import { type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
+import AccordionBase from '../../components/LDAccordion/AccordionBase.js';
+import type { Size } from '../../types/common.js';
+export type AccordionFontSize = Size;
 /** 아코디언 개별 항목 */
 export interface LDAccordionItem {
     /** 항목을 구분하는 고유 값 */
@@ -23,9 +26,37 @@ export interface LDAccordionProps {
     onValueChange?: (value: string | string[]) => void;
     /** single일 때 열린 항목을 다시 닫아 전체 닫힘 허용. 기본 true */
     collapsible?: boolean;
+    /** 제목/본문 글자 크기 프리셋. 기본 large(18/16) */
+    fontSize?: AccordionFontSize;
+    /** 닫힌 항목에 어두운 배경을 적용. 기본 false */
+    isDark?: boolean;
     /** 루트 컨테이너 className */
     className?: string;
 }
-declare const LDAccordion: ({ items, type, defaultValue, value, onValueChange, collapsible, className, }: LDAccordionProps) => import("react/jsx-runtime").JSX.Element;
+export type LDAccordionRootProps = ComponentProps<typeof AccordionBase.Root>;
+export interface LDAccordionItemProps extends ComponentProps<typeof AccordionBase.Item> {
+    /** 어두운 배경을 적용. Trigger에도 같은 값을 넘겨야 글자색이 맞습니다 */
+    isDark?: boolean;
+}
+export interface LDAccordionTriggerProps extends ComponentProps<typeof AccordionBase.Trigger> {
+    /** 제목 글자 크기 프리셋. 기본 large */
+    fontSize?: AccordionFontSize;
+    /** 어두운 배경 위에 놓일 때의 글자색을 적용 */
+    isDark?: boolean;
+}
+export interface LDAccordionContentProps extends ComponentProps<typeof AccordionBase.Content> {
+    /** 본문 글자 크기 프리셋. 기본 large */
+    fontSize?: AccordionFontSize;
+}
+export type LDAccordionIndicatorProps = Omit<ComponentProps<'span'>, 'aria-hidden' | 'children'>;
+/** items로 일반적인 아코디언 구성을 제공하는 Styled Single 컴포넌트입니다. */
+declare const LDAccordion: {
+    ({ items, type, defaultValue, value, onValueChange, collapsible, fontSize, isDark, className, }: LDAccordionProps): import("react/jsx-runtime").JSX.Element;
+    Root: ({ className, ...props }: LDAccordionRootProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ isDark, className, ...props }: LDAccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: ({ fontSize, isDark, className, ...props }: LDAccordionTriggerProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ className, ...props }: LDAccordionIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ fontSize, className, children, ...props }: LDAccordionContentProps) => import("react/jsx-runtime").JSX.Element;
+};
 export default LDAccordion;
 //# sourceMappingURL=LDAccordion.d.ts.map

package/dist/components/LDAccordion/LDAccordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDAccordion.d.ts","sourceRoot":"","sources":["../../../src/components/LDAccordion/LDAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,iBAAiB;AACjB,MAAM,WAAW,eAAe;IAC9B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,mBAAmB;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,iBAAiB;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,iBAAiB;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,GAAI,8EAQlB,gBAAgB,4CA2DlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"LDAccordion.d.ts","sourceRoot":"","sources":["../../../src/components/LDAccordion/LDAccordion.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,aAAa,MAAM,wCAAwC,CAAC;AAEnE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAI3C,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC;AAErC,iBAAiB;AACjB,MAAM,WAAW,eAAe;IAC9B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,mBAAmB;IACnB,OAAO,EAAE,SAAS,CAAC;IACnB,iBAAiB;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB;IACtB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IAC7B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACjC,wBAAwB;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,iBAAiB;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IACnD,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,kCAAkC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAC;AAC7E,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAC1D,OAAO,aAAa,CAAC,IAAI,CAC1B;IACC,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AACD,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAC7D,OAAO,aAAa,CAAC,OAAO,CAC7B;IACC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AACD,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAC7D,OAAO,aAAa,CAAC,OAAO,CAC7B;IACC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AACD,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,cAAc,CAAC,MAAM,CAAC,EACtB,aAAa,GAAG,UAAU,CAC3B,CAAC;AA0HF,uDAAuD;AACvD,QAAA,MAAM,WAAW;qGAUd,gBAAgB;oCAzEoB,oBAAoB;4CAYxD,oBAAoB;yDAapB,uBAAuB;yCAQkB,yBAAyB;2DAoBlE,uBAAuB;CAqDzB,CAAC;AAQF,eAAe,WAAW,CAAC"}

package/dist/components/LDAccordion/LDAccordion.js

@@ -1,8 +1,66 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import AccordionBase from './AccordionBase.js';
+import { ChevronDown } from 'lucide-react';
+import AccordionBase from '../../components/LDAccordion/AccordionBase.js';
+import RenderIcon from '../../components/RenderIcon/RenderIcon.js';
 import cn from '../../utils/cn.js';
-const LDAccordion = ({ items, type = 'single', defaultValue, value, onValueChange, collapsible = true, className, }) => {
+import tv from '../../utils/tv.js';
+// ── 스타일 프리셋 ──
+const itemVariants = tv({
+    base: 'rounded-[5px] border border-solid transition-colors duration-300 data-disabled:opacity-40 data-[state=open]:border-transparent data-[state=open]:bg-neutral50',
+    variants: {
+        isDark: {
+            true: 'border-neutral900 bg-neutral900 hover:bg-neutral800',
+            false: 'border-neutral50 bg-transparent hover:bg-neutral50',
+        },
+    },
+});
+// flex 배치와 cursor는 Base에서 Styled로 옮겨온 것이라 여기서 유지한다.
+// select-none은 제목을 드래그로 긁을 때 mouseup이 클릭으로 이어져 토글되는 것을 막는다.
+const triggerVariants = tv({
+    base: 'group flex w-full cursor-pointer items-center justify-between p-4 text-left bold select-none disabled:cursor-not-allowed',
+    variants: {
+        fontSize: {
+            '2xsmall': 'display10',
+            xsmall: 'display12',
+            small: 'display14',
+            medium: 'display16',
+            large: 'display18',
+            xlarge: 'display20',
+            '2xlarge': 'display24',
+        },
+        isDark: {
+            true: 'text-neutral500 data-[state=open]:text-neutral900',
+            false: 'text-neutral900',
+        },
+    },
+});
+// overflow-hidden과 여닫기 애니메이션도 Base에서 옮겨온 것이라 여기서 유지한다.
+const contentVariants = tv({
+    base: 'overflow-hidden text-neutral900 data-[state=closed]:accordion-up data-[state=open]:accordion-down',
+    variants: {
+        fontSize: {
+            '2xsmall': 'display10',
+            xsmall: 'display10',
+            small: 'display12',
+            medium: 'display14',
+            large: 'display16',
+            xlarge: 'display18',
+            '2xlarge': 'display20',
+        },
+    },
+});
+/** 열림 상태와 단일 또는 다중 선택 방식을 관리하는 루트입니다. */
+const Root = ({ className, ...props }) => (_jsx(AccordionBase.Root, { className: cn('flex w-full flex-col gap-2.5', className), ...props }));
+/** 하나의 접이식 항목을 구성합니다. */
+const Item = ({ isDark = false, className, ...props }) => (_jsx(AccordionBase.Item, { className: itemVariants({ isDark, className }), ...props }));
+/** 항목의 열림 상태를 변경하는 헤더 버튼입니다. */
+const Trigger = ({ fontSize = 'large', isDark = false, className, ...props }) => (_jsx(AccordionBase.Trigger, { className: triggerVariants({ fontSize, isDark, className }), ...props }));
+/** 항목의 열림 상태를 나타내는 기본 화살표입니다. */
+const Indicator = ({ className, ...props }) => (_jsx("span", { className: cn('relative shrink-0', className), ...props, "aria-hidden": "true", children: _jsx(RenderIcon, { className: cn('text-neutral500', 'group-data-[state=open]:rotate-180'), children: _jsx(ChevronDown, {}) }) }));
+/** 항목이 열렸을 때 표시되는 콘텐츠 영역입니다. */
+const Content = ({ fontSize = 'large', className, children, ...props }) => (_jsx(AccordionBase.Content, { className: contentVariants({ fontSize, className }), ...props, children: children && _jsx("div", { className: "px-4 pb-4", children: children }) }));
+/** items로 일반적인 아코디언 구성을 제공하는 Styled Single 컴포넌트입니다. */
+const LDAccordion = ({ items, type = 'single', defaultValue, value, onValueChange, collapsible = true, fontSize = 'large', isDark = false, className, }) => {
     // single/multiple 유니온을 Base로 넘기기 위해 공통 props를 한 번에 캐스팅한다.
     const rootProps = {
         type,
@@ -11,11 +69,16 @@ const LDAccordion = ({ items, type = 'single', defaultValue, value, onValueChang
         onValueChange,
         ...(type === 'single' ? { collapsible } : {}),
     };
-    return (_jsx(AccordionBase.Root, { ...rootProps, className: cn('flex flex-col gap-2.5', className), children: items.map((item) => {
-            // content가 없으면(nullish/false) 펼칠 게 없으므로 chevron·Content를 렌더하지 않는다.
-            // (헤더 트리거 자체는 그대로 유지)
+    return (_jsx(Root, { ...rootProps, className: className, children: items.map((item) => {
+            // content가 없으면(nullish/false) 펼칠 게 없으므로 chevron을 렌더하지 않는다.
+            // (Content 엘리먼트 자체는 aria-controls 대상이라 항상 렌더한다)
             const hasContent = item.content != null && item.content !== false;
-            return (_jsxs(AccordionBase.Item, { value: item.value, disabled: item.disabled, className: cn(item.disabled && 'opacity-40'), children: [_jsxs(AccordionBase.Trigger, { className: "group text-neutral900 display16 bold text-left", children: [item.title, hasContent && (_jsxs("div", { className: "relative size-5 text-neutral500", children: [_jsx(ChevronDown, { className: cn('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', 'group-data-[state=open]:animate-fade-in', 'group-data-[state=closed]:animate-fade-out'), "aria-hidden": true }), _jsx(ChevronUp, { className: cn('absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2', 'group-data-[state=open]:animate-fade-out', 'group-data-[state=closed]:animate-fade-in'), "aria-hidden": true })] }))] }), hasContent && (_jsx(AccordionBase.Content, { className: "text-neutral700 display14", children: _jsx("div", { className: "pl-5 pt-2.5", children: item.content }) }))] }, item.value));
+            return (_jsxs(Item, { value: item.value, disabled: item.disabled, isDark: isDark, children: [_jsxs(Trigger, { fontSize: fontSize, isDark: isDark, children: [item.title, hasContent && _jsx(Indicator, {})] }), _jsx(Content, { fontSize: fontSize, children: item.content })] }, item.value));
         }) }));
 };
+LDAccordion.Root = Root;
+LDAccordion.Item = Item;
+LDAccordion.Trigger = Trigger;
+LDAccordion.Indicator = Indicator;
+LDAccordion.Content = Content;
 export default LDAccordion;

package/dist/components/LDAutoComplete/AutoCompleteBase.d.ts

@@ -1,36 +1,50 @@
-import { type ReactNode, type Ref } from 'react';
+import { type ComponentProps, type Dispatch, type KeyboardEvent, type ReactNode, type Ref, type RefObject, type SetStateAction } from 'react';
+import InputBase from '../../components/LDInput/InputBase.js';
 export interface IAutoCompleteItem {
     id: string | number;
 }
-interface RootProps<T extends IAutoCompleteItem> {
+export declare const getItemValue: (item: IAutoCompleteItem, field: string) => unknown;
+interface IAutoCompleteContextValue {
+    query: string;
+    isOpen: boolean;
+    isLoading: boolean;
+    options: IAutoCompleteItem[];
+    focusedIdx: number;
+    displayField: string;
+    subFields?: string[];
+    listId: string;
+    getOptionId: (index: number) => string;
+    handleChange: (text: string) => void;
+    handleKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    handleSelect: (item: IAutoCompleteItem) => void;
+    setIsOpen: (open: boolean) => void;
+    setFocusedIdx: Dispatch<SetStateAction<number>>;
+    setIsComposing: (composing: boolean) => void;
+    itemRefs: RefObject<(HTMLLIElement | null)[]>;
+}
+/** Root가 제공하는 검색 상태와 핸들러를 하위 컴포넌트에서 읽습니다. */
+export declare const useAutoCompleteContext: () => IAutoCompleteContextValue;
+export interface AutoCompleteBaseRootProps<T extends IAutoCompleteItem> extends Omit<ComponentProps<'div'>, 'onChange'> {
     displayField: Extract<keyof T, string>;
     subFields?: Extract<keyof T, string>[];
     onSelectedItem?: (item: T | null) => void;
     onChange: (query: string) => Promise<T[] | undefined>;
-    className?: string;
-    children?: ReactNode;
     ref?: Ref<HTMLDivElement>;
 }
-type InputSize = '2xsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-interface InputProps {
-    placeholder?: string;
-    size?: InputSize;
-    className?: string;
-}
-interface ListProps {
-    size?: InputSize;
-    className?: string;
-    emptyMessage?: ReactNode;
+export type AutoCompleteBaseInputProps = ComponentProps<typeof InputBase.Field>;
+export interface AutoCompleteBaseListProps extends Omit<ComponentProps<'ul'>, 'children'> {
+    /** 옵션 하나를 그리는 방법입니다. Styled 레이어가 기본 Item을 넣어줍니다. */
+    renderItem: (item: IAutoCompleteItem, index: number) => ReactNode;
 }
-interface ItemProps {
+export interface AutoCompleteBaseItemProps extends ComponentProps<'li'> {
     item: IAutoCompleteItem;
     index: number;
 }
-export declare const LDAutoCompleteBase: {
-    Root: <T extends IAutoCompleteItem>({ displayField, subFields, onSelectedItem, onChange, className, children, ref, }: RootProps<T>) => import("react/jsx-runtime").JSX.Element;
-    Input: ({ placeholder, size, className, }: InputProps) => import("react/jsx-runtime").JSX.Element;
-    List: ({ size, className, emptyMessage, }: ListProps) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ item, index }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AutoCompleteBase: {
+    Root: <T extends IAutoCompleteItem>({ displayField, subFields, onSelectedItem, onChange, children, ref, ...props }: AutoCompleteBaseRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ placeholder, ...props }: AutoCompleteBaseInputProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ renderItem, ...props }: AutoCompleteBaseListProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ item, index, children, ...props }: AutoCompleteBaseItemProps) => import("react/jsx-runtime").JSX.Element;
 };
-export default LDAutoCompleteBase;
+export default AutoCompleteBase;
 //# sourceMappingURL=AutoCompleteBase.d.ts.map

package/dist/components/LDAutoComplete/AutoCompleteBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoCompleteBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDAutoComplete/AutoCompleteBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,GAAG,EAST,MAAM,OAAO,CAAC;AAIf,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AA4CD,UAAU,SAAS,CAAC,CAAC,SAAS,iBAAiB;IAC7C,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAyJD,KAAK,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;AAYhF,UAAU,UAAU;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsCD,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAgDD,UAAU,SAAS;IACjB,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAuCD,eAAO,MAAM,kBAAkB;WA3SjB,CAAC,SAAS,iBAAiB,oFAQtC,SAAS,CAAC,CAAC,CAAC;+CAqKZ,UAAU;+CA0CV,SAAS;4BA+CmB,SAAS;CA0CvC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"AutoCompleteBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDAutoComplete/AutoCompleteBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,QAAQ,EACb,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,GAAG,EACR,KAAK,SAAS,EACd,KAAK,cAAc,EAOpB,MAAM,OAAO,CAAC;AAEf,OAAO,SAAS,MAAM,gCAAgC,CAAC;AAEvD,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,GAAI,MAAM,iBAAiB,EAAE,OAAO,MAAM,YACL,CAAC;AAE/D,UAAU,yBAAyB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,iBAAiB,EAAE,CAAC;IAC7B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D,YAAY,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,SAAS,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAChD,cAAc,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;CAC/C;AAMD,6CAA6C;AAC7C,eAAO,MAAM,sBAAsB,iCAOlC,CAAC;AAEF,MAAM,WAAW,yBAAyB,CACxC,CAAC,SAAS,iBAAiB,CAC3B,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC/C,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IACvC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC;IACtD,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA4JD,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,CAAC;AA0ChF,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CACrD,cAAc,CAAC,IAAI,CAAC,EACpB,UAAU,CACX;IACC,oDAAoD;IACpD,UAAU,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CACnE;AAYD,MAAM,WAAW,yBAA0B,SAAQ,cAAc,CAAC,IAAI,CAAC;IACrE,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AA4BD,eAAO,MAAM,gBAAgB;WArPf,CAAC,SAAS,iBAAiB,kFAQtC,yBAAyB,CAAC,CAAC,CAAC;uCAuJ5B,0BAA0B;qCA6CW,yBAAyB;gDAoB9D,yBAAyB;CA0B3B,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/LDAutoComplete/AutoCompleteBase.js

@@ -1,25 +1,17 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react';
-import LDSpinner from '../../components/LDSpinner/LDSpinner.js';
-import cn from '../../utils/cn.js';
-const getItemValue = (item, field) => item[field];
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useId, useRef, useState, } from 'react';
+import InputBase from '../../components/LDInput/InputBase.js';
+export const getItemValue = (item, field) => item[field];
 const AutoCompleteContext = createContext(null);
-const useAutoCompleteContext = () => {
+/** Root가 제공하는 검색 상태와 핸들러를 하위 컴포넌트에서 읽습니다. */
+export const useAutoCompleteContext = () => {
     const autoCompleteContext = useContext(AutoCompleteContext);
     if (!autoCompleteContext)
-        throw new Error('LDAutoComplete 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
+        throw new Error('AutoCompleteBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
     return autoCompleteContext;
 };
-const autoCompleteSizeClasses = {
-    '2xsmall': 'autocomplete-2xs',
-    xsmall: 'autocomplete-xs',
-    small: 'autocomplete-sm',
-    medium: 'autocomplete-md',
-    large: 'autocomplete-lg',
-    xlarge: 'autocomplete-xl',
-};
-const Root = ({ displayField, subFields, onSelectedItem, onChange, className, children, ref, }) => {
+const Root = ({ displayField, subFields, onSelectedItem, onChange, children, ref, ...props }) => {
     const [query, setQuery] = useState('');
     const [isOpen, setIsOpen] = useState(false);
     const [options, setOptions] = useState([]);
@@ -29,6 +21,7 @@ const Root = ({ displayField, subFields, onSelectedItem, onChange, className, ch
     const [isLoading, setIsLoading] = useState(false);
     const wrapperRef = useRef(null);
     const itemRefs = useRef([]);
+    const listId = useId();
     const combinedRef = useCallback((node) => {
         wrapperRef.current = node;
         if (typeof ref === 'function')
@@ -133,6 +126,8 @@ const Root = ({ displayField, subFields, onSelectedItem, onChange, className, ch
             focusedIdx,
             displayField,
             subFields,
+            listId,
+            getOptionId: (index) => `${listId}-option-${index}`,
             handleChange,
             handleKeyDown,
             handleSelect: handleContextSelect,
@@ -140,45 +135,29 @@ const Root = ({ displayField, subFields, onSelectedItem, onChange, className, ch
             setFocusedIdx,
             setIsComposing,
             itemRefs,
-        }, children: _jsx("div", { ref: combinedRef, className: cn('relative z-40 w-full', className), children: children }) }));
-};
-// ── 스타일 매핑 ──
-const inputSizeClasses = {
-    '2xsmall': 'input-2xs',
-    xsmall: 'input-xs',
-    small: 'input-sm',
-    medium: 'input-md',
-    large: 'input-lg',
-    xlarge: 'input-xl',
+        }, children: _jsx("div", { ref: combinedRef, ...props, children: children }) }));
 };
-const Input = ({ placeholder = '검색어를 입력하세요', size = 'medium', className, }) => {
-    const { query, isOpen, handleChange, handleKeyDown, setIsComposing, setIsOpen, } = useAutoCompleteContext();
-    return (_jsx("input", { type: "text", placeholder: placeholder, value: query, onChange: (e) => handleChange(e.target.value), onKeyDown: handleKeyDown, onCompositionStart: () => setIsComposing(true), onCompositionEnd: () => setIsComposing(false), onFocus: () => {
+const Input = ({ placeholder = '검색어를 입력하세요', ...props }) => {
+    const { query, isOpen, focusedIdx, listId, getOptionId, handleChange, handleKeyDown, setIsComposing, setIsOpen, } = useAutoCompleteContext();
+    return (_jsx(InputBase.Field, { type: "text", role: "combobox", "aria-expanded": isOpen, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": focusedIdx >= 0 ? getOptionId(focusedIdx) : undefined, placeholder: placeholder, value: query, onChange: (e) => handleChange(e.target.value), onKeyDown: handleKeyDown, onCompositionStart: () => setIsComposing(true), onCompositionEnd: () => setIsComposing(false), onFocus: () => {
             if (query)
                 setIsOpen(true);
-        }, className: cn('w-full rounded-[5px] border-transparent bg-neutral50 outline-2', inputSizeClasses[size], isOpen ? 'bg-tintBlue outline-lb500' : 'outline-0', className) }));
+        }, ...props }));
 };
-const List = ({ size = 'medium', className, emptyMessage = '조회하신 데이터가 없습니다.', }) => {
-    const { isOpen, isLoading, options } = useAutoCompleteContext();
-    return (_jsxs("div", { className: cn('overflow-y-auto absolute left-0 mt-1 w-full bg-white border shadow-md rounded-[5px] border-mono300 h-45 ld-transition', autoCompleteSizeClasses[size], isOpen
-            ? 'visible opacity-100 pointer-events-auto'
-            : 'invisible opacity-0 pointer-events-none', className), children: [_jsx("ul", { className: cn('ld-transition', options.length > 0 ? 'opacity-100 visible' : 'opacity-0 invisible'), children: options.map((item, index) => (_jsx(Item, { item: item, index: index }, item.id))) }), _jsx("div", { className: cn('flex items-center justify-center text-neutral500 transition-opacity duration-300 ease-in-out', options.length === 0
-                    ? 'opacity-100 visible h-full'
-                    : 'opacity-0 invisible h-0'), children: isLoading ? (_jsx(LDSpinner, { size: size, className: "text-lb500!" })) : (emptyMessage) })] }));
+const List = ({ renderItem, ...props }) => {
+    const { options, listId } = useAutoCompleteContext();
+    return (_jsx("ul", { id: listId, role: "listbox", ...props, children: options.map((item, index) => renderItem(item, index)) }));
 };
-const Item = ({ item, index }) => {
-    const { displayField, subFields, focusedIdx, setFocusedIdx, handleSelect, itemRefs, } = useAutoCompleteContext();
-    return (_jsxs("li", { ref: (el) => {
+const Item = ({ item, index, children, ...props }) => {
+    const { focusedIdx, setFocusedIdx, handleSelect, getOptionId, itemRefs } = useAutoCompleteContext();
+    return (_jsx("li", { ref: (el) => {
             itemRefs.current[index] = el;
-        }, className: cn('autocomplete-item flex flex-col cursor-pointer ld-transition border-b border-mono300', focusedIdx === index ? 'bg-tintBlue' : 'hover:bg-mono100'), onClick: () => handleSelect(item), onMouseEnter: () => setFocusedIdx(index), children: [_jsx("div", { className: "truncate text-black", children: String(getItemValue(item, displayField) ?? '') }), subFields && subFields.length > 0 && (_jsx("span", { className: "autocomplete-secondary truncate text-neutral500", children: subFields
-                    .map((field) => String(getItemValue(item, field) ?? ''))
-                    .filter(Boolean)
-                    .join(' / ') }))] }));
+        }, id: getOptionId(index), role: "option", "aria-selected": focusedIdx === index, onClick: () => handleSelect(item), onMouseEnter: () => setFocusedIdx(index), ...props, children: children }));
 };
-export const LDAutoCompleteBase = {
+export const AutoCompleteBase = {
     Root,
     Input,
     List,
     Item,
 };
-export default LDAutoCompleteBase;
+export default AutoCompleteBase;

package/dist/components/LDAutoComplete/LDAutoComplete.d.ts

@@ -1,19 +1,69 @@
-import type { ReactNode, Ref } from 'react';
-import { type IAutoCompleteItem } from './AutoCompleteBase.js';
-import type { InputSize } from '../LDInput/LDInput.js';
+import type { ComponentProps, ReactNode, Ref } from 'react';
+import { type AutoCompleteBaseInputProps, type AutoCompleteBaseItemProps, type AutoCompleteBaseListProps, type AutoCompleteBaseRootProps, type IAutoCompleteItem } from '../../components/LDAutoComplete/AutoCompleteBase.js';
+import type { InputSize, InputVariant } from '../../components/LDInput/LDInput.js';
 export interface LDAutoCompleteProps<T extends IAutoCompleteItem> {
+    /** 목록에 표시하고 선택 시 입력창을 채울 필드명 */
     displayField: Extract<keyof T, string>;
+    /** 항목 아래 줄에 함께 보여줄 보조 필드명 목록 */
     subFields?: Extract<keyof T, string>[];
+    /** 입력어를 받아 옵션 배열을 반환하는 비동기 조회 함수 */
     onChange: (query: string) => Promise<T[] | undefined>;
+    /** 항목 선택 시 호출. 입력창이 비면 null이 전달됩니다 */
     onSelectedItem?: (item: T | null) => void;
+    /** 입력창 placeholder */
     placeholder?: string;
+    /** 입력창 왼쪽에 겹쳐 표시할 아이콘. 포커스하거나 값이 차면 사라지고 캐럿이 그 자리로 이동합니다 */
+    prefixIcon?: ReactNode;
+    /** 입력창과 목록의 크기 프리셋 */
     size?: InputSize;
+    /** 입력창 스타일 유형. 기본값 filled */
+    variant?: InputVariant;
+    /** 입력창에 그림자를 표시할지 여부. 기본값 false */
+    showShadow?: boolean;
+    /** 조회 결과가 없을 때 표시할 내용 */
     emptyMessage?: ReactNode;
+    /** 루트 컨테이너 className */
     className?: string;
+    /** 입력창 className */
     inputClassName?: string;
+    /** 드롭다운 className */
     listClassName?: string;
     ref?: Ref<HTMLDivElement>;
 }
-declare const LDAutoComplete: <T extends IAutoCompleteItem>({ displayField, subFields, onChange, onSelectedItem, placeholder, size, emptyMessage, className, inputClassName, listClassName, ref, }: LDAutoCompleteProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type LDAutoCompleteRootProps<T extends IAutoCompleteItem> = AutoCompleteBaseRootProps<T>;
+export interface LDAutoCompleteInputProps extends Omit<AutoCompleteBaseInputProps, 'size'> {
+    /** 입력창 크기 프리셋. 기본값 medium. native size 속성을 대체합니다 */
+    size?: InputSize;
+    /** 입력창 스타일 유형. 기본값 filled */
+    variant?: InputVariant;
+    /** 입력창에 그림자를 표시할지 여부. 기본값 false */
+    showShadow?: boolean;
+    /** 입력창 왼쪽에 겹쳐 표시할 아이콘. 포커스하거나 값이 차면 사라집니다 */
+    prefixIcon?: ReactNode;
+}
+export interface LDAutoCompleteDropdownProps extends ComponentProps<'div'> {
+    /** 목록 크기 프리셋. 기본값 medium */
+    size?: InputSize;
+}
+export type LDAutoCompleteListProps = AutoCompleteBaseListProps;
+export type LDAutoCompleteItemProps = AutoCompleteBaseItemProps;
+export type LDAutoCompleteItemPrimaryProps = ComponentProps<'div'>;
+export type LDAutoCompleteItemSecondaryProps = ComponentProps<'span'>;
+export interface LDAutoCompleteEmptyProps extends ComponentProps<'div'> {
+    /** 로딩 스피너 크기 프리셋. 기본값 medium */
+    size?: InputSize;
+}
+/** 입력창과 목록을 props로 구성하는 Styled Single 컴포넌트입니다. */
+declare const LDAutoComplete: {
+    <T extends IAutoCompleteItem>({ displayField, subFields, onChange, onSelectedItem, placeholder, prefixIcon, size, variant, showShadow, emptyMessage, className, inputClassName, listClassName, ref, }: LDAutoCompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+    Root: <T extends IAutoCompleteItem>({ className, ...props }: LDAutoCompleteRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+    Input: ({ size, variant, showShadow, prefixIcon, className, ...props }: LDAutoCompleteInputProps) => import("react/jsx-runtime").JSX.Element;
+    Dropdown: ({ size, className, ...props }: LDAutoCompleteDropdownProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ className, ...props }: LDAutoCompleteListProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ item, index, className, children, ...props }: LDAutoCompleteItemProps) => import("react/jsx-runtime").JSX.Element;
+    ItemPrimary: ({ className, ...props }: LDAutoCompleteItemPrimaryProps) => import("react/jsx-runtime").JSX.Element;
+    ItemSecondary: ({ className, ...props }: LDAutoCompleteItemSecondaryProps) => import("react/jsx-runtime").JSX.Element;
+    Empty: ({ size, className, children, ...props }: LDAutoCompleteEmptyProps) => import("react/jsx-runtime").JSX.Element;
+};
 export default LDAutoComplete;
 //# sourceMappingURL=LDAutoComplete.d.ts.map

package/dist/components/LDAutoComplete/LDAutoComplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LDAutoComplete.d.ts","sourceRoot":"","sources":["../../../src/components/LDAutoComplete/LDAutoComplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAA2B,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,iBAAiB;IAC9D,YAAY,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,QAAA,MAAM,cAAc,GAAI,CAAC,SAAS,iBAAiB,EAAE,wIAYlD,mBAAmB,CAAC,CAAC,CAAC,4CAsBxB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"LDAutoComplete.d.ts","sourceRoot":"","sources":["../../../src/components/LDAutoComplete/LDAutoComplete.tsx"],"names":[],"mappings":"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"}