@wishket/design-system 2.2.1 → 3.0.1

package/README.md

@@ -82,6 +82,64 @@ export const Home  = () => {
 export default Home;
 ```
 
+## Navigation 컴포넌트와 라우팅 라이브러리
+
+`TextLink`, `Menu`, `GNBList.Item`은 기본적으로 `<a>` 태그로 렌더되며, `as` prop으로 라우팅 라이브러리의 Link를 주입할 수 있습니다.
+
+### Next.js와 함께 사용
+
+```tsx
+import Link from 'next/link';
+import { TextLink, Menu, GNBList } from '@wishket/design-system';
+
+<TextLink as={Link} href="/about" text="About" />
+<Menu as={Link} name="Settings" href="/settings" />
+<GNBList.Item as={Link} href="/projects">프로젝트</GNBList.Item>
+```
+
+매 호출마다 `as`를 적기 번거롭다면 컨슈머 앱에서 wrapper를 한 번만 정의해두는 패턴을 권장합니다.
+
+```tsx
+// app/components/AppTextLink.tsx
+import { ComponentProps } from 'react';
+import Link from 'next/link';
+import { TextLink } from '@wishket/design-system';
+
+export const AppTextLink = (props: ComponentProps<typeof TextLink>) => (
+  <TextLink as={Link} {...props} />
+);
+```
+
+### react-router와 함께 사용
+
+`react-router`의 `Link`는 `to` prop을 쓰므로 `href` → `to` 어댑터가 필요합니다.
+
+```tsx
+import { Link as RouterLink } from 'react-router-dom';
+
+const RouterLinkAdapter = ({
+  href,
+  ...rest
+}: { href: string } & React.ComponentProps<typeof RouterLink>) => (
+  <RouterLink to={href} {...rest} />
+);
+
+<TextLink as={RouterLinkAdapter} href="/about" text="About" />
+```
+
+### v3 마이그레이션
+
+v3.0부터 위 컴포넌트들이 더 이상 자동으로 `next/link`를 사용하지 않습니다. 컨슈머 앱에서 일괄 변환을 원한다면 패키지에 포함된 jscodeshift codemod를 사용하세요.
+
+```bash
+npx jscodeshift \
+  -t node_modules/@wishket/design-system/scripts/codemods/add-as-link.ts \
+  --extensions=tsx,ts --parser=tsx \
+  src/
+```
+
+자세한 내용은 [`scripts/codemods/README.md`](./scripts/codemods/README.md)를 참고하세요.
+
 ## Customize Theme in Config File
 
 ```typescript

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

@@ -1,12 +1,12 @@
-import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react';
-export interface BoxProps extends PropsWithChildren<ComponentPropsWithoutRef<'div'>> {
-    as?: ElementType;
-}
+import { ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';
+export type BoxProps<T extends ElementType = 'div'> = {
+    as?: T;
+} & PropsWithChildren<Omit<ComponentPropsWithRef<T>, 'as'>>;
 /**
  * @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>>;
+declare const Box: import("react").ForwardRefExoticComponent<Omit<BoxProps<ElementType>, "ref"> & import("react").RefAttributes<any>>;
 export { Box };

package/dist/Components/Base/Layouts/Box/Box.js

@@ -4,5 +4,6 @@ import{jsx as e}from"react/jsx-runtime";import{twMerge as r}from"tailwind-merge"
  * @param {ReactNode} props.children - 박스 내부에 렌더링할 컨텐츠
  * @param {ElementType} [props.as='div'] - 렌더링할 HTML 요소
  * @param {string} [props.className] - 추가적인 CSS 클래스
- */(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const i=/*#__PURE__*/t(((t,i)=>{var{className:l,children:a,as:b="div"}=t,f=c(t,["className","children","as"]);/*#__PURE__*/
-return e(b,o(function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){n(e,r,t[r])}))}return e}({ref:i,className:r("box-border",l)},f),{children:a}))}));i.displayName="Box";export{i as Box};
+ */(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const i=/*#__PURE__*/t(((t,// eslint-disable-next-line @typescript-eslint/no-explicit-any
+i)=>{var{as:l,className:a,children:u}=t,b=c(t,["as","className","children"]);/*#__PURE__*/
+return e(null!=l?l:"div",o(function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){n(e,r,t[r])}))}return e}({ref:i,className:r("box-border",a)},b),{children:u}))}));i.displayName="Box";export{i as Box};

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

@@ -1,4 +1,6 @@
+import { ComponentPropsWithRef, ElementType, ReactElement } from 'react';
 import { TypographyProps } from './Typography.types';
+type PolymorphicRef<T extends ElementType> = ComponentPropsWithRef<T>['ref'];
 /**
  * Typography
  * @param {Object} props
@@ -6,6 +8,9 @@ import { TypographyProps } from './Typography.types';
  * @param {string} props.variant - 텍스트 스타일 variant ('title48' | 'title32' | 'title24' | 'subTitle20' | 'subTitle18' | 'contents18' | 'contents16' | 'body16' | 'body14' | 'body13' | 'caption12' | 'caption11')
  * @param {string} [props.className] - 추가적인 CSS 클래스
  * @param {keyof JSX.IntrinsicElements} [props.as='span'] - 렌더링할 HTML 요소
+ * @param {Ref} [props.ref] - 렌더된 요소로 forward되는 ref. as에 따라 추론
  */
