@wishket/design-system 1.5.0 → 1.5.2

package/dist/Components/Base/Layouts/Box/Box.d.ts

@@ -2,5 +2,11 @@ import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react'
 interface BoxProps extends PropsWithChildren<ComponentPropsWithoutRef<'div'>> {
     as?: ElementType;
 }
+/**
+ * @param {Object} props
+ * @param {ReactNode} props.children - 박스 내부에 렌더링할 컨텐츠
+ * @param {ElementType} [props.as='div'] - 렌더링할 HTML 요소
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ */
 declare const Box: import("react").ForwardRefExoticComponent<BoxProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Box;

package/dist/Components/Base/Layouts/Column/Column.d.ts

@@ -5,5 +5,15 @@ export interface ColumnProps extends PropsWithChildren {
     size?: ColumnSize;
     className?: string;
 }
+/**
+ * 그리드 시스템 기반의 컬럼 레이아웃 컴포넌트
+ * @param {Object} props
+ * @param {boolean} [props.container] - 컨테이너 여부
+ * @param {number} [props.size] - 컬럼 크기 (1-11)
+ * @param {number} [props.leftColumnSize] - 왼쪽 컬럼 크기
+ * @param {number} [props.centerColumnSize] - 가운데 컬럼 크기
+ * @param {number} [props.rightColumnSize] - 오른쪽 컬럼 크기
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ */
 declare const Column: ({ container, size, className, children, }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
 export default Column;

package/dist/Components/Base/Layouts/FullBleed/FullBleed.d.ts

@@ -4,5 +4,13 @@ interface FullBleedProps extends ComponentPropsWithRef<'div'> {
     insideContainerClassName?: string;
     maxWidth?: string;
 }
+/**
+ * 화면 전체 너비를 활용하는 레이아웃 컴포넌트
+ * @param {Object} props
+ * @param {ReactNode} props.children - 내부 컨텐츠
+ * @param {string} [props.maxWidth] - 최대 너비 설정
+ * @param {string} [props.className] - 외부 컨테이너 클래스
+ * @param {string} [props.insideContainerClassName] - 내부 컨테이너 클래스
+ */
 declare const FullBleed: import("react").ForwardRefExoticComponent<Omit<FullBleedProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default FullBleed;

package/dist/Components/Base/Layouts/GridLayout/GridLayout.d.ts

@@ -1,3 +1,19 @@
 import { GridLayoutProps } from './GridLayout.types';
+/**
+ * GridLayout 컴포넌트는 그리드 시스템을 구현하는 레이아웃 컴포넌트입니다.
+ * 반응형 디자인을 지원하며 모바일, 태블릿, 데스크톱 환경에 따라 다른 그리드 영역을 적용할 수 있습니다.
+ * tailwind.config에 정의된 그리드 영역을 사용할 수 있습니다.
+ *
+ * @component
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - 그리드 레이아웃 내부에 렌더링될 자식 요소
+ * @param {string} [props.gridTemplateAreaClass] - 커스텀 그리드 템플릿 영역을 정의하는 CSS 클래스
+ * @param {string} [props.testId] - 테스트를 위한 데이터 테스트 ID
+ *
+ * @example
+ * <GridLayout gridTemplateAreaClass="custom-grid-areas">
+ *   <div>Content</div>
+ * </GridLayout>
+ */
 declare const GridLayout: ({ children, gridTemplateAreaClass, testId, }: GridLayoutProps) => import("react/jsx-runtime").JSX.Element;
 export default GridLayout;

package/dist/Components/Base/Typography/Typography.d.ts

@@ -1,3 +1,11 @@
 import { TypographyProps } from './Typography.types';
+/**
+ * Typography
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - Typography 내부에 들어갈 컨텐츠
+ * @param {string} props.variant - 텍스트 스타일 variant ('title1' | 'title2' | 'title3' | 'subTitle1' | 'subTitle2' | 'contents1' | 'contents2' | 'body1' | 'body2' | 'body3' | 'caption1' | 'caption2')
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {keyof JSX.IntrinsicElements} [props.as='span'] - 렌더링할 HTML 요소
+ */
 declare const Typography: ({ children, variant, className, as, ...rest }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
 export default Typography;

package/dist/Components/DataDisplays/CountBadge/CountBadge.d.ts

@@ -1,3 +1,23 @@
 import { BadgeType as BadgeProps } from '../../../types/badge.types';
+/**
+ * 숫자를 표시하는 뱃지 컴포넌트
+ *
+ * @component
+ * @param {object} props
+ * @param {string | number} props.text - 뱃지에 표시될 텍스트 또는 숫자, 0을 보여줄 때에는 String이어야 함
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {'primary' | 'white_primary' | 'white_gray' | 'gray'} [props.variant='primary'] - 뱃지의 스타일 변형
+ * @param {boolean} [props.showZero=false] - 값이 0일 때 뱃지를 표시할지 여부
+ *
+ * @example
+ * // 기본 사용법
+ * <CountBadge text="5" />
+ *
+ * // 0 표시하기
+ * <CountBadge text="0" showZero={true} />
+ *
+ * // 다른 스타일 변형 사용
+ * <CountBadge text="10" variant="white_primary" />
+ */
 declare const CountBadge: ({ text, className, variant, showZero, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default CountBadge;

package/dist/Components/DataDisplays/Divider/Divider.d.ts

@@ -3,5 +3,23 @@ export interface DividerProps {
     isSub?: boolean;
     className?: string;
 }
+/**
+ * 콘텐츠 사이에 시각적 구분선을 생성하는 컴포넌트
+ * @param {Object} props
+ * @param {boolean} [props.isVertical=false] - true일 경우 세로 구분선, false일 경우 가로 구분선
+ * @param {boolean} [props.isSub=false] - true일 경우 연한 회색, false일 경우 진한 회색 사용
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @returns {JSX.Element} 구분선 요소
+ * @example
+ * // 가로 구분선
+ * <Divider />
+ *
+ * // 세로 구분선
+ * <Divider isVertical />
+ *
+ * // 연한 회색의 구분선
+ * <Divider isSub />
+ *
+ */
 declare const Divider: ({ isVertical, isSub, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;
 export default Divider;

package/dist/Components/DataDisplays/ImageLabel/ImageLabel.d.ts

@@ -2,5 +2,23 @@ export type ImageLabelType = 'new_circle' | 'new' | 'beta' | 'ai';
 export interface ImageLabelProps {
     type: ImageLabelType;
 }
+/**
+ * 이미지에 오버레이되는 라벨을 표시하는 컴포넌트
+ * @param {('new_circle'|'new'|'beta'|'ai')} props.type - 표시할 라벨의 타입
+ * @returns {JSX.Element} 라벨 컴포넌트
+ * @example
+ * // NEW 원형 라벨
+ * <ImageLabel type="new_circle" />
+ *
+ * // NEW 라벨
+ * <ImageLabel type="new" />
+ *
+ * // BETA 라벨
+ * <ImageLabel type="beta" />
+ *
+ * // AI 라벨
+ * <ImageLabel type="ai" />
+ *
+ */
 declare const ImageLabel: ({ type }: ImageLabelProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageLabel;

package/dist/Components/DataDisplays/Label/Label.d.ts

@@ -9,6 +9,36 @@ export interface LabelRootProps extends ComponentProps<'div'> {
 export interface LabelIconProps extends ComponentProps<'div'> {
     icon?: SystemIconName;
 }
+/**
+ * @module Label
+ * @description 레이블을 구성하는 컴포넌트들의 집합입니다.
+ * @property {Component} Root - 레이블의 컨테이너 컴포넌트
+ * @property {Component} Text - 레이블의 텍스트 컴포넌트
+ * @property {Component} Icon - 레이블의 아이콘 컴포넌트
+ * @example
+ * // 기본 텍스트 레이블
+ * <Label.Root>
+ *   <Label.Text>Basic Label</Label.Text>
+ * </Label.Root>
+ *
+ * // 아이콘이 있는 primary filled 레이블
+ * <Label.Root type="filled" variant="primary">
+ *   <Label.Icon icon="check" />
+ *   <Label.Text>Status Complete</Label.Text>
+ * </Label.Root>
+ *
+ * // 작은 크기의 회색 outlined 레이블
+ * <Label.Root type="outlined" variant="gray" size="sm">
+ *   <Label.Text>Draft</Label.Text>
+ * </Label.Root>
+ *
+ * // 호버 효과가 있는 양쪽 아이콘 레이블
+ * <Label.Root type="filled" canHover>
+ *   <Label.Icon icon="calendar" />
+ *   <Label.Text>Schedule</Label.Text>
+ *   <Label.Icon icon="chevronDown" />
+ * </Label.Root>
+ */
 declare const Label: {
     Root: ({ children, className, size, type, variant, ref, canHover, ...rest }: LabelRootProps) => import("react/jsx-runtime").JSX.Element;
     Text: ({ children, className }: ComponentProps<'div'>) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DataDisplays/NewBadge/NewBadge.d.ts

@@ -1,4 +1,23 @@
 import React from 'react';
 import { NewBadgeProps } from './NewBadge.types';
+/**
+ * 새로운 기능이나 콘텐츠를 표시하기 위한 작은 원형 뱃지 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props - 컴포넌트 프로퍼티
+ * @param {string} [props.className] - 컴포넌트에 적용할 추가 CSS 클래스명
+ *
+ * @example
+ * // 기본 사용법
+ * <NewBadge />
+ *
+ * // 커스텀 클래스와 함께 사용
+ * <NewBadge className="custom-badge" />
+ *
+ * // 텍스트와 함께 사용
+ * <div>
+ *   새로운 기능 <NewBadge />
+ * </div>
+ */
 declare const NewBadge: React.FC<NewBadgeProps>;
 export default NewBadge;

package/dist/Components/DataDisplays/ProductIcon/ProductIcon.d.ts

@@ -1,3 +1,12 @@
 import { ProductIconProps } from './ProductIcon.types';
+/**
+ * 제품 아이콘을 표시하는 컴포넌트입니다.
+ *
+ * @param {Object} props - 컴포넌트 속성
+ * @param {ProductIconName} props.name - 표시할 아이콘의 이름
+ * @param {boolean} [props.disabled=false] - 아이콘의 비활성화 상태 여부
+ * @param {'small' | 'medium' | 'large'} [props.size] - 아이콘의 크기. 지정하지 않으면 아이콘 이름에 따라 자동으로 결정됨
+ * @returns {JSX.Element} 제품 아이콘 컴포넌트
+ */
 declare const ProductIcon: ({ name, disabled, size }: ProductIconProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductIcon;

package/dist/Components/DataDisplays/{ProcessIndicator/ProcessIndicator.d.ts → ProgressIndicator/ProgressIndicator.d.ts}

@@ -1,14 +1,14 @@
-export interface ProcessIndicatorProps {
+export interface ProgressIndicatorProps {
     className?: string;
     progressClassName?: string;
     value: number;
 }
 /**
- * ProcessIndicator
+ * ProgressIndicator
  * @param {Object} props
  * @param {string} [props.className] - 컨테이너의 추가 클래스명
  * @param {string} [props.progressClassName] - 프로그레스 바의 추가 클래스명
  * @param {number} props.value - 진행률 값 (0-100 사이의 숫자)
  */
-declare const ProcessIndicator: ({ className, progressClassName, value, }: ProcessIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-export default ProcessIndicator;
+declare const ProgressIndicator: ({ className, progressClassName, value, }: ProgressIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export default ProgressIndicator;

package/dist/Components/DataDisplays/ProgressIndicator/ProgressIndicator.js

@@ -0,0 +1 @@
+"use strict";var s=require("react/jsx-runtime"),r=require("tailwind-merge");module.exports=function(e){var a=e.className,t=e.progressClassName,e=e.value,e=Math.min(100,Math.max(0,e)),e={"--progress":"".concat(e-100,"%")};return s.jsx("div",{"data-testid":"design-system-progress-indicator",className:r.twMerge("h-1 w-full overflow-hidden rounded-full",a),children:s.jsx("div",{className:"h-full bg-w-gray-100","data-testid":"design-system-progress-indicator--background",children:s.jsx("div",{"data-testid":"design-system-progress-indicator--progress",className:r.twMerge("h-full translate-x-[var(--progress)] bg-primary transition-transform !duration-500",t),style:e})})})};

package/dist/Components/DataDisplays/ProgressIndicator/index.d.ts

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

package/dist/Components/DataDisplays/ProgressIndicator/index.js

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

package/dist/Components/DataDisplays/ServiceLogo/ServiceLogo.d.ts

@@ -4,5 +4,23 @@ interface ServiceLogoProps {
     className?: string;
     variant?: 'default' | 'disabled' | 'bluegray' | 'white';
 }
+/**
+ * 서비스 로고를 표시하는 컴포넌트입니다.
+ *
+ * @param {Object} props
+ * @param {ServiceLogoNames} props.name - 표시할 서비스 로고의 이름
+ * @param {string} [props.className] - 로고에 적용할 추가 CSS 클래스
+ * @param {('default'|'disabled'|'bluegray'|'white')} [props.variant='default'] - 로고의 색상 변형 '_symbol' postfix를 가지는 name일 때에만 사용 가능 ('default'|'disabled'|'bluegray'|'white')
+ * @returns {JSX.Element|null} 서비스 로고 컴포넌트 또는 로고를 찾을 수 없는 경우 null
+ * @example
+ * // 기본 사용법
+ * <ServiceLogo name="wishket_symbol" />
+ *
+ * // 커스텀 클래스와 함께 사용
+ * <ServiceLogo name="wishket_symbol" className="custom-logo" />
+ *
+ * // 버튼 색상 변형 사용
+ * <ServiceLogo name="wishket_symbol" variant="bluegray" />
+ */
 declare const ServiceLogo: ({ name, className, variant, }: ServiceLogoProps) => import("react/jsx-runtime").JSX.Element | undefined;
 export default ServiceLogo;

package/dist/Components/DataDisplays/SkillLabel/SkillLabel.d.ts

@@ -1,3 +1,9 @@
+/**
+ * @typedef {Object} SkillLabel
+ * @property {React.ComponentType} Root - 스킬 라벨의 루트 컨테이너 컴포넌트
+ * @property {React.ComponentType} Icon - 스킬 라벨에 표시되는 아이콘 컴포넌트
+ * @property {React.ComponentType} Text - 스킬 라벨의 텍스트 컴포넌트
+ */
 /// <reference types="react" />
 declare const SkillLabel: {
     Root: ({ children, className }: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DataDisplays/SkillLabel/SkillLabel.parts.d.ts

@@ -1,8 +1,27 @@
 import { ComponentProps } from 'react';
+/**
+ * 스킬 라벨의 루트 컴포넌트입니다.
+ * 스킬 아이콘과 텍스트를 포함하는 컨테이너 역할을 합니다.
+ * @param {Object} props - 컴포넌트 프로퍼티
+ * @param {ReactNode} props.children - 자식 요소
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ */
 declare const Root: ({ children, className }: ComponentProps<'div'>) => import("react/jsx-runtime").JSX.Element;
 export interface IconProps extends ComponentProps<'div'> {
     iconUrl: string;
 }
+/**
+ * 스킬 라벨에 표시되는 아이콘 컴포넌트입니다.
+ * @param {Object} props - 컴포넌트 프로퍼티
+ * @param {string} props.iconUrl - 아이콘 이미지의 URL
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ */
 declare const Icon: ({ className, iconUrl }: IconProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 스킬 라벨에 표시되는 텍스트 컴포넌트입니다.
+ * @param {Object} props - 컴포넌트 프로퍼티
+ * @param {ReactNode} props.children - 표시할 텍스트 내용
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ */
 declare const Text: ({ children, className }: ComponentProps<'span'>) => import("react/jsx-runtime").JSX.Element;
 export { Root, Icon, Text };

package/dist/Components/DataDisplays/SystemIcon/SystemIcon.d.ts

@@ -1,3 +1,32 @@
 import { SystemIconProps } from './SystemIcon.types';
+/**
+ * 시스템 아이콘을 표시하는 컴포넌트입니다.
+ * 크기별(small, medium, large) 및 소셜 아이콘을 지원합니다.
+ *
+ * @param {Object} props - 컴포넌트 속성
+ * @param {string} props.name - 아이콘의 이름 (예: 'small_close', 'medium_check', 'large_arrow')
+ * @param {string} [props.testId] - 테스트를 위한 ID
+ * @param {string} [props.className] - 추가적인 CSS 클래스
+ * @param {boolean} [props.solid=false] - 아이콘을 실선으로 표시할지 여부
+ * @param {Function} [props.onClick] - 클릭 이벤트 핸들러
+ *
+ * @example
+ * // 기본 사용법
+ * <SystemIcon name="small_close" />
+ *
+ * // 커스텀 클래스와 함께 사용
+ * <SystemIcon
+ *   name="medium_check"
+ *   className="text-blue-500"
+ *   solid={true}
+ * />
+ *
+ * // 클릭 이벤트와 함께 사용
+ * <SystemIcon
+ *   name="large_arrow"
+ *   onClick={() => console.log('아이콘 클릭됨')}
+ *   testId="arrow-icon"
+ * />
+ */
 declare const SystemIcon: ({ name, testId, className, solid, onClick, }: SystemIconProps) => import("react/jsx-runtime").JSX.Element;
 export default SystemIcon;

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

@@ -9,4 +9,4 @@ export { default as SkillLabel } from './SkillLabel';
 export { default as SystemIcon } from './SystemIcon';
 export type { SystemIconName } from './SystemIcon';
 export { default as Divider } from './Divider';
-export { default as ProcessIndicator } from './ProcessIndicator';
+export { default as ProgressIndicator } from './ProgressIndicator';

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

@@ -10,5 +10,19 @@ export interface DialogProps {
     confirm?: string;
     close?: string;
 }
+/**
+ * 다이얼로그 컴포넌트
+ * @param {Object} props
+ * @param {boolean} props.isOpen - 다이얼로그 표시 여부
+ * @param {string} [props.rootId] - 포털 루트 ID
+ * @param {string} props.title - 다이얼로그 제목
+ * @param {string} props.description - 다이얼로그 설명
+ * @param {'primary'|'caution'} [props.variant='primary'] - 다이얼로그 스타일
+ * @param {() => void} [props.onClose] - 닫기 핸들러
+ * @param {() => void} [props.onConfirm] - 확인 핸들러
+ * @param {string} [props.confirm] - 확인 버튼 텍스트
+ * @param {string} [props.close='닫기'] - 닫기 버튼 텍스트
+ * @param {boolean} [props.needCleanup=true] - 포털 정리 필요 여부
+ */
 declare const Dialog: ({ isOpen, rootId, title, description, variant, onClose, onConfirm, confirm, close, needCleanup, }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export default Dialog;

package/dist/Components/Feedbacks/DialogBox/DialogBox.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),s=(require("../../../_virtual/_tslib.js"),require("react"),require("@wishket/yogokit"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../Base/Typography/Typography.js")),t=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/Icons/Medium/MediumBell.js"),require("../../Inputs/AutoCompleteList/AutoCompleteList.parts.js"),require("../../Inputs/Input/Input.js"),require("../../Inputs/Input/PasswordInput.js"),require("../../Inputs/Input/LableInput.js"),require("../../Inputs/Input/InputTypeSelector.js"),require("../../Inputs/Button/Button.js"));require("../../Inputs/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js"),require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js"),require("../../Inputs/MultiColumnList/MultiColumnList.parts.js"),module.exports=function(a){var u=a.title,l=a.description,o=a.variant,n=a.onClose,p=a.onConfirm,d=a.confirm,c=a.close,c=void 0===c?"닫기":c,a=a.testId,o="caution"===(void 0===o?"primary":o);return e.jsxs(t,{className:"flex h-fit flex-col items-center gap-8 rounded-3xl bg-w-white p-8 font-normal not-italic shadow-modal tablet:w-[400px]","data-testid":a||"design-system--dialog-box",children:[e.jsxs(t,{className:"flex w-full flex-col gap-6",children:[e.jsx(s,{variant:"subTitle2",className:"font-medium text-w-gray-900",children:u}),e.jsx(s,{variant:"body1",className:"whitespace-break-spaces text-w-gray-800",children:l})]}),e.jsxs(t,{className:"flex w-full items-center justify-end gap-4",children:[c&&e.jsx(i,{role:"close",onClick:n,variant:"solid",className:"border-w-bluegray-200 bg-w-bluegray-200 hover:border-w-bluegray-300 hover:bg-w-bluegray-300",children:c}),d&&e.jsx(i,{role:"confirm",onClick:p,variant:"solid",className:r.twJoin(o&&"border-w-orange-500 bg-w-orange-500 hover:border-w-orange-600 hover:bg-w-orange-600"),children:d})]})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),s=(require("../../../_virtual/_tslib.js"),require("react"),require("@wishket/yogokit"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../Base/Typography/Typography.js")),t=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/Icons/Medium/MediumBell.js"),require("../../Inputs/AutoCompleteList/AutoCompleteList.parts.js"),require("../../Inputs/Input/Input.js"),require("../../Inputs/Input/PasswordInput.js"),require("../../Inputs/Input/LableInput.js"),require("../../Inputs/Input/InputTypeSelector.js"),require("../../Inputs/Button/Button.js"));require("../../Inputs/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js"),require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js"),require("../../Inputs/MultiColumnList/MultiColumnList.parts.js"),require("../../Inputs/FilterChip/FilterChip.js"),module.exports=function(a){var u=a.title,l=a.description,o=a.variant,n=a.onClose,p=a.onConfirm,d=a.confirm,c=a.close,c=void 0===c?"닫기":c,a=a.testId,o="caution"===(void 0===o?"primary":o);return e.jsxs(t,{className:"flex h-fit flex-col items-center gap-8 rounded-3xl bg-w-white p-8 font-normal not-italic shadow-modal tablet:w-[400px]","data-testid":a||"design-system--dialog-box",children:[e.jsxs(t,{className:"flex w-full flex-col gap-6",children:[e.jsx(s,{variant:"subTitle2",className:"font-medium text-w-gray-900",children:u}),e.jsx(s,{variant:"body1",className:"whitespace-break-spaces text-w-gray-800",children:l})]}),e.jsxs(t,{className:"flex w-full items-center justify-end gap-4",children:[c&&e.jsx(i,{role:"close",onClick:n,variant:"solid",className:"border-w-bluegray-200 bg-w-bluegray-200 hover:border-w-bluegray-300 hover:bg-w-bluegray-300",children:c}),d&&e.jsx(i,{role:"confirm",onClick:p,variant:"solid",className:r.twJoin(o&&"border-w-orange-500 bg-w-orange-500 hover:border-w-orange-600 hover:bg-w-orange-600"),children:d})]})]})};

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

@@ -10,5 +10,30 @@ export declare class LoadingManager {
     unregister(id: string): void;
     getIsLastIndex(id: string): boolean;
 }
+/**
+ * 전역 로딩 인디케이터 컴포넌트입니다.
+ * 화면 중앙에 로딩 스피너를 표시하며, 여러 개의 로딩 인디케이터가 동시에 존재할 경우
+ * 가장 마지막에 생성된 인디케이터만 표시됩니다.
+ *
+ * @component
+ * @param {GlobalLoadingIndicatorProps} props
+ * @param {string} [props.size='md'] - 로딩 인디케이터의 크기. 'sm' | 'md' | 'lg' 중 선택
+ * @param {string} [props.color='primary'] - 로딩 인디케이터의 색상. 'primary' | 'secondary' | 'white' 등 theme에 정의된 색상
+ * @param {string} [props.className] - 추가적인 CSS 클래스명
+ * @param {string} [props.testId] - 테스트를 위한 ID
+ *
+ * @example
+ * // 기본 사용법
+ * <GlobalLoadingIndicator />
+ *
+ * // 크기 지정
+ * <GlobalLoadingIndicator size="lg" />
+ *
+ * // 색상 지정
+ * <GlobalLoadingIndicator color="blue" />
+ *
+ * // 클래스명 추가
+ * <GlobalLoadingIndicator className="custom-class" />
+ */
 declare const GlobalLoadingIndicator: (props: GlobalLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
 export default GlobalLoadingIndicator;

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

@@ -1,4 +1,23 @@
 import React from 'react';
 import { LoadingIndicatorProps } from './LoadingIndicator.types';
+/**
+ * 로딩 상태를 표시하는 애니메이션 인디케이터 컴포넌트입니다.
+ * 세 개의 점이 순차적으로 페이드 인/아웃되는 애니메이션을 보여줍니다.
+ *
+ * @param {Object} props - 컴포넌트 프로퍼티
+ * @param {boolean} [props.isFixed=false] - true일 경우 position: fixed, false일 경우 position: absolute로 설정됩니다.
+ * @param {('sm'|'md'|'lg')} [props.size='md'] - 로딩 인디케이터의 크기를 설정합니다.
+ * @param {string} [props.className] - 추가적인 CSS 클래스를 적용할 수 있습니다.
+ *
+ * @example
+ * // 기본 사용
+ * <LoadingIndicator />
+ *
+ * // 고정 위치에 큰 크기로 표시
+ * <LoadingIndicator isFixed size="lg" />
+ *
+ * // 커스텀 클래스 적용
+ * <LoadingIndicator className="text-blue-500" />
+ */
 declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;
 export default LoadingIndicator;

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

@@ -7,5 +7,47 @@ export interface MessageBarProps {
     buttonName?: string;
     onClick?: () => void;
 }
+/**
+ * 사용자에게 정보를 표시하는 메시지 바 컴포넌트입니다.
+ *
+ * @component
+ *
+ * @param {Object} props
+ * @param {'primary' | 'white'} props.variant - 메시지 바의 스타일 변형. 'primary' 또는 'white' 중 선택
+ * @param {(typeof MediumProductIconNames)[number]} props.icon - 메시지 바에 표시될 ProductIcon 이름
+ *        ('person_smile', 'lock', 'logout', 'contract_pen', 'paper_pen', 'paper_hold' 등)
+ * @param {string} [props.title] - 메시지 바의 제목 (선택사항)
+ * @param {string} props.text - 메시지 바에 표시될 본문 텍스트
+ * @param {string} [props.buttonName] - 버튼에 표시될 텍스트 (선택사항)
+ * @param {() => void} [props.onClick] - 버튼 클릭 시 실행될 콜백 함수 (선택사항)
+ *
+ * @example
+ * // 기본 사용 예시
+ * <MessageBar
+ *   variant="primary"
+ *   icon="person_smile"
+ *   title="알림"
+ *   text="새로운 메시지가 도착했습니다."
+ *   buttonName="확인"
+ *   onClick={() => console.log('버튼이 클릭되었습니다')}
+ * />
+ *
+ * // 제목과 버튼이 없는 간단한 메시지
+ * <MessageBar
+ *   variant="white"
+ *   icon="paper_pen"
+ *   text="작업이 성공적으로 완료되었습니다."
+ * />
+ *
+ * // 보안 관련 메시지
+ * <MessageBar
+ *   variant="primary"
+ *   icon="lock"
+ *   title="보안 알림"
+ *   text="계정의 보안을 위해 비밀번호를 변경해주세요."
+ *   buttonName="비밀번호 변경"
+ *   onClick={() => handlePasswordChange()}
+ * />
+ */
 declare const MessageBar: ({ variant, icon, title, text, buttonName, onClick, }: MessageBarProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageBar;

package/dist/Components/Feedbacks/MessageBar/MessageBar.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),s=require("tailwind-merge"),t=require("../../Base/Typography/Typography.js"),r=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../../_virtual/_tslib.js"),require("react"),require("@wishket/yogokit"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/ProductIcon/ProductIcon.js")),a=(require("../../DataDisplays/SystemIcon/Icons/Medium/MediumBell.js"),require("../../Inputs/AutoCompleteList/AutoCompleteList.parts.js"),require("../../Inputs/Input/Input.js"),require("../../Inputs/Input/PasswordInput.js"),require("../../Inputs/Input/LableInput.js"),require("../../Inputs/Input/InputTypeSelector.js"),require("../../Inputs/Button/Button.js"));require("../../Inputs/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js"),require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js"),require("../../Inputs/MultiColumnList/MultiColumnList.parts.js"),module.exports=function(u){var n=u.variant,n=void 0===n?"primary":n,l=u.icon,o=u.title,d=u.text,p=u.buttonName,u=u.onClick;return e.jsxs(r,{"data-testid":"design-system-message-bar",className:s.twMerge("flex w-full items-center gap-5 rounded-2xl border px-8 py-5","primary"===n&&"border-primary-100 bg-primary-10","white"===n&&"border-w-gray-200 bg-white"),children:[e.jsx(r,{className:"shrink-0","data-testid":"design-system-message-bar--icon",children:e.jsx(i,{name:l,size:"medium"})}),e.jsxs(r,{className:"flex w-full flex-col gap-1",children:[o&&e.jsx(t,{variant:"subTitle2",className:"font-medium text-w-gray-900","data-testid":"design-system-message-bar--title",children:o}),e.jsx(t,{variant:"body2",className:"text-w-gray-600","data-testid":"design-system-message-bar--text",children:d})]}),p&&u&&e.jsx(a,{variant:"outlined",size:"sm",className:"shrink-0",onClick:u,"data-testid":"design-system-message-bar--button",children:p})]})};
+"use strict";var e=require("react/jsx-runtime"),s=require("tailwind-merge"),r=require("../../Base/Typography/Typography.js"),t=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../../_virtual/_tslib.js"),require("react"),require("@wishket/yogokit"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/ProductIcon/ProductIcon.js")),a=(require("../../DataDisplays/SystemIcon/Icons/Medium/MediumBell.js"),require("../../Inputs/AutoCompleteList/AutoCompleteList.parts.js"),require("../../Inputs/Input/Input.js"),require("../../Inputs/Input/PasswordInput.js"),require("../../Inputs/Input/LableInput.js"),require("../../Inputs/Input/InputTypeSelector.js"),require("../../Inputs/Button/Button.js"));require("../../Inputs/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js"),require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js"),require("../../Inputs/MultiColumnList/MultiColumnList.parts.js"),require("../../Inputs/FilterChip/FilterChip.js"),module.exports=function(u){var n=u.variant,n=void 0===n?"primary":n,l=u.icon,o=u.title,p=u.text,d=u.buttonName,u=u.onClick;return e.jsxs(t,{"data-testid":"design-system-message-bar",className:s.twMerge("flex w-full items-center gap-5 rounded-2xl border px-8 py-5","primary"===n&&"border-primary-100 bg-primary-10","white"===n&&"border-w-gray-200 bg-white"),children:[e.jsx(t,{className:"shrink-0","data-testid":"design-system-message-bar--icon",children:e.jsx(i,{name:l,size:"medium"})}),e.jsxs(t,{className:"flex w-full flex-col gap-1",children:[o&&e.jsx(r,{variant:"subTitle2",className:"font-medium text-w-gray-900","data-testid":"design-system-message-bar--title",children:o}),e.jsx(r,{variant:"body2",className:"text-w-gray-600","data-testid":"design-system-message-bar--text",children:p})]}),d&&u&&e.jsx(a,{variant:"outlined",size:"sm",className:"shrink-0",onClick:u,"data-testid":"design-system-message-bar--button",children:d})]})};

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

@@ -7,5 +7,40 @@ interface MessageBoxProps extends PropsWithChildren {
     description?: string;
     links?: ExternalLink[];
 }
+/**
+ * 아이콘, 제목, 설명, 외부 링크 등을 포함할 수 있는 메시지 박스 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props - 컴포넌트 프로퍼티
+ * @param {ProductIconName} [props.icon] - 메시지 박스 상단에 표시될 아이콘
+ * @param {string} [props.title] - 메시지 박스의 제목
+ * @param {string} [props.description] - 메시지 박스의 설명 텍스트
+ * @param {ExternalLink[]} [props.links] - 메시지 박스 하단에 표시될 외부 링크 목록
+ * @param {React.ReactNode} [props.children] - 메시지 박스 내부에 표시될 자식 컴포넌트
+ *
+ * @example
+ * // 기본 사용 예시
+ * <MessageBox
+ *   icon="info"
+ *   title="알림 메시지"
+ *   description="중요한 안내사항입니다."
+ * />
+ *
+ * // 외부 링크가 포함된 예시
+ * <MessageBox
+ *   icon="warning"
+ *   title="주의사항"
+ *   description="다음 링크를 확인해주세요."
+ *   links={[
+ *     {
+ *       text: "자세히 보기",
+ *       href: "https://example.com",
+ *       external: true
+ *     }
+ *   ]}
+ * >
+ *   <CustomContent />
+ * </MessageBox>
+ */
 declare const MessageBox: ({ icon, title, description, children, links, }: MessageBoxProps) => import("react/jsx-runtime").JSX.Element;
 export default MessageBox;

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

@@ -1,10 +1,44 @@
 import { ComponentProps, ReactNode } from 'react';
-export interface TooltipProps extends ComponentProps<'div'> {
+export interface PlainTooltipProps extends ComponentProps<'div'> {
     variant?: 'up' | 'down' | 'left' | 'right';
     text?: string;
     children?: ReactNode;
     disabled?: boolean;
     tooltipClassName?: string;
 }
-declare const PlainTooltip: ({ variant, text, children, className, disabled, tooltipClassName, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 마우스 호버 시 툴팁을 표시하는 컴포넌트입니다.
+ *
+ * @component
+ * @param {Object} props
+ * @param {'up' | 'down' | 'left' | 'right'} [props.variant='up'] - 툴팁이 표시될 방향
+ * @param {string} [props.text] - 툴팁에 표시될 텍스트
+ * @param {ReactNode} [props.children] - 툴팁을 표시할 대상 요소
+ * @param {string} [props.className] - 최상위 컨테이너에 적용할 추가 클래스
+ * @param {boolean} [props.disabled=false] - 툴팁 비활성화 여부
+ * @param {string} [props.tooltipClassName] - 툴팁 컨테이너에 적용할 추가 클래스
+ *
+ * @example
+ * // 기본 사용법
+ * <PlainTooltip text="도움말 내용">
+ *   <button>마우스를 올려보세요</button>
+ * </PlainTooltip>
+ *
+ * // 방향 지정
+ * <PlainTooltip
+ *   variant="right"
+ *   text="오른쪽에 표시되는 툴팁"
+ * >
+ *   <span>도움말</span>
+ * </PlainTooltip>
+ *
+ * // 비활성화
+ * <PlainTooltip
+ *   text="이 툴팁은 표시되지 않습니다"
+ *   disabled={true}
+ * >
+ *   <div>비활성화된 툴팁</div>
+ * </PlainTooltip>
+ */
+declare const PlainTooltip: ({ variant, text, children, className, disabled, tooltipClassName, }: PlainTooltipProps) => import("react/jsx-runtime").JSX.Element;
 export default PlainTooltip;