@wishket/design-system 1.16.0 → 1.16.2

package/dist/{src/Components → Components}/DataDisplays/Li/Li.d.ts

@@ -1,6 +1,4 @@
 import { ReactNode } from 'react';
-import { typographyStyles } from '../../../../typography.styles';
-type Variant = keyof typeof typographyStyles;
 interface LiProps {
     children: ReactNode;
     variant?: Variant;
@@ -41,6 +39,57 @@ interface LiProps {
  */
 declare const Li: ({ children, variant, gap, bulletSize, bulletClassName, className, }: LiProps) => import("react/jsx-runtime").JSX.Element;
 export default Li;
+export declare const typographyStyles: {
+    title1: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    title2: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    title3: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    subTitle1: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    subTitle2: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    contents1: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    contents2: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    body1: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    body2: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    body3: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    caption1: {
+        fontSize: string;
+        lineHeight: string;
+    };
+    caption2: {
+        fontSize: string;
+        lineHeight: string;
+    };
+};
+type Variant = keyof typeof typographyStyles;
 export declare const BulletIcon: ({ size, variant, className, }: {
     size?: number;
     variant?: Variant;

package/dist/Components/DataDisplays/Li/Li.js

@@ -0,0 +1,34 @@
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{twMerge as t}from"tailwind-merge";import{Box as l}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";
+/**
+ * 리스트 아이템 컴포넌트입니다.
+ *
+ * @param {Object} props - 컴포넌트 프로퍼티
+ * @param {Variant} [props.variant] - 텍스트 타이포그래피 variant (기본값: body1)
+ * @param {string} [props.bulletClassName] - 리스트 아이템 불릿 클래스명 (기본값: 'text-w-bluegray-300')
+ * @param {number} [props.bulletSize] - 리스트 아이템 불릿 크기 (지름, 기본값: 3)
+ * @param {number} [props.gap] - 불릿과 children 간격 (기본값: 2)
+ * @param {string} [props.className] - 컴포넌트에 적용할 추가 CSS 클래스명
+ *
+ * @example
+ * // 기본 사용법
+ * <Li>내용을 적어줍니다.</Li>
+ *
+ * // 타이포그래피 variant 변경
+ * <Li variant="title3">내용을 적어줍니다.</Li>
+ *
+ * // 불릿 색상 조절
+ * <Li bulletClassName="text-w-red-800">내용을 적어줍니다.</Li>
+ *
+ * // 불릿 크기 조절 (지름)
+ * <Li bulletSize={5}>내용을 적어줍니다.</Li>
+ *
+ * // 간격 조절
+ * <Li gap={1}>Li</Li>
+ *
+ * // 커스텀 클래스와 함께 사용
+ * <Li className="text-w-red-800">내용을 적어줍니다.</Li>
+ *
+ */const n=({children:l,variant:n="body1",gap:o=2,bulletSize:p=3,bulletClassName:a="text-w-bluegray-300",className:x})=>/*#__PURE__*/e("li",{className:t(`flex gap-${o} typo-${n}`,x),children:[
+/*#__PURE__*/i(s,{size:p,variant:n,className:a}),
+/*#__PURE__*/i("span",{children:l})]}),o={title1:{fontSize:"48px",lineHeight:"64px"},title2:{fontSize:"32px",lineHeight:"48px"},title3:{fontSize:"24px",lineHeight:"36px"},subTitle1:{fontSize:"20px",lineHeight:"30px"},subTitle2:{fontSize:"18px",lineHeight:"28px"},contents1:{fontSize:"18px",lineHeight:"32px"},contents2:{fontSize:"16px",lineHeight:"30px"},body1:{fontSize:"16px",lineHeight:"26px"},body2:{fontSize:"14px",lineHeight:"24px"},body3:{fontSize:"13px",lineHeight:"20px"},caption1:{fontSize:"12px",lineHeight:"18px"},caption2:{fontSize:"11px",lineHeight:"14px"}},s=({size:e=3,variant:n="body1",className:s})=>{var p;const a=e/2,x=4*e,r=(null===(p=o[n])||void 0===p?void 0:p.lineHeight)||"26px",h=parseInt(r)/2-x/2;/*#__PURE__*/
+return i(l,{className:t("flex-shrink-0",s),style:{marginTop:`${h}px`,width:`${x}px`,height:`${x}px`},"data-testid":"design-system-li-bullet-container",children:/*#__PURE__*/i("svg",{width:x,height:x,viewBox:`0 0 ${x} ${x}`,fill:"none",xmlns:"http://www.w3.org/2000/svg","data-testid":"design-system-li-bullet",children:/*#__PURE__*/i("circle",{cx:x/2,cy:x/2,r:a,fill:"currentColor"})})})};export{s as BulletIcon,n as default,o as typographyStyles};

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

@@ -0,0 +1,18 @@
+export interface ProgressIndicatorProps {
+    className?: string;
+    progressClassName?: string;
+    value: number;
+}
+/**
+ * ProgressIndicator
+ *
+ * 진행 상태를 시각적으로 표시하는 프로그레스 바 컴포넌트입니다.
+ * Safari 브라우저에서의 성능 최적화를 위해 requestAnimationFrame을 사용하여 애니메이션을 구현했습니다.
+ *
+ * @example
+ * ```tsx
+ * <ProgressIndicator value={75} />
+ * <ProgressIndicator value={50} className="h-2" progressClassName="bg-secondary" />
+ * ```
+ */
+export declare const ProgressIndicator: ({ className, progressClassName, value, }: ProgressIndicatorProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+"use client";import{jsx as e}from"react/jsx-runtime";import{useRef as r}from"react";import{twMerge as s}from"tailwind-merge";import{useProgressAnimation as t}from"./useProgressAnimation.js";
+/**
+ * ProgressIndicator
+ *
+ * 진행 상태를 시각적으로 표시하는 프로그레스 바 컴포넌트입니다.
+ * Safari 브라우저에서의 성능 최적화를 위해 requestAnimationFrame을 사용하여 애니메이션을 구현했습니다.
+ *
+ * @example
+ * ```tsx
+ * <ProgressIndicator value={75} />
+ * <ProgressIndicator value={50} className="h-2" progressClassName="bg-secondary" />
+ * ```
+ */const i=({className:i,progressClassName:a,value:d})=>{const l=r(null);
+// 커스텀 훅을 사용하여 애니메이션 처리
+t(d,l);/*#__PURE__*/
+return e("div",{"data-testid":"design-system-progress-indicator",className:s("h-1 w-full overflow-hidden rounded-full",i),children:/*#__PURE__*/e("div",{className:"h-full bg-w-gray-100","data-testid":"design-system-progress-indicator--background",style:{WebkitTransformStyle:"preserve-3d",transformStyle:"preserve-3d"},children:/*#__PURE__*/e("div",{ref:l,"data-testid":"design-system-progress-indicator--progress",className:s("h-full",a,d>0?"bg-primary":"hidden"),style:{transform:"translate3d(-100%, 0, 0)",WebkitTransform:"translate3d(-100%, 0, 0)",willChange:"transform",WebkitBackfaceVisibility:"hidden",backfaceVisibility:"hidden"}})})})};export{i as ProgressIndicator};

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

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+/**
+ * 프로그레스 애니메이션을 위한 커스텀 훅
+ * requestAnimationFrame을 사용하여 부드러운 애니메이션을 구현합니다.
+ *
+ * @param value - 0-100 사이의 진행률 값
+ * @param progressRef - 애니메이션을 적용할 DOM 요소의 ref
+ * @returns 클램핑된 값
+ */
+export declare const useProgressAnimation: (value: number, progressRef: RefObject<HTMLDivElement | null>) => number;

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

@@ -0,0 +1,25 @@
+import{useRef as r,useEffect as t}from"react";
+// 애니메이션 관련 상수
+const n=(n,e)=>{
+// 값을 0-100 범위로 제한
+const c=Math.min(100,Math.max(0,n)),u=r(void 0),a=r(void 0),o=r(-100),i=r(-100);
+// 애니메이션 상태 관리를 위한 refs
+return t((()=>{if(!e.current)return;const r=c-100,t=n=>{
+// 첫 프레임에서 시작 시간과 값을 설정
+a.current||(a.current=n,o.current=i.current);
+// 경과 시간 계산
+const c=n-a.current,m=Math.min(c/500,1),s=(d=m,1-Math.pow(1-d,4));var d;const v=o.current+(r-o.current)*s;i.current=v,
+// DOM 업데이트
+e.current&&(e.current.style.transform=`translate3d(${v}%, 0, 0)`),
+// 애니메이션 계속 진행
+m<1?u.current=requestAnimationFrame(t):a.current=void 0};// 0-100을 -100-0으로 변환
+/**
+     * ease-out-quart 이징 함수
+     * cubic-bezier(0.25, 0.46, 0.45, 0.94)와 유사한 효과
+     */
+// 클린업 함수
+// 진행 중인 애니메이션 취소
+return u.current&&(cancelAnimationFrame(u.current),a.current=void 0),
+// 새 애니메이션 시작
+u.current=requestAnimationFrame(t),()=>{u.current&&cancelAnimationFrame(u.current)}}),[c,e]),c};// ms
+export{n as useProgressAnimation};

package/dist/{src/Components → Components}/Utils/BackDropLiftContainer/BackDropLiftContainer.d.ts

@@ -5,7 +5,8 @@ interface BackDropLiftContainerProps extends PropsWithChildren {
     isBackgroundBlack?: boolean;
     isPreventScroll?: boolean;
     isBottomSheet?: boolean;
+    isFullSize?: boolean;
     testId?: string;
 }
-declare const BackDropLiftContainer: ({ isOpen, onClose, children, isBackgroundBlack, isPreventScroll, isBottomSheet, testId, }: BackDropLiftContainerProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const BackDropLiftContainer: ({ isOpen, onClose, children, isBackgroundBlack, isPreventScroll, isBottomSheet, isFullSize, testId, }: BackDropLiftContainerProps) => import("react/jsx-runtime").JSX.Element | null;
 export { BackDropLiftContainer };

package/dist/Components/Utils/BackDropLiftContainer/BackDropLiftContainer.js

@@ -0,0 +1,3 @@
+"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as i,useEffect as o}from"react";import{twJoin as r,twMerge as s}from"tailwind-merge";import{Box as a}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{BackDrop as n}from"../BackDrop/BackDrop.js";const l="duration-300",c=({isOpen:c,onClose:m,children:p,isBackgroundBlack:d=!0,isPreventScroll:u=!0,isBottomSheet:B=!1,isFullSize:f=!1,testId:y})=>{const[k,x]=i(!1),[j,h]=i(!1);return o((()=>{c?(h(!0),requestAnimationFrame((()=>x(!0)))):x(!1)}),[c]),j||c?/*#__PURE__*/t(a,{className:r("fixed inset-0 z-30 flex justify-center transition-opacity",l,B?"items-end":"items-center",k?"opacity-100":"opacity-0"),"data-testid":y||"design-system--backdrop-lift-container",children:[
+/*#__PURE__*/e(n,{onClick:m,isBlack:d,preventScroll:u}),
+/*#__PURE__*/e(a,{className:s("z-30 transition-all ease-in",l,(B||f)&&"w-full",k?"translate-y-0 opacity-100":"translate-y-full opacity-0"),onTransitionEnd:()=>{c||h(!1)},children:p})]}):null};export{c as BackDropLiftContainer};

package/dist/{src/Components → Components}/Utils/Modal/Modal.js

@@ -1,4 +1,4 @@
-import{jsx as o,jsxs as e}from"react/jsx-runtime";import{BackDropLiftContainer as r}from"../BackDropLiftContainer/BackDropLiftContainer.js";import{BottomModalContainer as t}from"../BottomModalContainer/BottomModalContainer.js";import{FullModalContainer as l}from"../FullModalContainer/FullModalContainer.js";import{ModalContainer as i}from"../ModalContainer/ModalContainer.js";import{Portal as n}from"../Portal/Portal.js";import"tailwind-merge";import{Box as a}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import{BackDropLiftContainer as l}from"../BackDropLiftContainer/BackDropLiftContainer.js";import{BottomModalContainer as r}from"../BottomModalContainer/BottomModalContainer.js";import{FullModalContainer as t}from"../FullModalContainer/FullModalContainer.js";import{ModalContainer as i}from"../ModalContainer/ModalContainer.js";import{Portal as n}from"../Portal/Portal.js";import"tailwind-merge";import{Box as a}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";
 /**
  * 모달 창을 표시하는 컴포넌트입니다.
  *
@@ -31,5 +31,5 @@ import{jsx as o,jsxs as e}from"react/jsx-runtime";import{BackDropLiftContainer a
  * <Modal isOpen={isOpen} variant="bottom" onClose={handleClose}>
  *   <div>바텀 시트 내용</div>
  * </Modal>
- */const s=({isOpen:s,rootId:d,variant:m="default",size:c="md",overflow:p="auto",isBackgroundBlack:u=!0,isFixedHeight:f,isPreventScroll:B=!0,onClose:C,needCleanup:h=!0,children:j})=>{const x="bottom"===m,g="full"===m;/*#__PURE__*/
-return o(n,{rootId:d,needCleanup:h&&!d,children:/*#__PURE__*/e(r,{isOpen:s,onClose:C,testId:"design-system--modal",isBackgroundBlack:u,isPreventScroll:B,isBottomSheet:x,children:["default"===m&&/*#__PURE__*/o(a,{className:"full"===c?"px-5":"",children:/*#__PURE__*/o(i,{size:c,overflow:p,children:j})}),g&&/*#__PURE__*/o(l,{children:j}),x&&C&&/*#__PURE__*/o(t,{onClose:C,isFixedHeight:f,children:j})]})})};export{s as Modal};
+ */const s=({isOpen:s,rootId:d,variant:m="default",size:u="md",overflow:c="auto",isBackgroundBlack:f=!0,isFixedHeight:p,isPreventScroll:B=!0,onClose:C,needCleanup:h=!0,children:j})=>{const x="bottom"===m,F="full"===m;/*#__PURE__*/
+return o(n,{rootId:d,needCleanup:h&&!d,children:/*#__PURE__*/e(l,{isOpen:s,onClose:C,testId:"design-system--modal",isBackgroundBlack:f,isPreventScroll:B,isBottomSheet:x,isFullSize:"full"===u,children:["default"===m&&/*#__PURE__*/o(a,{className:"full"===u?"w-full px-5":"",children:/*#__PURE__*/o(i,{size:u,overflow:c,children:j})}),F&&/*#__PURE__*/o(t,{children:j}),x&&C&&/*#__PURE__*/o(r,{onClose:C,isFixedHeight:p,children:j})]})})};export{s as Modal};

package/dist/cjs/Components/DataDisplays/Li/Li.js

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("tailwind-merge"),i=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");
+/**
+ * 리스트 아이템 컴포넌트입니다.
+ *
+ * @param {Object} props - 컴포넌트 프로퍼티
+ * @param {Variant} [props.variant] - 텍스트 타이포그래피 variant (기본값: body1)
+ * @param {string} [props.bulletClassName] - 리스트 아이템 불릿 클래스명 (기본값: 'text-w-bluegray-300')
+ * @param {number} [props.bulletSize] - 리스트 아이템 불릿 크기 (지름, 기본값: 3)
+ * @param {number} [props.gap] - 불릿과 children 간격 (기본값: 2)
+ * @param {string} [props.className] - 컴포넌트에 적용할 추가 CSS 클래스명
+ *
+ * @example
+ * // 기본 사용법
+ * <Li>내용을 적어줍니다.</Li>
+ *
+ * // 타이포그래피 variant 변경
+ * <Li variant="title3">내용을 적어줍니다.</Li>
+ *
+ * // 불릿 색상 조절
+ * <Li bulletClassName="text-w-red-800">내용을 적어줍니다.</Li>
+ *
+ * // 불릿 크기 조절 (지름)
+ * <Li bulletSize={5}>내용을 적어줍니다.</Li>
+ *
+ * // 간격 조절
+ * <Li gap={1}>Li</Li>
+ *
+ * // 커스텀 클래스와 함께 사용
+ * <Li className="text-w-red-800">내용을 적어줍니다.</Li>
+ *
+ */
+const l={title1:{fontSize:"48px",lineHeight:"64px"},title2:{fontSize:"32px",lineHeight:"48px"},title3:{fontSize:"24px",lineHeight:"36px"},subTitle1:{fontSize:"20px",lineHeight:"30px"},subTitle2:{fontSize:"18px",lineHeight:"28px"},contents1:{fontSize:"18px",lineHeight:"32px"},contents2:{fontSize:"16px",lineHeight:"30px"},body1:{fontSize:"16px",lineHeight:"26px"},body2:{fontSize:"14px",lineHeight:"24px"},body3:{fontSize:"13px",lineHeight:"20px"},caption1:{fontSize:"12px",lineHeight:"18px"},caption2:{fontSize:"11px",lineHeight:"14px"}},n=({size:n=3,variant:s="body1",className:x})=>{var o;const p=n/2,r=4*n,a=(null===(o=l[s])||void 0===o?void 0:o.lineHeight)||"26px",g=parseInt(a)/2-r/2;/*#__PURE__*/
+return e.jsx(i.Box,{className:t.twMerge("flex-shrink-0",x),style:{marginTop:`${g}px`,width:`${r}px`,height:`${r}px`},"data-testid":"design-system-li-bullet-container",children:/*#__PURE__*/e.jsx("svg",{width:r,height:r,viewBox:`0 0 ${r} ${r}`,fill:"none",xmlns:"http://www.w3.org/2000/svg","data-testid":"design-system-li-bullet",children:/*#__PURE__*/e.jsx("circle",{cx:r/2,cy:r/2,r:p,fill:"currentColor"})})})};exports.BulletIcon=n,exports.default=({children:i,variant:l="body1",gap:s=2,bulletSize:x=3,bulletClassName:o="text-w-bluegray-300",className:p})=>/*#__PURE__*/e.jsxs("li",{className:t.twMerge(`flex gap-${s} typo-${l}`,p),children:[
+/*#__PURE__*/e.jsx(n,{size:x,variant:l,className:o}),
+/*#__PURE__*/e.jsx("span",{children:i})]}),exports.typographyStyles=l;

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

@@ -0,0 +1,4 @@
+"use client";"use strict";var e=require("react/jsx-runtime"),r=require("react"),s=require("tailwind-merge"),i=require("./useProgressAnimation.js");exports.ProgressIndicator=({className:t,progressClassName:a,value:d})=>{const n=r.useRef(null);
+// 커스텀 훅을 사용하여 애니메이션 처리
+i.useProgressAnimation(d,n);/*#__PURE__*/
+return e.jsx("div",{"data-testid":"design-system-progress-indicator",className:s.twMerge("h-1 w-full overflow-hidden rounded-full",t),children:/*#__PURE__*/e.jsx("div",{className:"h-full bg-w-gray-100","data-testid":"design-system-progress-indicator--background",style:{WebkitTransformStyle:"preserve-3d",transformStyle:"preserve-3d"},children:/*#__PURE__*/e.jsx("div",{ref:n,"data-testid":"design-system-progress-indicator--progress",className:s.twMerge("h-full",a,d>0?"bg-primary":"hidden"),style:{transform:"translate3d(-100%, 0, 0)",WebkitTransform:"translate3d(-100%, 0, 0)",willChange:"transform",WebkitBackfaceVisibility:"hidden",backfaceVisibility:"hidden"}})})})};

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

@@ -0,0 +1,24 @@
+"use strict";var r=require("react");
+// 애니메이션 관련 상수
+exports.useProgressAnimation=(e,t)=>{
+// 값을 0-100 범위로 제한
+const n=Math.min(100,Math.max(0,e)),u=r.useRef(void 0),c=r.useRef(void 0),a=r.useRef(-100),s=r.useRef(-100);
+// 애니메이션 상태 관리를 위한 refs
+return r.useEffect((()=>{if(!t.current)return;const r=n-100,e=n=>{
+// 첫 프레임에서 시작 시간과 값을 설정
+c.current||(c.current=n,a.current=s.current);
+// 경과 시간 계산
+const i=n-c.current,o=Math.min(i/500,1),m=(f=o,1-Math.pow(1-f,4));var f;const v=a.current+(r-a.current)*m;s.current=v,
+// DOM 업데이트
+t.current&&(t.current.style.transform=`translate3d(${v}%, 0, 0)`),
+// 애니메이션 계속 진행
+o<1?u.current=requestAnimationFrame(e):c.current=void 0};// 0-100을 -100-0으로 변환
+/**
+     * ease-out-quart 이징 함수
+     * cubic-bezier(0.25, 0.46, 0.45, 0.94)와 유사한 효과
+     */
+// 클린업 함수
+// 진행 중인 애니메이션 취소
+return u.current&&(cancelAnimationFrame(u.current),c.current=void 0),
+// 새 애니메이션 시작
+u.current=requestAnimationFrame(e),()=>{u.current&&cancelAnimationFrame(u.current)}}),[n,t]),n};

package/dist/cjs/Components/Utils/BackDropLiftContainer/BackDropLiftContainer.js

@@ -0,0 +1,3 @@
+"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("tailwind-merge"),r=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("../BackDrop/BackDrop.js");const a="duration-300";exports.BackDropLiftContainer=({isOpen:n,onClose:o,children:l,isBackgroundBlack:c=!0,isPreventScroll:u=!0,isBottomSheet:d=!1,isFullSize:B=!1,testId:p})=>{const[x,y]=t.useState(!1),[m,f]=t.useState(!1);return t.useEffect((()=>{n?(f(!0),requestAnimationFrame((()=>y(!0)))):y(!1)}),[n]),m||n?/*#__PURE__*/e.jsxs(r.Box,{className:i.twJoin("fixed inset-0 z-30 flex justify-center transition-opacity",a,d?"items-end":"items-center",x?"opacity-100":"opacity-0"),"data-testid":p||"design-system--backdrop-lift-container",children:[
+/*#__PURE__*/e.jsx(s.BackDrop,{onClick:o,isBlack:c,preventScroll:u}),
+/*#__PURE__*/e.jsx(r.Box,{className:i.twMerge("z-30 transition-all ease-in",a,(d||B)&&"w-full",x?"translate-y-0 opacity-100":"translate-y-full opacity-0"),onTransitionEnd:()=>{n||f(!1)},children:l})]}):null};