-declare const Typography: ({ children, variant, className, as, ...rest }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+declare const Typography: <T extends ElementType = "span">(props: TypographyProps<T> & {
+    ref?: PolymorphicRef<T>;
+}) => ReactElement | null;
 export { Typography };

package/dist/Components/Base/Typography/Typography.js

@@ -1,5 +1,5 @@
-import{jsx as t}from"react/jsx-runtime";import{twMerge as e}from"tailwind-merge";function n(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e.push.apply(e,n)}return e}(Object(e)).forEach((function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(e,n))})),t}function o(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},c=Object.keys(t);for(r=0;r<c.length;r++)n=c[r],e.indexOf(n)>=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(t);for(r=0;r<c.length;r++)n=c[r],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}const c=[{name:"title48",class:"typo-title48"},{name:"title32",class:"typo-title32"},{name:"title28",class:"typo-title28"},{name:"title24",class:"typo-title24"},{name:"subTitle20",class:"typo-subTitle20"},{name:"subTitle18",class:"typo-subTitle18"},{name:"contents18",class:"typo-contents18"},{name:"contents16",class:"typo-contents16"},{name:"body16",class:"typo-body16"},{name:"body14",class:"typo-body14"},{name:"body13",class:"typo-body13"},{name:"caption12",class:"typo-caption12"},{name:"caption11",class:"typo-caption11"}],a=a=>{var s,{children:l,variant:i,className:p,as:y="span"}=a,b=o(a,["children","variant","className","as"]);const u=y||"span",m=(null===(s=c.find((t=>t.name===i)))||void 0===s?void 0:s.class)||"";/*#__PURE__*/
-return t(u,r(function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),o.forEach((function(e){n(t,e,r[e])}))}return t}({className:e("tracking-default",m,p)},b),{children:l}))};
+import{jsx as t}from"react/jsx-runtime";import{twMerge as e}from"tailwind-merge";import{forwardRef as n}from"react";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function o(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e.push.apply(e,n)}return e}(Object(e)).forEach((function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(e,n))})),t}function c(t,e){if(null==t)return{};var n,r,o=function(t,e){if(null==t)return{};var n,r,o={},c=Object.keys(t);for(r=0;r<c.length;r++)n=c[r],e.indexOf(n)>=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(t);for(r=0;r<c.length;r++)n=c[r],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}const a=[{name:"title48",class:"typo-title48"},{name:"title32",class:"typo-title32"},{name:"title28",class:"typo-title28"},{name:"title24",class:"typo-title24"},{name:"subTitle20",class:"typo-subTitle20"},{name:"subTitle18",class:"typo-subTitle18"},{name:"contents18",class:"typo-contents18"},{name:"contents16",class:"typo-contents16"},{name:"body16",class:"typo-body16"},{name:"body14",class:"typo-body14"},{name:"body13",class:"typo-body13"},{name:"caption12",class:"typo-caption12"},{name:"caption11",class:"typo-caption11"}],s=/*#__PURE__*/n(((n,s)=>{var l,{children:i,variant:p,className:y,as:b}=n,u=c(n,["children","variant","className","as"]);const m=null!=b?b:"span",f=(null===(l=a.find((t=>t.name===p)))||void 0===l?void 0:l.class)||"";/*#__PURE__*/
+return t(m,o(function(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable})))),o.forEach((function(e){r(t,e,n[e])}))}return t}({ref:s,className:e("tracking-default",f,y)},u),{children:i}))}));
 /**
  * Typography
  * @param {Object} props
@@ -7,4 +7,5 @@ return t(u,r(function(t){for(var e=1;e<arguments.length;e++){var r=null!=argumen
  * @param {string} props.variant - 텍스트 스타일 variant ('title48' | 'title32' | 'title24' | 'subTitle20' | 'subTitle18' | 'contents18' | 'contents16' | 'body16' | 'body14' | 'body13' | 'caption12' | 'caption11')
  * @param {string} [props.className] - 추가적인 CSS 클래스
  * @param {keyof JSX.IntrinsicElements} [props.as='span'] - 렌더링할 HTML 요소
- */export{a as Typography};
+ * @param {Ref} [props.ref] - 렌더된 요소로 forward되는 ref. as에 따라 추론
+ */export{s as Typography};

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

