@tipp/ui 2.1.35 → 2.2.1

package/dist/app/platform/userInfos/utils.js

@@ -4,7 +4,7 @@ import {
   renderDataListItem,
   renderItem,
   sessionList
-} from "../../../chunk-I2ZOU3LX.js";
+} from "../../../chunk-5QBPSCEV.js";
 import "../../../chunk-HBF6IIVZ.js";
 import "../../../chunk-A5S42XBJ.js";
 import "../../../chunk-OYM4XCHQ.js";
@@ -21,7 +21,7 @@ import "../../../chunk-5H3YPCZK.js";
 import "../../../chunk-FR2GDOU2.js";
 import "../../../chunk-74DX4CU7.js";
 import "../../../chunk-3SK5EPKI.js";
-import "../../../chunk-U2QL5DES.js";
+import "../../../chunk-BXQCEPIO.js";
 import "../../../chunk-5AVBYDPB.js";
 import "../../../chunk-365QMK4D.js";
 import "../../../chunk-YO3BQW6S.js";
@@ -34,16 +34,17 @@ import "../../../chunk-XQOL7UBI.js";
 import "../../../chunk-TULWX7D6.js";
 import "../../../chunk-TQOQC4PZ.js";
 import "../../../chunk-VTJZMOSP.js";
-import "../../../chunk-CVRGXNMT.js";
+import "../../../chunk-22326A76.js";
 import "../../../chunk-34OQDUQR.js";
-import "../../../chunk-RHZT4IHH.js";
+import "../../../chunk-ZMHUWLB2.js";
 import "../../../chunk-DDUKEE5E.js";
 import "../../../chunk-HYITAA4J.js";
 import "../../../chunk-U7N2PWMO.js";
-import "../../../chunk-O3DNDMV3.js";
+import "../../../chunk-ZOFENAZJ.js";
 import "../../../chunk-HYE34QEM.js";
-import "../../../chunk-BCRXWYJ3.js";
-import "../../../chunk-ACVANQJ4.js";
+import "../../../chunk-AIYMJYCT.js";
+import "../../../chunk-CYPER4YW.js";
+import "../../../chunk-PT57HCAI.js";
 import "../../../chunk-2DZ2Y3JI.js";
 import "../../../chunk-KXF3A4OR.js";
 import "../../../chunk-B6XJN6EC.js";
@@ -63,12 +64,13 @@ import "../../../chunk-I7UUXACJ.js";
 import "../../../chunk-PARGQUJB.js";
 import "../../../chunk-LDBWASUA.js";
 import "../../../chunk-25HMMI7R.js";
-import "../../../chunk-AFPH32MF.js";
+import "../../../chunk-BW46WIN5.js";
 import "../../../chunk-LQY4RKWI.js";
 import "../../../chunk-ZD7MNMED.js";
 import "../../../chunk-V5XKNSCK.js";
 import "../../../chunk-WJ34ZHTU.js";
 import "../../../chunk-PVL7SJYR.js";
+import "../../../chunk-ECVAWQXV.js";
 import "../../../chunk-D7EYDD4E.js";
 import "../../../chunk-2TPQQBUQ.js";
 import "../../../chunk-HLFTU725.js";
@@ -80,7 +82,6 @@ import "../../../chunk-QNWBUYV2.js";
 import "../../../chunk-XSX6K7SK.js";
 import "../../../chunk-UQN63IRS.js";
 import "../../../chunk-K25BYIJ7.js";
-import "../../../chunk-ECVAWQXV.js";
 import "../../../chunk-J242TTFH.js";
 import "../../../chunk-EAXUQEO5.js";
 import "../../../chunk-2NMEKWO5.js";

package/dist/atoms/button.cjs

