@wishket/design-system 1.5.0 → 1.5.2

package/dist/Components/Inputs/SegmentedControl/SegmentedControl.d.ts

@@ -7,5 +7,33 @@ interface SegmentedControlProps {
     name?: string;
     onChange: (value: string) => void;
 }
+/**
+ * 여러 옵션 중 하나를 선택할 수 있는 세그먼트 컨트롤 컴포넌트입니다.
+ *
+ * @param {Object} props
+ * @param {Array<{key: string, name: string}>} props.valueList - 선택 가능한 옵션들의 배열 ({key, name}[])
+ * @param {string} props.selectedValue - 현재 선택된 옵션의 key 값
+ * @param {string} [props.name='segmented-control'] - 라디오 그룹의 name 속성
+ * @param {(value: string) => void} props.onChange - 선택 값이 변경될 때 호출되는 콜백 함수
+ *
+ * @example
+ * ```tsx
+ * const options = [
+ *   { key: 'daily', name: '일간' },
+ *   { key: 'weekly', name: '주간' },
+ *   { key: 'monthly', name: '월간' }
+ * ];
+ *
+ * const [selected, setSelected] = useState('daily');
+ *
+ * return (
+ *   <SegmentedControl
+ *     valueList={options}
+ *     selectedValue={selected}
+ *     onChange={setSelected}
+ *   />
+ * );
+ * ```
+ */
 declare const SegmentedControl: ({ valueList, selectedValue, name, onChange, }: SegmentedControlProps) => import("react/jsx-runtime").JSX.Element;
 export default SegmentedControl;

package/dist/Components/Inputs/Switch/Switch.d.ts

@@ -2,5 +2,25 @@ import { ComponentPropsWithoutRef } from 'react';
 export interface SwitchProps extends ComponentPropsWithoutRef<'input'> {
     className?: string;
 }