@@ -1,4 +1,4 @@
-import { ElementType, PropsWithChildren } from 'react';
+import { ComponentPropsWithRef, ElementType, PropsWithChildren } from 'react';
 export declare const typographyVariants: {
     readonly title48: "title48";
     readonly title32: "title32";
@@ -15,9 +15,8 @@ export declare const typographyVariants: {
     readonly caption11: "caption11";
 };
 export type TypographyVariants = (typeof typographyVariants)[keyof typeof typographyVariants];
-export interface TypographyProps extends PropsWithChildren {
+export type TypographyProps<T extends ElementType = 'span'> = PropsWithChildren<{
     variant: TypographyVariants;
     className?: string;
-    as?: ElementType;
-    [key: string]: any;
-}
+    as?: T;
+}> & Omit<ComponentPropsWithRef<T>, 'as' | 'children' | 'className'>;

package/dist/Components/DataDisplays/ImageLabel/ImageLabel.js

@@ -1,4 +1,4 @@
-import{jsx as r}from"react/jsx-runtime";import{twJoin as e}from"tailwind-merge";import{Box as t}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{NewCircle as s}from"./parts/NewCircle.js";import{New as a}from"./parts/New.js";import{Beta as i}from"./parts/Beta.js";import{Ai as o}from"./parts/Ai.js";import"react";
+import{jsx as r}from"react/jsx-runtime";import{twJoin as e}from"tailwind-merge";import"react";import{Box as t}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{NewCircle as s}from"./parts/NewCircle.js";import{New as a}from"./parts/New.js";import{Beta as i}from"./parts/Beta.js";import{Ai as o}from"./parts/Ai.js";
 /**
  * 이미지에 오버레이되는 라벨을 표시하는 컴포넌트
  * @param {('new_circle'|'new'|'beta'|'ai')} props.type - 표시할 라벨의 타입

package/dist/Components/Feedbacks/Tooltip/Tooltip.js

@@ -1,4 +1,4 @@
-"use client";import{jsx as i}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{Box as e}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{PlainTooltip as o}from"./PlainTooltip/PlainTooltip.js";import{RichTooltip as l}from"./RichTooltip/RichTooltip.js";
+"use client";import{jsx as i}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import"react";import{Box as e}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{PlainTooltip as o}from"./PlainTooltip/PlainTooltip.js";import{RichTooltip as l}from"./RichTooltip/RichTooltip.js";
 /**
  * 툴팁의 루트 컴포넌트입니다.
  * CSS 기반 hover와 focus로 동작합니다.
@@ -13,7 +13,7 @@
  *   </Tooltip.Trigger>
  *   <Tooltip.Plain variant="up" text="간단한 툴팁" />
  * </Tooltip>
- */const s=({children:o,className:l})=>/*#__PURE__*/i(e,{className:t("group relative inline-block h-fit w-fit",l),"data-testid":"design-system-tooltip",children:o});
+ */const r=({children:o,className:l})=>/*#__PURE__*/i(e,{className:t("group relative inline-block h-fit w-fit",l),"data-testid":"design-system-tooltip",children:o});
 /**
  * 툴팁 트리거 컴포넌트입니다.
  * 데스크톱에서는 CSS hover로, 모바일에서는 터치(focus)로 툴팁을 표시합니다.
@@ -22,4 +22,4 @@
  * <Tooltip.Trigger>
  *   <SystemIcon name="medium_information" />
  * </Tooltip.Trigger>
- */s.Trigger=({children:t})=>/*#__PURE__*/i(e,{"data-testid":"design-system-tooltip--trigger",className:"h-fit w-fit focus:outline-hidden",tabIndex:0,children:t}),s.Plain=o,s.Rich=l;export{s as Tooltip};
+ */r.Trigger=({children:t})=>/*#__PURE__*/i(e,{"data-testid":"design-system-tooltip--trigger",className:"h-fit w-fit focus:outline-hidden",tabIndex:0,children:t}),r.Plain=o,r.Rich=l;export{r as Tooltip};

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

@@ -1,4 +1,4 @@
-import{jsx as e}from"react/jsx-runtime";import{twMerge as r,twJoin as t}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{ProductIcon as i}from"../../DataDisplays/ProductIcon/ProductIcon.js";import"../../DataDisplays/Accordion/Accordion.js";import{Checkbox as n}from"../Checkbox/Checkbox.js";function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){c(e,r,t[r])}))}return e}function a(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function l(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const p=t=>{var{children:o,isWide:i,checked:n,isError:c,disabled:p,className:d}=t,b=l(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
+import{jsx as e}from"react/jsx-runtime";import{twMerge as r,twJoin as t}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import"react";import{Box as o}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{ProductIcon as i}from"../../DataDisplays/ProductIcon/ProductIcon.js";import"../../DataDisplays/Accordion/Accordion.js";import{Checkbox as n}from"../Checkbox/Checkbox.js";function c(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){c(e,r,t[r])}))}return e}function a(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function l(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const p=t=>{var{children:o,isWide:i,checked:n,isError:c,disabled:p,className:d}=t,b=l(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
 return e("div",a(s({className:r("relative flex h-auto cursor-pointer items-center gap-2 rounded-xl border",i?"min-h-[94px] w-[298px] flex-row gap-3 px-5 py-4":"min-h-fit w-[224px] flex-col justify-center px-4 pt-4 pb-6",!p&&!c&&"group-focus-within:border-primary-500",p?r("cursor-not-allowed",n&&!c?"border-primary-100":"border-w-gray-200"):c?"border-w-red-500":n?"border-primary-500":"border-w-gray-200 group-hover:border-primary",p?n&&!c?"bg-primary-10":"bg-w-gray-10":n?c?"bg-w-red-10":"bg-primary-10":"bg-w-white",d)},b),{children:o}))},d=({isWide:t,children:o})=>/*#__PURE__*/e("div",{className:r("flex h-auto w-full flex-col justify-between gap-0.5",t?"items-start":"items-center"),children:o}),b=i=>{var{isWide:c,className:a}=i,p=l(i,["isWide","className"]);const d=!c;/*#__PURE__*/
 return e(o,{className:t(d&&"absolute top-[17px] left-[17px]"),children:/*#__PURE__*/e(n,s({className:r(d&&"group-hover:border-primary-500",a)},p))})},m=({iconName:t,disabled:o,checked:n,isError:c})=>{const s=c||!n;/*#__PURE__*/
 return e("div",{className:r("flex size-[60px] shrink-0 items-center justify-center",o&&"opacity-30"),"data-testid":"design-system-checkboxCard--icon",children:/*#__PURE__*/e(i,{name:t,disabled:s})})};export{p as CheckboxCardContainer,m as CheckboxCardIcon,b as StyledCheckbox,d as TitleContainer};

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

@@ -1,4 +1,4 @@
-"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{IconButton as i}from"../IconButton/IconButton.js";import{List as n}from"../List/List.js";import{useDropdown as a}from"../../../hooks/useDropdown.js";
+"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as o}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import"react";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{SystemIcon as s}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import{IconButton as i}from"../IconButton/IconButton.js";import{List as n}from"../List/List.js";import{useDropdown as a}from"../../../hooks/useDropdown.js";
 /**
  * 아이콘 버튼과 드롭다운 목록을 결합한 컴포넌트입니다.
  * 버튼 클릭 시 드롭다운 목록이 표시되며, 키보드 탐색이 가능합니다.

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

@@ -1,4 +1,4 @@
-import{jsx as e}from"react/jsx-runtime";import{twMerge as r,twJoin as t}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{ProductIcon as o}from"../../DataDisplays/ProductIcon/ProductIcon.js";import"../../DataDisplays/Accordion/Accordion.js";import{Radio as i}from"../Radio/Radio.js";function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){n(e,r,t[r])}))}return e}function c(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function a(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const l=t=>{var{children:o,isWide:i,checked:n,isError:l,disabled:d,className:p}=t,u=a(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
+import{jsx as e}from"react/jsx-runtime";import{twMerge as r,twJoin as t}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import"react";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{ProductIcon as o}from"../../DataDisplays/ProductIcon/ProductIcon.js";import"../../DataDisplays/Accordion/Accordion.js";import{Radio as i}from"../Radio/Radio.js";function n(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){n(e,r,t[r])}))}return e}function c(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function a(e,r){if(null==e)return{};var t,o,i=function(e,r){if(null==e)return{};var t,o,i={},n=Object.keys(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(o=0;o<n.length;o++)t=n[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const l=t=>{var{children:o,isWide:i,checked:n,isError:l,disabled:d,className:p}=t,u=a(t,["children","isWide","checked","isError","disabled","className"]);/*#__PURE__*/
 return e("div",c(s({className:r("relative flex h-auto cursor-pointer items-center gap-2 rounded-xl border",i?"min-h-[94px] w-[298px] flex-row gap-3 px-5 py-4":"min-h-fit w-[224px] flex-col justify-center px-4 py-6",!d&&!l&&"group-focus-within:border-primary-500",d&&n&&!l?"cursor-not-allowed border-primary-100":d?"cursor-not-allowed border-w-gray-200":l?"border-w-red-500":n?"border-primary-500":"border-w-gray-200 group-hover:border-primary",d?n&&!l?"bg-primary-10":"bg-w-gray-10":n?l?"bg-w-red-10":"bg-primary-10":"bg-w-white",p)},u),{children:o}))},d=({isWide:r,children:o})=>/*#__PURE__*/e("div",{className:t("flex h-auto w-full flex-col justify-between gap-0.5",r?"items-start":"items-center"),children:o}),p=t=>{var{isWide:o,disabled:n,isError:c,checked:l}=t,d=a(t,["isWide","disabled","isError","checked"]);const p=c&&l&&n;/*#__PURE__*/
 return e(i,s({className:r(!o&&"absolute top-[17px] left-[17px]"),disabled:n||p,checked:!p&&l,isError:c},d))},u=({iconName:t,disabled:i,checked:n,isError:s})=>{const c=s||!n;/*#__PURE__*/
 return e("div",{className:r("flex size-[60px] shrink-0 items-center justify-center",i&&"opacity-30"),"data-testid":"design-system-radioCard--icon",children:/*#__PURE__*/e(o,{name:t,disabled:c})})};export{l as RadioCardContainer,u as RadioCardIcon,p as StyledRadio,d as TitleContainer};

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

@@ -1,4 +1,4 @@
-"use client";import{jsxs as e,jsx as o}from"react/jsx-runtime";import"tailwind-merge";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as l}from"../List/List.js";import{SupportTextContainer as t}from"../SupportTextContainer/SupportTextContainer.js";import{useDropdown as i}from"../../../hooks/useDropdown.js";import{SelectBox as r}from"./TextFieldDropdown.parts.js";
+"use client";import{jsxs as e,jsx as o}from"react/jsx-runtime";import"tailwind-merge";import"react";import{Box as t}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{List as s}from"../List/List.js";import{SupportTextContainer as l}from"../SupportTextContainer/SupportTextContainer.js";import{useDropdown as i}from"../../../hooks/useDropdown.js";import{SelectBox as r}from"./TextFieldDropdown.parts.js";
 /**
  * 드롭다운 형태의 텍스트 필드 컴포넌트입니다.
  *
@@ -32,4 +32,4 @@
  * ```
  */const n=({selectedItem:n,items:a,onItemClick:d,placeholder:p,disabled:m,isError:c,errorMessage:u,supportMessage:x,className:f})=>{const{isListOpen:g,focusedIndex:I,ref:h,handleItemClick:k,toggleListOpen:v,handleKeyDown:w}=i({items:a,onItemClick:d,disabled:m}),y=!!x||!!u;/*#__PURE__*/
 return e("div",{"data-testid":"design-system--textFieldDropdown",ref:h,className:"relative flex w-full flex-col gap-2 outline-hidden",onKeyDown:w,tabIndex:0,children:[
-/*#__PURE__*/o(r,{placeholder:p,value:null==n?void 0:n.value,leadingIcon:null==n?void 0:n.leadingIcon,disabled:m,isListOpen:g,onClick:v,error:c,className:f}),y&&/*#__PURE__*/o(t,{errorMessage:u,supportMessage:x}),g&&/*#__PURE__*/o(s,{className:"absolute top-[54px] z-40 w-full",children:/*#__PURE__*/o(l.Root,{children:a.map(((e,s)=>/*#__PURE__*/o(l.Item,{text:e.value,leadingIcon:e.leadingIcon,onClick:()=>k(e),selected:e.key===(null==n?void 0:n.key),isFocused:s===I},e.key)))})})]})};export{n as TextFieldDropdown};
+/*#__PURE__*/o(r,{placeholder:p,value:null==n?void 0:n.value,leadingIcon:null==n?void 0:n.leadingIcon,disabled:m,isListOpen:g,onClick:v,error:c,className:f}),y&&/*#__PURE__*/o(l,{errorMessage:u,supportMessage:x}),g&&/*#__PURE__*/o(t,{className:"absolute top-[54px] z-40 w-full",children:/*#__PURE__*/o(s.Root,{children:a.map(((e,t)=>/*#__PURE__*/o(s.Item,{text:e.value,leadingIcon:e.leadingIcon,onClick:()=>k(e),selected:e.key===(null==n?void 0:n.key),isFocused:t===I},e.key)))})})]})};export{n as TextFieldDropdown};

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

