@wishket/design-system 1.8.0 → 1.9.0

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

@@ -11,6 +11,7 @@ import { ButtonProps } from './Button.types';
  * @param {function} [props.onClick] - 클릭 이벤트 핸들러
  * @param {'sm' | 'md' | 'lg'} [props.size='md'] - 버튼 크기
  * @param {'outlined' | 'solid' | 'outline_filled'} [props.variant='outlined'] - 버튼 스타일 변형
+ * @param {'primary' | 'gray'} [props.color='primary'] - 버튼 색상, outlined 일 때에만 적용 가능
  * @param {boolean} [props.rounded=false] - 둥근 모서리 적용 여부
  * @param {React.ReactNode} [props.leadingIcon] - 버튼 앞쪽 아이콘
  * @param {boolean} [props.isLeadingIconSolid=false] - 앞쪽 아이콘 solid 스타일 적용 여부
@@ -46,5 +47,5 @@ import { ButtonProps } from './Button.types';
  *   알림
  * </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;
+declare const Button: ({ type, ref, disabled, children, className, onClick, size, variant, color, rounded, leadingIcon, isLeadingIconSolid, trailingIcon, isTrailingIconSolid, badgeNumber, needThrottle, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;

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

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var i=require("../../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),n=require("react"),r=require("./Button.parts.js");module.exports=function(o){var t=o.type,t=void 0===t?"button":t,d=o.ref,a=o.disabled,a=void 0!==a&&a,l=o.children,c=o.className,u=o.onClick,s=o.size,s=void 0===s?"md":s,v=o.variant,v=void 0===v?"outlined":v,g=o.rounded,g=void 0!==g&&g,f=o.leadingIcon,I=o.isLeadingIconSolid,I=void 0!==I&&I,b=o.trailingIcon,m=o.isTrailingIconSolid,m=void 0!==m&&m,T=o.badgeNumber,T=void 0===T?"":T,p=o.needThrottle,p=void 0!==p&&p,o=i.__rest(o,["type","ref","disabled","children","className","onClick","size","variant","rounded","leadingIcon","isLeadingIconSolid","trailingIcon","isTrailingIconSolid","badgeNumber","needThrottle"]),N=n.useRef(void 0);return n.useEffect(function(){return function(){N&&clearTimeout(N.current)}},[N]),e.jsx(r.ButtonContainer,i.__assign({ref:d,size:s,type:t,disabled:a,rounded:g,variant:v,className:c,onClick:p?function(i){i.preventDefault(),N.current||(null!=u&&u(i),N.current=setTimeout(function(){N.current=void 0},300))}:u,leadingIcon:f,isLeadingIconSolid:I,trailingIcon:b,isTrailingIconSolid:m,badgeNumber:T},o,{children:l}))};
+"use strict";var i=require("../../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),n=require("react"),r=require("./Button.parts.js");module.exports=function(o){var t=o.type,t=void 0===t?"button":t,d=o.ref,a=o.disabled,a=void 0!==a&&a,l=o.children,c=o.className,u=o.onClick,s=o.size,s=void 0===s?"md":s,v=o.variant,v=void 0===v?"outlined":v,g=o.color,g=void 0===g?"primary":g,f=o.rounded,f=void 0!==f&&f,m=o.leadingIcon,I=o.isLeadingIconSolid,I=void 0!==I&&I,b=o.trailingIcon,p=o.isTrailingIconSolid,p=void 0!==p&&p,T=o.badgeNumber,T=void 0===T?"":T,N=o.needThrottle,N=void 0!==N&&N,o=i.__rest(o,["type","ref","disabled","children","className","onClick","size","variant","color","rounded","leadingIcon","isLeadingIconSolid","trailingIcon","isTrailingIconSolid","badgeNumber","needThrottle"]),S=n.useRef(void 0);return n.useEffect(function(){return function(){S&&clearTimeout(S.current)}},[S]),e.jsx(r.ButtonContainer,i.__assign({ref:d,size:s,type:t,disabled:a,rounded:f,color:g,variant:v,className:c,onClick:N?function(i){i.preventDefault(),S.current||(null!=u&&u(i),S.current=setTimeout(function(){S.current=void 0},300))}:u,leadingIcon:m,isLeadingIconSolid:I,trailingIcon:b,isTrailingIconSolid:p,badgeNumber:T},o,{children:l}))};

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

@@ -1,2 +1,2 @@
 import { ButtonProps } from './Button.types';
-export declare const ButtonContainer: ({ rounded, size, type, variant, children, leadingIcon, isLeadingIconSolid, trailingIcon, isTrailingIconSolid, badgeNumber, className, disabled, onClick, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonContainer: ({ rounded, size, type, variant, color, children, leadingIcon, isLeadingIconSolid, trailingIcon, isTrailingIconSolid, badgeNumber, className, disabled, onClick, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

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,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"})]}))};
+"use strict";var r=require("../../../_virtual/_tslib.js"),e=require("react/jsx-runtime"),i=require("tailwind-merge"),a=(require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/CountBadge/CountBadge.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.ButtonContainer=function(s){function o(){if(h){if("solid"===p)return"text-w-white";if("outline_filled"===p)return"text-primary-100";if("primary"===g)return"text-primary-100";if("gray"===g)return"text-w-gray-300"}return"solid"===p?"text-w-white":"outline_filled"===p||"primary"===g?"text-primary-500":"text-w-gray-600"}var l=s.rounded,n=s.size,d=s.type,p=s.variant,g=s.color,u=s.children,x=s.leadingIcon,m=s.isLeadingIconSolid,m=void 0!==m&&m,y=s.trailingIcon,b=s.isTrailingIconSolid,b=void 0!==b&&b,c=s.badgeNumber,c=void 0===c?"":c,w=s.className,h=s.disabled,v=s.onClick,s=r.__rest(s,["rounded","size","type","variant","color","children","leadingIcon","isLeadingIconSolid","trailingIcon","isTrailingIconSolid","badgeNumber","className","disabled","onClick"]);return e.jsxs("button",r.__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":"primary"===g?"bg-w-white border-w-gray-200 hover:border-primary-500":"bg-w-white border-w-gray-200 hover:border-w-gray-400",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"),w),onClick:v,disabled:h,type:d},s,{children:[x&&e.jsx(t,{name:x,solid:m,testId:"design-system-button--leading-icon",className:i.twMerge("flex-shrink-0","sm"===n?"size-[14px]":"size-4",o())}),u,y&&e.jsx(t,{name:y,solid:b,testId:"design-system-button--trailing-icon",className:i.twMerge("flex-shrink-0","sm"===n?"size-[14px]":"size-4",o())}),c&&e.jsx(a,{text:c,className:"relative flex-shrink-0"})]}))};

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

@@ -2,9 +2,11 @@ import { ComponentPropsWithRef } from 'react';
 import { SystemIconName } from '../../DataDisplays/SystemIcon';
 type ButtonSizeType = 'sm' | 'md' | 'lg';
 type ButtonVariantType = 'outlined' | 'solid' | 'outline_filled';
+type ButtonColorType = 'primary' | 'gray';
 export interface ButtonProps extends ComponentPropsWithRef<'button'> {
     size?: ButtonSizeType;
     variant?: ButtonVariantType;
+    color?: ButtonColorType;
     rounded?: boolean;
     leadingIcon?: SystemIconName;
     isLeadingIconSolid?: boolean;

package/dist/Components/Inputs/CommentArea/CommentArea.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),r=require("react"),a=require("tailwind-merge"),t=require("../../Base/Typography/Typography.js"),l=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js")),n=(require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),o=require("../../DataDisplays/Divider/Divider.js"),c=require("../Button/Button.js"),d=require("../CheckboxListItem/CheckboxListItem.js"),m=function(e){var r=e.userId,e=e.imgUrl;return s.jsxs(l,{className:"flex items-center gap-2",children:[s.jsx(i,{imgUrl:void 0===e?"":e,size:"sm"}),s.jsx(t,{variant:"body1",className:"w-full font-medium text-w-gray-600",children:r})]})},u=function(e){e=e.guideText;return s.jsx(l,{className:"w-full bg-w-gray-10 text-w-gray-500",children:s.jsx("ul",{className:"flex flex-col gap-0.5 typo-body2",children:"string"==typeof e?s.jsx("li",{className:'before:mr-2 before:inline-flex before:items-center before:justify-center before:content-["•"]',children:e}):s.jsx(s.Fragment,{children:null==e?void 0:e.map(function(e){return s.jsx("li",{className:'before:mr-2 before:inline-flex before:items-center before:justify-center before:content-["•"]',children:e},e)})})})})},x=r.forwardRef(function(r,t){var i=r.imgUrl,x=r.userId,g=r.isReply,f=r.guideText,y=r.buttonName,j=r.isSelected,p=r.optionMessage,h=r.cancelButtonName,h=void 0===h?"취소":h,b=r.onClose,w=r.onSubmit,N=r.onCheck,r=e.__rest(r,["imgUrl","userId","isReply","guideText","buttonName","isSelected","optionMessage","cancelButtonName","onClose","onSubmit","onCheck"]),v=r.value,k=r.className,q=r.disabled,C=r.spellCheck,C=void 0!==C&&C,B=r.children,r=e.__rest(r,["value","className","disabled","spellCheck","children"]),D=""===v.trim(),D=!x||D||q;return s.jsxs(l,{"data-testid":"design-system-commentArea--full-container",className:a.twMerge("flex w-full items-start gap-4",k),children:[g&&s.jsx(n,{name:"medium_reply",className:"shrink-0 text-w-gray-400"}),s.jsxs(l,{"data-testid":"design-system-commentArea--container",className:"w-full rounded-xl border border-w-gray-200 bg-w-white",children:[s.jsx(l,{className:"flex w-full flex-col gap-2 px-4 py-3",children:B?s.jsx(l,{className:"h-[98px]",children:B}):s.jsxs(s.Fragment,{children:[x&&s.jsx(m,{imgUrl:i,userId:x}),s.jsx("textarea",e.__assign({"data-testid":"design-system-commentArea",ref:t,value:v,spellCheck:C,disabled:q||!x,className:"h-[63px] w-full resize-none border-none bg-transparent tracking-default text-w-gray-900 outline-none placeholder:font-normal placeholder:text-w-gray-300 placeholder:typo-body1"},r))]})}),f&&s.jsx(l,{"data-testid":"design-system-commentArea--guide-message",className:"w-full bg-w-gray-10 px-4 py-2 text-w-gray-500",children:s.jsx(u,{guideText:f})}),s.jsx(o,{}),s.jsxs(l,{"data-testid":"design-system-commentArea--buttons",className:a.twMerge("flex w-full items-center justify-end px-4 py-3",p&&"justify-between"),children:[p&&s.jsx(d,{label:p,checked:j,onChange:N,disabled:q||!x}),s.jsxs(l,{className:"flex w-fit shrink-0 items-center gap-3",children:[g&&s.jsx(c,{size:"sm",onClick:b,children:h}),s.jsx(c,{variant:"solid",size:"sm",disabled:D,onClick:w,children:y})]})]})]})]})});x.displayName="CommentArea",module.exports=x;
+"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),r=require("react"),a=require("tailwind-merge"),t=require("../../Base/Typography/Typography.js"),l=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js")),n=(require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),o=require("../../DataDisplays/Divider/Divider.js"),c=require("../Button/Button.js"),d=require("../CheckboxListItem/CheckboxListItem.js"),m=function(e){var r=e.userId,e=e.imgUrl;return s.jsxs(l,{className:"flex items-center gap-2",children:[s.jsx(i,{imgUrl:void 0===e?"":e,size:"sm"}),s.jsx(t,{variant:"body1",className:"w-full font-medium text-w-gray-600",children:r})]})},u=function(e){e=e.guideText;return s.jsx(l,{className:"w-full bg-w-gray-10 text-w-gray-500",children:s.jsx("ul",{className:"flex flex-col gap-0.5 typo-body2",children:"string"==typeof e?s.jsx("li",{className:'before:mr-2 before:inline-flex before:items-center before:justify-center before:content-["•"]',children:e}):s.jsx(s.Fragment,{children:null==e?void 0:e.map(function(e){return s.jsx("li",{className:'before:mr-2 before:inline-flex before:items-center before:justify-center before:content-["•"]',children:e},e)})})})})},x=r.forwardRef(function(r,t){var i=r.imgUrl,x=r.userId,g=r.isReply,f=r.guideText,y=r.buttonName,j=r.isSelected,p=r.optionMessage,h=r.cancelButtonName,h=void 0===h?"취소":h,b=r.onClose,w=r.onSubmit,N=r.onCheck,r=e.__rest(r,["imgUrl","userId","isReply","guideText","buttonName","isSelected","optionMessage","cancelButtonName","onClose","onSubmit","onCheck"]),v=r.value,k=r.className,q=r.disabled,C=r.spellCheck,C=void 0!==C&&C,B=r.children,r=e.__rest(r,["value","className","disabled","spellCheck","children"]),D=""===v.trim(),D=!x||D||q,_=x&&p;return s.jsxs(l,{"data-testid":"design-system-commentArea--full-container",className:a.twMerge("flex w-full items-start gap-4",k),children:[g&&s.jsx(n,{name:"medium_reply",className:"shrink-0 text-w-gray-400"}),s.jsxs(l,{"data-testid":"design-system-commentArea--container",className:"w-full rounded-xl border border-w-gray-200 bg-w-white",children:[s.jsx(l,{className:"flex w-full flex-col gap-2 px-4 py-3",children:B?s.jsx(l,{className:"h-[98px]",children:B}):s.jsxs(s.Fragment,{children:[x&&s.jsx(m,{imgUrl:i,userId:x}),s.jsx("textarea",e.__assign({"data-testid":"design-system-commentArea",ref:t,value:v,spellCheck:C,disabled:q||!x,className:"h-[63px] w-full resize-none border-none bg-transparent tracking-default text-w-gray-900 outline-none placeholder:font-normal placeholder:text-w-gray-300 placeholder:typo-body1"},r))]})}),f&&s.jsx(l,{"data-testid":"design-system-commentArea--guide-message",className:"w-full bg-w-gray-10 px-4 py-2 text-w-gray-500",children:s.jsx(u,{guideText:f})}),s.jsx(o,{}),s.jsxs(l,{"data-testid":"design-system-commentArea--buttons",className:a.twMerge("flex w-full items-center justify-end px-4 py-3",_&&"justify-between"),children:[_&&s.jsx(d,{label:p,checked:j,onChange:N,disabled:q||!x}),s.jsxs(l,{className:"flex w-fit shrink-0 items-center gap-3",children:[g&&s.jsx(c,{size:"sm",onClick:b,color:"gray",children:h}),s.jsx(c,{variant:"solid",size:"sm",disabled:D,onClick:w,children:y})]})]})]})]})});x.displayName="CommentArea",module.exports=x;

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

@@ -14,6 +14,7 @@ export interface IconButtonProps extends ComponentProps<'button'> {
  *   - 'md': 50px
  *   - 'lg': 60px
  * @param {boolean} [props.outline=false] - 외곽선 스타일 적용 여부를 지정합니다
+ * @param {boolean} [props.disabled=false] - 버튼 비활성화 여부를 지정합니다
  * @param {React.ReactNode} props.children - 버튼 내부에 표시될 아이콘 컴포넌트
  * @param {string} [props.className] - 추가적인 CSS 클래스
  * @param {function} [props.onClick] - 클릭 이벤트 핸들러
@@ -34,5 +35,5 @@ export interface IconButtonProps extends ComponentProps<'button'> {
  *   <Icon name="menu" />
  * </IconButton>
  */
-declare const IconButton: ({ size, outline, children, onClick, className, ...rest }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const IconButton: ({ size, outline, children, onClick, className, disabled, ...rest }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default IconButton;

package/dist/Components/Inputs/IconButton/IconButton.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),n=require("tailwind-merge"),r=require("../../Base/Layouts/Box/Box.js");module.exports=function(s){var u=s.size,u=void 0===u?"md":u,l=s.outline,l=void 0!==l&&l,a=s.children,o=s.onClick,c=s.className,s=e.__rest(s,["size","outline","children","onClick","className"]),d=i.useState(!1),m=d[0],f=d[1],p=i.useRef(null);return i.useEffect(function(){return function(){p.current&&clearTimeout(p.current)}},[]),t.jsxs("button",e.__assign({"data-testid":"design-system-icon-button",type:"button",className:n.twMerge("relative flex cursor-pointer items-center justify-center rounded-xl border bg-transparent","sm"===u?"size-6 rounded-lg":"md"===u?"size-9":"lg"===u?"size-[50px]":void 0,l?"border-w-gray-200 overflow-hidden":"border-transparent",c),onClick:function(e){null!=o&&o(e),f(!0),p.current&&clearTimeout(p.current),p.current=setTimeout(function(){f(!1)},300)}},s,{children:[m&&t.jsx(r,{"data-testid":"design-system-icon-button--ripple",className:n.twMerge("absolute h-full w-full bg-w-gray-500 bg-opacity-10",l&&"sm"===u?"animate-[rippleOutlineSmall_0.3s_ease-in-out_infinite]":l?"animate-[rippleOutline_0.3s_ease-in-out_infinite]":"animate-[ripple_0.3s_ease-in-out_infinite]")}),t.jsx(r,{"data-testid":"design-system-icon-button--icon",className:"absolute flex h-full w-full items-center justify-center",children:a})]}))};
+"use strict";var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),r=require("tailwind-merge"),n=require("../../Base/Layouts/Box/Box.js");module.exports=function(s){var l=s.size,l=void 0===l?"md":l,u=s.outline,u=void 0!==u&&u,a=s.children,o=s.onClick,c=s.className,d=s.disabled,s=e.__rest(s,["size","outline","children","onClick","className","disabled"]),m=i.useState(!1),f=m[0],b=m[1],p=i.useRef(null);return i.useEffect(function(){return function(){p.current&&clearTimeout(p.current)}},[]),t.jsxs("button",e.__assign({"data-testid":"design-system-icon-button",type:"button",className:r.twMerge("relative flex items-center justify-center rounded-xl border bg-transparent",d?"cursor-not-allowed":"cursor-pointer","sm"===l?"size-6 rounded-lg":"md"===l?"size-9":"lg"===l?"size-[50px]":void 0,u?"border-w-gray-200 overflow-hidden":"border-transparent",c),onClick:function(e){null!=o&&o(e),b(!0),p.current&&clearTimeout(p.current),p.current=setTimeout(function(){b(!1)},300)},disabled:d},s,{children:[f&&t.jsx(n,{"data-testid":"design-system-icon-button--ripple",className:r.twMerge("absolute h-full w-full bg-w-gray-500 bg-opacity-10",u&&"sm"===l?"animate-[rippleOutlineSmall_0.3s_ease-in-out_infinite]":u?"animate-[rippleOutline_0.3s_ease-in-out_infinite]":"animate-[ripple_0.3s_ease-in-out_infinite]")}),t.jsx(n,{"data-testid":"design-system-icon-button--icon",className:"absolute flex h-full w-full items-center justify-center",children:a})]}))};

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

@@ -5,6 +5,7 @@ export type Item = {
     leadingIcon?: SystemIconName;
 };
 export interface IconButtonDropdownProps {
+    disabled?: boolean;
     icon: SystemIconName;
     size?: 'sm' | 'md' | 'lg';
     align?: 'left' | 'right';
@@ -20,6 +21,7 @@ export interface IconButtonDropdownProps {
  *
  * @param {Object} props
  * @param {SystemIconName} props.icon - 버튼에 표시될 아이콘
+ * @param {boolean} [props.disabled=false] - 버튼 비활성화 여부를 지정합니다
  * @param {('sm'|'md'|'lg')} [props.size='sm'] - 버튼의 크기
  * @param {('left'|'right')} [props.align='left'] - 드롭다운 목록의 정렬 방향
  * @param {Item[]} props.items - 드롭다운 목록에 표시될 항목들 ({key, value, leadingIcon}[])
@@ -43,5 +45,5 @@ export interface IconButtonDropdownProps {
  * />
  * ```
  */
-declare const IconButtonDropdown: ({ icon, items, selectedItem, onItemClick, size, align, }: IconButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const IconButtonDropdown: ({ icon, items, selectedItem, onItemClick, size, align, disabled, }: IconButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default IconButtonDropdown;

package/dist/Components/Inputs/IconButtonDropdown/IconButtonDropdown.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),s=(require("../../DataDisplays/Avatar/Avatar.js"),require("../../../_virtual/_tslib.js"),require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),i=require("../IconButton/IconButton.js"),n=require("../List/List.js"),o=require("../../../hooks/useDropdown.js");module.exports=function(r){var l=r.icon,a=r.items,u=r.selectedItem,d=r.onItemClick,c=r.size,c=void 0===c?"sm":c,r=r.align,r=void 0===r?"left":r,d=o({items:a,onItemClick:d}),m=d.isListOpen,j=d.ref,y=d.focusedIndex,v=d.handleItemClick,x=d.toggleListOpen,d=d.handleKeyDown;return e.jsxs("div",{"data-testid":"design-system-icon-button-dropdown",className:"relative w-fit outline-none",ref:j,onKeyDown:d,tabIndex:0,children:[e.jsx(i,{onClick:x,size:c,className:"outline-none",children:e.jsx(s,{name:l})}),m&&e.jsx("div",{"data-testid":"design-system-icon-button-dropdown--list-container",className:t.twJoin("absolute -bottom-2 z-40 translate-y-full transform transition-all","right"===r?"right-0":"left-0 "),children:e.jsx(n.Root,{className:"max-h-full min-w-40 overflow-y-visible",children:a.map(function(t,s){return e.jsx(n.Item,{text:t.value,leadingIcon:t.leadingIcon,onClick:function(){return v(t)},selected:t.key===(null==u?void 0:u.key),isFocused:s===y},t.key)})})})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),s=(require("../../DataDisplays/Avatar/Avatar.js"),require("../../../_virtual/_tslib.js"),require("../../Base/Layouts/Box/Box.js"),require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),i=require("../IconButton/IconButton.js"),n=require("../List/List.js"),a=require("../../../hooks/useDropdown.js");module.exports=function(o){var l=o.icon,r=o.items,d=o.selectedItem,u=o.onItemClick,c=o.size,c=void 0===c?"sm":c,m=o.align,m=void 0===m?"left":m,o=o.disabled,o=void 0!==o&&o,u=a({items:r,onItemClick:u}),y=u.isListOpen,j=u.ref,v=u.focusedIndex,x=u.handleItemClick,f=u.toggleListOpen,u=u.handleKeyDown;return e.jsxs("div",{"data-testid":"design-system-icon-button-dropdown",className:"relative w-fit outline-none",ref:j,onKeyDown:u,tabIndex:0,children:[e.jsx(i,{onClick:f,size:c,className:"outline-none",disabled:o,children:e.jsx(s,{name:l,className:t.twJoin(o&&"text-w-gray-300")})}),y&&e.jsx("div",{"data-testid":"design-system-icon-button-dropdown--list-container",className:t.twJoin("absolute -bottom-2 z-40 translate-y-full transform transition-all","right"===m?"right-0":"left-0 "),children:e.jsx(n.Root,{className:"max-h-full min-w-40 overflow-y-visible",children:r.map(function(t,s){return e.jsx(n.Item,{text:t.value,leadingIcon:t.leadingIcon,onClick:function(){return x(t)},selected:t.key===(null==d?void 0:d.key),isFocused:s===v},t.key)})})})]})};

package/dist/Components/Inputs/SearchField/SearchField.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),r=require("react"),t=(require("tailwind-merge"),require("../../Base/Layouts/Box/Box.js")),a=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),i=require("../TextButtonDropdown/TextButtonDropdown.js"),n=require("../TextFieldContainer/TextFieldContainer.js"),l=require("../Input/Input.js");require("../Input/PasswordInput.js"),require("../Input/LableInput.js"),require("../Input/InputTypeSelector.js"),module.exports=function(u){u.type;var o=u.onSearch,c=(u.className,u.disabled),d=u.spellCheck,p=u.onFocus,j=u.onBlur,m=u.filters,u=e.__rest(u,["type","onSearch","className","disabled","spellCheck","onFocus","onBlur","filters"]),x=r.useState(!1),q=x[0],h=x[1];return s.jsx("form",{onSubmit:function(e){e.preventDefault(),o()},"data-testid":"design-system-search-field",children:s.jsx("label",{className:"cursor-text",children:s.jsxs(n,{isFocused:q,isDisabled:c,className:"overflow-visible",children:[!!m&&s.jsx(t,{className:"shrink-0",children:s.jsx(i,e.__assign({},m))}),s.jsx(l,e.__assign({onFocus:function(e){h(!0),null!=p&&p(e)},onBlur:function(e){h(!1),null!=j&&j(e)},spellCheck:d||!1,disabled:c},u)),s.jsx("button",{type:"submit",className:"shrink-0",children:s.jsx(a,{name:"medium_search",className:"pointer-events-none text-w-gray-600"})})]})})})};
+"use strict";var e=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),a=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/Label/Label.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),n=require("../TextButtonDropdown/TextButtonDropdown.js"),l=require("../TextFieldContainer/TextFieldContainer.js"),u=require("../Input/Input.js");require("../Input/PasswordInput.js"),require("../Input/LableInput.js"),require("../Input/InputTypeSelector.js"),module.exports=function(o){o.type;var d=o.onSearch,c=(o.className,o.disabled),m=o.spellCheck,p=o.onFocus,j=o.onBlur,b=o.filters,o=e.__rest(o,["type","onSearch","className","disabled","spellCheck","onFocus","onBlur","filters"]),x=t.useState(!1),h=x[0],y=x[1];return s.jsx("form",{onSubmit:function(e){e.preventDefault(),d()},"data-testid":"design-system-search-field",children:s.jsx("label",{className:"cursor-text",children:s.jsxs(l,{isFocused:h,isDisabled:c,className:"overflow-visible",children:[!!b&&s.jsx(a,{className:"shrink-0",children:s.jsx(n,e.__assign({disabled:c},b))}),s.jsx(u,e.__assign({onFocus:function(e){y(!0),null!=p&&p(e)},onBlur:function(e){y(!1),null!=j&&j(e)},spellCheck:m||!1,disabled:c},o)),s.jsx("button",{type:"submit",className:"shrink-0","data-testid":"design-system-search-field--submit-button",disabled:c,children:s.jsx(i,{testId:"design-system-search-field--submit-button-icon",name:"medium_search",className:r.twMerge("pointer-events-none text-w-gray-600",c&&"text-w-gray-300")})})]})})})};

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

@@ -7,6 +7,7 @@ import { TextButtonDropdownProps } from './TextButtonDropdown.types';
  * @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] - 드롭다운 메뉴를 오른쪽 정렬할지 여부
+ * @param {boolean} [props.disabled=false] - 드롭다운 메뉴를 비활성화할지 여부
  *
  * @example
  * const items = [
@@ -23,8 +24,9 @@ import { TextButtonDropdownProps } from './TextButtonDropdown.types';
  *     selectedItem={selected}
  *     onItemClick={setSelected}
  *     alignRight={false}
+ *     disabled={item.length === 0}
  *   />
  * );
  */
-declare const TextButtonDropdown: ({ items, selectedItem, onItemClick, alignRight, }: TextButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const TextButtonDropdown: ({ items, selectedItem, onItemClick, alignRight, disabled, }: TextButtonDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default TextButtonDropdown;

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

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

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

@@ -4,5 +4,5 @@ interface TextButtonProps extends ComponentProps<'button'> {
     value: Item['value'];
     isListOpen: boolean;
 }
-export declare const TextButton: ({ value, isListOpen, ...rest }: TextButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextButton: ({ value, isListOpen, disabled, className, ...rest }: TextButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Components/Inputs/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 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"})})]}))};
+"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 l=i.value,n=i.isListOpen,o=i.disabled,u=i.className,i=e.__rest(i,["value","isListOpen","disabled","className"]);return a.jsxs("button",e.__assign({type:"button",className:r.twMerge("flex items-center gap-2 outline-none",o?"cursor-not-allowed":"cursor-pointer",u),disabled:o},i,{children:[a.jsx(s,{variant:"body1",className:r.twMerge("text-w-gray-600",o&&"text-w-gray-300"),children:l}),a.jsx("span",{className:r.twJoin("transition-transform duration-300",n&&"rotate-180"),children:a.jsx(t,{name:"medium_arrow_down",className:r.twMerge("text-w-gray-600",o&&"text-w-gray-300")})})]}))};

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

@@ -5,6 +5,7 @@ export type Item = {
     leadingIcon?: SystemIconName;
 };
 export interface TextButtonDropdownProps {
+    disabled?: boolean;
     items: Item[];
     selectedItem: Item;
     onItemClick: (item: Item) => void;

package/dist/Components/Inputs/TextFieldContainer/TextFieldContainer.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),s=require("../../Base/Typography/Typography.js"),a=require("../../Base/Layouts/Box/Box.js"),i=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/Label/Label.js"),require("../../../_virtual/_tslib.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js"));module.exports=function(t){var l=t.children,o=t.className,n=t.leadingIcon,d=t.trailingIcon,c=t.isLeadingIconSolid,u=t.isTrailingIconSolid,y=t.measure,g=t.isFocused,m=t.isDisabled,x=t.isError,p=t.onClick,w=t.isTextarea,b=t.isAutoComplete,t=t.testId;return e.jsxs(a,{className:r.twMerge("group flex w-full items-center gap-3 overflow-hidden rounded-xl border bg-w-white px-4 py-[11px]",m?"border-w-gray-200":x?"border-w-red-500":g?"border-primary":"border-w-gray-200 hover:border-primary",m&&"cursor-not-allowed bg-w-gray-10",w&&"relative p-0",b&&"flex-wrap",o),"data-testid":t||"design-system--text-field-container",onClick:p,children:[n&&e.jsx(i,{name:n,solid:c,className:"shrink-0 text-w-gray-600",testId:"design-system--text-field-container-leading-icon"}),l,y&&e.jsx(s,{variant:"body1",className:"w-fit shrink-0 text-w-gray-400",children:y}),d&&e.jsx(i,{name:d,solid:u,className:"shrink-0 text-w-gray-600",testId:"design-system--text-field-container-trailing-icon"})]})};
+"use strict";var e=require("react/jsx-runtime"),r=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/Label/Label.js"),require("../../../_virtual/_tslib.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js"));module.exports=function(t){var l=t.children,o=t.className,n=t.leadingIcon,d=t.trailingIcon,g=t.isLeadingIconSolid,c=t.isTrailingIconSolid,y=t.measure,u=t.isFocused,x=t.isDisabled,w=t.isError,m=t.onClick,p=t.isTextarea,b=t.isAutoComplete,t=t.testId;return e.jsxs(s,{className:r.twMerge("group flex w-full items-center gap-3 overflow-hidden rounded-xl border  px-4 py-[11px]",x?"border-w-gray-200":w?"border-w-red-500":u?"border-primary":"border-w-gray-200 hover:border-primary",x?"bg-w-gray-10":"bg-w-white",x&&"cursor-not-allowed",p&&"relative p-0",b&&"flex-wrap",o),"data-testid":t||"design-system--text-field-container",onClick:m,children:[n&&e.jsx(i,{name:n,solid:g,className:r.twMerge("shrink-0 text-w-gray-600",x&&"text-w-gray-300"),testId:"design-system--text-field-container-leading-icon"}),l,y&&e.jsx(a,{variant:"body1",className:r.twMerge("w-fit shrink-0 text-w-gray-400",x&&"text-w-gray-300"),children:y}),d&&e.jsx(i,{name:d,solid:c,className:r.twMerge("shrink-0 text-w-gray-600",x&&"text-w-gray-300"),testId:"design-system--text-field-container-trailing-icon"})]})};

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

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { MediumSystemIconName, SmallSystemIconName } from '../../DataDisplays/SystemIcon';
+import { Item } from '../../Inputs/IconButtonDropdown/IconButtonDropdown';
 export interface MenuProps {
     type?: 'main' | 'sub';
     variant?: 'white' | 'gray';
@@ -7,10 +8,13 @@ export interface MenuProps {
     badgeCount?: string;
     isSelected?: boolean;
     leadingIcon?: MediumSystemIconName;
-    trailingIcon?: SmallSystemIconName;
+    iconButtonName?: SmallSystemIconName;
     onClick: () => void;
     onOptionClick?: () => void;
     children?: ReactNode;
+    items?: Item[];
+    selectedItem?: Item;
+    onItemClick?: (item: Item) => void;
 }
 /**
  * 메뉴 컴포넌트는 네비게이션에서 사용되는 클릭 가능한 항목을 표시합니다.
@@ -22,10 +26,13 @@ export interface MenuProps {
  * @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
  * @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
  * @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘(medium 사이즈)
- * @param {SystemIconName} [props.trailingIcon] - 메뉴 뒤쪽에 표시될 아이콘(small 사이즈)
+ * @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown 아이콘(small 사이즈)
  * @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수
- * @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (trailingIcon 사용 시 필요)
+ * @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButtonDropdown이 아닌 IconButton으로만 사용 시 필요)
  * @param {ReactNode} [props.children] - 메뉴 내부에 표시될 자식 요소 (IconButtonDropdown 컴포넌트 사용 시 필요, trailingIcon과 함께 사용하지 않도록 주의 필요)
+ * @param {Item[]} [props.items] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}[]
+ * @param {Item} [props.selectedItem] - IconButtonDropdown 컴포넌트 사용 시 필요 {key: number, value: string}
+ * @param {(item: Item) => void} [props.onItemClick] - IconButtonDropdown 컴포넌트 사용 시 필요 (item: Item) => {}
  *
  * @example
  * // 기본 메뉴
@@ -43,24 +50,25 @@ export interface MenuProps {
  *   onClick={() => console.log('서브 메뉴 클릭')}
  * />
  *
- * // 선택된 상태의 옵션 메뉴
+ * // IconButtonDropdown과 함께 사용시
  * <Menu
- *   variant="gray"
- *   name="옵션 메뉴"
- *   isSelected={true}
- *   trailingIcon="more"
+ *   name="메뉴"
  *   onClick={() => console.log('메뉴 클릭')}
- *   onOptionClick={() => console.log('옵션 클릭')}
+ *   iconButtonName="small_more_options"
+ *   items={items}
+ *   selectedItem={selectedItem}
+ *   onItemClick={onItemClick}
  * />
  *
- * // IconButtonDropdown과 함께 사용시
+ * // 드롭다운이 필요하지 않은 옵션 메뉴(ex. 버튼 클릭 시 모달 오픈))
  * <Menu
- *   name="메뉴"
+ *   variant="gray"
+ *   name="옵션 메뉴"
+ *   isSelected={true}
+ *   iconButtonName="small_more_options"
  *   onClick={() => console.log('메뉴 클릭')}
- *   onOptionClick={() => console.log('옵션 클릭')}
- * >
- *   <IconButtonDropdown items={items} />
- * </Menu>
+ *   onOptionClick={() => console.log('옵션 클릭', '모달 오픈')}
+ * />
  */
-declare const Menu: ({ type, variant, name, isSelected, badgeCount, leadingIcon, trailingIcon, children, onClick, onOptionClick, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+declare const Menu: ({ type, variant, name, isSelected, badgeCount, leadingIcon, iconButtonName, onClick, onOptionClick, items, selectedItem, onItemClick, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
 export default Menu;

package/dist/Components/Navigations/Menu/Menu.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),t=(require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/CountBadge/CountBadge.js")),i=require("../../Base/Typography/Typography.js"),s=require("../../Base/Layouts/Box/Box.js"),a=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Label/Label.js"),require("../../../_virtual/_tslib.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),n=(require("react"),require("@wishket/yogokit"),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/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js"),require("../../Inputs/IconButton/IconButton.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 o,l,p=u.type,p=void 0===p?"main":p,m=u.variant,m=void 0===m?"white":m,d=u.name,c=u.isSelected,c=void 0!==c&&c,y=u.badgeCount,g=u.leadingIcon,j=u.trailingIcon,I=u.children,h=u.onClick,q=u.onOptionClick,u=!I&&j&&q;return e.jsxs(s,{"data-testid":"design-system-menu",className:(o=m,l=c,p="sub"===p?"pl-12":"",l={white:r.twJoin("bg-w-white hover:bg-w-gray-50",l&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:r.twJoin("bg-w-gray-50 hover:bg-w-gray-100",l&&"bg-w-gray-100  hover:bg-w-gray-100")},r.twMerge("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900",p,l[o])),onClick:h,children:[g&&e.jsx(a,{testId:"design-system-menu-leading-icon",name:g,className:r.twJoin("white"===m&&c&&"text-primary")}),e.jsx(i,{"data-testid":"design-system-menu-name",variant:"body1",className:"w-full select-none",children:d}),y&&e.jsx(t,{variant:"white"!==m?"white_gray":c?"primary":"gray",text:y,className:"relative",showZero:!0}),I,u&&e.jsx(n,{size:"sm",className:"shrink-0",onClick:function(e){e.stopPropagation(),q()},children:e.jsx(a,{name:j})})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("tailwind-merge"),r=(require("../../DataDisplays/Avatar/Avatar.js"),require("../../DataDisplays/CountBadge/CountBadge.js")),s=require("../../Base/Typography/Typography.js"),i=require("../../Base/Layouts/Box/Box.js"),n=(require("../../Base/Layouts/FullBleed/FullBleed.js"),require("../../DataDisplays/Label/Label.js"),require("../../../_virtual/_tslib.js"),require("../../DataDisplays/SystemIcon/SystemIcon.js")),a=(require("react"),require("@wishket/yogokit"),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/Calendar/Calendar.utils.js"),require("../../Inputs/Checkbox/Checkbox.js"),require("../../Inputs/ChoiceChip/ChoiceChip.js"),require("../../Inputs/IconButton/IconButton.js")),u=(require("../../Inputs/Radio/Radio.js"),require("../../Inputs/TextField/TextField.js"),require("../../Inputs/CommentArea/CommentArea.js"),require("../../Inputs/IconButtonDropdown/IconButtonDropdown.js"));require("../../Inputs/MultiColumnList/MultiColumnList.parts.js"),require("../../Inputs/FilterChip/FilterChip.js"),module.exports=function(o){var l,p,m=o.type,m=void 0===m?"main":m,c=o.variant,c=void 0===c?"white":c,d=o.name,I=o.isSelected,I=void 0!==I&&I,y=o.badgeCount,g=o.leadingIcon,j=o.iconButtonName,q=o.onClick,h=o.onOptionClick,w=o.items,C=o.selectedItem,o=o.onItemClick,x=!!(j&&w&&o&&C),b=!!j&&!!h;return e.jsxs(i,{"data-testid":"design-system-menu",className:(l=c,p=I,m="sub"===m?"pl-12":"",p={white:t.twJoin("bg-w-white hover:bg-w-gray-50",p&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:t.twJoin("bg-w-gray-50 hover:bg-w-gray-100",p&&"bg-w-gray-100  hover:bg-w-gray-100")},t.twMerge("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900",m,p[l])),onClick:q,children:[g&&e.jsx(n,{testId:"design-system-menu-leading-icon",name:g,className:t.twJoin("white"===c&&I&&"text-primary")}),e.jsx(s,{"data-testid":"design-system-menu-name",variant:"body1",className:"w-full select-none",children:d}),y&&e.jsx(r,{variant:"white"!==c?"white_gray":I?"primary":"gray",text:y,className:"relative",showZero:!0}),x&&e.jsx(u,{size:"sm",icon:j,items:w,selectedItem:C,onItemClick:o}),b&&e.jsx(a,{size:"sm",className:"shrink-0",onClick:function(e){e.stopPropagation(),h()},children:e.jsx(n,{name:j})})]})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishket/design-system",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Wishket Design System",
   "main": "dist/index.js",
   "module": "dist/index.es.js",