+/**
+ * 토글 스위치 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props - 컴포넌트 props
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {boolean} [props.checked] - 스위치의 체크 상태
+ * @param {boolean} [props.disabled] - 스위치의 비활성화 상태
+ * @extends {ComponentPropsWithoutRef<'input'>} - input 요소의 기본 props를 상속받습니다
+ *
+ * @example
+ * // 기본 사용법
+ * <Switch checked={isOn} onChange={handleChange} />
+ *
+ * // 비활성화된 스위치
+ * <Switch checked={true} disabled={true} />
+ *
+ * // 커스텀 클래스 적용
+ * <Switch className="custom-switch" checked={isOn} />
+ */
 declare const Switch: ({ className, checked, disabled, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
 export default Switch;

package/dist/Components/Inputs/TextButton/TextButton.d.ts

@@ -1,3 +1,28 @@
 import { TextButtonProps } from './TextButton.types';
+/**
+ * 텍스트 버튼 컴포넌트
+ *
+ * @description
+ * 텍스트로만 구성된 버튼 컴포넌트입니다. 선택적으로 앞이나 뒤에 아이콘을 배치할 수 있습니다.
+ * 텍스트의 크기는 기본 크기와 작은 크기 중 선택할 수 있습니다.
+ *
+ * @param {object} props
+ * @param {string} props.text - 버튼에 표시될 텍스트
+ * @param {boolean} [props.isTextSmall=false] - 텍스트 크기를 작게 설정 (기본값: false)
+ * @param {string} [props.leadingIcon] - 텍스트 앞에 표시될 SystemIcon의 이름
+ * @param {string} [props.trailingIcon] - 텍스트 뒤에 표시될 SystemIcon의 이름
+ *
+ * @example
+ * // 기본 텍스트 버튼
+ * <TextButton text="버튼 텍스트" />
+ *
+ * // 작은 텍스트와 앞뒤 아이콘이 있는 버튼
+ * <TextButton
+ *   text="버튼 텍스트"
+ *   isTextSmall={true}
+ *   leadingIcon="search"
+ *   trailingIcon="arrow-right"
+ * />
+ */
 declare const TextButton: ({ text, isTextSmall, leadingIcon, trailingIcon, ...rest }: TextButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default TextButton;

package/dist/Components/Inputs/TextButtonDropdown/TextButtonDropdown.d.ts

@@ -0,0 +1,30 @@
+import { TextButtonDropdownProps } from './TextButtonDropdown.types';
+/**
+ * 텍스트 버튼 형태의 드롭다운 컴포넌트입니다.
+ *
+ * @param {Object} props
+ * @param {Array<{key: string, value: string, leadingIcon?: React.ReactNode}>} props.items - 드롭다운에 표시될 항목들의 배열
+ * @param {{key: string, value: string, leadingIcon?: React.ReactNode}} props.selectedItem - 현재 선택된 항목 ({key, value, leadingIcon}[])
+ * @param {(item: {key: string, value: string, leadingIcon?: React.ReactNode}) => void} props.onItemClick - 항목 클릭 시 실행될 콜백 함수 (item: {key, value, leadingIcon} => void)
+ * @param {boolean} [props.alignRight=false] - 드롭다운 메뉴를 오른쪽 정렬할지 여부
+ *
+ * @example
+ * const items = [
+ *   { key: '1', value: '옵션 1' },
+ *   { key: '2', value: '옵션 2', leadingIcon: <Icon /> },
+ *   { key: '3', value: '옵션 3' }
+ * ];
+ *
+ * const [selected, setSelected] = useState(items[0]);
+ *
+ * return (
+ *   <TextButtonDropdown
+ *     items={items}
+ *     selectedItem={selected}
+ *     onItemClick={setSelected}
+ *     alignRight={false}
+ *   />
+ * );
+ */
+declare const TextButtonDropdown: ({ items, selectedItem, onItemClick, alignRight, }: TextButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default TextButtonDropdown;

package/dist/Components/Inputs/TextButtonDropdown/TextButtonDropdown.js

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),n=require("../List/List.js"),i=require("../../../hooks/useDropdown.js"),s=require("./TextButtonDropdown.parts.js");module.exports=function(o){var l=o.items,r=o.selectedItem,a=o.onItemClick,o=o.alignRight,o=void 0!==o&&o,a=i({items:l,onItemClick:a}),d=a.isListOpen,u=a.ref,c=a.focusedIndex,m=a.handleItemClick,x=a.toggleListOpen,a=a.handleKeyDown;return e.jsxs("div",{"data-testid":"design-system-text-button-dropdown",className:"relative flex w-fit flex-col gap-1 outline-none",ref:u,onKeyDown:a,tabIndex:0,children:[e.jsx(s.TextButton,{value:r.value,"data-testid":"design-system-text-button-dropdown--textButton",isListOpen:d,onClick:x}),d&&e.jsx("div",{className:t.twJoin("absolute -bottom-2 z-40 translate-y-full transform transition-all",o?"right-0":"left-0 "),children:e.jsx(n.Root,{className:"max-h-full min-w-40 overflow-y-visible",children:l.map(function(t,i){return e.jsx(n.Item,{text:t.value,leadingIcon:t.leadingIcon,onClick:function(){return m(t)},selected:t.key===(null==r?void 0:r.key),isFocused:i===c},t.key)})})})]})};

package/dist/Components/Inputs/{TextButtonsDropdown/TextButtonsDropdown.parts.d.ts → TextButtonDropdown/TextButtonDropdown.parts.d.ts}

@@ -1,5 +1,5 @@
 import { ComponentProps } from 'react';
-import { Item } from './TextButtonsDropdown.types';
+import { Item } from './TextButtonDropdown.types';
 interface TextButtonProps extends ComponentProps<'button'> {
     value: Item['value'];
     isListOpen: boolean;

package/dist/Components/Inputs/{TextButtonsDropdown/TextButtonsDropdown.parts.js → TextButtonDropdown/TextButtonDropdown.parts.js}

@@ -1 +1 @@
-"use strict";var e=require("../../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("tailwind-merge"),s=(require("../../DataDisplays/Avatar/Avatar.js"),require("../../Base/Typography/Typography.js")),t=(require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js"));exports.TextButton=function(i){var n=i.value,u=i.isListOpen,i=e.__rest(i,["value","isListOpen"]);return a.jsxs("button",e.__assign({type:"button",className:"flex items-center gap-2"},i,{children:[a.jsx(s,{variant:"body1",className:"text-w-gray-600",children:n}),a.jsx("span",{className:r.twJoin("transition-transform duration-300",u&&"rotate-180"),children:a.jsx(t,{name:"medium_arrow_down",className:"text-w-gray-600"})})]}))};
+"use strict";var e=require("../../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("tailwind-merge"),s=(require("../../DataDisplays/Avatar/Avatar.js"),require("../../Base/Typography/Typography.js")),t=(require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js"));exports.TextButton=function(i){var n=i.value,u=i.isListOpen,i=e.__rest(i,["value","isListOpen"]);return a.jsxs("button",e.__assign({type:"button",className:"flex items-center gap-2 outline-none"},i,{children:[a.jsx(s,{variant:"body1",className:"text-w-gray-600",children:n}),a.jsx("span",{className:r.twJoin("transition-transform duration-300",u&&"rotate-180"),children:a.jsx(t,{name:"medium_arrow_down",className:"text-w-gray-600"})})]}))};

package/dist/Components/Inputs/{TextButtonsDropdown/TextButtonsDropdown.types.d.ts → TextButtonDropdown/TextButtonDropdown.types.d.ts}

@@ -4,7 +4,7 @@ export type Item = {
     value: string;
     leadingIcon?: SystemIconName;
 };
-export interface TextButtonsDropdownProps {
+export interface TextButtonDropdownProps {
     items: Item[];
     selectedItem: Item;
     onItemClick: (item: Item) => void;

package/dist/Components/Inputs/TextButtonDropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextButtonDropdown } from './TextButtonDropdown';
+export type { TextButtonDropdownProps } from './TextButtonDropdown.types';

package/dist/Components/Inputs/TextField/TextField.d.ts

@@ -13,5 +13,46 @@ export interface TextFieldProps extends ComponentPropsWithoutRef<'input'> {
     testId?: string;
     isMaxLengthVisible?: boolean;
 }
+/**
+ * 사용자 입력을 받을 수 있는 텍스트 필드 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props - 컴포넌트 props
+ * @param {'default' | 'lable'} [props.variant='default'] - 텍스트 필드의 변형 타입
+ * @param {string} [props.lable] - 입력 필드의 라벨
+ * @param {boolean} [props.isError] - 오류 상태 표시 여부
+ * @param {MediumSystemIconName} [props.startIcon] - 시작 부분에 표시될 아이콘
+ * @param {MediumSystemIconName} [props.endIcon] - 끝 부분에 표시될 아이콘
+ * @param {string} [props.supportMessage] - 도움말 메시지
+ * @param {string} [props.measure] - 측정 단위
+ * @param {string} [props.errorMessage] - 오류 메시지
+ * @param {string} [props.testId] - 테스트용 ID
+ * @param {boolean} [props.isMaxLengthVisible=false] - 최대 길이 표시 여부
+ *
+ * @example
+ * // 기본 텍스트 필드
+ * <TextField
+ *   placeholder="이름을 입력하세요"
+ *   onChange={(e) => handleChange(e)}
+ * />
+ *
+ * // 라벨이 있는 텍스트 필드
+ * <TextField
+ *   variant="lable"
+ *   lable="이름"
+ *   placeholder="홍길동"
+ *   startIcon="user"
+ *   supportMessage="실명을 입력해주세요"
+ * />
+ *
+ * // 에러 상태의 텍스트 필드
+ * <TextField
+ *   variant="default"
+ *   isError={true}
+ *   errorMessage="필수 입력 항목입니다"
+ *   maxLength={50}
+ *   isMaxLengthVisible={true}
+ * />
+ */
 declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.d.ts

@@ -15,5 +15,37 @@ export interface TextFieldDropdownProps {
     className?: string;
     isError?: boolean;
 }
+/**
+ * 드롭다운 형태의 텍스트 필드 컴포넌트입니다.
+ *
+ * @component
+ *
+ * @param {Object} props
+ * @param {Item[]} props.items - 드롭다운에 표시될 아이템 배열 ({key, value, leadingIcon}[])
+ * @param {string} props.placeholder - 선택되지 않은 상태에서 표시될 안내 텍스트
+ * @param {(item: Item) => void} props.onItemClick - 아이템 선택 시 호출되는 콜백 함수
+ * @param {Item} [props.selectedItem] - 현재 선택된 아이템
+ * @param {boolean} [props.disabled] - 비활성화 여부
+ * @param {string} [props.supportMessage] - 입력 필드 아래에 표시될 도움말 메시지
+ * @param {string} [props.errorMessage] - 오류 발생 시 표시될 메시지
+ * @param {string} [props.className] - 추가적인 CSS 클래스명
+ * @param {boolean} [props.isError] - 오류 상태 여부
+ *
+ * @example
+ * ```tsx
+ * const items = [
+ *   { key: 1, value: '옵션 1', leadingIcon: 'home' },
+ *   { key: 2, value: '옵션 2', leadingIcon: 'settings' }
+ * ];
+ *
+ * <TextFieldDropdown
+ *   items={items}
+ *   placeholder="옵션을 선택하세요"
+ *   onItemClick={(item) => console.log('선택된 아이템:', item)}
+ *   selectedItem={items[0]}
+ *   supportMessage="추가 설명이 필요한 경우 이곳에 표시됩니다"
+ * />
+ * ```
+ */
 declare const TextFieldDropdown: ({ selectedItem, items, onItemClick, placeholder, disabled, isError, errorMessage, supportMessage, }: TextFieldDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default TextFieldDropdown;

package/dist/Components/Inputs/TextFieldDropdown/TextFieldDropdown.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@wishket/yogokit"),l=(require("../../../_virtual/_tslib.js"),require("tailwind-merge"),require("../../Base/Layouts/Box/Box.js")),n=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../List/List.js")),s=require("../SupportTextContainer/SupportTextContainer.js"),i=require("./TextFieldDropdown.parts.js");module.exports=function(o){function u(){j&&w(!1)}function a(e){p(e),u()}var c=o.selectedItem,d=o.items,p=o.onItemClick,f=o.placeholder,x=o.disabled,v=o.isError,k=o.errorMessage,o=o.supportMessage,g=r.useState(!1),j=g[0],w=g[1],g=r.useState(-1),q=g[0],m=g[1],y=r.useRef(null),g=!!o||!!k;t.useClickOutside(y,u);return e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:y,className:"relative flex w-full flex-col gap-2 outline-none",onKeyDown:function(e){if(j)switch(e.key){case"ArrowDown":e.preventDefault(),m(function(e){var e=e<d.length-1?e+1:e,r=y.current;return r&&null!=(r=r.querySelectorAll("li")[e])&&r.scrollIntoView({block:"nearest"}),e});break;case"ArrowUp":e.preventDefault(),m(function(e){var e=0<e?e-1:e,r=y.current;return r&&null!=(r=r.querySelectorAll("li")[e])&&r.scrollIntoView({block:"nearest"}),e});break;case"Enter":e.preventDefault(),0<=q&&a(d[q]);break;case"Escape":e.preventDefault(),u()}},tabIndex:0,children:[e.jsx(i.SelectBox,{placeholder:f,value:null==c?void 0:c.value,leadingIcon:null==c?void 0:c.leadingIcon,disabled:x,isListOpen:j,onClick:function(){x||w(!j)},error:v}),g&&e.jsx(s,{errorMessage:k,supportMessage:o}),j&&e.jsx(l,{className:"absolute top-[54px] z-40 w-full",children:e.jsx(n.Root,{children:d.map(function(r,t){return e.jsx(n.Item,{text:r.value,leadingIcon:r.leadingIcon,onClick:function(){return a(r)},selected:r.key===(null==c?void 0:c.key),isFocused:t===q},r.key)})})})]})};
+"use strict";var e=require("react/jsx-runtime"),r=(require("../../../_virtual/_tslib.js"),require("tailwind-merge"),require("../../Base/Layouts/Box/Box.js")),s=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../List/List.js")),l=require("../SupportTextContainer/SupportTextContainer.js"),i=require("../../../hooks/useDropdown.js"),t=require("./TextFieldDropdown.parts.js");module.exports=function(o){var n=o.selectedItem,a=o.items,u=o.onItemClick,d=o.placeholder,c=o.disabled,p=o.isError,x=o.errorMessage,o=o.supportMessage,u=i({items:a,onItemClick:u,disabled:c}),j=u.isListOpen,m=u.focusedIndex,g=u.ref,v=u.handleItemClick,I=u.toggleListOpen,u=u.handleKeyDown,f=!!o||!!x;return e.jsxs("div",{"data-testid":"design-system--textFieldDropdown",ref:g,className:"relative flex w-full flex-col gap-2 outline-none",onKeyDown:u,tabIndex:0,children:[e.jsx(t.SelectBox,{placeholder:d,value:null==n?void 0:n.value,leadingIcon:null==n?void 0:n.leadingIcon,disabled:c,isListOpen:j,onClick:I,error:p}),f&&e.jsx(l,{errorMessage:x,supportMessage:o}),j&&e.jsx(r,{className:"absolute top-[54px] z-40 w-full",children:e.jsx(s.Root,{children:a.map(function(r,l){return e.jsx(s.Item,{text:r.value,leadingIcon:r.leadingIcon,onClick:function(){return v(r)},selected:r.key===(null==n?void 0:n.key),isFocused:l===m},r.key)})})})]})};