@@ -51,6 +51,6 @@ declare const GNBList: {
     UserInfo: ({ imgUrl, username, email, children, onClick, }: import("./GNBList.types").UserInfoProps) => import("react/jsx-runtime").JSX.Element;
     List: ({ children }: import("react").PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
     SubList: ({ children }: import("react").PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ hasNew, children, className, textClassName, href, ...rest }: import("./GNBList.types").GNBListItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ hasNew, children, className, textClassName, href, as: LinkComponent, ...rest }: import("./GNBList.types").GNBListItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export { GNBList };

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

@@ -99,11 +99,12 @@ declare const SubList: ({ children }: PropsWithChildren) => import("react/jsx-ru
  *
  * @description
  * 개별 메뉴 아이템을 렌더링합니다.
- * - Next.js Link로 페이지 이동
+ * - 기본은 `<a>` 태그이며, `as` prop으로 Next.js Link 등 임의의 컴포넌트 주입 가능
  * - 키보드 포커스 및 hover 스타일 지원
  *
  * @param {Object} props
  * @param {string} props.href - 이동할 페이지 경로 (필수)
+ * @param {ElementType} [props.as='a'] - anchor로 렌더할 컴포넌트 (예: next/link)
  * @param {ReactNode} props.children - 메뉴 텍스트
  * @param {boolean} [props.hasNew=false] - New 뱃지 표시 여부
  * @param {string} [props.className] - Link에 적용할 추가 CSS 클래스
@@ -131,5 +132,5 @@ declare const SubList: ({ children }: PropsWithChildren) => import("react/jsx-ru
  *   특별 메뉴
  * </Item>
  */
-declare const Item: ({ hasNew, children, className, textClassName, href, ...rest }: GNBListItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const Item: ({ hasNew, children, className, textClassName, href, as: LinkComponent, ...rest }: GNBListItemProps) => import("react/jsx-runtime").JSX.Element;
 export { Root, UserInfo, List, SubList, Item };

package/dist/Components/Navigations/GNBList/GNBList.parts.js

@@ -1,4 +1,4 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Children as a,Fragment as t}from"react";import{twMerge as l}from"tailwind-merge";import n from"next/link";import{Avatar as o}from"../../DataDisplays/Avatar/Avatar.js";import{Typography as i}from"../../Base/Typography/Typography.js";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{NewBadge as c}from"../../DataDisplays/NewBadge/NewBadge.js";import{Divider as m}from"../../DataDisplays/Divider/Divider.js";import"../../DataDisplays/Accordion/Accordion.js";function p(e,r,a){return r in e?Object.defineProperty(e,r,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[r]=a,e}function f(e){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{},t=Object.keys(a);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(a).filter((function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable})))),t.forEach((function(r){p(e,r,a[r])}))}return e}function u(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);r.push.apply(r,a)}return r}(Object(r)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(r,a))})),e}function y(e,r){if(null==e)return{};var a,t,l=function(e,r){if(null==e)return{};var a,t,l={},n=Object.keys(e);for(t=0;t<n.length;t++)a=n[t],r.indexOf(a)>=0||(l[a]=e[a]);return l}
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Children as a,Fragment as t}from"react";import{twMerge as l}from"tailwind-merge";import{Avatar as n}from"../../DataDisplays/Avatar/Avatar.js";import{Typography as o}from"../../Base/Typography/Typography.js";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import{NewBadge as i}from"../../DataDisplays/NewBadge/NewBadge.js";import{Divider as c}from"../../DataDisplays/Divider/Divider.js";import"../../DataDisplays/Accordion/Accordion.js";function m(e,r,a){return r in e?Object.defineProperty(e,r,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[r]=a,e}function p(e){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{},t=Object.keys(a);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(a).filter((function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable})))),t.forEach((function(r){m(e,r,a[r])}))}return e}function f(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);r.push.apply(r,a)}return r}(Object(r)).forEach((function(a){Object.defineProperty(e,a,Object.getOwnPropertyDescriptor(r,a))})),e}function u(e,r){if(null==e)return{};var a,t,l=function(e,r){if(null==e)return{};var a,t,l={},n=Object.keys(e);for(t=0;t<n.length;t++)a=n[t],r.indexOf(a)>=0||(l[a]=e[a]);return l}
 /**
  * GNB 리스트의 루트 컴포넌트
  *
@@ -31,16 +31,16 @@ import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Children as a,Fragment
  *     <Item href="/logout">로그아웃</Item>
  *   </SubList>
  * </Root>
- */(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)a=n[t],r.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}const b=({withUserInfo:n=!1,children:o,className:i})=>{const c=a.map(o,((a,l)=>0===l?a:/*#__PURE__*/r(t,{children:[
-/*#__PURE__*/e(m,{className:"my-2"}),a]})));/*#__PURE__*/
-return e(s,{as:"nav","aria-label":"네비게이션 메뉴",className:l("absolute flex flex-col rounded-xl bg-w-white shadow-graymedium",n?"w-[280px] pb-3 pt-5":"h-auto w-[200px] overflow-hidden py-3",i),children:c})},d=({imgUrl:a,username:t,email:l,children:n,onClick:c})=>/*#__PURE__*/r(s,{role:"region","aria-label":"사용자 정보",className:"flex w-full flex-col gap-4 px-6 pb-4",children:[
+ */(e,r);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)a=n[t],r.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}const y=({withUserInfo:n=!1,children:o,className:i})=>{const m=a.map(o,((a,l)=>0===l?a:/*#__PURE__*/r(t,{children:[
+/*#__PURE__*/e(c,{className:"my-2"}),a]})));/*#__PURE__*/
+return e(s,{as:"nav","aria-label":"네비게이션 메뉴",className:l("absolute flex flex-col rounded-xl bg-w-white shadow-graymedium",n?"w-[280px] pb-3 pt-5":"h-auto w-[200px] overflow-hidden py-3",i),children:m})},b=({imgUrl:a,username:t,email:l,children:i,onClick:c})=>/*#__PURE__*/r(s,{role:"region","aria-label":"사용자 정보",className:"flex w-full flex-col gap-4 px-6 pb-4",children:[
 /*#__PURE__*/r(s,{className:"flex w-full items-center gap-4",children:[
-/*#__PURE__*/e(o,{size:"lg",isEditable:!0,imgUrl:a,onClick:c}),
+/*#__PURE__*/e(n,{size:"lg",isEditable:!0,imgUrl:a,onClick:c}),
 /*#__PURE__*/r(s,{className:"flex w-full flex-col gap-0.5",children:[
-/*#__PURE__*/e(i,{variant:"body16",className:"text-w-gray-900 font-medium",children:t}),
-/*#__PURE__*/e(i,{variant:"body14",className:"text-w-gray-600 line-clamp-2 break-all",children:l})]})]}),n&&/*#__PURE__*/e(s,{className:"flex w-full flex-col gap-2",children:n})]}),h=({children:r})=>/*#__PURE__*/e(s,{as:"ul","aria-label":"메인 메뉴",className:"text-w-gray-900 w-full",children:r}),g=({children:r})=>/*#__PURE__*/e(s,{as:"ul","aria-label":"서브 메뉴",className:"text-w-gray-600 w-full",children:r}),w=a=>{var{hasNew:t=!1,children:o,className:m,textClassName:p,href:b}=a,d=y(a,["hasNew","children","className","textClassName","href"]);/*#__PURE__*/
-return e(s,{as:"li",children:/*#__PURE__*/r(n,u(f({href:b,className:l("hover:bg-primary-10 flex w-full cursor-pointer gap-1 px-6 py-2",m)},d),{children:[
-/*#__PURE__*/e(i,{variant:"body14",className:p,children:o}),t&&/*#__PURE__*/e(c,{className:"mt-1","aria-label":"새 소식"})]}))})};
+/*#__PURE__*/e(o,{variant:"body16",className:"text-w-gray-900 font-medium",children:t}),
+/*#__PURE__*/e(o,{variant:"body14",className:"text-w-gray-600 line-clamp-2 break-all",children:l})]})]}),i&&/*#__PURE__*/e(s,{className:"flex w-full flex-col gap-2",children:i})]}),d=({children:r})=>/*#__PURE__*/e(s,{as:"ul","aria-label":"메인 메뉴",className:"text-w-gray-900 w-full",children:r}),h=({children:r})=>/*#__PURE__*/e(s,{as:"ul","aria-label":"서브 메뉴",className:"text-w-gray-600 w-full",children:r}),g=a=>{var{hasNew:t=!1,children:n,className:c,textClassName:m,href:y,as:b="a"}=a,d=u(a,["hasNew","children","className","textClassName","href","as"]);/*#__PURE__*/
+return e(s,{as:"li",children:/*#__PURE__*/r(b,f(p({href:y,className:l("hover:bg-primary-10 flex w-full cursor-pointer gap-1 px-6 py-2",c)},d),{children:[
+/*#__PURE__*/e(o,{variant:"body14",className:m,children:n}),t&&/*#__PURE__*/e(i,{className:"mt-1","aria-label":"새 소식"})]}))})};
 /**
  * 사용자 정보 컴포넌트
  *
@@ -64,4 +64,4 @@ return e(s,{as:"li",children:/*#__PURE__*/r(n,u(f({href:b,className:l("hover:bg-
  *   <Button size="sm">프로필 수정</Button>
  *   <Button size="sm" variant="outlined">내 프로젝트</Button>
  * </UserInfo>
- */export{w as Item,h as List,b as Root,g as SubList,d as UserInfo};
+ */export{g as Item,d as List,y as Root,h as SubList,b as UserInfo};

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

@@ -1,5 +1,4 @@
-import Link from 'next/link';
-import { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
+import { ComponentPropsWithoutRef, ElementType, PropsWithChildren } from 'react';
 export interface GNBListRootProps extends PropsWithChildren {
     withUserInfo?: boolean;
     className?: string;
@@ -10,7 +9,13 @@ export interface UserInfoProps extends PropsWithChildren {
     email?: string;
     onClick?: () => void;
 }
-export interface GNBListItemProps extends ComponentPropsWithoutRef<typeof Link> {
+export interface GNBListItemProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'> {
+    href: string;
     hasNew?: boolean;
     textClassName?: string;
+    /**
+     * Item에서 anchor로 렌더할 컴포넌트. 기본값은 일반 `<a>` 태그이며,
+     * Next.js의 Link 등을 주입할 수 있습니다.
+     */
+    as?: ElementType;
 }

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

@@ -0,0 +1,53 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import { MediumSystemIconName, SmallSystemIconName } from '../../DataDisplays/SystemIcon';
+import { IconButtonDropdownItem } from '../../Inputs';
+/**
+ * `MenuLink`와 `MenuButton`이 공유하는 presentation props.
+ *
+ * - 시맨틱 분기(`href` vs `onClick`)는 각 컴포넌트의 별도 타입으로 표현되며,
+ *   이 타입에는 포함되지 않습니다.
+ */
+export interface MenuCommonProps {
+    type?: 'main' | 'sub';
+    variant?: 'white' | 'gray';
+    name: string;
+    badgeCount?: string;
+    isSelected?: boolean;
+    leadingIcon?: MediumSystemIconName;
+    iconButtonName?: SmallSystemIconName;
+    onOptionClick?: () => void;
+    children?: ReactNode;
+    items?: IconButtonDropdownItem[];
+    selectedItem?: IconButtonDropdownItem;
+    onItemClick?: (item: IconButtonDropdownItem) => void;
+}
+/**
+ * `MenuLink`의 props.
+ *
+ * - `href`가 필수이며, 기본 anchor(`<a>`) 또는 `as`로 주입된 컴포넌트로 렌더링됩니다.
+ * - anchor 관련 native 속성(`target`, `rel`, `download` 등)을 그대로 받습니다.
+ */
+export type MenuLinkProps = MenuCommonProps & Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'className' | 'children' | 'as'> & {
+    href: string;
+    /**
+     * anchor 자리에 렌더할 컴포넌트. 기본값은 일반 `<a>` 태그이며,
+     * Next.js의 Link 등을 주입할 수 있습니다.
+     */
+    as?: ElementType;
+};
+/**
+ * `MenuButton`의 props.
+ *
+ * - `onClick`이 필수이며, 항상 `<button>`으로 렌더링됩니다.
+ * - button 관련 native 속성(`disabled`, `type` 등)을 그대로 받습니다.
+ */
+export type MenuButtonProps = MenuCommonProps & Omit<ComponentPropsWithoutRef<'button'>, 'onClick' | 'className' | 'children' | 'type'> & {
+    onClick: () => void;
+    /**
+     * HTML `<button>`의 native `type` 속성. `MenuCommonProps.type`(`'main' | 'sub'`)과
+     * 이름이 충돌하므로 별도 prop으로 전달하려면 `htmlType`을 사용하세요.
+     *
+     * 디자인 시스템의 메뉴 타입(`'main' | 'sub'`)은 `MenuCommonProps`의 `type`을 그대로 사용합니다.
+     */
+    htmlType?: 'button' | 'submit' | 'reset';
+};

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

@@ -0,0 +1,21 @@
+import { ElementType, ReactNode } from 'react';
+import { MenuCommonProps } from './Menu.types';
+interface MenuBaseProps extends MenuCommonProps {
+    /**
+     * 자식 wrapper로 사용할 element 또는 컴포넌트.
+     * `MenuLink`에서는 `'a'` 또는 주입된 컴포넌트, `MenuButton`에서는 `'button'`이 들어옵니다.
+     */
+    as: ElementType;
+    /**
+     * `as` 컴포넌트에 그대로 전달되는 native props (href, onClick, target 등).
+     */
+    wrapperProps?: Record<string, unknown>;
+}
+/**
+ * `MenuLink`와 `MenuButton`이 공유하는 내부 컴포넌트.
+ * presentation 로직(className 계산, leadingIcon, name, badge, trailing IconButton/Dropdown)을 담당합니다.
+ *
+ * 외부에 export 되지 않으며, `MenuLink` / `MenuButton`을 통해서만 사용됩니다.
+ */
+declare const MenuBase: ({ type, variant, name, isSelected, badgeCount, leadingIcon, iconButtonName, onOptionClick, items, selectedItem, onItemClick, as: Component, wrapperProps, }: MenuBaseProps) => ReactNode;
+export { MenuBase };

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

@@ -0,0 +1,3 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{twJoin as r,twMerge as o}from"tailwind-merge";import"../../DataDisplays/Avatar/Avatar.js";import{CountBadge as n}from"../../DataDisplays/CountBadge/CountBadge.js";import{Typography as s}from"../../Base/Typography/Typography.js";import"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import"react";import{SystemIcon as i}from"../../DataDisplays/SystemIcon/SystemIcon.js";import"../../DataDisplays/SystemIcon/SystemIcon.constants.js";import"../../DataDisplays/Accordion/Accordion.js";import"@wishket/yogokit";import"../../Inputs/AutoCompleteList/AutoCompleteList.parts.js";import"../../Inputs/Input/Input.js";import"../../Inputs/Input/PasswordInput.js";import"../../Inputs/Input/LabelInput.js";import"../../Inputs/Input/InputTypeSelector.js";import"../../Inputs/Button/Button.js";import"../../Inputs/Calendar/Calendar.utils.js";import"../../Inputs/Checkbox/Checkbox.js";import"../../Inputs/ChoiceChip/ChoiceChip.js";import{IconButton as p}from"../../Inputs/IconButton/IconButton.js";import"../../Inputs/Radio/Radio.js";import"../../Inputs/TextField/TextField.js";import"../../Inputs/CommentArea/CommentArea.js";import{IconButtonDropdown as a}from"../../Inputs/IconButtonDropdown/IconButtonDropdown.js";import"../../Inputs/FilterChip/FilterChip.js";function m(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function c(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const u=(t,e,n)=>{const s="sub"===t?"pl-12":"",i={white:r("hover:bg-w-gray-50",n&&"bg-primary-10 text-primary hover:bg-primary-10"),gray:r("hover:bg-w-gray-100",n&&"bg-w-gray-100  hover:bg-w-gray-100")};return o("flex w-full cursor-pointer items-center gap-2 rounded-xl px-4 py-3 text-w-gray-900 text-left",s,i[e])},l=(t,e)=>"white"!==t?"white_gray":e?"primary":"gray",y=({type:o="main",variant:y="white",name:d,isSelected:g=!1,badgeCount:j,leadingIcon:I,iconButtonName:b,onOptionClick:f,items:h,selectedItem:w,onItemClick:O,as:C,wrapperProps:x})=>{const B=!!(b&&h&&O&&w),D=!!b&&!!f;/*#__PURE__*/
+return t(C,c(function(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),o.forEach((function(e){m(t,e,r[e])}))}return t}({"data-testid":"design-system-menu",className:u(o,y,g)},x),{children:[I&&/*#__PURE__*/e(i,{testId:"design-system-menu-leading-icon",name:I,className:r("white"===y&&g&&"text-primary")}),
+/*#__PURE__*/e(s,{"data-testid":"design-system-menu-name",variant:"body16",className:"w-full select-none",children:d}),j&&/*#__PURE__*/e(n,{variant:l(y,g),text:j,className:"relative",showZero:!0}),B&&/*#__PURE__*/e(a,{size:"sm",icon:b,items:h,selectedItem:w,onItemClick:O}),D&&/*#__PURE__*/e(p,{size:"sm",className:"shrink-0",onClick:t=>{t.stopPropagation(),f()},children:/*#__PURE__*/e(i,{name:b})})]}))};export{y as MenuBase};

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

@@ -0,0 +1,40 @@
+import { MenuButtonProps } from './Menu.types';
+/**
+ * 네비게이션에서 사용되는 버튼형 메뉴 항목.
+ *
+ * @description
+ * - 항상 `<button>`으로 렌더링됩니다.
+ * - `onClick`이 반드시 필요합니다. 페이지 이동을 위한 anchor가 필요한 경우 `MenuLink`를 사용하세요.
+ *
+ * @param {Object} props
+ * @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수 (필수)
+ * @param {'main' | 'sub'} [props.type='main'] - 메뉴 타입 (HTML `<button>`의 native `type`과는 무관. native `type`을 지정하려면 `htmlType` prop 사용)
+ * @param {'button' | 'submit' | 'reset'} [props.htmlType] - `<button>`의 native `type` 속성
+ * @param {'white' | 'gray'} [props.variant='white'] - 메뉴 스타일 변형
+ * @param {string} props.name - 메뉴에 표시될 텍스트
+ * @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
+ * @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
+ * @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘 (medium 사이즈)
+ * @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown / IconButton 아이콘 (small 사이즈)
+ * @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButton 옵션)
+ * @param {Item[]} [props.items] - IconButtonDropdown 사용 시 필요
+ * @param {Item} [props.selectedItem] - IconButtonDropdown 사용 시 필요
+ * @param {(item: Item) => void} [props.onItemClick] - IconButtonDropdown 사용 시 필요
+ *
+ * @example
+ * // 기본 사용
+ * <MenuButton name="설정" onClick={() => openModal()} />
+ *
+ * @example
+ * // IconButtonDropdown과 함께
+ * <MenuButton
+ *   name="옵션"
+ *   onClick={() => {}}
+ *   iconButtonName="small_more_options"
+ *   items={items}
+ *   selectedItem={selectedItem}
+ *   onItemClick={onItemClick}
+ * />
+ */
+declare const MenuButton: ({ type, variant, name, badgeCount, isSelected, leadingIcon, iconButtonName, onOptionClick, items, selectedItem, onItemClick, onClick, htmlType, children: _children, ...rest }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { MenuButton };

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

@@ -0,0 +1,39 @@
+import{jsx as e}from"react/jsx-runtime";import{MenuBase as t}from"./MenuBase.js";function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}function o(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}
+/**
+ * 네비게이션에서 사용되는 버튼형 메뉴 항목.
+ *
+ * @description
+ * - 항상 `<button>`으로 렌더링됩니다.
+ * - `onClick`이 반드시 필요합니다. 페이지 이동을 위한 anchor가 필요한 경우 `MenuLink`를 사용하세요.
+ *
+ * @param {Object} props
+ * @param {() => void} props.onClick - 메뉴 클릭 시 실행될 함수 (필수)
+ * @param {'main' | 'sub'} [props.type='main'] - 메뉴 타입 (HTML `<button>`의 native `type`과는 무관. native `type`을 지정하려면 `htmlType` prop 사용)
+ * @param {'button' | 'submit' | 'reset'} [props.htmlType] - `<button>`의 native `type` 속성
+ * @param {'white' | 'gray'} [props.variant='white'] - 메뉴 스타일 변형
+ * @param {string} props.name - 메뉴에 표시될 텍스트
+ * @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
+ * @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
+ * @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘 (medium 사이즈)
+ * @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown / IconButton 아이콘 (small 사이즈)
+ * @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButton 옵션)
+ * @param {Item[]} [props.items] - IconButtonDropdown 사용 시 필요
+ * @param {Item} [props.selectedItem] - IconButtonDropdown 사용 시 필요
+ * @param {(item: Item) => void} [props.onItemClick] - IconButtonDropdown 사용 시 필요
+ *
+ * @example
+ * // 기본 사용
+ * <MenuButton name="설정" onClick={() => openModal()} />
+ *
+ * @example
+ * // IconButtonDropdown과 함께
+ * <MenuButton
+ *   name="옵션"
+ *   onClick={() => {}}
+ *   iconButtonName="small_more_options"
+ *   items={items}
+ *   selectedItem={selectedItem}
+ *   onItemClick={onItemClick}
+ * />
+ */(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}const i=n=>{var{type:i,variant:c,name:l,badgeCount:a,isSelected:u,leadingIcon:m,iconButtonName:p,onOptionClick:s,items:b,selectedItem:f,onItemClick:y,onClick:O,htmlType:d,children:g}=n,C=o(n,["type","variant","name","badgeCount","isSelected","leadingIcon","iconButtonName","onOptionClick","items","selectedItem","onItemClick","onClick","htmlType","children"]);/*#__PURE__*/
+return e(t,{type:i,variant:c,name:l,badgeCount:a,isSelected:u,leadingIcon:m,iconButtonName:p,onOptionClick:s,items:b,selectedItem:f,onItemClick:y,as:"button",wrapperProps:r({onClick:O,type:d},C)})};export{i as MenuButton};

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

@@ -0,0 +1,43 @@
+import { MenuLinkProps } from './Menu.types';
+/**
+ * 네비게이션에서 사용되는 링크형 메뉴 항목.
+ *
+ * @description
+ * - 기본은 `<a>` 태그이며, `as` prop으로 Next.js의 Link 등 임의의 컴포넌트를 주입할 수 있습니다.
+ * - `href`가 반드시 필요합니다. 클릭 핸들러만 필요한 경우 `MenuButton`을 사용하세요.
+ *
+ * @param {Object} props
+ * @param {string} props.href - 메뉴 링크 주소 (필수)
+ * @param {ElementType} [props.as='a'] - anchor 자리에 렌더할 컴포넌트 (예: next/link)
+ * @param {'main' | 'sub'} [props.type='main'] - 메뉴 타입
+ * @param {'white' | 'gray'} [props.variant='white'] - 메뉴 스타일 변형
+ * @param {string} props.name - 메뉴에 표시될 텍스트
+ * @param {string} [props.badgeCount] - 메뉴 항목에 표시될 뱃지 숫자
+ * @param {boolean} [props.isSelected=false] - 메뉴 선택 상태
+ * @param {SystemIconName} [props.leadingIcon] - 메뉴 앞쪽에 표시될 아이콘 (medium 사이즈)
+ * @param {SystemIconName} [props.iconButtonName] - IconButtonDropdown / IconButton 아이콘 (small 사이즈)
+ * @param {() => void} [props.onOptionClick] - 후행 아이콘 클릭 시 실행될 함수 (IconButton 옵션)
+ * @param {Item[]} [props.items] - IconButtonDropdown 사용 시 필요
+ * @param {Item} [props.selectedItem] - IconButtonDropdown 사용 시 필요
+ * @param {(item: Item) => void} [props.onItemClick] - IconButtonDropdown 사용 시 필요
+ *
+ * @example
+ * // 기본 사용 (일반 <a>)
+ * <MenuLink href="/projects" name="프로젝트" />
+ *
+ * @example
+ * // Next.js Link 주입
+ * import Link from 'next/link';
+ * <MenuLink as={Link} href="/projects" name="프로젝트" />
+ *
+ * @example
+ * // 외부 링크
+ * <MenuLink
+ *   href="https://example.com"
+ *   name="외부 사이트"
+ *   target="_blank"
+ *   rel="noopener noreferrer"
+ * />
+ */
+declare const MenuLink: ({ type, variant, name, badgeCount, isSelected, leadingIcon, iconButtonName, onOptionClick, items, selectedItem, onItemClick, href, as: LinkComponent, children: _children, ...rest }: MenuLinkProps) => import("react/jsx-runtime").JSX.Element;
+export { MenuLink };