@intlayer/design-system 5.0.6 → 5.1.0

package/dist/components/PressableSpan/PressableSpan.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PressableSpan.mjs","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  useState,\n  useRef,\n  useCallback,\n  type FC,\n  type MouseEventHandler,\n  type HTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\ntype PressableDivProps = {\n  onPress: () => void;\n  onClickOutside?: () => void;\n  pressDuration?: number;\n  isSelecting?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const PressableSpan: FC<PressableDivProps> = ({\n  children,\n  onPress: onSelect,\n  onClickOutside: onUnselect,\n  pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n  isSelecting: isSelectingProp,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n  const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n  const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleOnLongPress = () => {\n    setIsSelectingState(true);\n    onSelect();\n  };\n\n  const startPressTimer = () => {\n    pressTimerRef.current = setTimeout(() => {\n      handleOnLongPress();\n    }, pressDuration);\n  };\n\n  const clearPressTimer = () => {\n    if (pressTimerRef.current) {\n      clearTimeout(pressTimerRef.current);\n      pressTimerRef.current = null;\n    }\n  };\n\n  const handleMouseDown = () => {\n    clearPressTimer(); // Ensure any previous timer is cleared\n    startPressTimer();\n  };\n\n  const handleMouseUp = () => {\n    clearPressTimer();\n  };\n\n  // Use useCallback to ensure the function identity remains stable\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        setIsSelectingState(false);\n        onUnselect?.();\n      }\n    },\n    [onUnselect]\n  );\n\n  useEffect(() => {\n    // Attach click outside listener\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      // Cleanup\n      document.removeEventListener('mousedown', handleClickOutside);\n      // clearPressTimer(); // Ensure to clear the timer when component unmounts\n    };\n  }, [handleClickOutside]);\n\n  const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isSelectingState) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleOnBlur = () => {\n    // Stop editing when the element loses focus\n    setIsSelectingState(false);\n  };\n\n  return (\n    <span\n      className={cn(\n        'inline cursor-pointer select-none rounded-md outline outline-2 outline-offset-4 outline-transparent transition-all delay-100 duration-200',\n        (isSelectingProp ?? isSelectingState)\n          ? 'outline-inherit'\n          : 'hover:outline-inherit'\n      )}\n      role=\"button\"\n      tabIndex={0}\n      onKeyUp={() => null}\n      onClick={handleOnClick}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseUp}\n      onTouchStart={handleMouseDown}\n      onTouchEnd={handleMouseUp}\n      onTouchCancel={handleMouseUp}\n      onBlur={handleOnBlur}\n      ref={divRef}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["jsx"],"mappings":";;;;AAaA,MAAM,gCAAgC;AAS/B,MAAM,gBAAuC,CAAC;AAAA,EACnD;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACE,QAAA,SAAS,OAAuB,IAAI;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,eAAe;AAClE,QAAA,gBAAgB,OAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,wBAAoB,IAAI;AACf,aAAA;AAAA,EACX;AAEA,QAAM,kBAAkB,MAAM;AACd,kBAAA,UAAU,WAAW,MAAM;AACrB,wBAAA;AAAA,OACjB,aAAa;AAAA,EAClB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAAA;AAAA,EAE5B;AAEA,QAAM,kBAAkB,MAAM;AACZ,oBAAA;AACA,oBAAA;AAAA,EAClB;AAEA,QAAM,gBAAgB,MAAM;AACV,oBAAA;AAAA,EAClB;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAsB;AACjB,UAAA,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,4BAAoB,KAAK;AACZ,qBAAA;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,YAAU,MAAM;AAEL,aAAA,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEF,eAAA,oBAAoB,aAAa,kBAAkB;AAAA,IAE9D;AAAA,EAAA,GACC,CAAC,kBAAkB,CAAC;AAEjB,QAAA,gBAAmD,CAAC,MAAM;AAC9D,QAAI,kBAAkB;AACpB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IAAA;AAAA,EAEtB;AAEA,QAAM,eAAe,MAAM;AAEzB,wBAAoB,KAAK;AAAA,EAC3B;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACC,mBAAmB,mBAChB,oBACA;AAAA,MACN;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MACf,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,KAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"PressableSpan.mjs","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  useState,\n  useRef,\n  useCallback,\n  type FC,\n  type MouseEventHandler,\n  type HTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\ntype PressableDivProps = {\n  onPress: () => void;\n  onClickOutside?: () => void;\n  pressDuration?: number;\n  isSelecting?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const PressableSpan: FC<PressableDivProps> = ({\n  children,\n  onPress: onSelect,\n  onClickOutside: onUnselect,\n  pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n  isSelecting: isSelectingProp,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n  const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n  const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleOnLongPress = () => {\n    setIsSelectingState(true);\n    onSelect();\n  };\n\n  const startPressTimer = () => {\n    pressTimerRef.current = setTimeout(() => {\n      handleOnLongPress();\n    }, pressDuration);\n  };\n\n  const clearPressTimer = () => {\n    if (pressTimerRef.current) {\n      clearTimeout(pressTimerRef.current);\n      pressTimerRef.current = null;\n    }\n  };\n\n  const handleMouseDown = () => {\n    clearPressTimer(); // Ensure any previous timer is cleared\n    startPressTimer();\n  };\n\n  const handleMouseUp = () => {\n    clearPressTimer();\n  };\n\n  // Use useCallback to ensure the function identity remains stable\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        setIsSelectingState(false);\n        onUnselect?.();\n      }\n    },\n    [onUnselect]\n  );\n\n  useEffect(() => {\n    // Attach click outside listener\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      // Cleanup\n      document.removeEventListener('mousedown', handleClickOutside);\n      // clearPressTimer(); // Ensure to clear the timer when component unmounts\n    };\n  }, [handleClickOutside]);\n\n  const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isSelectingState) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleOnBlur = () => {\n    // Stop editing when the element loses focus\n    setIsSelectingState(false);\n  };\n\n  return (\n    <span\n      className={cn(\n        'inline cursor-pointer select-none rounded-md outline outline-2 outline-offset-4 outline-transparent transition-all delay-100 duration-200',\n        (isSelectingProp ?? isSelectingState)\n          ? 'outline-inherit'\n          : 'hover:outline-inherit'\n      )}\n      role=\"button\"\n      tabIndex={0}\n      onKeyUp={() => null}\n      onClick={handleOnClick}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseUp}\n      onTouchStart={handleMouseDown}\n      onTouchEnd={handleMouseUp}\n      onTouchCancel={handleMouseUp}\n      onBlur={handleOnBlur}\n      ref={divRef}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;AAaA,MAAM,gCAAgC;AAS/B,MAAM,gBAAuC,CAAC;AAAA,EACnD;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACE,QAAA,SAAS,OAAuB,IAAI;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,eAAe;AAClE,QAAA,gBAAgB,OAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,wBAAoB,IAAI;AACf,aAAA;AAAA,EACX;AAEA,QAAM,kBAAkB,MAAM;AACd,kBAAA,UAAU,WAAW,MAAM;AACrB,wBAAA;AAAA,OACjB,aAAa;AAAA,EAClB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAAA;AAAA,EAE5B;AAEA,QAAM,kBAAkB,MAAM;AACZ,oBAAA;AACA,oBAAA;AAAA,EAClB;AAEA,QAAM,gBAAgB,MAAM;AACV,oBAAA;AAAA,EAClB;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAsB;AACjB,UAAA,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,4BAAoB,KAAK;AACZ,qBAAA;AAAA,MAAA;AAAA,IAEjB;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,YAAU,MAAM;AAEL,aAAA,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEF,eAAA,oBAAoB,aAAa,kBAAkB;AAAA,IAE9D;AAAA,EAAA,GACC,CAAC,kBAAkB,CAAC;AAEjB,QAAA,gBAAmD,CAAC,MAAM;AAC9D,QAAI,kBAAkB;AACpB,QAAE,eAAe;AACjB,QAAE,gBAAgB;AAAA,IAAA;AAAA,EAEtB;AAEA,QAAM,eAAe,MAAM;AAEzB,wBAAoB,KAAK;AAAA,EAC3B;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACC,mBAAmB,mBAChB,oBACA;AAAA,MACN;AAAA,MACA,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MACf,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,KAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

package/dist/components/ProfileDropDown/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../jsx-runtime-CgFM7lM3.cjs");
+const jsxRuntime = require("react/jsx-runtime");
 const components_Avatar_index = require("../Avatar/index.cjs");
 const components_Container_index = require("../Container/index.cjs");
 const components_DropDown_index = require("../DropDown/index.cjs");
@@ -8,16 +8,16 @@ const DROPDOWN_IDENTIFIER = "profile";
 const ProfileDropDown = ({
   children,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(components_DropDown_index.DropDown, { identifier: DROPDOWN_IDENTIFIER, children: [
-  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_DropDown_index.DropDown.Trigger, { identifier: DROPDOWN_IDENTIFIER, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Avatar_index.Avatar, { ...props }) }),
-  /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+}) => /* @__PURE__ */ jsxRuntime.jsxs(components_DropDown_index.DropDown, { identifier: DROPDOWN_IDENTIFIER, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(components_DropDown_index.DropDown.Trigger, { identifier: DROPDOWN_IDENTIFIER, children: /* @__PURE__ */ jsxRuntime.jsx(components_Avatar_index.Avatar, { ...props }) }),
+  /* @__PURE__ */ jsxRuntime.jsx(
     components_DropDown_index.DropDown.Panel,
     {
       identifier: DROPDOWN_IDENTIFIER,
       isFocusable: true,
       isOverable: true,
       align: "end",
-      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Container_index.Container, { className: "min-w-[100px] p-6", children })
+      children: /* @__PURE__ */ jsxRuntime.jsx(components_Container_index.Container, { className: "min-w-[100px] p-6", children })
     }
   )
 ] });

package/dist/components/ProfileDropDown/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/ProfileDropDown/index.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { type AvatarProps, Avatar } from '../Avatar';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\n\ntype ProfileDropDownProps = PropsWithChildren<AvatarProps>;\n\nconst DROPDOWN_IDENTIFIER = 'profile';\n\nexport const ProfileDropDown: FC<ProfileDropDownProps> = ({\n  children,\n  ...props\n}) => (\n  <DropDown identifier={DROPDOWN_IDENTIFIER}>\n    <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n      <Avatar {...props} />\n    </DropDown.Trigger>\n    <DropDown.Panel\n      identifier={DROPDOWN_IDENTIFIER}\n      isFocusable\n      isOverable\n      align=\"end\"\n    >\n      <Container className=\"min-w-[100px] p-6\">{children}</Container>\n    </DropDown.Panel>\n  </DropDown>\n);\n"],"names":["jsxs","DropDown","jsx","Avatar","Container"],"mappings":";;;;;;AAOA,MAAM,sBAAsB;AAErB,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,kBAAA,KAACC,0BAAS,UAAA,EAAA,YAAY,qBACpB,UAAA;AAAA,EAACC,2BAAAA,kBAAAA,IAAAD,0BAAA,SAAS,SAAT,EAAiB,YAAY,qBAC5B,UAACC,2BAAAA,kBAAAA,IAAAC,wBAAAA,QAAA,EAAQ,GAAG,MAAA,CAAO,EACrB,CAAA;AAAA,EACAD,2BAAA,kBAAA;AAAA,IAACD,0BAAAA,SAAS;AAAA,IAAT;AAAA,MACC,YAAY;AAAA,MACZ,aAAW;AAAA,MACX,YAAU;AAAA,MACV,OAAM;AAAA,MAEN,UAACC,2BAAA,kBAAA,IAAAE,2BAAA,WAAA,EAAU,WAAU,qBAAqB,SAAS,CAAA;AAAA,IAAA;AAAA,EAAA;AACrD,EACF,CAAA;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/ProfileDropDown/index.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { type AvatarProps, Avatar } from '../Avatar';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\n\ntype ProfileDropDownProps = PropsWithChildren<AvatarProps>;\n\nconst DROPDOWN_IDENTIFIER = 'profile';\n\nexport const ProfileDropDown: FC<ProfileDropDownProps> = ({\n  children,\n  ...props\n}) => (\n  <DropDown identifier={DROPDOWN_IDENTIFIER}>\n    <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n      <Avatar {...props} />\n    </DropDown.Trigger>\n    <DropDown.Panel\n      identifier={DROPDOWN_IDENTIFIER}\n      isFocusable\n      isOverable\n      align=\"end\"\n    >\n      <Container className=\"min-w-[100px] p-6\">{children}</Container>\n    </DropDown.Panel>\n  </DropDown>\n);\n"],"names":["jsxs","DropDown","jsx","Avatar","Container"],"mappings":";;;;;;AAOA,MAAM,sBAAsB;AAErB,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL,MACEA,2BAAA,KAACC,0BAAS,UAAA,EAAA,YAAY,qBACpB,UAAA;AAAA,EAACC,2BAAAA,IAAAD,0BAAA,SAAS,SAAT,EAAiB,YAAY,qBAC5B,UAACC,2BAAAA,IAAAC,wBAAAA,QAAA,EAAQ,GAAG,MAAA,CAAO,EACrB,CAAA;AAAA,EACAD,2BAAA;AAAA,IAACD,0BAAAA,SAAS;AAAA,IAAT;AAAA,MACC,YAAY;AAAA,MACZ,aAAW;AAAA,MACX,YAAU;AAAA,MACV,OAAM;AAAA,MAEN,UAACC,2BAAA,IAAAE,2BAAA,WAAA,EAAU,WAAU,qBAAqB,SAAS,CAAA;AAAA,IAAA;AAAA,EAAA;AACrD,EACF,CAAA;;"}

package/dist/components/ProfileDropDown/index.mjs

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports } from "../../jsx-runtime-DQkoUcjV.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Avatar } from "../Avatar/index.mjs";
 import { Container } from "../Container/index.mjs";
 import { DropDown } from "../DropDown/index.mjs";