package/dist/cjs/{src/Components → Components}/Utils/Modal/Modal.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),o=require("../BackDropLiftContainer/BackDropLiftContainer.js"),r=require("../BottomModalContainer/BottomModalContainer.js"),l=require("../FullModalContainer/FullModalContainer.js"),i=require("../ModalContainer/ModalContainer.js"),t=require("../Portal/Portal.js");require("tailwind-merge");var a=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.Modal=({isOpen:n,rootId:s,variant:d="default",size:u="md",overflow:c="auto",isBackgroundBlack:B=!0,isFixedHeight:C,isPreventScroll:j=!0,onClose:x,needCleanup:m=!0,children:h})=>{const M="bottom"===d,f="full"===d,p="default"===d,q=m&&!s;/*#__PURE__*/
-return e.jsx(t.Portal,{rootId:s,needCleanup:q,children:/*#__PURE__*/e.jsxs(o.BackDropLiftContainer,{isOpen:n,onClose:x,testId:"design-system--modal",isBackgroundBlack:B,isPreventScroll:j,isBottomSheet:M,children:[p&&/*#__PURE__*/e.jsx(a.Box,{className:"full"===u?"px-5":"",children:/*#__PURE__*/e.jsx(i.ModalContainer,{size:u,overflow:c,children:h})}),f&&/*#__PURE__*/e.jsx(l.FullModalContainer,{children:h}),M&&x&&/*#__PURE__*/e.jsx(r.BottomModalContainer,{onClose:x,isFixedHeight:C,children:h})]})})};
+"use strict";var e=require("react/jsx-runtime"),o=require("../BackDropLiftContainer/BackDropLiftContainer.js"),r=require("../BottomModalContainer/BottomModalContainer.js"),l=require("../FullModalContainer/FullModalContainer.js"),i=require("../ModalContainer/ModalContainer.js"),t=require("../Portal/Portal.js");require("tailwind-merge");var a=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");exports.Modal=({isOpen:n,rootId:s,variant:d="default",size:u="md",overflow:c="auto",isBackgroundBlack:B=!0,isFixedHeight:C,isPreventScroll:j=!0,onClose:x,needCleanup:f=!0,children:m})=>{const h="bottom"===d,M="full"===d,p="default"===d,q=f&&!s;/*#__PURE__*/
+return e.jsx(t.Portal,{rootId:s,needCleanup:q,children:/*#__PURE__*/e.jsxs(o.BackDropLiftContainer,{isOpen:n,onClose:x,testId:"design-system--modal",isBackgroundBlack:B,isPreventScroll:j,isBottomSheet:h,isFullSize:"full"===u,children:[p&&/*#__PURE__*/e.jsx(a.Box,{className:"full"===u?"w-full px-5":"",children:/*#__PURE__*/e.jsx(i.ModalContainer,{size:u,overflow:c,children:m})}),M&&/*#__PURE__*/e.jsx(l.FullModalContainer,{children:m}),h&&x&&/*#__PURE__*/e.jsx(r.BottomModalContainer,{onClose:x,isFixedHeight:C,children:m})]})})};