package/dist/Components/Inputs/Textarea/Textarea.d.ts

@@ -1,4 +1,7 @@
 import { ComponentProps } from 'react';
+/**
+ * Textarea 컴포넌트에서 사용되는 Props 타입을 정의합니다.
+ */
 export interface TextareaProps extends ComponentProps<'textarea'> {
     isError?: boolean;
     size?: 'sm' | 'md' | 'lg';
@@ -7,5 +10,40 @@ export interface TextareaProps extends ComponentProps<'textarea'> {
     errorText?: string;
     isLengthVisible?: boolean;
 }
+/**
+ * 사용자가 여러 줄의 텍스트를 입력할 수 있는 textarea 컴포넌트입니다.
+ *
+ * @param {Object} props
+ * @param {boolean} [props.isError] - 에러 상태를 표시합니다
+ * @param {('sm'|'md'|'lg')} [props.size='md'] - textarea의 크기를 지정합니다
+ * @param {boolean} [props.resize=false] - 크기 조절 가능 여부를 설정합니다
+ * @param {string} [props.supportText] - 도움말 텍스트를 표시합니다
+ * @param {string} [props.errorText] - 에러 메시지를 표시합니다
+ * @param {boolean} [props.isLengthVisible=false] - 글자 수 표시 여부를 설정합니다
+ * @param {React.ComponentProps<'textarea'>} props.textareaProps - textarea 엘리먼트의 기본 속성들
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용
+ * <Textarea
+ *   placeholder="내용을 입력하세요"
+ *   onChange={(e) => console.log(e.target.value)}
+ * />
+ *
+ * // 에러 상태와 에러 메시지
+ * <Textarea
+ *   isError={true}
+ *   errorText="필수 입력 항목입니다"
+ * />
+ *
+ * // 크기 조절 가능하고 글자 수 제한이 있는 경우
+ * <Textarea
+ *   resize={true}
+ *   maxLength={1000}
+ *   isLengthVisible={true}
+ *   supportText="최대 1000자까지 입력 가능합니다"
+ * />
+ * ```
+ */
 declare const Textarea: ({ isError, size, resize, isLengthVisible, supportText, errorText, maxLength, value, disabled, name, onChange, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
 export default Textarea;

package/dist/Components/Inputs/index.d.ts

@@ -21,9 +21,10 @@ export { default as TextButton } from './TextButton';
 export { default as TextField } from './TextField';
 export { default as List } from './List';
 export { default as TextFieldDropdown } from './TextFieldDropdown';
-export { TextButtonsDropdown } from './TextButtonsDropdown';
+export { TextButtonDropdown } from './TextButtonDropdown';
+export type { TextButtonDropdownProps } from './TextButtonDropdown';
 export type { SkillItem, LegacySkillItem } from './Autocomplete';
-export type { TextButtonsDropdownProps } from './TextButtonsDropdown';
 export { default as CommentArea } from './CommentArea';
 export { default as IconButtonDropdown } from './IconButtonDropdown';
 export { default as MultiColumnList } from './MultiColumnList';
+export { default as FilterChip } from './FilterChip';

package/dist/Components/Navigations/BoxTab/BoxTab.d.ts

@@ -1,4 +1,30 @@
 /// <reference types="react" />
+/**
+ * BoxTab 컴포넌트
+ * @module BoxTab
+ * @description 탭 기반 네비게이션을 구현하는 컴포넌트입니다.
+ * @property {Component} Root - 탭 컨테이너
+ * @property {Component} Tabs - 탭 목록
+ * @property {Component} Tab - 탭
+ * @property {Component} Panel - 탭 패널
+ * @example
+ * ```tsx
+ * import BoxTab from './BoxTab';
+ *
+ * function Example() {
+ *   return (
+ *     <BoxTab.Root>
+ *       <BoxTab.Tabs>
+ *         <BoxTab.Tab index={0}>첫 번째 탭</BoxTab.Tab>
+ *         <BoxTab.Tab index={1}>두 번째 탭</BoxTab.Tab>
+ *       </BoxTab.Tabs>
+ *       <BoxTab.Panel index={0}>첫 번째 패널 내용</BoxTab.Panel>
+ *       <BoxTab.Panel index={1}>두 번째 패널 내용</BoxTab.Panel>
+ *     </BoxTab.Root>
+ *   );
+ * }
+ * ```
+ */
 declare const BoxTab: {
     Root: ({ children, currentActiveTab, onChange }: import("./BoxTab.types").RootProps) => import("react/jsx-runtime").JSX.Element;
     Tabs: ({ children, className }: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Navigations/BoxTab/BoxTab.parts.d.ts

@@ -1,7 +1,76 @@
 import { ComponentProps } from 'react';
 import { PanelProps, RootProps, TabProps } from './BoxTab.types';
+/**
+ * BoxTab의 최상위 컴포넌트입니다.
+ * 탭의 상태를 관리하고 하위 컴포넌트에 Context를 제공합니다.
+ *
+ * @param {RootProps} props
+ * @param {ReactNode} props.children - 하위 컴포넌트
+ * @param {number} [props.currentActiveTab=0] - 현재 활성화된 탭의 인덱스
+ * @param {(index: number) => void} [props.onChange] - 탭 변경 시 호출되는 콜백 함수
+ *
+ * @example
+ * ```tsx
+ * <BoxTab.Root currentActiveTab={0} onChange={(index) => console.log(index)}>
+ *   <BoxTab.Tabs>
+ *     <BoxTab.Tab index={0}>탭 1</BoxTab.Tab>
+ *     <BoxTab.Tab index={1}>탭 2</BoxTab.Tab>
+ *   </BoxTab.Tabs>
+ *   <BoxTab.Panel index={0}>패널 1 내용</BoxTab.Panel>
+ *   <BoxTab.Panel index={1}>패널 2 내용</BoxTab.Panel>
+ * </BoxTab.Root>
+ * ```
+ */
 declare const Root: ({ children, currentActiveTab, onChange }: RootProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 탭 버튼들을 감싸는 컨테이너 컴포넌트입니다.
+ *
+ * @param {ComponentProps<'div'>} props
+ * @param {ReactNode} props.children - Tab 컴포넌트들
+ * @param {string} [props.className] - 추가 스타일 클래스
+ *
+ * @example
+ * ```tsx
+ * <BoxTab.Tabs className="my-4">
+ *   <BoxTab.Tab index={0}>탭 1</BoxTab.Tab>
+ *   <BoxTab.Tab index={1}>탭 2</BoxTab.Tab>
+ * </BoxTab.Tabs>
+ * ```
+ */
 declare const Tabs: ({ children, className }: ComponentProps<'div'>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 개별 탭 버튼 컴포넌트입니다.
+ *
+ * @param {TabProps} props
+ * @param {ReactNode} props.children - 탭 내용
+ * @param {number} props.index - 탭의 인덱스
+ * @param {string} [props.className] - 추가 스타일 클래스
+ * @param {boolean} [props.isFirst] - 첫 번째 탭 여부 (내부적으로 자동 설정)
+ * @param {boolean} [props.isLast] - 마지막 탭 여부 (내부적으로 자동 설정)
+ * @param {boolean} [props.disabled] - 비활성화 여부
+ *
+ * @example
+ * ```tsx
+ * <BoxTab.Tab index={0} disabled={false}>
+ *   탭 1
+ * </BoxTab.Tab>
+ * ```
+ */
 declare const Tab: ({ children, index, className, isFirst, isLast, disabled, }: TabProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 탭 패널 컴포넌트입니다.
+ * 해당 인덱스의 탭이 선택되었을 때만 내용을 표시합니다.
+ *
+ * @param {PanelProps} props
+ * @param {ReactNode} props.children - 패널 내용
+ * @param {number} props.index - 패널의 인덱스 (연결된 탭의 인덱스와 일치해야 함)
+ *
+ * @example
+ * ```tsx
+ * <BoxTab.Panel index={0}>
+ *   첫 번째 탭의 내용입니다.
+ * </BoxTab.Panel>
+ * ```
+ */
 declare const Panel: ({ children, index }: PanelProps) => false | import("react/jsx-runtime").JSX.Element;
 export { Root, Tabs, Tab, Panel };

package/dist/Components/Navigations/Drawer/Drawer.d.ts

@@ -6,5 +6,32 @@ export interface DrawerProps {
     size?: 'full' | 'half' | 'third' | 'quarter';
     className?: string;
 }
+/**
+ * 화면의 가장자리에서 슬라이딩되어 나타나는 서랍형 컴포넌트입니다.
+ *
+ * @param {Object} props
+ * @param {boolean} props.isOpen - 서랍이 열려있는지 여부를 결정합니다
+ * @param {() => void} props.onClose - 서랍을 닫을 때 실행되는 콜백 함수입니다
+ * @param {'left' | 'right' | 'top' | 'bottom'} [props.direction='right'] - 서랍이 나타날 방향을 지정합니다
+ * @param {'full' | 'half' | 'third' | 'quarter'} [props.size='quarter'] - 서랍의 크기를 지정합니다
+ * @param {string} [props.className] - 추가적인 CSS 클래스를 지정할 수 있습니다
+ * @param {React.ReactNode} props.children - 서랍 내부에 표시될 컨텐츠입니다
+ *
+ * @example
+ * // 기본 사용법
+ * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <div>서랍 내용</div>
+ * </Drawer>
+ *
+ * // 왼쪽에서 나타나는 절반 크기의 서랍
+ * <Drawer
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   direction="left"
+ *   size="half"
+ * >
+ *   <div>서랍 내용</div>
+ * </Drawer>
+ */
 declare const Drawer: ({ isOpen, onClose, direction, size, className, children, }: PropsWithChildren<DrawerProps>) => import("react/jsx-runtime").JSX.Element;
 export default Drawer;

package/dist/Components/Navigations/GNBList/GNBList.d.ts

@@ -1,4 +1,52 @@
 /// <reference types="react" />
+/**
+ * GNB(Global Navigation Bar) 리스트 컴포넌트
+ * @module GNBList
+ * @property {Component} Root - GNB 리스트 컨테이너
+ * @property {Component} UserInfo - 사용자 정보 컴포넌트
+ * @property {Component} List - 메뉴 리스트 컴포넌트
+ * @property {Component} SubList - 서브 메뉴 리스트 컴포넌트
+ * @property {Component} Item - 메뉴 아이템 컴포넌트
+ *
+ * @example
+ * // 기본 메뉴 리스트
+ * <GNBList.Root type="main">
+ *   <GNBList.List>
+ *     <GNBList.Item>메뉴 1</GNBList.Item>
+ *     <GNBList.Item>메뉴 2</GNBList.Item>
+ *   </GNBList.List>
+ * </GNBList.Root>
+ *
+ * @example
+ * // 사용자 정보가 포함된 메뉴 리스트
+ * <GNBList.Root type="user">
+ *   <GNBList.UserInfo
+ *     userId="사용자명"
+ *     email="user@example.com"
+ *     imgUrl="/profile.jpg"
+ *   >
+ *     <Button>프로필 수정</Button>
+ *   </GNBList.UserInfo>
+ *   <GNBList.List>
+ *     <GNBList.Item>계정 설정</GNBList.Item>
+ *     <GNBList.Item>알림 설정</GNBList.Item>
+ *   </GNBList.List>
+ *   <GNBList.SubList>
+ *     <GNBList.Item>로그아웃</GNBList.Item>
+ *   </GNBList.SubList>
+ * </GNBList.Root>
+ *
+ * @example
+ * // 선택 상태가 있는 메뉴 리스트
+ * <GNBList.Root type="main">
+ *   <GNBList.List>
+ *     <GNBList.Item isSelected>현재 메뉴</GNBList.Item>
+ *     <GNBList.Item onClick={() => handleNavigation('/other')}>
+ *       다른 메뉴
+ *     </GNBList.Item>
+ *   </GNBList.List>
+ * </GNBList.Root>
+ */
 declare const GNBList: {
     Root: ({ type, children, className }: import("./GNBList.types").RootProps) => import("react/jsx-runtime").JSX.Element;
     UserInfo: ({ imgUrl, userId, email, children, onClick, }: import("./GNBList.types").UserInfoProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/Navigations/GNBList/GNBList.parts.d.ts

@@ -1,8 +1,41 @@
 import { PropsWithChildren } from 'react';
 import { RootProps, ItemProps, UserInfoProps } from './GNBList.types';
+/**
+ * GNB 리스트의 루트 컴포넌트
+ * @param {Object} props
+ * @param {'main'|'sub'|'user'} [props.type] - 리스트 타입 (main, sub, user)
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {ReactNode} props.children - 리스트 아이템들
+ */
 declare const Root: ({ type, children, className }: RootProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * GNB 리스트의 기본 리스트 컴포넌트
+ * @param {Object} props
+ * @param {ReactNode} props.children - 리스트 아이템들
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ */
 declare const UserInfo: ({ imgUrl, userId, email, children, onClick, }: UserInfoProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * GNB 리스트의 기본 리스트 컴포넌트
+ * @param {Object} props
+ * @param {ReactNode} props.children - 리스트 아이템들
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ */
 declare const List: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+/**
+ * GNB 리스트의 서브 리스트 컴포넌트
+ * @param {Object} props
+ * @param {ReactNode} props.children - 서브 리스트 아이템들
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ */
 declare const SubList: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+/**
+ * GNB 리스트의 아이템 컴포넌트
+ * @param {Object} props
+ * @param {ReactNode} props.children - 아이템 컨텐츠
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {() => void} [props.onClick] - 클릭 핸들러
+ * @param {boolean} [props.isSelected] - 선택 상태 여부
+ */
 declare const Item: ({ hasNew, children, className, ...rest }: ItemProps) => import("react/jsx-runtime").JSX.Element;
 export { Root, UserInfo, List, SubList, Item };

package/dist/Components/Navigations/Menu/Menu.d.ts

@@ -12,5 +12,46 @@ export interface MenuProps {
     onOptionClick?: () => void;
     children?: ReactNode;
 }
+/**
+ * 메뉴 컴포넌트는 네비게이션에서 사용되는 클릭 가능한 항목을 표시합니다.
+ *
+ * @param {Object} props
+ * @param {'main' | 'sub'} [props.type='main'] - 메뉴 타입 ('main', 'sub')
+ * @param {'white' | 'gray'} [props.variant='white'] - 메뉴 스타일 변형 ('white', 'gray')
+ * @param {string} props.name - 메뉴에 표시될 텍스트
+ * @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
+ * @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
+ * @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘
+ * @param {SystemIconName} [props.trailingIcon] - 메뉴 뒤쪽에 표시될 아이콘
+ * @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수
+ * @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수
+ * @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소
+ *
+ * @example
+ * // 기본 메뉴
+ * <Menu
+ *   name="메뉴 항목"
+ *   onClick={() => console.log('메뉴 클릭')}
+ * />
+ *
+ * // 아이콘과 뱃지가 있는 서브 메뉴
+ * <Menu
+ *   type="sub"
+ *   name="서브 메뉴"
+ *   leadingIcon="home"
+ *   badgeCount="5"
+ *   onClick={() => console.log('서브 메뉴 클릭')}
+ * />
+ *
+ * // 선택된 상태의 옵션 메뉴
+ * <Menu
+ *   variant="gray"
+ *   name="옵션 메뉴"
+ *   isSelected={true}
+ *   trailingIcon="more"
+ *   onClick={() => console.log('메뉴 클릭')}
+ *   onOptionClick={() => console.log('옵션 클릭')}
+ * />
+ */
 declare const Menu: ({ type, variant, name, isSelected, badgeCount, leadingIcon, trailingIcon, children, onClick, onOptionClick, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
 export default Menu;

package/dist/Components/Navigations/Pagination/Pagination.d.ts

@@ -4,5 +4,28 @@ export interface PaginationProps {
     page: number;
     onChange: (page: number) => void;
 }
+/**
+ * 페이지네이션 컴포넌트
+ *
+ * @description
+ * 여러 페이지로 구성된 콘텐츠를 탐색할 수 있는 페이지네이션 컴포넌트입니다.
+ * 좌우 화살표와 페이지 번호 버튼으로 구성되어 있으며, 현재 페이지가 강조 표시됩니다.
+ *
+ * @param {Object} props
+ * @param {number} props.maxPage - 전체 페이지 수
+ * @param {number} [props.pageCount=10] - 한 번에 표시할 페이지 버튼의 개수 (기본값: 10)
+ * @param {number} props.page - 현재 페이지 번호
+ * @param {(page: number) => void} props.onChange - 페이지 변경 시 호출되는 콜백 함수
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   maxPage={100}
+ *   pageCount={5}
+ *   page={1}
+ *   onChange={(page) => setCurrentPage(page)}
+ * />
+ * ```
+ */
 declare const Pagination: ({ maxPage, pageCount, page, onChange, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
 export default Pagination;