@@ -96,7 +96,7 @@ var Button = (0, import_react.forwardRef)(
       return convertSize(size);
     }, [size]);
     const radixVariant = (0, import_react.useMemo)(() => {
-      if (variant === "transparent") return "soft";
+      if (variant === "transparent") return "ghost";
       return variant;
     }, [variant]);
     const className = (0, import_react.useMemo)(() => {

package/dist/atoms/button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/button.tsx","../../src/utils/convert-button-size.ts"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { Button as RadixButton } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport { convertSize } from '../utils/convert-button-size';\nimport type { ButtonProps } from './button.type';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref): React.ReactNode => {\n    const { size, style, variant, ...restProps } = props;\n\n    const radixSize = useMemo(() => {\n      return convertSize(size);\n    }, [size]);\n\n    const radixVariant = useMemo(() => {\n      if (variant === 'transparent') return 'soft';\n      return variant;\n    }, [variant]);\n\n    const className = useMemo(() => {\n      return clsx(props.className, { transparent: variant === 'transparent' });\n    }, [props.className, variant]);\n\n    return (\n      <RadixButton\n        style={style}\n        variant={radixVariant}\n        {...restProps}\n        className={className}\n        ref={ref}\n        size={radixSize}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import { type ButtonProps as RadixButtonProps } from '@radix-ui/themes';\nimport type { Breakpoint } from '@radix-ui/themes/props';\nimport type { ButtonProps } from '../atoms/button.type';\n\nexport const convertSizeStr = (\n  size: ButtonProps['size']\n): '1' | '2' | '3' | '4' => {\n  switch (size) {\n    case 'small':\n      return '1';\n    case 'medium':\n      return '2';\n    case 'large':\n      return '3';\n    default:\n      return '2';\n  }\n};\n\nexport const convertSizeResponse = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string' || typeof size === 'undefined') {\n    return convertSizeStr(size);\n  }\n  const radixSize: RadixButtonProps['size'] = {};\n  let key: Breakpoint = 'initial';\n  for (key in size) {\n    radixSize[key] = convertSizeStr(size[key]);\n  }\n  return radixSize;\n};\n\nexport const convertSize = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string') {\n    return convertSizeStr(size);\n  }\n  return convertSizeResponse(size);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,oBAAsC;AACtC,kBAAqB;;;ACEd,IAAM,iBAAiB,CAC5B,SAC0B;AAC1B,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,sBAAsB,CACjC,SAC6B;AAC7B,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,aAAa;AAC3D,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,QAAM,YAAsC,CAAC;AAC7C,MAAI,MAAkB;AACtB,OAAK,OAAO,MAAM;AAChB,cAAU,GAAG,IAAI,eAAe,KAAK,GAAG,CAAC;AAAA,EAC3C;AACA,SAAO;AACT;AAEO,IAAM,cAAc,CACzB,SAC6B;AAC7B,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,SAAO,oBAAoB,IAAI;AACjC;;;ADhBM;AAlBC,IAAM,aAAS;AAAA,EACpB,CAAC,OAAO,QAAyB;AAC/B,UAA+C,YAAvC,QAAM,OAAO,QARzB,IAQmD,IAAd,sBAAc,IAAd,CAAzB,QAAM,SAAO;AAErB,UAAM,gBAAY,sBAAQ,MAAM;AAC9B,aAAO,YAAY,IAAI;AAAA,IACzB,GAAG,CAAC,IAAI,CAAC;AAET,UAAM,mBAAe,sBAAQ,MAAM;AACjC,UAAI,YAAY,cAAe,QAAO;AACtC,aAAO;AAAA,IACT,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,gBAAY,sBAAQ,MAAM;AAC9B,iBAAO,kBAAK,MAAM,WAAW,EAAE,aAAa,YAAY,cAAc,CAAC;AAAA,IACzE,GAAG,CAAC,MAAM,WAAW,OAAO,CAAC;AAE7B,WACE;AAAA,MAAC,cAAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,SACL,YAHL;AAAA,QAIC;AAAA,QACA;AAAA,QACA,MAAM;AAAA;AAAA,IACR;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":["RadixButton"]}
+{"version":3,"sources":["../../src/atoms/button.tsx","../../src/utils/convert-button-size.ts"],"sourcesContent":["import React, { forwardRef, useMemo } from 'react';\nimport { Button as RadixButton } from '@radix-ui/themes';\nimport { clsx } from 'clsx';\nimport { convertSize } from '../utils/convert-button-size';\nimport type { ButtonProps } from './button.type';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref): React.ReactNode => {\n    const { size, style, variant, ...restProps } = props;\n\n    const radixSize = useMemo(() => {\n      return convertSize(size);\n    }, [size]);\n\n    const radixVariant = useMemo(() => {\n      if (variant === 'transparent') return 'ghost';\n      return variant;\n    }, [variant]);\n\n    const className = useMemo(() => {\n      return clsx(props.className, { transparent: variant === 'transparent' });\n    }, [props.className, variant]);\n\n    return (\n      <RadixButton\n        style={style}\n        variant={radixVariant}\n        {...restProps}\n        className={className}\n        ref={ref}\n        size={radixSize}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import { type ButtonProps as RadixButtonProps } from '@radix-ui/themes';\nimport type { Breakpoint } from '@radix-ui/themes/props';\nimport type { ButtonProps } from '../atoms/button.type';\n\nexport const convertSizeStr = (\n  size: ButtonProps['size']\n): '1' | '2' | '3' | '4' => {\n  switch (size) {\n    case 'small':\n      return '1';\n    case 'medium':\n      return '2';\n    case 'large':\n      return '3';\n    default:\n      return '2';\n  }\n};\n\nexport const convertSizeResponse = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string' || typeof size === 'undefined') {\n    return convertSizeStr(size);\n  }\n  const radixSize: RadixButtonProps['size'] = {};\n  let key: Breakpoint = 'initial';\n  for (key in size) {\n    radixSize[key] = convertSizeStr(size[key]);\n  }\n  return radixSize;\n};\n\nexport const convertSize = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string') {\n    return convertSizeStr(size);\n  }\n  return convertSizeResponse(size);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,oBAAsC;AACtC,kBAAqB;;;ACEd,IAAM,iBAAiB,CAC5B,SAC0B;AAC1B,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAEO,IAAM,sBAAsB,CACjC,SAC6B;AAC7B,MAAI,OAAO,SAAS,YAAY,OAAO,SAAS,aAAa;AAC3D,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,QAAM,YAAsC,CAAC;AAC7C,MAAI,MAAkB;AACtB,OAAK,OAAO,MAAM;AAChB,cAAU,GAAG,IAAI,eAAe,KAAK,GAAG,CAAC;AAAA,EAC3C;AACA,SAAO;AACT;AAEO,IAAM,cAAc,CACzB,SAC6B;AAC7B,MAAI,OAAO,SAAS,UAAU;AAC5B,WAAO,eAAe,IAAI;AAAA,EAC5B;AACA,SAAO,oBAAoB,IAAI;AACjC;;;ADhBM;AAlBC,IAAM,aAAS;AAAA,EACpB,CAAC,OAAO,QAAyB;AAC/B,UAA+C,YAAvC,QAAM,OAAO,QARzB,IAQmD,IAAd,sBAAc,IAAd,CAAzB,QAAM,SAAO;AAErB,UAAM,gBAAY,sBAAQ,MAAM;AAC9B,aAAO,YAAY,IAAI;AAAA,IACzB,GAAG,CAAC,IAAI,CAAC;AAET,UAAM,mBAAe,sBAAQ,MAAM;AACjC,UAAI,YAAY,cAAe,QAAO;AACtC,aAAO;AAAA,IACT,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,gBAAY,sBAAQ,MAAM;AAC9B,iBAAO,kBAAK,MAAM,WAAW,EAAE,aAAa,YAAY,cAAc,CAAC;AAAA,IACzE,GAAG,CAAC,MAAM,WAAW,OAAO,CAAC;AAE7B,WACE;AAAA,MAAC,cAAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS;AAAA,SACL,YAHL;AAAA,QAIC;AAAA,QACA;AAAA,QACA,MAAM;AAAA;AAAA,IACR;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":["RadixButton"]}

package/dist/atoms/button.js

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../chunk-AFPH32MF.js";
+} from "../chunk-BW46WIN5.js";
 import "../chunk-LQY4RKWI.js";
 import "../chunk-2NMEKWO5.js";
 export {

package/dist/atoms/dialog.cjs

@@ -65,7 +65,7 @@ module.exports = __toCommonJS(dialog_exports);
 var RadixDialog = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_react_icons = require("@radix-ui/react-icons");
 var import_themes4 = require("@radix-ui/themes");
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/theme/portal-provider.tsx
 var import_react = require("react");
@@ -135,10 +135,73 @@ function Heading2(props) {
 }
 
 // src/atoms/icon-button.tsx
+var import_react3 = require("react");
+var import_clsx = require("clsx");
 var import_themes3 = require("@radix-ui/themes");
 
-// src/atoms/dialog.tsx
+// src/utils/convert-button-size.ts
+var convertSizeStr = (size) => {
+  switch (size) {
+    case "small":
+      return "1";
+    case "medium":
+      return "2";
+    case "large":
+      return "3";
+    default:
+      return "2";
+  }
+};
+var convertSizeResponse = (size) => {
+  if (typeof size === "string" || typeof size === "undefined") {
+    return convertSizeStr(size);
+  }
+  const radixSize = {};
+  let key = "initial";
+  for (key in size) {
+    radixSize[key] = convertSizeStr(size[key]);
+  }
+  return radixSize;
+};
+var convertSize = (size) => {
+  if (typeof size === "string") {
+    return convertSizeStr(size);
+  }
+  return convertSizeResponse(size);
+};
+
+// src/atoms/icon-button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var IconButton = (0, import_react3.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
+    const radixSize = (0, import_react3.useMemo)(() => {
+      return convertSize(size);
+    }, [size]);
+    const radixVariant = (0, import_react3.useMemo)(() => {
+      if (variant === "transparent") return "ghost";
+      return variant;
+    }, [variant]);
+    const className = (0, import_react3.useMemo)(() => {
+      return (0, import_clsx.clsx)(props.className, { transparent: variant === "transparent" });
+    }, [props.className, variant]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_themes3.IconButton,
+      __spreadProps(__spreadValues({
+        style,
+        variant: radixVariant
+      }, restProps), {
+        className,
+        ref,
+        size: radixSize
+      })
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/atoms/dialog.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var preventDefault = (e) => {
   e.preventDefault();
 };
@@ -171,7 +234,7 @@ function Content2(props) {
     "className"
   ]);
   const { dialogContainerRef } = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Portal, { container: dialogContainerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes4.Theme, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Overlay, { className: "DialogOverlay", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixDialog.Portal, { container: dialogContainerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Theme, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixDialog.Overlay, { className: "DialogOverlay", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     RadixDialog.Content,
     __spreadProps(__spreadValues({
       className: `DialogContent ${className || ""}`,
@@ -186,12 +249,12 @@ function Content2(props) {
       }, style)
     }, rest), {
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_themes4.Flex, { gap: "2", justify: "between", width: "100%", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Title, { asChild: true, children: typeof title === "string" && title !== "" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Heading2, { mb: "2", variant: "heading3", children: title }) : title }),
-          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.IconButton, { color: "gray", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_icons.Cross1Icon, {}) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes4.Flex, { gap: "2", justify: "between", width: "100%", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixDialog.Title, { asChild: true, children: typeof title === "string" && title !== "" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { mb: "2", variant: "heading3", children: title }) : title }),
+          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixDialog.Close, { asChild: true, className: "DialogClose", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconButton, { color: "gray", variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_icons.Cross1Icon, {}) }) })
         ] }),
         children,