@@ -6,16 +6,16 @@ const DROPDOWN_IDENTIFIER = "profile";
 const ProfileDropDown = ({
   children,
   ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(DropDown, { identifier: DROPDOWN_IDENTIFIER, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsx(DropDown.Trigger, { identifier: DROPDOWN_IDENTIFIER, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Avatar, { ...props }) }),
-  /* @__PURE__ */ jsxRuntimeExports.jsx(
+}) => /* @__PURE__ */ jsxs(DropDown, { identifier: DROPDOWN_IDENTIFIER, children: [
+  /* @__PURE__ */ jsx(DropDown.Trigger, { identifier: DROPDOWN_IDENTIFIER, children: /* @__PURE__ */ jsx(Avatar, { ...props }) }),
+  /* @__PURE__ */ jsx(
     DropDown.Panel,
     {
       identifier: DROPDOWN_IDENTIFIER,
       isFocusable: true,
       isOverable: true,
       align: "end",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { className: "min-w-[100px] p-6", children })
+      children: /* @__PURE__ */ jsx(Container, { className: "min-w-[100px] p-6", children })
     }
   )
 ] });

package/dist/components/ProfileDropDown/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/ProfileDropDown/index.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { type AvatarProps, Avatar } from '../Avatar';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\n\ntype ProfileDropDownProps = PropsWithChildren<AvatarProps>;\n\nconst DROPDOWN_IDENTIFIER = 'profile';\n\nexport const ProfileDropDown: FC<ProfileDropDownProps> = ({\n  children,\n  ...props\n}) => (\n  <DropDown identifier={DROPDOWN_IDENTIFIER}>\n    <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n      <Avatar {...props} />\n    </DropDown.Trigger>\n    <DropDown.Panel\n      identifier={DROPDOWN_IDENTIFIER}\n      isFocusable\n      isOverable\n      align=\"end\"\n    >\n      <Container className=\"min-w-[100px] p-6\">{children}</Container>\n    </DropDown.Panel>\n  </DropDown>\n);\n"],"names":["jsxs","jsx"],"mappings":";;;;AAOA,MAAM,sBAAsB;AAErB,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL,MACEA,kCAAA,KAAC,UAAS,EAAA,YAAY,qBACpB,UAAA;AAAA,EAACC,kCAAAA,IAAA,SAAS,SAAT,EAAiB,YAAY,qBAC5B,UAACA,kCAAAA,IAAA,QAAA,EAAQ,GAAG,MAAA,CAAO,EACrB,CAAA;AAAA,EACAA,kCAAA;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,YAAY;AAAA,MACZ,aAAW;AAAA,MACX,YAAU;AAAA,MACV,OAAM;AAAA,MAEN,UAACA,kCAAA,IAAA,WAAA,EAAU,WAAU,qBAAqB,SAAS,CAAA;AAAA,IAAA;AAAA,EAAA;AACrD,EACF,CAAA;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/ProfileDropDown/index.tsx"],"sourcesContent":["import type { FC, PropsWithChildren } from 'react';\nimport { type AvatarProps, Avatar } from '../Avatar';\nimport { Container } from '../Container';\nimport { DropDown } from '../DropDown';\n\ntype ProfileDropDownProps = PropsWithChildren<AvatarProps>;\n\nconst DROPDOWN_IDENTIFIER = 'profile';\n\nexport const ProfileDropDown: FC<ProfileDropDownProps> = ({\n  children,\n  ...props\n}) => (\n  <DropDown identifier={DROPDOWN_IDENTIFIER}>\n    <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n      <Avatar {...props} />\n    </DropDown.Trigger>\n    <DropDown.Panel\n      identifier={DROPDOWN_IDENTIFIER}\n      isFocusable\n      isOverable\n      align=\"end\"\n    >\n      <Container className=\"min-w-[100px] p-6\">{children}</Container>\n    </DropDown.Panel>\n  </DropDown>\n);\n"],"names":[],"mappings":";;;;AAOA,MAAM,sBAAsB;AAErB,MAAM,kBAA4C,CAAC;AAAA,EACxD;AAAA,EACA,GAAG;AACL,MACE,qBAAC,UAAS,EAAA,YAAY,qBACpB,UAAA;AAAA,EAAC,oBAAA,SAAS,SAAT,EAAiB,YAAY,qBAC5B,UAAC,oBAAA,QAAA,EAAQ,GAAG,MAAA,CAAO,EACrB,CAAA;AAAA,EACA;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,YAAY;AAAA,MACZ,aAAW;AAAA,MACX,YAAU;AAAA,MACV,OAAM;AAAA,MAEN,UAAC,oBAAA,WAAA,EAAU,WAAU,qBAAqB,SAAS,CAAA;AAAA,IAAA;AAAA,EAAA;AACrD,EACF,CAAA;"}

