@wishket/design-system 1.5.0 → 1.5.2

package/dist/Components/Feedbacks/RichTooltip/RichTooltip.d.ts

@@ -4,5 +4,31 @@ export interface RichTooltipProps extends PropsWithChildren {
     description?: string;
     className?: string;
 }
+/**
+ * 제목과 설명을 포함할 수 있는 리치 툴팁 컴포넌트입니다. UI만 제공하고 실제 사용은 WithRichTooltip 컴포넌트를 사용하는 것이 더 간편합니다.
+ *
+ * @component
+ * @param {object} props - 컴포넌트 프로퍼티
+ * @param {string} [props.title] - 툴팁의 제목
+ * @param {string} [props.description] - 툴팁의 상세 설명
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {React.ReactNode} [props.children] - 자식 컴포넌트
+ *
+ * @example
+ * // 기본 사용법
+ * <RichTooltip
+ *   title="알림"
+ *   description="새로운 메시지가 도착했습니다."
+ * >
+ *   <button>확인</button>
+ * </RichTooltip>
+ *
+ * // 커스텀 스타일 적용
+ * <RichTooltip
+ *   title="경고"
+ *   description="저장되지 않은 변경사항이 있습니다."
+ *   className="absolute top-0 left-0"
+ * />
+ */
 declare const RichTooltip: ({ title, description, className, children, }: RichTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default RichTooltip;

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

@@ -10,6 +10,29 @@ export interface ItemProps extends ComponentProps<'li'> {
     isFocused?: boolean;
     inputValue?: string;
 }
+/**
+ * 자동완성 목록을 표시하는 컴포넌트입니다.
+ *
+ * @module AutoCompleteList
+ * @property {Component} Root - 자동완성 목록의 컨테이너 컴포넌트입니다. 스크롤 가능한 목록과 인덱스 바를 포함합니다.
+ * @property {Component} Item - 자동완성 목록의 개별 항목을 표시하는 컴포넌트입니다. 텍스트, 아이콘, 카운트 등을 표시할 수 있습니다.
+ * @property {Component} Divider - 자동완성 목록의 항목들을 구분하는 구분선 컴포넌트입니다.
+ * @example
+ * ```tsx
+ * <AutoCompleteList.Root>
+ *   <AutoCompleteList.Item
+ *     text="검색 항목"
+ *     leadingIcon="search"
+ *     count={5}
+ *   />
+ *   <AutoCompleteList.Divider />
+ *   <AutoCompleteList.Item
+ *     text="다른 항목"
+ *     iconUrl="/icons/custom.png"
+ *   />
+ * </AutoCompleteList.Root>
+ * ```
+ */
 declare const AutoCompleteList: {
     Root: ({ children, className, hasIndexBar, onIndexClick, ...rest }: RootProps) => import("react/jsx-runtime").JSX.Element;
     Item: ({ text, count, leadingIcon, iconUrl, isInputItem, isFocused, inputValue, className, ...rest }: ItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,42 @@
 import { AutocompleteProps } from './Autocomplete.types';
+/**
+ * 자동완성 입력 컴포넌트
+ *
+ * @param {AutocompleteProps} props
+ * @param {SkillItem[]} props.skillItems - 선택 가능한 기술 항목 목록
+ * @param {LegacySkillItem[]} props.legacySkillItems - 레거시 기술 항목 목록
+ * @param {string[]} props.selectedItems - 현재 선택된 항목들
+ * @param {(item: string) => void} props.onChipDelete - 선택된 항목 삭제 시 호출되는 콜백
+ * @param {string} props.value - 입력 필드의 현재 값
+ * @param {(value: string) => void} props.onValueChange - 입력 값 변경 시 호출되는 콜백
+ * @param {string} props.placeholder - 입력 필드의 플레이스홀더
+ * @param {(item: SkillItem) => void} props.onSkillItemClick - 기술 항목 선택 시 호출되는 콜백
+ * @param {(item: LegacySkillItem) => void} props.onLegacySkillItemClick - 레거시 항목 선택 시 호출되는 콜백
+ * @param {(value: string) => void} props.onInputItemClick - 직접 입력한 값 선택 시 호출되는 콜백
+ * @param {string} [props.supportingText] - 입력 필드 아래에 표시되는 도움말 텍스트
+ * @param {boolean} [props.hasIndexBar=false] - 알파벳 인덱스 바 표시 여부
+ * @param {boolean} [props.isError] - 오류 상태 여부
+ * @param {string} [props.errorMessage] - 오류 메시지
+ * @param {ReactNode} [props.leadingIcon] - 항목 앞에 표시될 아이콘
+ *
+ * @example
+ * ```tsx
+ * <Autocomplete
+ *   skillItems={[
+ *     { value: 'JavaScript', iconUrl: '/js-icon.png' },
+ *     { value: 'TypeScript', iconUrl: '/ts-icon.png' }
+ *   ]}
+ *   legacySkillItems={[
+ *     { value: 'jQuery', count: 5 }
+ *   ]}
+ *   selectedItems={['React']}
+ *   value=""
+ *   onValueChange={(value) => console.log(value)}
+ *   onChipDelete={(item) => console.log('deleted:', item)}
+ *   onSkillItemClick={(item) => console.log('selected:', item)}
+ *   placeholder="기술을 입력하세요"
+ * />
+ * ```
+ */
 declare const Autocomplete: ({ skillItems, legacySkillItems, selectedItems, onChipDelete, value, onValueChange, placeholder, onSkillItemClick, onLegacySkillItemClick, onInputItemClick, supportingText, hasIndexBar, isError, errorMessage, leadingIcon, }: AutocompleteProps) => import("react/jsx-runtime").JSX.Element;
 export default Autocomplete;

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

@@ -1,3 +1,50 @@
 import { ButtonProps } from './Button.types';
+/**
+ * 다양한 스타일과 기능을 제공하는 버튼 컴포넌트입니다.
+ *
+ * @param {Object} props
+ * @param {'button' | 'submit' | 'reset'} [props.type='button'] - 버튼의 타입
+ * @param {React.RefObject<HTMLButtonElement>} [props.ref] - 버튼 요소에 대한 ref
+ * @param {boolean} [props.disabled=false] - 버튼 비활성화 여부
+ * @param {React.ReactNode} props.children - 버튼 내부 콘텐츠
+ * @param {string} [props.className] - 추가 CSS 클래스
+ * @param {function} [props.onClick] - 클릭 이벤트 핸들러
+ * @param {'sm' | 'md' | 'lg'} [props.size='md'] - 버튼 크기
+ * @param {'outlined' | 'solid' | 'outline_filled'} [props.variant='outlined'] - 버튼 스타일 변형
+ * @param {boolean} [props.rounded=false] - 둥근 모서리 적용 여부
+ * @param {React.ReactNode} [props.leadingIcon] - 버튼 앞쪽 아이콘
+ * @param {boolean} [props.isLeadingIconSolid=false] - 앞쪽 아이콘 solid 스타일 적용 여부
+ * @param {React.ReactNode} [props.trailingIcon] - 버튼 뒤쪽 아이콘
+ * @param {boolean} [props.isTrailingIconSolid=false] - 뒤쪽 아이콘 solid 스타일 적용 여부
+ * @param {string | number} [props.badgeNumber=''] - 버튼에 표시될 뱃지 숫자
+ * @param {boolean} [props.needThrottle=false] - 쓰로틀링 적용 여부
+ *
+ * @example
+ * // 기본 버튼
+ * <Button onClick={() => console.log('클릭됨')}>
+ *   버튼
+ * </Button>
+ *
+ * // 아이콘이 있는 비활성화된 버튼
+ * <Button
+ *   disabled
+ *   variant="contained"
+ *   leadingIcon={<Icon name="search" />}
+ *   size="lg"
+ * >
+ *   검색
+ * </Button>
+ *
+ * // 쓰로틀링이 적용된 둥근 버튼
+ * <Button
+ *   rounded
+ *   needThrottle
+ *   variant="text"
+ *   badgeNumber="5"
+ *   onClick={handleClick}
+ * >
+ *   알림
+ * </Button>
+ */
 declare const Button: ({ type, ref, disabled, children, className, onClick, size, variant, rounded, leadingIcon, isLeadingIconSolid, trailingIcon, isTrailingIconSolid, badgeNumber, needThrottle, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

package/dist/Components/Inputs/Button/Button.parts.js

@@ -1 +1 @@
-"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("tailwind-merge"),a=(require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/CountBadge/CountBadge.js")),s=(require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js"));exports.ButtonContainer=function(t){function o(){return"solid"===p&&h?"text-w-white":"outline_filled"===p&&h||h?"text-primary-100":"solid"===p?"text-w-white":"text-primary-500"}var l=t.rounded,n=t.size,d=t.type,p=t.variant,u=t.children,g=t.leadingIcon,x=t.isLeadingIconSolid,x=void 0!==x&&x,m=t.trailingIcon,b=t.isTrailingIconSolid,b=void 0!==b&&b,y=t.badgeNumber,y=void 0===y?"":y,c=t.className,h=t.disabled,v=t.onClick,t=e.__rest(t,["rounded","size","type","variant","children","leadingIcon","isLeadingIconSolid","trailingIcon","isTrailingIconSolid","badgeNumber","className","disabled","onClick"]);return r.jsxs("button",e.__assign({className:i.twMerge("box-border flex w-fit cursor-pointer items-center justify-center border","outlined"===p&&l?"rounded-full":"rounded-xl","sm"===n?"h-[36px] px-[11px] text-sm leading-6 gap-x-1":"lg"===n?"h-[60px] px-[23px] text-[20px] leading-[30px] gap-x-2":"h-[50px] px-[15px] text-base leading-[26px] gap-x-1.5",o(),"solid"===p?"bg-primary-500 border-primary-500 hover:border-primary-700 hover:bg-primary-700":"outline_filled"===p?"bg-primary-10 border-primary-200 hover:border-primary-500":"bg-w-white border-w-gray-200 hover:border-primary-500",h&&"cursor-not-allowed",h&&("solid"===p?"bg-primary-100 border-primary-100 hover:bg-primary-100 hover:border-primary-100":"outline_filled"===p?"bg-primary-10 border-primary-200 hover:border-primary-200":"bg-w-white border-w-gray-200 hover:border-w-gray-200"),c),onClick:v,disabled:h,type:d},t,{children:[g&&r.jsx(s,{name:g,solid:x,testId:"design-system-button--leading-icon",className:i.twMerge("flex-shrink-0","sm"===n?"size-[14px]":"size-4",o())}),u,m&&r.jsx(s,{name:m,solid:b,testId:"design-system-button--trailing-icon",className:i.twMerge("flex-shrink-0","sm"===n?"size-[14px]":"size-4",o())}),y&&r.jsx(a,{text:y,className:"relative flex-shrink-0"})]}))};
+"use strict";var e=require("../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("tailwind-merge"),a=(require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/CountBadge/CountBadge.js")),s=(require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js"));exports.ButtonContainer=function(t){function o(){return"solid"===p&&h?"text-w-white":"outline_filled"===p&&h||h?"text-primary-100":"solid"===p?"text-w-white":"text-primary-500"}var l=t.rounded,n=t.size,d=t.type,p=t.variant,x=t.children,g=t.leadingIcon,u=t.isLeadingIconSolid,u=void 0!==u&&u,b=t.trailingIcon,m=t.isTrailingIconSolid,m=void 0!==m&&m,c=t.badgeNumber,c=void 0===c?"":c,y=t.className,h=t.disabled,v=t.onClick,t=e.__rest(t,["rounded","size","type","variant","children","leadingIcon","isLeadingIconSolid","trailingIcon","isTrailingIconSolid","badgeNumber","className","disabled","onClick"]);return r.jsxs("button",e.__assign({className:i.twMerge("box-border flex w-fit cursor-pointer items-center justify-center border","outlined"===p&&l?"rounded-full":"rounded-xl","sm"===n?"h-[36px] text-sm leading-6 gap-x-1":"lg"===n?"h-[60px] text-[20px] leading-[30px] gap-x-2":"h-[50px] text-base leading-[26px] gap-x-1.5",(l="solid"===p,"sm"===n?l?"px-3":"px-[11px]":"lg"===n?l?"px-6":"px-[23px]":l?"px-4":"px-[15px]"),o(),"solid"===p?"bg-primary-500 border-0 hover:bg-primary-700":"outline_filled"===p?"bg-primary-10 border-primary-200 hover:border-primary-500":"bg-w-white border-w-gray-200 hover:border-primary-500",h&&"cursor-not-allowed",h&&("solid"===p?"bg-primary-100 border-0 hover:bg-primary-100 hover:border-primary-100":"outline_filled"===p?"bg-primary-10 border-primary-200 hover:border-primary-200":"bg-w-white border-w-gray-200 hover:border-w-gray-200"),y),onClick:v,disabled:h,type:d},t,{children:[g&&r.jsx(s,{name:g,solid:u,testId:"design-system-button--leading-icon",className:i.twMerge("flex-shrink-0","sm"===n?"size-[14px]":"size-4",o())}),x,b&&r.jsx(s,{name:b,solid:m,testId:"design-system-button--trailing-icon",className:i.twMerge("flex-shrink-0","sm"===n?"size-[14px]":"size-4",o())}),c&&r.jsx(a,{text:c,className:"relative flex-shrink-0"})]}))};

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

@@ -6,5 +6,41 @@ export interface CalendarProps {
     placeholder?: string;
     isError?: boolean;
 }
+/**
+ * 날짜를 선택할 수 있는 캘린더 컴포넌트입니다.
+ *
+ * @component
+
+ *
+ * @param {Object} props - 컴포넌트 프로퍼티
+ * @param {string} [props.selected] - 선택된 날짜 (YYYY-MM-DD 형식)
+ * @param {(date: string) => void} [props.onChange] - 날짜 선택 시 호출되는 콜백 함수, YYYY-MM-DD 형식의 인자를 받음
+ * @param {string} [props.defaultDate] - 초기 기본 날짜 (YYYY-MM-DD 형식)
+ * @param {boolean} [props.disabled] - 캘린더 비활성화 여부
+ * @param {string} [props.placeholder] - 날짜가 선택되지 않았을 때 표시될 텍스트
+ * @param {boolean} [props.isError] - 에러 상태 표시 여부
+ *
+ * @example
+ * ```tsx
+ * // 기본 사용법
+ * <Calendar
+ *   selected="2024-03-21"
+ *   onChange={(date) => console.log(date)}
+ *   placeholder="날짜를 선택하세요"
+ * />
+ *
+ * // 비활성화된 상태
+ * <Calendar
+ *   disabled={true}
+ *   placeholder="선택 불가"
+ * />
+ *
+ * // 에러 상태
+ * <Calendar
+ *   isError={true}
+ *   selected="2024-03-21"
+ * />
+ * ```
+ */
 declare const Calendar: ({ defaultDate, selected, onChange, disabled, placeholder, isError, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
 export default Calendar;

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

@@ -1,4 +1,33 @@
 /// <reference types="react" />
 import { CheckboxProps } from './Checkbox.types';
+/**
+ * @component
+ * @param {Object} props - 체크박스 컴포넌트 프로퍼티
+ * @param {boolean} [props.checked=false] - 체크박스의 체크 상태
+ * @param {(event: ChangeEvent<HTMLInputElement>) => void} [props.onChange] - 체크박스 상태 변경 시 호출되는 콜백 함수
+ * @param {boolean} [props.disabled=false] - 체크박스 비활성화 여부
+ * @param {boolean} [props.isError=false] - 체크박스 에러 상태 여부
+ * @param {'box' | 'circle' | 'sub'} [props.type='box'] - 체크박스 타입
+ * @param {string} [props.className] - 추가 CSS 클래스
+ *
+ * @example
+ * // 기본 사용법
+ * <Checkbox checked={isChecked} onChange={handleChange} />
+ *
+ * // 비활성화된 체크박스
+ * <Checkbox disabled />
+ *
+ * // 에러 상태의 체크박스
+ * <Checkbox isError />
+ *
+ * // 커스텀 스타일이 적용된 체크박스
+ * <Checkbox className="custom-checkbox" />
+ *
+ * // 체크박스 상태 변경 핸들링
+ * const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+ *   console.log('체크박스 상태:', e.target.checked);
+ * };
+ * <Checkbox onChange={handleChange} />
+ */
 declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/dist/Components/Inputs/Checkbox/Checkbox.parts.js

@@ -1 +1 @@
-"use strict";var r=require("react/jsx-runtime"),e=require("tailwind-merge"),s="absolute h-[2px] origin-top-left rounded",a="transition-[width] duration-100 ease-linear",o="left-[3.2px] top-[5.45px] rotate-45",t="left-[4.5px] top-[8.95px] -rotate-45",i="bg-w-gray-200 group-hover:bg-w-primary",d="bg-w-white group-hover:bg-w-white",l="bg-w-red-500 group-hover:bg-w-red-500",w="bg-w-gray-200 group-hover:bg-w-gray-200",c=function(i){var l=i.checked,c=i.isError,i=i.disabled;return r.jsxs("div",{className:"relative h-full w-full cursor-pointer bg-transparent",children:[r.jsx("div",{className:e.twMerge(s,o,a,d,c&&i&&w,l?"w-[5.65px]":"w-0")}),r.jsx("div",{className:e.twMerge(s,t,a,d,c&&i&&w,l?"w-[8.3px] delay-100":"w-0 delay-0")})]})},g=function(c){var g=c.checked,n=c.isError,c=c.disabled;return r.jsxs("div",{className:"relative h-full w-full cursor-pointer bg-transparent",children:[r.jsx("div",{className:e.twMerge(s,o,n?l:i,n&&c&&w,g?"w-0":"w-[5.65px]")}),r.jsx("div",{className:e.twMerge(s,t,n?l:i,n&&c&&w,g?"w-0":"w-[8.3px]")}),r.jsx("div",{className:e.twMerge(s,o,a,d,n&&c&&w,g?"w-[5.65px]":"w-0")}),r.jsx("div",{className:e.twMerge(s,t,a,d,n&&c&&w,g?"w-[8.3px] delay-100":"w-0 delay-0")})]})},n=function(s){var a=s.className,o=s.checked,t=s.disabled,s=s.isError,i="text-w-gray-100";return r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:e.twMerge(s?t?i:"text-w-red-500":t?o?"text-primary-100":i:o?"text-primary":"text-w-gray-200 group-hover:text-primary",a),"data-testid":"design-system--sub-checkbox",children:r.jsx("path",{d:"M4 8.76667L7.75004 12.5L14.0001 5.5",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})})};exports.CheckboxButton=function(s){var a=s.type,o=s.disabled,t=s.checked,t=void 0!==t&&t,i=s.isError,d=s.isFocused,s=s.className,w="circle"===a?"rounded-full":"rounded";return"sub"===a?r.jsx(n,{className:s,checked:t,disabled:o,isError:i}):r.jsxs("div",{className:e.twMerge("group relative m-px box-border size-4 cursor-pointer border",w,o&&!t?"border-w-gray-200 bg-w-gray-50 cursor-not-allowed":o&&t&&!i?"bg-primary-100 border-primary-100 cursor-not-allowed":o&&t&&i?"bg-w-gray-50 border-w-gray-200 cursor-not-allowed":t&&d&&!i?"bg-primary-500 border-primary-500":t||!d||i?!t||o||i?t||o||!i?t&&!o&&i?"border-w-red-500 bg-w-red-500":"group-hover:border-primary-500 border-w-gray-200 bg-white":"border-w-red-500 bg-w-white":"bg-primary-500 border-primary-500":"border-primary-500",s),role:"checkbox-button",children:["box"===a&&r.jsx(c,{checked:t,isError:i,disabled:o}),"circle"===a&&r.jsx(g,{checked:t,isError:i,disabled:o})]})};
+"use strict";var r=require("react/jsx-runtime"),e=require("tailwind-merge"),s="absolute h-[2px] origin-top-left rounded",a="transition-[width] duration-100 ease-linear",t="left-[3.2px] top-[5.45px] rotate-45",o="left-[4.5px] top-[8.95px] -rotate-45",i="bg-w-gray-200 group-hover:bg-w-primary",d="bg-w-white group-hover:bg-w-white",l="bg-w-red-500 group-hover:bg-w-red-500",w="bg-w-gray-200 group-hover:bg-w-gray-200",c=function(i){var l=i.checked,c=i.isError,i=i.disabled;return r.jsxs("div",{className:"relative h-full w-full cursor-pointer bg-transparent",children:[r.jsx("div",{className:e.twMerge(s,t,a,d,c&&i&&w,l?"w-[5.65px]":"w-0")}),r.jsx("div",{className:e.twMerge(s,o,a,d,c&&i&&w,l?"w-[8.3px] delay-100":"w-0 delay-0")})]})},g=function(c){var g=c.checked,n=c.isError,c=c.disabled;return r.jsxs("div",{className:"relative h-full w-full cursor-pointer bg-transparent",children:[r.jsx("div",{className:e.twMerge(s,t,n?l:i,n&&c&&w,g?"w-0":"w-[5.65px]")}),r.jsx("div",{className:e.twMerge(s,o,n?l:i,n&&c&&w,g?"w-0":"w-[8.3px]")}),r.jsx("div",{className:e.twMerge(s,t,a,d,n&&c&&w,g?"w-[5.65px]":"w-0")}),r.jsx("div",{className:e.twMerge(s,o,a,d,n&&c&&w,g?"w-[8.3px] delay-100":"w-0 delay-0")})]})},n=function(s){var a=s.className,t=s.checked,o=s.disabled,s=s.isError,i="text-w-gray-100";return r.jsx("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:e.twMerge(s?o?i:"text-w-red-500":o?t?"text-primary-100":i:t?"text-primary":"text-w-gray-200 group-hover:text-primary",a),"data-testid":"design-system--sub-checkbox",children:r.jsx("path",{d:"M4 8.76667L7.75004 12.5L14.0001 5.5",stroke:"currentColor",strokeWidth:"1.4",strokeLinecap:"round",strokeLinejoin:"round"})})};exports.CheckboxButton=function(s){var a=s.type,t=s.disabled,o=s.checked,o=void 0!==o&&o,i=s.isError,d=s.isFocused,s=s.className,w="circle"===a?"rounded-full":"rounded";return"sub"===a?r.jsx(n,{className:s,checked:o,disabled:t,isError:i}):r.jsxs("div",{className:e.twMerge("group relative m-px box-border size-4 cursor-pointer border",w,t?o?i?"bg-w-gray-50 border-w-gray-200 cursor-not-allowed":"bg-primary-100 border-primary-100 cursor-not-allowed":"border-w-gray-200 bg-w-gray-50 cursor-not-allowed":d&&!i?o?"bg-primary-500 border-primary-500":"border-primary-500 bg-w-white":i?o?"border-w-red-500 bg-w-red-500":"border-w-red-500 bg-w-white":o?"bg-primary-500 border-primary-500":"group-hover:border-primary-500 border-w-gray-200 bg-white",s),role:"checkbox-button",children:["box"===a&&r.jsx(c,{checked:o,isError:i,disabled:t}),"circle"===a&&r.jsx(g,{checked:o,isError:i,disabled:t})]})};

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

@@ -1,3 +1,48 @@
 import { CheckboxCardProps } from './CheckboxCard.types';
+/**
+ * 체크박스와 함께 아이콘, 제목, 설명을 포함하는 카드 형태의 선택 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props
+ * @param {boolean} [props.disabled=false] - 컴포넌트의 비활성화 여부
+ * @param {boolean} [props.checked=false] - 체크박스의 선택 상태
+ * @param {boolean} [props.isError=false] - 오류 상태 표시 여부
+ * @param {(event: React.ChangeEvent<HTMLInputElement>) => void} props.onChange - 체크박스 상태 변경 시 호출되는 핸들러
+ * @param {boolean} [props.isWide=false] - 넓은 형태로 표시할지 여부
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {string} props.iconName - 표시할 아이콘의 이름
+ * @param {string} props.title - 카드의 제목
+ * @param {string} [props.description] - 카드의 설명 텍스트
+ * @param {string} [props.testId] - 테스트를 위한 ID
+ * @param {string} [props.name] - 체크박스의 name 속성
+ * @param {string} [props.value] - 체크박스의 value 속성
+ *
+ * @example
+ * // 기본 사용 예시
+ * <CheckboxCard
+ *   iconName="user"
+ *   title="사용자 정보"
+ *   description="사용자의 기본 정보를 포함합니다"
+ *   onChange={(e) => console.log('체크박스 상태:', e.target.checked)}
+ * />
+ *
+ * // 넓은 형태의 비활성화된 체크박스 카드
+ * <CheckboxCard
+ *   iconName="settings"
+ *   title="설정"
+ *   description="시스템 설정을 관리합니다"
+ *   isWide={true}
+ *   disabled={true}
+ * />
+ *
+ * // 에러 상태의 체크박스 카드
+ * <CheckboxCard
+ *   iconName="warning"
+ *   title="오류 상태"
+ *   description="오류가 발생했습니다"
+ *   isError={true}
+ *   checked={true}
+ * />
+ */
 declare const CheckboxCard: ({ disabled, checked, isError, onChange, isWide, className, iconName, title, description, testId, name, value, }: CheckboxCardProps) => import("react/jsx-runtime").JSX.Element;
 export default CheckboxCard;

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

@@ -1,3 +1,27 @@
 import { CheckboxListProps } from './CheckboxList.types';
+/**
+ * 체크박스 아이템들을 목록 형태로 표시하는 컴포넌트입니다.
+ *
+ * @param {Object} props
+ * @param {Array} props.data - 체크박스 아이템 데이터 배열 ({label, checked, onChange}[])
+ * @param {string} [props.className] - 리스트 컨테이너에 적용할 스타일 클래스이름
+ * @param {string} [props.testId] - 테스트를 위한 ID
+ * @param {'box' | 'circle'} [props.type='box'] - 체크박스 스타일 타입
+ *
+ * @example
+ * const items = [
+ *   { label: '항목 1', checked: false, onChange: () => {} },
+ *   { label: '항목 2', checked: true, onChange: () => {} }
+ * ];
+ *
+ * return (
+ *   <CheckboxList
+ *     data={items}
+ *     type="box"
+ *     className="my-4"
+ *     testId="checkbox-list"
+ *   />
+ * );
+ */
 declare const CheckboxList: ({ data, className, testId, type, }: CheckboxListProps) => import("react/jsx-runtime").JSX.Element;
 export default CheckboxList;

package/dist/Components/Inputs/CheckboxList/CheckboxList.js

@@ -1 +1 @@
-"use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("tailwind-merge"),s=require("../CheckboxListItem/CheckboxListItem.js"),i=function(e){var s=e.children,i=e.className,e=e.testId;return t.jsx("div",{className:r.twMerge("group flex w-full flex-col gap-3",i),"data-testid":e,children:s})};module.exports=function(r){var a=r.data,l=r.className,u=r.testId,r=r.type,c=void 0===r?"box":r;return t.jsx(i,{className:l,testId:u,children:a.map(function(r,i){return t.jsx(s,e.__assign({},r,{type:c}),i)})})};
+"use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("tailwind-merge"),s=require("../CheckboxListItem/CheckboxListItem.js"),i=function(e){var s=e.children,i=e.className,e=e.testId;return t.jsx("div",{className:r.twMerge("flex w-full flex-col gap-3",i),"data-testid":e,children:s})};module.exports=function(r){var a=r.data,l=r.className,c=r.testId,r=r.type,n=void 0===r?"box":r;return t.jsx(i,{className:l,testId:c,children:a.map(function(r,i){return t.jsx(s,e.__assign({},r,{type:n}),i)})})};

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

@@ -7,5 +7,48 @@ export interface CheckboxListItemProps extends CheckboxStatus, ComponentPropsWit
     CheckboxClassName?: string;
     type?: CheckboxType;
 }
+/**
+ * 체크박스와 라벨, 설명을 포함하는 리스트 아이템 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.label] - 체크박스 옆에 표시될 라벨 텍스트
+ * @param {string} [props.description] - 라벨 아래에 표시될 설명 텍스트
+ * @param {string} [props.CheckboxClassName] - 체크박스에 적용될 커스텀 클래스
+ * @param {CheckboxType} [props.type='box'] - 체크박스 타입 ('box' | 'circle' | 'sub')
+ * @param {boolean} [props.checked] - 체크박스의 선택 상태
+ * @param {boolean} [props.disabled=false] - 체크박스의 비활성화 상태
+ * @param {boolean} [props.isError=false] - 체크박스의 에러 상태
+ * @param {Function} [props.onChange] - 체크박스 상태 변경 시 호출되는 콜백 함수
+ * @param {ReactNode} [props.children] - 라벨 영역에 표시될 추가 컴포넌트
+ *
+ * @example
+ * // 기본 사용
+ * <CheckboxListItem
+ *   label="이용약관 동의"
+ *   description="서비스 이용을 위한 필수 약관입니다."
+ *   checked={checked}
+ *   onChange={handleChange}
+ * />
+ *
+ * // 비활성화 상태
+ * <CheckboxListItem
+ *   label="선택 불가 항목"
+ *   disabled={true}
+ * />
+ *
+ * // 에러 상태
+ * <CheckboxListItem
+ *   label="필수 선택 항목"
+ *   isError={true}
+ *   description="이 항목은 필수로 선택해야 합니다."
+ * />
+ *
+ * // 원형 체크박스
+ * <CheckboxListItem
+ *   label="원형 체크박스"
+ *   type="circle"
+ * />
+ */
 declare const CheckboxListItem: ({ label, description, type, checked, disabled, isError, className, CheckboxClassName, onChange, children, ...rest }: CheckboxListItemProps) => import("react/jsx-runtime").JSX.Element;
 export default CheckboxListItem;

package/dist/Components/Inputs/CheckboxListItem/CheckboxListItem.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),i=require("react"),r=require("tailwind-merge"),a=require("../../Base/Typography/Typography.js"),t=require("../../Base/Layouts/Box/Box.js"),c=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../Checkbox/Checkbox.js")),l=function(i){var a=i.children,t=i.disabled,c=i.hasDescription,l=i.className,i=e.__rest(i,["children","disabled","hasDescription","className"]);return s.jsx("label",e.__assign({className:r.twMerge("grid h-min grid-cols-checkbox-list-item-container grid-rows-checkbox-list-item-container gap-x-3 grid-areas-checkbox-list-item-container",c?"gap-y-0.5":"gap-y-0",t?"cursor-not-allowed":"cursor-pointer",l)},i,{children:a}))};module.exports=function(o){var n=o.label,d=o.description,h=o.type,h=void 0===h?"box":h,x=o.checked,m=o.disabled,m=void 0!==m&&m,u=o.isError,u=void 0!==u&&u,b=(o.className,o.CheckboxClassName),g=o.onChange,p=o.children,o=e.__rest(o,["label","description","type","checked","disabled","isError","className","CheckboxClassName","onChange","children"]),y=i.useState(!1),k=y[0],j=y[1];return s.jsxs(l,{"data-testid":"design-system-checkboxList--item",disabled:m,hasDescription:!!d,onMouseOver:function(){j(!0)},onMouseOut:function(){j(!1)},children:[s.jsx(t,{className:"cursor-pointer pt-1 grid-in-checkbox",children:s.jsx(c,e.__assign({checked:x,isHover:k,isError:u,disabled:m,onChange:g,className:b,type:h},o))}),s.jsxs(t,{className:"flex w-full items-center grid-in-label","data-testid":"design-system-checkboxList--item-label-root",children:[n&&s.jsx(a,{variant:"body1",className:r.twJoin("w-full whitespace-normal break-words",m?"text-w-gray-300":"text-w-gray-900"),"data-testid":"design-system-checkboxList--item-label",children:n}),p]}),d&&s.jsx(t,{className:"flex items-center grid-in-description",children:s.jsx(a,{variant:"body2",className:m?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-checkboxList--item-description",children:d})})]})};
+"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),i=require("tailwind-merge"),r=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js"),t=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../Checkbox/Checkbox.js")),c=function(r){var a=r.children,t=r.disabled,c=r.hasDescription,l=r.className,r=e.__rest(r,["children","disabled","hasDescription","className"]);return s.jsx("label",e.__assign({className:i.twMerge("grid h-min grid-cols-checkbox-list-item-container grid-rows-checkbox-list-item-container gap-x-3 grid-areas-checkbox-list-item-container",c?"gap-y-0.5":"gap-y-0",t?"cursor-not-allowed":"cursor-pointer",l)},r,{children:a}))};module.exports=function(l){var d=l.label,o=l.description,n=l.type,n=void 0===n?"box":n,h=l.checked,m=l.disabled,m=void 0!==m&&m,x=l.isError,x=void 0!==x&&x,b=l.className,g=l.CheckboxClassName,u=l.onChange,p=l.children,l=e.__rest(l,["label","description","type","checked","disabled","isError","className","CheckboxClassName","onChange","children"]);return s.jsxs(c,{"data-testid":"design-system-checkboxList--item",disabled:m,hasDescription:!!o,className:i.twMerge("group",b),children:[s.jsx(a,{className:"cursor-pointer pt-1 grid-in-checkbox",children:s.jsx(t,e.__assign({checked:h,isError:x,disabled:m,onChange:u,className:g,type:n},l))}),s.jsxs(a,{className:"flex w-full items-center grid-in-label","data-testid":"design-system-checkboxList--item-label-root",children:[d&&s.jsx(r,{variant:"body1",className:i.twJoin("w-full whitespace-normal break-words",m?"text-w-gray-300":"text-w-gray-900"),"data-testid":"design-system-checkboxList--item-label",children:d}),p]}),o&&s.jsx(a,{className:"flex items-center grid-in-description",children:s.jsx(r,{variant:"body2",className:m?"text-w-gray-300":"text-w-gray-600","data-testid":"design-system-checkboxList--item-description",children:o})})]})};

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