-        buttons ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes4.Flex, { gap: "3", justify: "end", mt: "3", width: "100%", children: buttons }) : null
+        buttons ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes4.Flex, { gap: "3", justify: "end", mt: "3", width: "100%", children: buttons }) : null
       ]
     })
   ) }) }) });
@@ -202,7 +265,7 @@ function Close2(_a) {
   } = _b, rest = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Close, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixDialog.Close, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
 }
 function Trigger2(_a) {
   var _b = _a, {
@@ -210,12 +273,12 @@ function Trigger2(_a) {
   } = _b, rest = __objRest(_b, [
     "children"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Trigger, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixDialog.Trigger, __spreadProps(__spreadValues({ asChild: true }, rest), { children }));
 }
 function Root2(props) {
-  const prevOpenRef = (0, import_react3.useRef)(void 0);
-  const cleanupExecutedRef = (0, import_react3.useRef)(false);
-  (0, import_react3.useEffect)(() => {
+  const prevOpenRef = (0, import_react4.useRef)(void 0);
+  const cleanupExecutedRef = (0, import_react4.useRef)(false);
+  (0, import_react4.useEffect)(() => {
     const prevOpen = prevOpenRef.current;
     const currentOpen = props.open;
     if (prevOpen === true && currentOpen === false && !cleanupExecutedRef.current) {
@@ -238,7 +301,7 @@ function Root2(props) {
     }
     prevOpenRef.current = currentOpen;
   }, [props.open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RadixDialog.Root, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RadixDialog.Root, __spreadValues({}, props));
 }
 var Dialog = {
   Root: Root2,

package/dist/atoms/dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/dialog.tsx","../../src/theme/portal-provider.tsx","../../src/atoms/heading.tsx","../../src/utils/map-with-responsive.ts","../../src/atoms/icon-button.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Flex, Theme } from '@radix-ui/themes';\nimport { useEffect, useRef } from 'react';\nimport { usePortalContainer } from '@/theme/portal-provider';\nimport { Heading } from './heading';\nimport { IconButton } from './icon-button';\n\ntype ContentProps = RadixDialog.DialogContentProps & {\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  height?: string;\n  maxHeight?: string;\n  minHeight?: string;\n  title?: string;\n  hideCloseButton?: boolean;\n  buttons?: React.ReactNode;\n};\n\nconst preventDefault: RadixDialog.DialogContentProps['onPointerDownOutside'] = (\n  e\n) => {\n  e.preventDefault();\n};\n\nfunction Content(props: ContentProps): React.ReactNode {\n  const {\n    children,\n    style = {},\n    width,\n    maxWidth,\n    minWidth,\n    maxHeight,\n    height,\n    minHeight,\n    title,\n    buttons,\n    hideCloseButton,\n    className,\n    ...rest\n  } = props;\n  const { dialogContainerRef } = usePortalContainer();\n\n  return (\n    <RadixDialog.Portal container={dialogContainerRef.current}>\n      <Theme asChild>\n        <RadixDialog.Overlay className=\"DialogOverlay\">\n          <RadixDialog.Content\n            className={`DialogContent ${className || ''}`}\n            onPointerDownOutside={preventDefault}\n            style={{\n              width,\n              maxWidth,\n              minWidth,\n              maxHeight,\n              height,\n              minHeight,\n              ...style,\n            }}\n            {...rest}\n          >\n            <Flex gap=\"2\" justify=\"between\" width=\"100%\">\n              <RadixDialog.Title asChild>\n                {typeof title === 'string' && title !== '' ? (\n                  <Heading mb=\"2\" variant=\"heading3\">\n                    {title}\n                  </Heading>\n                ) : (\n                  title\n                )}\n              </RadixDialog.Title>\n              {!hideCloseButton && (\n                <RadixDialog.Close asChild className=\"DialogClose\">\n                  <IconButton color=\"gray\" variant=\"ghost\">\n                    <Cross1Icon />\n                  </IconButton>\n                </RadixDialog.Close>\n              )}\n            </Flex>\n            {children}\n            {buttons ? (\n              <Flex gap=\"3\" justify=\"end\" mt=\"3\" width=\"100%\">\n                {buttons}\n              </Flex>\n            ) : null}\n          </RadixDialog.Content>\n        </RadixDialog.Overlay>\n      </Theme>\n    </RadixDialog.Portal>\n  );\n}\n\nfunction Close({\n  children,\n  ...rest\n}: RadixDialog.DialogCloseProps): React.ReactNode {\n  return (\n    <RadixDialog.Close asChild {...rest}>\n      {children}\n    </RadixDialog.Close>\n  );\n}\n\nfunction Trigger({\n  children,\n  ...rest\n}: RadixDialog.DialogTriggerProps): React.ReactNode {\n  return (\n    <RadixDialog.Trigger asChild {...rest}>\n      {children}\n    </RadixDialog.Trigger>\n  );\n}\n\nfunction Root(props: RadixDialog.DialogProps): React.ReactNode {\n  const prevOpenRef = useRef<boolean | undefined>(undefined);\n  const cleanupExecutedRef = useRef<boolean>(false);\n\n  // 모달이 닫힌 후 포커스 복원 및 이벤트 정리\n  useEffect(() => {\n    const prevOpen = prevOpenRef.current;\n    const currentOpen = props.open;\n\n    // 모달이 열린 상태에서 닫힌 상태로 변경될 때만 실행\n    if (prevOpen === true && currentOpen === false && !cleanupExecutedRef.current) {\n      cleanupExecutedRef.current = true;\n      \n      // 모달이 닫힌 후 약간의 지연을 두고 포커스 복원\n      const timer = setTimeout(() => {\n        try {\n          // 활성 요소에 포커스 복원\n          const activeElement = document.activeElement as HTMLElement | null;\n          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 어떤 dom인지 확실하지 않음\n          activeElement?.blur?.();\n\n          // body의 pointer-events 복원\n          document.body.style.pointerEvents = '';\n        } catch {\n          // 에러 무시\n        } finally {\n          cleanupExecutedRef.current = false;\n        }\n      }, 100);\n\n      return () => { \n        clearTimeout(timer);\n        cleanupExecutedRef.current = false;\n      };\n    }\n\n    // 현재 상태를 이전 상태로 업데이트\n    prevOpenRef.current = currentOpen;\n  }, [props.open]);\n\n  return <RadixDialog.Root {...props} />;\n}\n\nexport const Dialog = {\n  Root,\n  Trigger,\n  Content,\n  Close,\n  Description: RadixDialog.Description,\n  Title: RadixDialog.Title,\n};\n","import React, { createContext, useContext, useRef } from 'react';\n\ninterface PortalProviderProps {\n  children: React.ReactNode;\n}\n\ninterface PortalState {\n  dialogContainerRef: React.RefObject<HTMLDivElement | null>;\n  drawerContainerRef: React.RefObject<HTMLDivElement | null>;\n}\n\nconst PortalContext = createContext<PortalState>(\n  null as unknown as PortalState\n);\n\nexport function PortalProvider({\n  children,\n}: PortalProviderProps): React.ReactNode {\n  const dialogContainerRef = useRef<HTMLDivElement | null>(null);\n  const drawerContainerRef = useRef<HTMLDivElement | null>(null);\n\n  return (\n    <PortalContext.Provider value={{ dialogContainerRef, drawerContainerRef }}>\n      {children}\n      <div className=\"drawer-portal-container\" ref={drawerContainerRef} />\n      <div className=\"dialog-portal-container\" ref={dialogContainerRef} />\n    </PortalContext.Provider>\n  );\n}\n\nexport const usePortalContainer = (): PortalState => {\n  try {\n    const state = useContext(PortalContext);\n    return state;\n  } catch (error) {\n    throw new Error('PortalProvider not found');\n  }\n};\n\nexport default PortalProvider;\n","import {\n  Heading as RadixHeading,\n  type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n  | 'heading1'\n  | 'heading2'\n  | 'heading3'\n  | 'heading4'\n  | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n  variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n  switch (variant) {\n    case 'heading1':\n      return '7';\n    case 'heading2':\n      return '6';\n    case 'heading3':\n      return '5';\n    case 'heading4':\n      return '4';\n    case 'heading5':\n      return '3';\n    default:\n      return undefined;\n  }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n  const { size, children, variant, ...rest } = props;\n  const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n    return variant\n      ? mapWithResponsive({\n          value: variant,\n          mapFn: mapVariant,\n        })\n      : size;\n \n  }, [size, variant]);\n\n  return (\n    <RadixHeading {...rest} size={radixSize}>\n      {children}\n    </RadixHeading>\n  );\n}\n","import type {  Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args:  {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n  const {value, mapFn} = args;\n  if(typeof value === 'string'){\n    return mapFn(value);\n  };\n  \n  if(typeof value === 'object'){\n    const newObj: Partial<Record<Breakpoint, K>> = {};\n    let key: Breakpoint;\n    for(key in value){\n      newObj[key] = mapFn(value[key]);\n    }\n    return newObj;\n  }\n  return value;\n};\n","export { IconButton, type IconButtonProps } from '@radix-ui/themes';\n"],"mappings":"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","names":["import_themes","import_react","import_react","import_themes","import_jsx_runtime","Heading","RadixHeading","import_themes","import_jsx_runtime","Content","Heading","Close","Trigger","Root"]}
+{"version":3,"sources":["../../src/atoms/dialog.tsx","../../src/theme/portal-provider.tsx","../../src/atoms/heading.tsx","../../src/utils/map-with-responsive.ts","../../src/atoms/icon-button.tsx","../../src/utils/convert-button-size.ts"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { Cross1Icon } from '@radix-ui/react-icons';\nimport { Flex, Theme } from '@radix-ui/themes';\nimport { useEffect, useRef } from 'react';\nimport { usePortalContainer } from '@/theme/portal-provider';\nimport { Heading } from './heading';\nimport { IconButton } from './icon-button';\n\ntype ContentProps = RadixDialog.DialogContentProps & {\n  width?: string;\n  maxWidth?: string;\n  minWidth?: string;\n  height?: string;\n  maxHeight?: string;\n  minHeight?: string;\n  title?: string;\n  hideCloseButton?: boolean;\n  buttons?: React.ReactNode;\n};\n\nconst preventDefault: RadixDialog.DialogContentProps['onPointerDownOutside'] = (\n  e\n) => {\n  e.preventDefault();\n};\n\nfunction Content(props: ContentProps): React.ReactNode {\n  const {\n    children,\n    style = {},\n    width,\n    maxWidth,\n    minWidth,\n    maxHeight,\n    height,\n    minHeight,\n    title,\n    buttons,\n    hideCloseButton,\n    className,\n    ...rest\n  } = props;\n  const { dialogContainerRef } = usePortalContainer();\n\n  return (\n    <RadixDialog.Portal container={dialogContainerRef.current}>\n      <Theme asChild>\n        <RadixDialog.Overlay className=\"DialogOverlay\">\n          <RadixDialog.Content\n            className={`DialogContent ${className || ''}`}\n            onPointerDownOutside={preventDefault}\n            style={{\n              width,\n              maxWidth,\n              minWidth,\n              maxHeight,\n              height,\n              minHeight,\n              ...style,\n            }}\n            {...rest}\n          >\n            <Flex gap=\"2\" justify=\"between\" width=\"100%\">\n              <RadixDialog.Title asChild>\n                {typeof title === 'string' && title !== '' ? (\n                  <Heading mb=\"2\" variant=\"heading3\">\n                    {title}\n                  </Heading>\n                ) : (\n                  title\n                )}\n              </RadixDialog.Title>\n              {!hideCloseButton && (\n                <RadixDialog.Close asChild className=\"DialogClose\">\n                  <IconButton color=\"gray\" variant=\"ghost\">\n                    <Cross1Icon />\n                  </IconButton>\n                </RadixDialog.Close>\n              )}\n            </Flex>\n            {children}\n            {buttons ? (\n              <Flex gap=\"3\" justify=\"end\" mt=\"3\" width=\"100%\">\n                {buttons}\n              </Flex>\n            ) : null}\n          </RadixDialog.Content>\n        </RadixDialog.Overlay>\n      </Theme>\n    </RadixDialog.Portal>\n  );\n}\n\nfunction Close({\n  children,\n  ...rest\n}: RadixDialog.DialogCloseProps): React.ReactNode {\n  return (\n    <RadixDialog.Close asChild {...rest}>\n      {children}\n    </RadixDialog.Close>\n  );\n}\n\nfunction Trigger({\n  children,\n  ...rest\n}: RadixDialog.DialogTriggerProps): React.ReactNode {\n  return (\n    <RadixDialog.Trigger asChild {...rest}>\n      {children}\n    </RadixDialog.Trigger>\n  );\n}\n\nfunction Root(props: RadixDialog.DialogProps): React.ReactNode {\n  const prevOpenRef = useRef<boolean | undefined>(undefined);\n  const cleanupExecutedRef = useRef<boolean>(false);\n\n  // 모달이 닫힌 후 포커스 복원 및 이벤트 정리\n  useEffect(() => {\n    const prevOpen = prevOpenRef.current;\n    const currentOpen = props.open;\n\n    // 모달이 열린 상태에서 닫힌 상태로 변경될 때만 실행\n    if (prevOpen === true && currentOpen === false && !cleanupExecutedRef.current) {\n      cleanupExecutedRef.current = true;\n      \n      // 모달이 닫힌 후 약간의 지연을 두고 포커스 복원\n      const timer = setTimeout(() => {\n        try {\n          // 활성 요소에 포커스 복원\n          const activeElement = document.activeElement as HTMLElement | null;\n          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 어떤 dom인지 확실하지 않음\n          activeElement?.blur?.();\n\n          // body의 pointer-events 복원\n          document.body.style.pointerEvents = '';\n        } catch {\n          // 에러 무시\n        } finally {\n          cleanupExecutedRef.current = false;\n        }\n      }, 100);\n\n      return () => { \n        clearTimeout(timer);\n        cleanupExecutedRef.current = false;\n      };\n    }\n\n    // 현재 상태를 이전 상태로 업데이트\n    prevOpenRef.current = currentOpen;\n  }, [props.open]);\n\n  return <RadixDialog.Root {...props} />;\n}\n\nexport const Dialog = {\n  Root,\n  Trigger,\n  Content,\n  Close,\n  Description: RadixDialog.Description,\n  Title: RadixDialog.Title,\n};\n","import React, { createContext, useContext, useRef } from 'react';\n\ninterface PortalProviderProps {\n  children: React.ReactNode;\n}\n\ninterface PortalState {\n  dialogContainerRef: React.RefObject<HTMLDivElement | null>;\n  drawerContainerRef: React.RefObject<HTMLDivElement | null>;\n}\n\nconst PortalContext = createContext<PortalState>(\n  null as unknown as PortalState\n);\n\nexport function PortalProvider({\n  children,\n}: PortalProviderProps): React.ReactNode {\n  const dialogContainerRef = useRef<HTMLDivElement | null>(null);\n  const drawerContainerRef = useRef<HTMLDivElement | null>(null);\n\n  return (\n    <PortalContext.Provider value={{ dialogContainerRef, drawerContainerRef }}>\n      {children}\n      <div className=\"drawer-portal-container\" ref={drawerContainerRef} />\n      <div className=\"dialog-portal-container\" ref={dialogContainerRef} />\n    </PortalContext.Provider>\n  );\n}\n\nexport const usePortalContainer = (): PortalState => {\n  try {\n    const state = useContext(PortalContext);\n    return state;\n  } catch (error) {\n    throw new Error('PortalProvider not found');\n  }\n};\n\nexport default PortalProvider;\n","import {\n  Heading as RadixHeading,\n  type HeadingProps as RadixHeadingProps,\n} from '@radix-ui/themes';\nimport type { Responsive } from '@radix-ui/themes/props';\nimport { useMemo } from 'react';\nimport { mapWithResponsive } from '@/utils/map-with-responsive';\n\nexport { Heading as RadixHeading } from '@radix-ui/themes';\ntype HeadingVariant =\n  | 'heading1'\n  | 'heading2'\n  | 'heading3'\n  | 'heading4'\n  | 'heading5';\nexport type HeadingProps = RadixHeadingProps & {\n  variant?: Responsive<HeadingVariant>;\n};\n\ntype HeadingSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\nconst mapVariant = (variant?: HeadingVariant): HeadingSize | undefined => {\n  switch (variant) {\n    case 'heading1':\n      return '7';\n    case 'heading2':\n      return '6';\n    case 'heading3':\n      return '5';\n    case 'heading4':\n      return '4';\n    case 'heading5':\n      return '3';\n    default:\n      return undefined;\n  }\n};\n\nexport function Heading(props: HeadingProps): React.ReactNode {\n  const { size, children, variant, ...rest } = props;\n  const radixSize = useMemo<RadixHeadingProps['size']>(() => {\n    return variant\n      ? mapWithResponsive({\n          value: variant,\n          mapFn: mapVariant,\n        })\n      : size;\n \n  }, [size, variant]);\n\n  return (\n    <RadixHeading {...rest} size={radixSize}>\n      {children}\n    </RadixHeading>\n  );\n}\n","import type {  Breakpoint, Responsive } from \"@radix-ui/themes/props\";\n\nexport const mapWithResponsive = <T extends string,K extends string>(\n args:  {value: Responsive<T>, mapFn: (value?:T)=>K |undefined}\n): Responsive<K> | undefined => {\n  const {value, mapFn} = args;\n  if(typeof value === 'string'){\n    return mapFn(value);\n  };\n  \n  if(typeof value === 'object'){\n    const newObj: Partial<Record<Breakpoint, K>> = {};\n    let key: Breakpoint;\n    for(key in value){\n      newObj[key] = mapFn(value[key]);\n    }\n    return newObj;\n  }\n  return value;\n};\n","import React, { forwardRef, useMemo } from 'react';\nimport { clsx } from 'clsx';\nimport { IconButton as RadixIconButton } from '@radix-ui/themes';\nimport { convertSize } from '../utils/convert-button-size';\nimport type { ButtonProps } from './button.type';\n\nexport type IconButtonProps = ButtonProps;\nexport const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref): React.ReactNode => {\n    const { size, style, variant, ...restProps } = props;\n\n    const radixSize = useMemo(() => {\n      return convertSize(size);\n    }, [size]);\n\n    const radixVariant = useMemo(() => {\n      if (variant === 'transparent') return 'ghost';\n      return variant;\n    }, [variant]);\n\n    const className = useMemo(() => {\n      return clsx(props.className, { transparent: variant === 'transparent' });\n    }, [props.className, variant]);\n\n    return (\n      <RadixIconButton\n        style={style}\n        variant={radixVariant}\n        {...restProps}\n        className={className}\n        ref={ref}\n        size={radixSize}\n      />\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n","import { type ButtonProps as RadixButtonProps } from '@radix-ui/themes';\nimport type { Breakpoint } from '@radix-ui/themes/props';\nimport type { ButtonProps } from '../atoms/button.type';\n\nexport const convertSizeStr = (\n  size: ButtonProps['size']\n): '1' | '2' | '3' | '4' => {\n  switch (size) {\n    case 'small':\n      return '1';\n    case 'medium':\n      return '2';\n    case 'large':\n      return '3';\n    default:\n      return '2';\n  }\n};\n\nexport const convertSizeResponse = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string' || typeof size === 'undefined') {\n    return convertSizeStr(size);\n  }\n  const radixSize: RadixButtonProps['size'] = {};\n  let key: Breakpoint = 'initial';\n  for (key in size) {\n    radixSize[key] = convertSizeStr(size[key]);\n  }\n  return radixSize;\n};\n\nexport const convertSize = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string') {\n    return convertSizeStr(size);\n  }\n  return convertSizeResponse(size);\n};\n"],"mappings":"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","names":["import_themes","import_react","import_react","import_themes","import_jsx_runtime","Heading","RadixHeading","import_react","import_themes","import_jsx_runtime","RadixIconButton","import_jsx_runtime","Content","Heading","Close","Trigger","Root"]}

package/dist/atoms/dialog.js

@@ -1,10 +1,11 @@
 import {
   Dialog
-} from "../chunk-CVRGXNMT.js";
+} from "../chunk-22326A76.js";
 import "../chunk-34OQDUQR.js";
 import "../chunk-U7N2PWMO.js";
-import "../chunk-O3DNDMV3.js";
+import "../chunk-ZOFENAZJ.js";
 import "../chunk-LDBWASUA.js";
+import "../chunk-LQY4RKWI.js";
 import "../chunk-2NMEKWO5.js";
 export {
   Dialog

package/dist/atoms/drawer.cjs

@@ -132,12 +132,75 @@ var import_themes = require("@radix-ui/themes");
 var import_themes2 = require("@radix-ui/themes");
 
 // src/atoms/icon-button.tsx
+var import_react2 = require("react");
+var import_clsx = require("clsx");
 var import_themes3 = require("@radix-ui/themes");
 
-// src/atoms/drawer.tsx
+// src/utils/convert-button-size.ts
+var convertSizeStr = (size) => {
+  switch (size) {
+    case "small":
+      return "1";
+    case "medium":
+      return "2";
+    case "large":
+      return "3";
+    default:
+      return "2";
+  }
+};
+var convertSizeResponse = (size) => {
+  if (typeof size === "string" || typeof size === "undefined") {
+    return convertSizeStr(size);
+  }
+  const radixSize = {};
+  let key = "initial";
+  for (key in size) {
+    radixSize[key] = convertSizeStr(size[key]);
+  }
+  return radixSize;
+};
+var convertSize = (size) => {
+  if (typeof size === "string") {
+    return convertSizeStr(size);
+  }
+  return convertSizeResponse(size);
+};
+
+// src/atoms/icon-button.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var IconButton = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
+    const radixSize = (0, import_react2.useMemo)(() => {
+      return convertSize(size);
+    }, [size]);
+    const radixVariant = (0, import_react2.useMemo)(() => {
+      if (variant === "transparent") return "ghost";
+      return variant;
+    }, [variant]);
+    const className = (0, import_react2.useMemo)(() => {
+      return (0, import_clsx.clsx)(props.className, { transparent: variant === "transparent" });
+    }, [props.className, variant]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_themes3.IconButton,
+      __spreadProps(__spreadValues({
+        style,
+        variant: radixVariant
+      }, restProps), {
+        className,
+        ref,
+        size: radixSize
+      })
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/atoms/drawer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Root2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Root, __spreadValues({}, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog.Root, __spreadValues({}, props));
 }
 var preventDefault = (e) => {
   e.preventDefault();
@@ -160,15 +223,15 @@ function Content2(props) {
   const desktopHeaderSize = 64;
   const separatorSize = 1;
   const { drawerContainerRef } = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Portal, { container: drawerContainerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_themes4.Theme, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Overlay, { className: "DrawerOverlay" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog.Portal, { container: drawerContainerRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes4.Theme, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog.Overlay, { className: "DrawerOverlay" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       Dialog.Content,
       __spreadProps(__spreadValues({
         className: `DrawerContent ${position} ${className || ""}`,
         onPointerDownOutside: preventDefault
       }, rest), {
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           import_themes4.Grid,
           {
             height: "100%",
@@ -178,12 +241,12 @@ function Content2(props) {
               sm: `${desktopHeaderSize}px ${separatorSize}px calc(100% - ${desktopHeaderSize + separatorSize}px)`
             },
             children: [
-              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_themes.Flex, { align: "center", gap: "3", px: { initial: "4", md: "6" }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes3.IconButton, { color: "gray", variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ClosePanelArrowIcon, {}) }) }),
+              !hideHeader && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes.Flex, { align: "center", gap: "3", px: { initial: "4", md: "6" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconButton, { color: "gray", variant: "outline", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClosePanelArrowIcon, {}) }) }),
                   HeaderContent
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_themes2.Separator, { orientation: "horizontal", size: "4" })
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes2.Separator, { orientation: "horizontal", size: "4" })
               ] }),
               children
             ]
@@ -194,7 +257,7 @@ function Content2(props) {
   ] }) });
 }
 function Trigger2(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Trigger, __spreadValues({ asChild: true }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog.Trigger, __spreadValues({ asChild: true }, props));
 }
 var Drawer = {
   Root: Dialog.Root,

package/dist/atoms/drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/atoms/drawer.tsx","../../src/theme/portal-provider.tsx","../../src/icons/close-panel-arrow.tsx","../../src/atoms/flex.tsx","../../src/atoms/separator.tsx","../../src/atoms/icon-button.tsx"],"sourcesContent":["import React from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Grid, Theme } from '@radix-ui/themes';\nimport { usePortalContainer } from '@/theme/portal-provider';\nimport { ClosePanelArrowIcon } from '../icons/close-panel-arrow';\nimport { Flex } from './flex';\nimport { Separator } from './separator';\nimport { IconButton } from './icon-button';\nimport { ToastContainer } from 'react-toastify';\n\nexport function Root(props: Dialog.DialogProps): React.ReactNode {\n  return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n  /** Drawer가 붙는 위치, 기본값 right */\n  position?: 'left' | 'right' | 'bottom' | 'top';\n  HeaderContent?: React.ReactNode;\n  hideHeader?: boolean;\n};\n\nconst preventDefault: Dialog.DialogContentProps['onPointerDownOutside'] = (\n  e\n) => {\n  e.preventDefault();\n};\n\nexport function Content(props: ContentProps): React.ReactNode {\n  const {\n    position = 'right',\n    className,\n    children,\n    HeaderContent,\n    hideHeader,\n    ...rest\n  } = props;\n\n  const mobileHeaderSize = 48;\n  const desktopHeaderSize = 64;\n  const separatorSize = 1;\n  const { drawerContainerRef } = usePortalContainer();\n\n  return (\n    <Dialog.Portal container={drawerContainerRef.current}>\n      <Theme>\n        <Dialog.Overlay className=\"DrawerOverlay\" />\n        <Dialog.Content\n          className={`DrawerContent ${position} ${className || ''}`}\n          onPointerDownOutside={preventDefault}\n          {...rest}\n        >\n          <Grid\n            height=\"100%\"\n            overflow=\"hidden\"\n            rows={hideHeader ? \"1\" :{\n              initial: `${mobileHeaderSize}px ${separatorSize}px calc(100% - ${mobileHeaderSize + separatorSize}px)`,\n              sm: `${desktopHeaderSize}px ${separatorSize}px calc(100% - ${desktopHeaderSize + separatorSize}px)`,\n            }}\n          >\n            {!hideHeader && (\n              <>\n                <Flex align=\"center\" gap=\"3\" px={{ initial: '4', md: '6' }}>\n                  <Dialog.Close asChild>\n                    <IconButton color=\"gray\" variant=\"outline\">\n                      <ClosePanelArrowIcon />\n                    </IconButton>\n                  </Dialog.Close>\n                  {HeaderContent}\n                </Flex>\n                <Separator orientation=\"horizontal\" size=\"4\" />\n              </>\n            )}\n            {children}\n          </Grid>\n        </Dialog.Content> \n      </Theme>\n    </Dialog.Portal>\n  );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {\n  return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n  Root: Dialog.Root,\n  Trigger,\n  Content,\n  Close: Dialog.Close,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n","import React, { createContext, useContext, useRef } from 'react';\n\ninterface PortalProviderProps {\n  children: React.ReactNode;\n}\n\ninterface PortalState {\n  dialogContainerRef: React.RefObject<HTMLDivElement | null>;\n  drawerContainerRef: React.RefObject<HTMLDivElement | null>;\n}\n\nconst PortalContext = createContext<PortalState>(\n  null as unknown as PortalState\n);\n\nexport function PortalProvider({\n  children,\n}: PortalProviderProps): React.ReactNode {\n  const dialogContainerRef = useRef<HTMLDivElement | null>(null);\n  const drawerContainerRef = useRef<HTMLDivElement | null>(null);\n\n  return (\n    <PortalContext.Provider value={{ dialogContainerRef, drawerContainerRef }}>\n      {children}\n      <div className=\"drawer-portal-container\" ref={drawerContainerRef} />\n      <div className=\"dialog-portal-container\" ref={dialogContainerRef} />\n    </PortalContext.Provider>\n  );\n}\n\nexport const usePortalContainer = (): PortalState => {\n  try {\n    const state = useContext(PortalContext);\n    return state;\n  } catch (error) {\n    throw new Error('PortalProvider not found');\n  }\n};\n\nexport default PortalProvider;\n","import * as React from 'react';\nimport type { IconProps } from './types';\n\nexport const ClosePanelArrowIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ color = 'currentColor', ...props }, forwardedRef) => {\n    return (\n      <svg\n        fill=\"none\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        width=\"16\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...props}\n        ref={forwardedRef}\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M3.19315 2.16529C3.43937 1.93445 3.82611 1.94693 4.05695 2.19315L9.87499 7.15624C9.87499 7.15624 10.4479 7.72916 9.87499 8.30207L4.05695 12.8068C3.82611 13.0531 3.43937 13.0656 3.19315 12.8347C2.94693 12.6038 2.93445 12.2171 3.16529 11.9709L8.72916 7.72916L3.16529 3.02908C2.93445 2.78285 2.94693 2.39612 3.19315 2.16529Z\"\n          fill={color}\n          fillRule=\"evenodd\"\n        />\n        <path\n          clipRule=\"evenodd\"\n          d=\"M12.1733 2.58667C12.1733 2.26266 11.9107 2 11.5867 2C11.2627 2 11 2.26266 11 2.58667V12.7201C11 13.044 11.2627 13.3067 11.5867 13.3067C11.9107 13.3067 12.1733 13.044 12.1733 12.7201V2.58667Z\"\n          fill={color}\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    );\n  }\n);\n\nClosePanelArrowIcon.displayName = 'ArrowDownIcon';\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","export { Separator, type SeparatorProps } from '@radix-ui/themes';\n","export { IconButton, type IconButtonProps } from '@radix-ui/themes';\n"],"mappings":"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","names":["Content","Root","Trigger","import_themes","React","import_jsx_runtime","import_themes","import_themes","import_jsx_runtime","Root","Content","Trigger"]}
+{"version":3,"sources":["../../src/atoms/drawer.tsx","../../src/theme/portal-provider.tsx","../../src/icons/close-panel-arrow.tsx","../../src/atoms/flex.tsx","../../src/atoms/separator.tsx","../../src/atoms/icon-button.tsx","../../src/utils/convert-button-size.ts"],"sourcesContent":["import React from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { Grid, Theme } from '@radix-ui/themes';\nimport { usePortalContainer } from '@/theme/portal-provider';\nimport { ClosePanelArrowIcon } from '../icons/close-panel-arrow';\nimport { Flex } from './flex';\nimport { Separator } from './separator';\nimport { IconButton } from './icon-button';\nimport { ToastContainer } from 'react-toastify';\n\nexport function Root(props: Dialog.DialogProps): React.ReactNode {\n  return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n  /** Drawer가 붙는 위치, 기본값 right */\n  position?: 'left' | 'right' | 'bottom' | 'top';\n  HeaderContent?: React.ReactNode;\n  hideHeader?: boolean;\n};\n\nconst preventDefault: Dialog.DialogContentProps['onPointerDownOutside'] = (\n  e\n) => {\n  e.preventDefault();\n};\n\nexport function Content(props: ContentProps): React.ReactNode {\n  const {\n    position = 'right',\n    className,\n    children,\n    HeaderContent,\n    hideHeader,\n    ...rest\n  } = props;\n\n  const mobileHeaderSize = 48;\n  const desktopHeaderSize = 64;\n  const separatorSize = 1;\n  const { drawerContainerRef } = usePortalContainer();\n\n  return (\n    <Dialog.Portal container={drawerContainerRef.current}>\n      <Theme>\n        <Dialog.Overlay className=\"DrawerOverlay\" />\n        <Dialog.Content\n          className={`DrawerContent ${position} ${className || ''}`}\n          onPointerDownOutside={preventDefault}\n          {...rest}\n        >\n          <Grid\n            height=\"100%\"\n            overflow=\"hidden\"\n            rows={hideHeader ? \"1\" :{\n              initial: `${mobileHeaderSize}px ${separatorSize}px calc(100% - ${mobileHeaderSize + separatorSize}px)`,\n              sm: `${desktopHeaderSize}px ${separatorSize}px calc(100% - ${desktopHeaderSize + separatorSize}px)`,\n            }}\n          >\n            {!hideHeader && (\n              <>\n                <Flex align=\"center\" gap=\"3\" px={{ initial: '4', md: '6' }}>\n                  <Dialog.Close asChild>\n                    <IconButton color=\"gray\" variant=\"outline\">\n                      <ClosePanelArrowIcon />\n                    </IconButton>\n                  </Dialog.Close>\n                  {HeaderContent}\n                </Flex>\n                <Separator orientation=\"horizontal\" size=\"4\" />\n              </>\n            )}\n            {children}\n          </Grid>\n        </Dialog.Content> \n      </Theme>\n    </Dialog.Portal>\n  );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {\n  return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n  Root: Dialog.Root,\n  Trigger,\n  Content,\n  Close: Dialog.Close,\n  Title: Dialog.Title,\n  Description: Dialog.Description,\n};\n","import React, { createContext, useContext, useRef } from 'react';\n\ninterface PortalProviderProps {\n  children: React.ReactNode;\n}\n\ninterface PortalState {\n  dialogContainerRef: React.RefObject<HTMLDivElement | null>;\n  drawerContainerRef: React.RefObject<HTMLDivElement | null>;\n}\n\nconst PortalContext = createContext<PortalState>(\n  null as unknown as PortalState\n);\n\nexport function PortalProvider({\n  children,\n}: PortalProviderProps): React.ReactNode {\n  const dialogContainerRef = useRef<HTMLDivElement | null>(null);\n  const drawerContainerRef = useRef<HTMLDivElement | null>(null);\n\n  return (\n    <PortalContext.Provider value={{ dialogContainerRef, drawerContainerRef }}>\n      {children}\n      <div className=\"drawer-portal-container\" ref={drawerContainerRef} />\n      <div className=\"dialog-portal-container\" ref={dialogContainerRef} />\n    </PortalContext.Provider>\n  );\n}\n\nexport const usePortalContainer = (): PortalState => {\n  try {\n    const state = useContext(PortalContext);\n    return state;\n  } catch (error) {\n    throw new Error('PortalProvider not found');\n  }\n};\n\nexport default PortalProvider;\n","import * as React from 'react';\nimport type { IconProps } from './types';\n\nexport const ClosePanelArrowIcon = React.forwardRef<SVGSVGElement, IconProps>(\n  ({ color = 'currentColor', ...props }, forwardedRef) => {\n    return (\n      <svg\n        fill=\"none\"\n        height=\"16\"\n        viewBox=\"0 0 16 16\"\n        width=\"16\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        {...props}\n        ref={forwardedRef}\n      >\n        <path\n          clipRule=\"evenodd\"\n          d=\"M3.19315 2.16529C3.43937 1.93445 3.82611 1.94693 4.05695 2.19315L9.87499 7.15624C9.87499 7.15624 10.4479 7.72916 9.87499 8.30207L4.05695 12.8068C3.82611 13.0531 3.43937 13.0656 3.19315 12.8347C2.94693 12.6038 2.93445 12.2171 3.16529 11.9709L8.72916 7.72916L3.16529 3.02908C2.93445 2.78285 2.94693 2.39612 3.19315 2.16529Z\"\n          fill={color}\n          fillRule=\"evenodd\"\n        />\n        <path\n          clipRule=\"evenodd\"\n          d=\"M12.1733 2.58667C12.1733 2.26266 11.9107 2 11.5867 2C11.2627 2 11 2.26266 11 2.58667V12.7201C11 13.044 11.2627 13.3067 11.5867 13.3067C11.9107 13.3067 12.1733 13.044 12.1733 12.7201V2.58667Z\"\n          fill={color}\n          fillRule=\"evenodd\"\n        />\n      </svg>\n    );\n  }\n);\n\nClosePanelArrowIcon.displayName = 'ArrowDownIcon';\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","export { Separator, type SeparatorProps } from '@radix-ui/themes';\n","import React, { forwardRef, useMemo } from 'react';\nimport { clsx } from 'clsx';\nimport { IconButton as RadixIconButton } from '@radix-ui/themes';\nimport { convertSize } from '../utils/convert-button-size';\nimport type { ButtonProps } from './button.type';\n\nexport type IconButtonProps = ButtonProps;\nexport const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref): React.ReactNode => {\n    const { size, style, variant, ...restProps } = props;\n\n    const radixSize = useMemo(() => {\n      return convertSize(size);\n    }, [size]);\n\n    const radixVariant = useMemo(() => {\n      if (variant === 'transparent') return 'ghost';\n      return variant;\n    }, [variant]);\n\n    const className = useMemo(() => {\n      return clsx(props.className, { transparent: variant === 'transparent' });\n    }, [props.className, variant]);\n\n    return (\n      <RadixIconButton\n        style={style}\n        variant={radixVariant}\n        {...restProps}\n        className={className}\n        ref={ref}\n        size={radixSize}\n      />\n    );\n  }\n);\n\nIconButton.displayName = 'IconButton';\n","import { type ButtonProps as RadixButtonProps } from '@radix-ui/themes';\nimport type { Breakpoint } from '@radix-ui/themes/props';\nimport type { ButtonProps } from '../atoms/button.type';\n\nexport const convertSizeStr = (\n  size: ButtonProps['size']\n): '1' | '2' | '3' | '4' => {\n  switch (size) {\n    case 'small':\n      return '1';\n    case 'medium':\n      return '2';\n    case 'large':\n      return '3';\n    default:\n      return '2';\n  }\n};\n\nexport const convertSizeResponse = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string' || typeof size === 'undefined') {\n    return convertSizeStr(size);\n  }\n  const radixSize: RadixButtonProps['size'] = {};\n  let key: Breakpoint = 'initial';\n  for (key in size) {\n    radixSize[key] = convertSizeStr(size[key]);\n  }\n  return radixSize;\n};\n\nexport const convertSize = (\n  size: ButtonProps['size']\n): RadixButtonProps['size'] => {\n  if (typeof size === 'string') {\n    return convertSizeStr(size);\n  }\n  return convertSizeResponse(size);\n};\n"],"mappings":"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","names":["Content","Root","Trigger","import_themes","React","import_jsx_runtime","import_themes","import_react","import_themes","import_jsx_runtime","RadixIconButton","import_jsx_runtime","Root","Content","Trigger"]}

package/dist/atoms/drawer.js

@@ -3,12 +3,13 @@ import {
   Drawer,
   Root,
   Trigger
-} from "../chunk-RHZT4IHH.js";
+} from "../chunk-ZMHUWLB2.js";
 import "../chunk-DDUKEE5E.js";
 import "../chunk-HYITAA4J.js";
 import "../chunk-U7N2PWMO.js";
-import "../chunk-O3DNDMV3.js";
+import "../chunk-ZOFENAZJ.js";
 import "../chunk-25HMMI7R.js";
+import "../chunk-LQY4RKWI.js";
 import "../chunk-2NMEKWO5.js";
 export {
   Content,