package/dist/config/tailwind-plugins.js

@@ -1,13 +1,6 @@
 import plugin from 'tailwindcss/plugin';
 
-import { typographyStyles } from './typography.styles';
-
 export const customizedPlugin = plugin(function ({ addUtilities, addBase, addVariant }) {
-  const typographyUtilities = Object.entries(typographyStyles).reduce((acc, [key, value]) => {
-    acc[`.typo-${key}`] = value;
-    return acc;
-  }, {});
-
   addUtilities({
     '.scrollbar-list': {
       '&::-webkit-scrollbar': {
@@ -26,7 +19,54 @@ export const customizedPlugin = plugin(function ({ addUtilities, addBase, addVar
         backgroundClip: 'padding-box',
       },
     },
-    ...typographyUtilities,
+    '.typo-title1': {
+      fontSize: '48px',
+      lineHeight: '64px',
+    },
+    '.typo-title2': {
+      fontSize: '32px',
+      lineHeight: '48px',
+    },
+    '.typo-title3': {
+      fontSize: '24px',
+      lineHeight: '36px',
+    },
+    '.typo-subTitle1': {
+      fontSize: '20px',
+      lineHeight: '30px',
+    },
+    '.typo-subTitle2': {
+      fontSize: '18px',
+      lineHeight: '28px',
+    },
+    '.typo-contents1': {
+      fontSize: '18px',
+      lineHeight: '32px',
+    },
+    '.typo-contents2': {
+      fontSize: '16px',
+      lineHeight: '30px',
+    },
+    '.typo-body1': {
+      fontSize: '16px',
+      lineHeight: '26px',
+    },
+    '.typo-body2': {
+      fontSize: '14px',
+      lineHeight: '24px',
+    },
+    '.typo-body3': {
+      fontSize: '13px',
+      lineHeight: '20px',
+    },
+    '.typo-caption1': {
+      fontSize: '12px',
+      lineHeight: '18px',
+    },
+    '.typo-caption2': {
+      fontSize: '11px',
+      lineHeight: '14px',
+    },
   });
   addBase({
     '::-webkit-resizer': {

package/package.json

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

package/dist/cjs/src/Components/DataDisplays/Li/Li.js

@@ -1,34 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("tailwind-merge"),t=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var l=require("../../../../typography.styles.js");
-/**
- * 리스트 아이템 컴포넌트입니다.
- *
- * @param {Object} props - 컴포넌트 프로퍼티
- * @param {Variant} [props.variant] - 텍스트 타이포그래피 variant (기본값: body1)
- * @param {string} [props.bulletClassName] - 리스트 아이템 불릿 클래스명 (기본값: 'text-w-bluegray-300')
- * @param {number} [props.bulletSize] - 리스트 아이템 불릿 크기 (지름, 기본값: 3)
- * @param {number} [props.gap] - 불릿과 children 간격 (기본값: 2)
- * @param {string} [props.className] - 컴포넌트에 적용할 추가 CSS 클래스명
- *
- * @example
- * // 기본 사용법
- * <Li>내용을 적어줍니다.</Li>
- *
- * // 타이포그래피 variant 변경
- * <Li variant="title3">내용을 적어줍니다.</Li>
- *
- * // 불릿 색상 조절
- * <Li bulletClassName="text-w-red-800">내용을 적어줍니다.</Li>
- *
- * // 불릿 크기 조절 (지름)
- * <Li bulletSize={5}>내용을 적어줍니다.</Li>
- *
- * // 간격 조절
- * <Li gap={1}>Li</Li>
- *
- * // 커스텀 클래스와 함께 사용
- * <Li className="text-w-red-800">내용을 적어줍니다.</Li>
- *
- */const r=({size:r=3,variant:i="body1",className:a})=>{var n;const o=r/2,d=4*r,u=(null===(n=l.typographyStyles[i])||void 0===n?void 0:n.lineHeight)||"26px",x=parseInt(u)/2-d/2;/*#__PURE__*/
-return e.jsx(t.Box,{className:s.twMerge("flex-shrink-0",a),style:{marginTop:`${x}px`,width:`${d}px`,height:`${d}px`},"data-testid":"design-system-li-bullet-container",children:/*#__PURE__*/e.jsx("svg",{width:d,height:d,viewBox:`0 0 ${d} ${d}`,fill:"none",xmlns:"http://www.w3.org/2000/svg","data-testid":"design-system-li-bullet",children:/*#__PURE__*/e.jsx("circle",{cx:d/2,cy:d/2,r:o,fill:"currentColor"})})})};exports.BulletIcon=r,exports.default=({children:t,variant:l="body1",gap:i=2,bulletSize:a=3,bulletClassName:n="text-w-bluegray-300",className:o})=>/*#__PURE__*/e.jsxs("li",{className:s.twMerge(`flex gap-${i} typo-${l}`,o),children:[
-/*#__PURE__*/e.jsx(r,{size:a,variant:l,className:n}),
-/*#__PURE__*/e.jsx("span",{children:t})]});

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

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

package/dist/cjs/src/Components/Utils/BackDropLiftContainer/BackDropLiftContainer.js

@@ -1,3 +0,0 @@
-"use client";"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("tailwind-merge"),i=require("../../Base/Layouts/Box/Box.js");require("../../Base/Layouts/FullBleed/FullBleed.js");var s=require("../BackDrop/BackDrop.js");const a="duration-300";exports.BackDropLiftContainer=({isOpen:n,onClose:o,children:l,isBackgroundBlack:c=!0,isPreventScroll:u=!0,isBottomSheet:d=!1,testId:B})=>{const[p,x]=t.useState(!1),[y,m]=t.useState(!1);return t.useEffect((()=>{n?(m(!0),requestAnimationFrame((()=>x(!0)))):x(!1)}),[n]),y||n?/*#__PURE__*/e.jsxs(i.Box,{className:r.twJoin("fixed inset-0 z-30 flex justify-center transition-opacity",a,d?"items-end":"items-center",p?"opacity-100":"opacity-0"),"data-testid":B||"design-system--backdrop-lift-container",children:[
-/*#__PURE__*/e.jsx(s.BackDrop,{onClick:o,isBlack:c,preventScroll:u}),
-/*#__PURE__*/e.jsx(i.Box,{className:r.twMerge("z-30 transition-all ease-in",a,d&&"w-full",p?"translate-y-0 opacity-100":"translate-y-full opacity-0"),onTransitionEnd:()=>{n||m(!1)},children:l})]}):null};

package/dist/cjs/typography.styles.js

@@ -1 +0,0 @@
-"use strict";exports.typographyStyles={title1:{fontSize:"48px",lineHeight:"64px"},title2:{fontSize:"32px",lineHeight:"48px"},title3:{fontSize:"24px",lineHeight:"36px"},subTitle1:{fontSize:"20px",lineHeight:"30px"},subTitle2:{fontSize:"18px",lineHeight:"28px"},contents1:{fontSize:"18px",lineHeight:"32px"},contents2:{fontSize:"16px",lineHeight:"30px"},body1:{fontSize:"16px",lineHeight:"26px"},body2:{fontSize:"14px",lineHeight:"24px"},body3:{fontSize:"13px",lineHeight:"20px"},caption1:{fontSize:"12px",lineHeight:"18px"},caption2:{fontSize:"11px",lineHeight:"14px"}};

package/dist/src/Components/DataDisplays/Li/Li.js

@@ -1,34 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{twMerge as l}from"tailwind-merge";import{Box as s}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{typographyStyles as i}from"../../../../typography.styles.js";
-/**
- * 리스트 아이템 컴포넌트입니다.
- *
- * @param {Object} props - 컴포넌트 프로퍼티
- * @param {Variant} [props.variant] - 텍스트 타이포그래피 variant (기본값: body1)
- * @param {string} [props.bulletClassName] - 리스트 아이템 불릿 클래스명 (기본값: 'text-w-bluegray-300')
- * @param {number} [props.bulletSize] - 리스트 아이템 불릿 크기 (지름, 기본값: 3)
- * @param {number} [props.gap] - 불릿과 children 간격 (기본값: 2)
- * @param {string} [props.className] - 컴포넌트에 적용할 추가 CSS 클래스명
- *
- * @example
- * // 기본 사용법
- * <Li>내용을 적어줍니다.</Li>
- *
- * // 타이포그래피 variant 변경
- * <Li variant="title3">내용을 적어줍니다.</Li>
- *
- * // 불릿 색상 조절
- * <Li bulletClassName="text-w-red-800">내용을 적어줍니다.</Li>
- *
- * // 불릿 크기 조절 (지름)
- * <Li bulletSize={5}>내용을 적어줍니다.</Li>
- *
- * // 간격 조절
- * <Li gap={1}>Li</Li>
- *
- * // 커스텀 클래스와 함께 사용
- * <Li className="text-w-red-800">내용을 적어줍니다.</Li>
- *
- */const a=({children:s,variant:i="body1",gap:a=2,bulletSize:o=3,bulletClassName:n="text-w-bluegray-300",className:d})=>/*#__PURE__*/e("li",{className:l(`flex gap-${a} typo-${i}`,d),children:[
-/*#__PURE__*/t(r,{size:o,variant:i,className:n}),
-/*#__PURE__*/t("span",{children:s})]}),r=({size:e=3,variant:a="body1",className:r})=>{var o;const n=e/2,d=4*e,m=(null===(o=i[a])||void 0===o?void 0:o.lineHeight)||"26px",c=parseInt(m)/2-d/2;/*#__PURE__*/
-return t(s,{className:l("flex-shrink-0",r),style:{marginTop:`${c}px`,width:`${d}px`,height:`${d}px`},"data-testid":"design-system-li-bullet-container",children:/*#__PURE__*/t("svg",{width:d,height:d,viewBox:`0 0 ${d} ${d}`,fill:"none",xmlns:"http://www.w3.org/2000/svg","data-testid":"design-system-li-bullet",children:/*#__PURE__*/t("circle",{cx:d/2,cy:d/2,r:n,fill:"currentColor"})})})};export{r as BulletIcon,a as default};

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

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

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

@@ -1,9 +0,0 @@
-import{jsx as s}from"react/jsx-runtime";import{twMerge as r}from"tailwind-merge";
-/**
- * ProgressIndicator
- * @param {Object} props
- * @param {string} [props.className] - 컨테이너의 추가 클래스명
- * @param {string} [props.progressClassName] - 프로그레스 바의 추가 클래스명
- * @param {number} props.value - 진행률 값 (0-100 사이의 숫자)
- */const e=({className:e,progressClassName:a,value:t})=>{const i={"--progress":Math.min(100,Math.max(0,t))-100+"%"};/*#__PURE__*/
-return s("div",{"data-testid":"design-system-progress-indicator",className:r("h-1 w-full overflow-hidden rounded-full",e),children:/*#__PURE__*/s("div",{className:"h-full bg-w-gray-100","data-testid":"design-system-progress-indicator--background",children:/*#__PURE__*/s("div",{"data-testid":"design-system-progress-indicator--progress",className:r("h-full translate-x-[var(--progress)] bg-primary transition-transform !duration-500",a),style:i})})})};export{e as ProgressIndicator};

package/dist/src/Components/Utils/BackDropLiftContainer/BackDropLiftContainer.js

@@ -1,3 +0,0 @@
-"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as i,useEffect as o}from"react";import{twJoin as r,twMerge as a}from"tailwind-merge";import{Box as n}from"../../Base/Layouts/Box/Box.js";import"../../Base/Layouts/FullBleed/FullBleed.js";import{BackDrop as s}from"../BackDrop/BackDrop.js";const l="duration-300",c=({isOpen:c,onClose:m,children:p,isBackgroundBlack:d=!0,isPreventScroll:u=!0,isBottomSheet:B=!1,testId:f})=>{const[y,k]=i(!1),[x,j]=i(!1);return o((()=>{c?(j(!0),requestAnimationFrame((()=>k(!0)))):k(!1)}),[c]),x||c?/*#__PURE__*/t(n,{className:r("fixed inset-0 z-30 flex justify-center transition-opacity",l,B?"items-end":"items-center",y?"opacity-100":"opacity-0"),"data-testid":f||"design-system--backdrop-lift-container",children:[
-/*#__PURE__*/e(s,{onClick:m,isBlack:d,preventScroll:u}),
-/*#__PURE__*/e(n,{className:a("z-30 transition-all ease-in",l,B&&"w-full",y?"translate-y-0 opacity-100":"translate-y-full opacity-0"),onTransitionEnd:()=>{c||j(!1)},children:p})]}):null};export{c as BackDropLiftContainer};