@@ -6,5 +6,43 @@ export interface ChoiceChipProps extends ComponentPropsWithoutRef<'input'> {
     leadingIcon?: LargeSystemIconName;
     trailingIcon?: MediumSystemIconName;
 }
+/**
+ * 선택 가능한 칩 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props - 컴포넌트 속성
+ * @param {string} props.label - 칩에 표시될 텍스트 라벨
+ * @param {boolean} [props.checked=false] - 체크박스의 선택 상태를 제어
+ * @param {boolean} [props.error=false] - 에러 상태를 표시
+ * @param {LargeSystemIconName} [props.leadingIcon] - 칩 좌측에 표시되는 큰 아이콘
+ * @param {MediumSystemIconName} [props.trailingIcon] - 칩 우측에 표시되는 중간 크기 아이콘
+ * @param {function} [props.onChange] - 체크박스 상태 변경 시 호출되는 이벤트 핸들러
+ *
+ * @example
+ * // 기본 사용
+ * <ChoiceChip
+ *   label="선택 옵션"
+ * />
+ *
+ * // 아이콘이 포함된 칩
+ * <ChoiceChip
+ *   label="아이콘 옵션"
+ *   leadingIcon="home"
+ *   trailingIcon="close"
+ * />
+ *
+ * // 에러 상태의 칩
+ * <ChoiceChip
+ *   label="에러 상태"
+ *   error={true}
+ * />
+ *
+ * // 선택된 상태의 칩
+ * <ChoiceChip
+ *   label="선택된 옵션"
+ *   checked={true}
+ *   onChange={(e) => console.log('선택 상태:', e.target.checked)}
+ * />
+ */
 declare const ChoiceChip: import("react").ForwardRefExoticComponent<ChoiceChipProps & import("react").RefAttributes<HTMLInputElement>>;
 export default ChoiceChip;

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