package/dist/components/RightDrawer/RightDrawer.cjs

@@ -1,10 +1,10 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../jsx-runtime-CgFM7lM3.cjs");
+const jsxRuntime = require("react/jsx-runtime");
 const lucideReact = require("lucide-react");
-const require$$0 = require("react");
-const hooks_useScrollBlockage_index = require("../../index-Cg-S9ry9.cjs");
+const ReactExports = require("react");
+const hooks_useScrollBlockage_index = require("../../index-BYzBot7l.cjs");
 const hooks_useDevice = require("../../hooks/useDevice.cjs");
 const utils_isElementAtTopAndNotCovered = require("../../utils/isElementAtTopAndNotCovered.cjs");
 const components_Button_Button = require("../Button/Button.cjs");
@@ -22,8 +22,8 @@ const RightDrawer = ({
   onClose
 }) => {
   const { isMobile } = hooks_useDevice.useDevice("md");
-  const panelRef = require$$0.useRef(null);
-  const childrenContainerRef = require$$0.useRef(null);
+  const panelRef = ReactExports.useRef(null);
+  const childrenContainerRef = ReactExports.useRef(null);
   const { close, open, isOpen } = components_RightDrawer_useRightDrawerStore.useRightDrawerStore(
     hooks_useScrollBlockage_index.useShallow((s) => ({
       close: () => s.close(identifier),
@@ -35,7 +35,7 @@ const RightDrawer = ({
     disableScroll: isOpen,
     key: identifier ? `right_drawer_${identifier}` : "right_drawer"
   });
-  require$$0.useEffect(() => {
+  ReactExports.useEffect(() => {
     const handleClickOutside = (event) => {
       try {
         if (!panelRef.current) return;
@@ -54,7 +54,7 @@ const RightDrawer = ({
     window.addEventListener("mousedown", handleClickOutside);
     return () => window.removeEventListener("mousedown", handleClickOutside);
   }, [isOpen, close, onClose, closeOnOutsideClick, identifier]);
-  require$$0.useEffect(() => {
+  ReactExports.useEffect(() => {
     if (isOpenProp !== void 0) {
       if (isOpenProp) {
         open();
@@ -73,16 +73,16 @@ const RightDrawer = ({
       onClose?.();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "fixed right-0 top-0 z-50 flex h-full justify-end", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_MaxWidthSmoother_index.MaxWidthSmoother, { isHidden: !isOpen, align: "right", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed right-0 top-0 z-50 flex h-full justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(components_MaxWidthSmoother_index.MaxWidthSmoother, { isHidden: !isOpen, align: "right", children: /* @__PURE__ */ jsxRuntime.jsxs(
     components_Container_index.Container,
     {
       className: "text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]",
       ref: panelRef,
       roundedSize: "none",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-3 p-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { className: "flex justify-between gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { children: backButton && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 p-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: backButton && /* @__PURE__ */ jsxRuntime.jsx(
               components_Button_Button.Button,
               {
                 variant: "hoverable",
@@ -93,7 +93,7 @@ const RightDrawer = ({
                 children: backButton?.text
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
               components_Button_Button.Button,
               {
                 variant: "hoverable",
@@ -106,10 +106,10 @@ const RightDrawer = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("h2", { className: "flex items-center justify-center text-lg font-bold", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "flex items-center justify-center text-lg font-bold", children: title }),
           header
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { className: "flex h-full flex-col overflow-y-auto p-2", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full flex-col overflow-y-auto p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "flex-1",

package/dist/components/RightDrawer/RightDrawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            <h2 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </h2>\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":["useDevice","useRef","useRightDrawerStore","useShallow","useScrollBlockage","useEffect","isElementAtTopAndNotCovered","jsx","MaxWidthSmoother","jsxs","Container","Button","ChevronLeft","X"],"mappings":"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"}
+{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n  RefObject,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            <h2 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </h2>\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":["useDevice","useRef","useRightDrawerStore","useShallow","useScrollBlockage","useEffect","isElementAtTopAndNotCovered","jsx","MaxWidthSmoother","jsxs","Container","Button","ChevronLeft","X"],"mappings":"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"}

package/dist/components/RightDrawer/RightDrawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,EAAE,EAIR,MAAM,OAAO,CAAC;AAUf,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuI5C,CAAC"}
+{"version":3,"file":"RightDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,EAAE,EAKR,MAAM,OAAO,CAAC;AAUf,KAAK,eAAe,GAAG;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAuI5C,CAAC"}

package/dist/components/RightDrawer/RightDrawer.mjs

@@ -1,8 +1,8 @@
 "use client";
-import { j as jsxRuntimeExports } from "../../jsx-runtime-DQkoUcjV.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, X } from "lucide-react";
 import { useRef, useEffect } from "react";
-import { a as useShallow, u as useScrollBlockage } from "../../index-O_7rYrbW.js";
+import { a as useShallow, u as useScrollBlockage } from "../../index-BCuMWKyy.js";
 import { useDevice } from "../../hooks/useDevice.mjs";
 import { isElementAtTopAndNotCovered } from "../../utils/isElementAtTopAndNotCovered.mjs";
 import { Button } from "../Button/Button.mjs";
@@ -71,16 +71,16 @@ const RightDrawer = ({
       onClose?.();
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fixed right-0 top-0 z-50 flex h-full justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MaxWidthSmoother, { isHidden: !isOpen, align: "right", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "fixed right-0 top-0 z-50 flex h-full justify-end", children: /* @__PURE__ */ jsx(MaxWidthSmoother, { isHidden: !isOpen, align: "right", children: /* @__PURE__ */ jsxs(
     Container,
     {
       className: "text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]",
       ref: panelRef,
       roundedSize: "none",
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-3 p-6", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between gap-3", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: backButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-6", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-3", children: [
+            /* @__PURE__ */ jsx("div", { children: backButton && /* @__PURE__ */ jsx(
               Button,
               {
                 variant: "hoverable",
@@ -91,7 +91,7 @@ const RightDrawer = ({
                 children: backButton?.text
               }
             ) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
               Button,
               {
                 variant: "hoverable",
@@ -104,10 +104,10 @@ const RightDrawer = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "flex items-center justify-center text-lg font-bold", children: title }),
+          /* @__PURE__ */ jsx("h2", { className: "flex items-center justify-center text-lg font-bold", children: title }),
           header
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-full flex-col overflow-y-auto p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col overflow-y-auto p-2", children: /* @__PURE__ */ jsx(
           "div",
           {
             className: "flex-1",

package/dist/components/RightDrawer/RightDrawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            <h2 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </h2>\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":["jsx","jsxs"],"mappings":"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"}
+{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type ReactNode,\n  type FC,\n  useEffect,\n  useRef,\n  type MouseEventHandler,\n  RefObject,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { isElementAtTopAndNotCovered } from '../../utils/isElementAtTopAndNotCovered';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\ntype BackButtonProps = {\n  onBack: () => void;\n  text?: string;\n};\n\ntype RightDrawerProps = {\n  title?: ReactNode;\n  identifier: string;\n  children?: ReactNode;\n  header?: ReactNode;\n  closeOnOutsideClick?: boolean;\n  backButton?: BackButtonProps;\n  isOpen?: boolean;\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const { close, open, isOpen } = useRightDrawerStore(\n    useShallow((s) => ({\n      close: () => s.close(identifier),\n      open: () => s.open(identifier),\n      isOpen: s.isOpen(identifier),\n    }))\n  );\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          close();\n          onClose?.();\n        }\n      } catch (_e) {\n        close();\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, close, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  useEffect(() => {\n    if (isOpenProp !== undefined) {\n      if (isOpenProp) {\n        open();\n      } else {\n        close();\n        onClose?.();\n      }\n    }\n  }, [close, open, onClose, isOpenProp, identifier]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      close();\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed right-0 top-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"text-text dark:text-text-dark relative flex h-screen w-screen flex-col md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant=\"hoverable\"\n                    color=\"text\"\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant=\"hoverable\"\n                  color=\"text\"\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size=\"icon-md\"\n                />\n              </div>\n            </div>\n            <h2 className=\"flex items-center justify-center text-lg font-bold\">\n              {title}\n            </h2>\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex-1\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}