@wishket/design-system 1.5.2 → 1.6.0

package/README.md

@@ -34,7 +34,7 @@ pnpm add @wishket/design-system
 ```
 
 
-### 2. Setting in tailwind.config.ts
+### 2. Default Setting in tailwind.config.ts
 
 ```typescript
 // tailwind.config.ts
@@ -46,7 +46,7 @@ const config: Config = {
     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
     path.join(path.dirname(require.resolve('@wishket/design-system')), '**/*.{js,ts,jsx,tsx,mdx}'),
   ],
-  presets: [require('@wishket/design-system/dist/config/tailwind.config/dist')],
+  presets: [require('@wishket/design-system/config')],
   plugins: [],
 };
 
@@ -68,3 +68,37 @@ export const Home  = () => {
 
 export default Home;
 ```
+
+## Customize Theme in Config File
+
+```typescript
+// tailwind.config.ts
+import path from 'path';
+import type { Config } from 'tailwindcss';
+import colors from '@wishket/design-system/colors';
+
+const config: Config = {
+  // default config
+  theme: {
+    colors: {
+      primary: colors.w_primary,
+    },
+  },
+};
+
+export default config;
+```
+
+### Troubleshooting Color Imports
+If you're having trouble importing colors from '@wishket/design-system/colors', please verify your TypeScript configuration:
+
+- Verify TypeScript version 5.0 or later
+- Check your `tsconfig.json` settings:
+  ```json
+  {
+    "compilerOptions": {
+      "moduleResolution": "bundler",
+      "module": "ESNext"
+    }
+  }
+  ```

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

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

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

@@ -1 +1 @@
-"use strict";var t=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),a=require("tailwind-merge"),e=[{name:"title1",class:"typo-title1"},{name:"title2",class:"typo-title2"},{name:"title3",class:"typo-title3"},{name:"subTitle1",class:"typo-subTitle1"},{name:"subTitle2",class:"typo-subTitle2"},{name:"contents1",class:"typo-contents1"},{name:"contents2",class:"typo-contents2"},{name:"body1",class:"typo-body1"},{name:"body2",class:"typo-body2"},{name:"body3",class:"typo-body3"},{name:"caption1",class:"typo-caption1"},{name:"caption2",class:"typo-caption2"}];module.exports=function(n){var i=n.children,l=n.variant,o=n.className,c=n.as,c=void 0===c?"span":c,n=t.__rest(n,["children","variant","className","as"]),c=c||"span",r=(null==(r=e.find(function(t){return t.name===l}))?void 0:r.class)||"";return s.jsx(c,t.__assign({className:a.twJoin("tracking-default",r,o)},n,{children:i}))};
+"use strict";var t=require("../../../_virtual/_tslib.js"),s=require("react/jsx-runtime"),a=require("tailwind-merge"),e=[{name:"title1",class:"typo-title1"},{name:"title2",class:"typo-title2"},{name:"title3",class:"typo-title3"},{name:"subTitle1",class:"typo-subTitle1"},{name:"subTitle2",class:"typo-subTitle2"},{name:"contents1",class:"typo-contents1"},{name:"contents2",class:"typo-contents2"},{name:"body1",class:"typo-body1"},{name:"body2",class:"typo-body2"},{name:"body3",class:"typo-body3"},{name:"caption1",class:"typo-caption1"},{name:"caption2",class:"typo-caption2"}];module.exports=function(n){var l=n.children,i=n.variant,c=n.className,o=n.as,o=void 0===o?"span":o,n=t.__rest(n,["children","variant","className","as"]),o=o||"span",r="span"===o,p=(null==(p=e.find(function(t){return t.name===i}))?void 0:p.class)||"";return s.jsx(o,t.__assign({className:a.twMerge("tracking-default",r&&"inline-block",p,c)},n,{children:l}))};

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

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

package/dist/Components/Utils/Modal/Modal.d.ts

@@ -1,9 +1,10 @@
 import { PropsWithChildren } from 'react';
+import { Size } from '../ModalContainer';
 export interface ModalProps extends PropsWithChildren {
     isOpen: boolean;
     rootId?: string;
     variant?: 'default' | 'full' | 'bottom';
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: Size;
     overflow?: 'auto' | 'visible' | 'hidden' | 'scroll';
     isBackgroundBlack?: boolean;
     isFixedHeight?: boolean;
@@ -19,7 +20,7 @@ export interface ModalProps extends PropsWithChildren {
  * @param {boolean} props.isOpen - 모달의 표시 여부를 결정합니다
  * @param {string} [props.rootId] - 모달이 마운트될 DOM 요소의 ID입니다
  * @param {'default' | 'full' | 'bottom'} [props.variant='default'] - 모달의 형태를 지정합니다 (default, full, bottom)
- * @param {'xs' | 'sm' | 'md' | 'lg' | 'xl'} [props.size='md'] - 모달의 크기를 지정합니다 (xs, sm, md, lg, xl)
+ * @param {'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'} [props.size='md'] - 모달의 크기를 지정합니다 (xs, sm, md, lg, xl, full)
  * @param {'auto' | 'visible' | 'hidden' | 'scroll'} [props.overflow='auto'] - 모달 내용의 오버플로우 처리 방식을 지정합니다 (auto, visible, hidden, scroll)
  * @param {boolean} [props.isBackgroundBlack=true] - 배경색을 검정색으로 할지 여부를 결정합니다
  * @param {boolean} [props.isFixedHeight] - 바텀 시트 모달의 고정 높이 사용 여부를 결정합니다

package/dist/Components/Utils/Modal/Modal.js

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

package/dist/Components/Utils/ModalContainer/ModalContainer.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 type Overflow = 'auto' | 'visible' | 'hidden' | 'scroll';
-type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export interface ModalContainerProps extends PropsWithChildren {
     size?: Size;
     overflow?: Overflow;

package/dist/Components/Utils/ModalContainer/ModalContainer.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("tailwind-merge"),i=(require("../../../_virtual/_tslib.js"),require("../../Base/Layouts/Box/Box.js"));require("../../Base/Layouts/FullBleed/FullBleed.js"),module.exports=function(l){var o=l.size,s=l.overflow,l=l.children;return e.jsx(i,{"data-testid":"design-system--modal-container",className:r.twJoin("h-fit rounded-3xl bg-w-white shadow-modal","flex items-center justify-center",{xs:"w-[320px]",sm:"w-[400px]",md:"w-[500px]",lg:"w-[600px]",xl:"w-[1000px]"}[void 0===o?"md":o],{auto:"overflow-auto",visible:"overflow-visible",hidden:"overflow-hidden",scroll:"overflow-scroll"}[void 0===s?"auto":s]),children:l})};
+"use strict";var e=require("react/jsx-runtime"),l=require("tailwind-merge"),r=(require("../../../_virtual/_tslib.js"),require("../../Base/Layouts/Box/Box.js"));require("../../Base/Layouts/FullBleed/FullBleed.js"),module.exports=function(i){var o=i.size,s=i.overflow,i=i.children;return e.jsx(r,{"data-testid":"design-system--modal-container",className:l.twJoin("h-fit rounded-3xl bg-w-white shadow-modal","flex items-center justify-center",{xs:"w-[320px]",sm:"w-[400px]",md:"w-[500px]",lg:"w-[600px]",xl:"w-[1000px]",full:"w-full"}[void 0===o?"md":o],{auto:"overflow-auto",visible:"overflow-visible",hidden:"overflow-hidden",scroll:"overflow-scroll"}[void 0===s?"auto":s]),children:i})};

package/dist/Components/Utils/ModalContainer/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishket/design-system",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "description": "Wishket Design System",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -9,6 +9,19 @@
   "files": [
     "dist"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./colors": {
+      "types": "./dist/colors.d.ts",
+      "default": "./dist/colors.js"
+    },
+    "./config": {
+      "default": "./dist/config/tailwind.config.js"
+    }
+  },
   "scripts": {
     "dev": "next dev",
     "build": "rm -rf dist && rollup -c --bundleConfigAsCjs",