@@ -16,5 +16,20 @@ export interface CommentAreaProps extends ComponentPropsWithRef<'textarea'>, Inf
     onClose?: () => void;
     onSubmit?: () => void;
 }
+/**
+ * 댓글 입력 영역 컴포넌트
+ * @param {Object} props
+ * @param {boolean} [props.isReply] - 답글 모드 여부
+ * @param {string|string[]} [props.guideText] - 가이드 텍스트
+ * @param {string} props.buttonName - 버튼 텍스트
+ * @param {string} props.value - 텍스트 영역 값
+ * @param {string} [props.cancelButtonName='취소'] - 취소 버튼 텍스트
+ * @param {boolean} [props.isSelected] - 선택 여부
+ * @param {string} [props.optionMessage] - 옵션 메시지
+ * @param {ReactNode} [props.children] - 커스텀 컨텐츠
+ * @param {() => void} [props.onCheck] - 체크박스 변경 핸들러
+ * @param {() => void} [props.onClose] - 닫기 핸들러
+ * @param {() => void} [props.onSubmit] - 제출 핸들러
+ */
 declare const CommentArea: import("react").ForwardRefExoticComponent<Omit<CommentAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 export default CommentArea;

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

@@ -0,0 +1,57 @@
+import { PropsWithChildren } from 'react';
+import { SystemIconName } from '../../DataDisplays';
+export interface FilterChipProps extends PropsWithChildren {
+    text: string;
+    leadingIcon?: SystemIconName;
+    trailingIcon?: SystemIconName;
+    badgeCount?: string;
+    className?: string;
+    isOpen?: boolean;
+    onClick?: () => void;
+}
+/**
+ * 필터 선택 및 상태를 표시하는 칩 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} props.text - 칩에 표시될 텍스트
+ * @param {SystemIconName} [props.leadingIcon] - 텍스트 앞에 표시될 아이콘
+ * @param {SystemIconName} [props.trailingIcon] - 텍스트 뒤에 표시될 아이콘
+ * @param {string} [props.badgeCount] - 선택된 항목 수를 표시하는 뱃지 텍스트
+ * @param {string} [props.className] - 추가적인 스타일 클래스
+ * @param {boolean} [props.isOpen=false] - 드롭다운 메뉴의 열림 상태
+ * @param {() => void} [props.onClick] - 클릭 이벤트 핸들러
+ * @param {React.ReactNode} [props.children] - 드롭다운 메뉴의 내부 컨텐츠
+ *
+ * @example
+ * // 기본 사용
+ * <FilterChip text="카테고리" />
+ *
+ * // 아이콘과 함께 사용
+ * <FilterChip
+ *   text="필터"
+ *   leadingIcon="filter"
+ *   trailingIcon="chevron-down"
+ * />
+ *
+ * // 선택된 항목 수 표시
+ * <FilterChip
+ *   text="상태"
+ *   badgeCount="3"
+ *   leadingIcon="status"
+ * />
+ *
+ * // 드롭다운 메뉴와 함께 사용
+ * <FilterChip
+ *   text="정렬"
+ *   isOpen={true}
+ *   leadingIcon="sort"
+ * >
+ *   <DropdownMenu>
+ *     <MenuItem>최신순</MenuItem>
+ *     <MenuItem>오래된순</MenuItem>
+ *   </DropdownMenu>
+ * </FilterChip>
+ */
+declare const FilterChip: import("react").ForwardRefExoticComponent<FilterChipProps & import("react").RefAttributes<HTMLDivElement>>;
+export default FilterChip;