package/dist/typography.styles.d.ts

@@ -1,50 +0,0 @@
-export declare const typographyStyles: {
-    title1: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    title2: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    title3: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    subTitle1: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    subTitle2: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    contents1: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    contents2: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    body1: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    body2: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    body3: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    caption1: {
-        fontSize: string;
-        lineHeight: string;
-    };
-    caption2: {
-        fontSize: string;
-        lineHeight: string;
-    };
-};

package/dist/typography.styles.js

@@ -1 +0,0 @@
-const e={title1:{fontSize:"48px",lineHeight:"64px"},title2:{fontSize:"32px",lineHeight:"48px"},title3:{fontSize:"24px",lineHeight:"36px"},subTitle1:{fontSize:"20px",lineHeight:"30px"},subTitle2:{fontSize:"18px",lineHeight:"28px"},contents1:{fontSize:"18px",lineHeight:"32px"},contents2:{fontSize:"16px",lineHeight:"30px"},body1:{fontSize:"16px",lineHeight:"26px"},body2:{fontSize:"14px",lineHeight:"24px"},body3:{fontSize:"13px",lineHeight:"20px"},caption1:{fontSize:"12px",lineHeight:"18px"},caption2:{fontSize:"11px",lineHeight:"14px"}};export{e as typographyStyles};