package/dist/Components/Inputs/FilterChip/FilterChip.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("tailwind-merge"),a=require("../../Base/Typography/Typography.js"),s=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/CountBadge/CountBadge.js")),l=(require("../../DataDisplays/Label/Label.js"),require("../../../_virtual/_tslib.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),n=r.forwardRef(function(r,n){var o=r.leadingIcon,d=r.trailingIcon,c=r.text,p=r.children,y=r.onClick,m=r.isOpen,m=void 0!==m&&m,u=r.badgeCount,r=r.className,g=u&&0<Number(u),x=m||g;return e.jsxs(s,{ref:n,"data-testid":"design-system-filter-chip--outer-container",className:t.twMerge("relative w-fit",r),children:[e.jsxs(s,{"data-testid":"design-system-filter-chip",className:t.twMerge("relative flex w-full cursor-pointer select-none items-center gap-1 rounded-full border border-w-gray-200 bg-w-white px-[15px] py-1.5 hover:border-primary",m&&"border-primary",g&&"border-2 border-primary bg-primary-10 px-[14px] py-[5px]"),onClick:y,children:[o&&e.jsx(l,{testId:"design-system-filter-chip--leading-icon",name:o,className:t.twMerge("text-w-gray-900",x&&"text-primary")}),e.jsx(a,{variant:"body1",className:t.twMerge("text-w-gray-900",x&&"text-primary"),children:c}),d&&e.jsx(l,{testId:"design-system-filter-chip--trailing-icon",name:d,className:t.twMerge("text-w-gray-400",x&&"text-primary")}),g&&e.jsx(i,{text:u,className:"-right-1 -top-1"})]}),m&&e.jsx(s,{"data-testid":"design-system-filter-chip--list",className:"absolute -bottom-2 left-0 z-40 translate-y-full transform transition-all",children:p})]})});n.displayName="FilterChip",module.exports=n;

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

@@ -0,0 +1,2 @@
+import FilterChip from './FilterChip';
+export default FilterChip;

package/dist/Components/Inputs/FilterChip/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("./FilterChip.js");module.exports=e;

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

@@ -1,12 +1,14 @@
 import { ChangeEvent } from 'react';
+export type FilterItem = {
+    label: string;
+    value: string;
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+};
 export interface FilterListProps {
     title: string;
     buttonName: string;
-    data: Array<{
-        label: string;
-        value: string;
-        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    }>;
+    data: FilterItem[];
+    className?: string;
     selectedValues?: string[];
     isAllSelected?: boolean;
     onSelectAll?: () => void;
@@ -15,5 +17,44 @@ export interface FilterListProps {
     isViewOnly?: boolean;
     onSubmit?: () => void;
 }
-declare const FilterList: ({ title, buttonName, onSelectAll, isAllSelected, isViewOnly, data, selectedValues, onReset, onViewOnly, onSubmit, }: FilterListProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 필터 목록을 표시하고 관리하는 컴포넌트입니다.
+ *
+ * @component
+ *
+ * @param {object} props
+ * @param {string} props.title - 필터 목록의 제목
+ * @param {string} props.buttonName - 적용 버튼에 표시될 텍스트 (기본값: '적용하기')
+ * @param {FilterItem[]} props.data - 필터 항목 배열
+ * @param {string} [props.className] - 컴포넌트에 적용할 추가 클래스명
+ * @param {string[]} [props.selectedValues] - 선택된 필터 값들의 배열
+ * @param {boolean} [props.isAllSelected] - 전체 선택 여부
+ * @param {boolean} [props.isViewOnly] - 선택한 항목만 보기 모드 여부
+ * @param {() => void} [props.onSelectAll] - 전체 선택 버튼 클릭 시 호출될 함수
+ * @param {() => void} [props.onReset] - 초기화 버튼 클릭 시 호출될 함수
+ * @param {() => void} [props.onViewOnly] - 선택한 항목만 보기 토글 시 호출될 함수
+ * @param {() => void} [props.onSubmit] - 적용 버튼 클릭 시 호출될 함수
+ *
+ * @example
+ * ```tsx
+ * const filterItems: FilterItem[] = [
+ *   {
+ *     label: '카테고리 1',
+ *     value: 'category1',
+ *     onChange: (e) => console.log(e.target.checked)
+ *   }
+ * ];
+ *
+ * <FilterList
+ *   title="필터"
+ *   buttonName="적용하기"
+ *   data={filterItems}
+ *   selectedValues={['category1']}
+ *   onSelectAll={() => {}}
+ *   onReset={() => {}}
+ *   onSubmit={() => {}}
+ * />
+ * ```
+ */
+declare const FilterList: ({ title, buttonName, onSelectAll, isAllSelected, isViewOnly, data, className, selectedValues, onReset, onViewOnly, onSubmit, }: FilterListProps) => import("react/jsx-runtime").JSX.Element;
 export default FilterList;

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

@@ -1,2 +1,3 @@
 import FilterList from './FilterList';
 export default FilterList;
+export type { FilterItem } from './FilterList';