@intlayer/design-system 8.4.4 → 8.4.6

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

@@ -1 +1 @@
-{"version":3,"file":"PressableSpan.mjs","names":[],"sources":["../../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type MouseEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\n/**\n * Props for the PressableSpan component\n */\ntype PressableSpanProps = {\n  /**\n   * Callback function triggered when a long press is detected\n   * @example\n   * ```tsx\n   * <PressableSpan onPress={() => console.log('Long pressed!')}>\n   *   Press and hold me\n   * </PressableSpan>\n   * ```\n   */\n  onPress: () => void;\n\n  /**\n   * Optional callback function triggered when clicking outside the component while it's in selecting state\n   * @example\n   * ```tsx\n   * <PressableSpan\n   *   onPress={() => setIsEditing(true)}\n   *   onClickOutside={() => setIsEditing(false)}\n   * >\n   *   Click outside to deselect\n   * </PressableSpan>\n   * ```\n   */\n  onClickOutside?: () => void;\n\n  /**\n   * Duration in milliseconds for long press detection\n   * @default 400\n   * @example\n   * ```tsx\n   * <PressableSpan pressDuration={800} onPress={() => {}}>\n   *   Longer press required\n   * </PressableSpan>\n   * ```\n   */\n  pressDuration?: number;\n\n  /**\n   * External control for the selecting state\n   * @example\n   * ```tsx\n   * <PressableSpan isSelecting={isEditing} onPress={() => {}}>\n   *   Externally controlled\n   * </PressableSpan>\n   * ```\n   */\n  isSelecting?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/**\n * PressableSpan - An interactive span element that responds to long press gestures\n *\n * A versatile component that detects long press interactions and provides visual feedback.\n * Commonly used for text editing interfaces, selection systems, and interactive content\n * that requires differentiation between quick clicks and intentional long presses.\n *\n * ## Key Features\n * - **Long Press Detection**: Configurable press duration for different interaction patterns\n * - **Visual Feedback**: Smooth outline transitions to indicate interactive and selected states\n * - **Click Outside Detection**: Automatically deselects when clicking outside the component\n * - **Touch Support**: Works seamlessly on both desktop and mobile devices\n * - **Accessible**: Keyboard navigation support and proper ARIA attributes\n *\n * ## Use Cases\n * - Text editing interfaces where long press activates edit mode\n * - Content selection systems with visual feedback\n * - Interactive cards or elements that need press-and-hold activation\n * - Mobile-friendly interfaces requiring long press gestures\n *\n * ## Accessibility\n * - Uses semantic `role=\"button\"` for proper screen reader announcement\n * - Keyboard navigable with `tabIndex={0}`\n * - Focus management with proper blur handling\n * - Visual outline indicators for focus and selection states\n *\n * @example\n * Basic usage with long press detection:\n * ```tsx\n * <PressableSpan onPress={() => setIsEditing(true)}>\n *   Press and hold to edit this text\n * </PressableSpan>\n * ```\n *\n * @example\n * With custom press duration and click outside handling:\n * ```tsx\n * <PressableSpan\n *   pressDuration={600}\n *   onPress={() => setIsEditing(true)}\n *   onClickOutside={() => setIsEditing(false)}\n *   isSelecting={isEditing}\n * >\n *   Custom behavior configuration\n * </PressableSpan>\n * ```\n *\n * @example\n * In a content editing context:\n * ```tsx\n * <PressableSpan\n *   onPress={() => startEditingContent(contentId)}\n *   onClickOutside={() => saveAndExitEditing()}\n *   className=\"prose-text\"\n * >\n *   {editableContent}\n * </PressableSpan>\n * ```\n */\n\nexport const PressableSpan: FC<PressableSpanProps> = ({\n  children,\n  onPress: onSelect,\n  onClickOutside: onUnselect,\n  pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n  isSelecting: isSelectingProp,\n  ...props\n}) => {\n  const elementRef = useRef<HTMLSpanElement>(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 (\n        elementRef.current &&\n        !elementRef.current.contains(event.target as Node)\n      ) {\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  /**\n   * Handle keyboard interactions\n   * - Enter/Space: Trigger long press action immediately\n   * - Escape: Cancel selection/editing state\n   */\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        handleOnLongPress();\n        break;\n      case 'Escape':\n        e.preventDefault();\n        setIsSelectingState(false);\n        onUnselect?.();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const isCurrentlySelecting = isSelectingProp ?? isSelectingState;\n\n  return (\n    <span\n      className={cn(\n        'inline cursor-pointer select-none rounded-md outline outline-2 outline-transparent outline-offset-4 transition-all delay-100 duration-200',\n        isCurrentlySelecting ? 'outline-inherit' : 'hover:outline-inherit'\n      )}\n      role=\"button\"\n      tabIndex={0}\n      aria-pressed={isCurrentlySelecting ? 'true' : 'false'}\n      aria-label={`${isCurrentlySelecting ? 'Selected' : 'Selectable'} content`}\n      onKeyDown={handleKeyDown}\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={elementRef}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":"0KAaA,MAmHa,GAAyC,CACpD,WACA,QAAS,EACT,eAAgB,EAChB,gBAAgB,IAChB,YAAa,EACb,GAAG,KACC,CACJ,IAAM,EAAa,EAAwB,KAAK,CAC1C,CAAC,EAAkB,GAAuB,EAAS,EAAgB,CACnE,EAAgB,EAA6C,KAAK,CAElE,MAA0B,CAC9B,EAAoB,GAAK,CACzB,GAAU,EAGN,MAAwB,CAC5B,EAAc,QAAU,eAAiB,CACvC,GAAmB,EAClB,EAAc,EAGb,MAAwB,CAC5B,AAEE,EAAc,WADd,aAAa,EAAc,QAAQ,CACX,OAItB,MAAwB,CAC5B,GAAiB,CACjB,GAAiB,EAGb,MAAsB,CAC1B,GAAiB,EAIb,EAAqB,EACxB,GAAsB,CAEnB,EAAW,SACX,CAAC,EAAW,QAAQ,SAAS,EAAM,OAAe,GAElD,EAAoB,GAAM,CAC1B,KAAc,GAGlB,CAAC,EAAW,CACb,CAED,OAEE,SAAS,iBAAiB,YAAa,EAAmB,KAE7C,CAEX,SAAS,oBAAoB,YAAa,EAAmB,GAG9D,CAAC,EAAmB,CAAC,CAExB,IAAM,EAAoD,GAAM,CAC1D,IACF,EAAE,gBAAgB,CAClB,EAAE,iBAAiB,GAIjB,MAAqB,CAEzB,EAAoB,GAAM,EAQtB,EAAiB,GAA4C,CACjE,OAAQ,EAAE,IAAV,CACE,IAAK,QACL,IAAK,IACH,EAAE,gBAAgB,CAClB,GAAmB,CACnB,MACF,IAAK,SACH,EAAE,gBAAgB,CAClB,EAAoB,GAAM,CAC1B,KAAc,CACd,MACF,QACE,QAIA,EAAuB,GAAmB,EAEhD,OACE,EAAC,OAAD,CACE,UAAW,EACT,4IACA,EAAuB,kBAAoB,wBAC5C,CACD,KAAK,SACL,SAAU,EACV,eAAc,EAAuB,OAAS,QAC9C,aAAY,GAAG,EAAuB,WAAa,aAAa,UAChE,UAAW,EACX,QAAS,EACT,YAAa,EACb,UAAW,EACX,aAAc,EACd,aAAc,EACd,WAAY,EACZ,cAAe,EACf,OAAQ,EACR,IAAK,EACL,GAAI,EAEH,WACI,CAAA"}
+{"version":3,"file":"PressableSpan.mjs","names":[],"sources":["../../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type MouseEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\n/**\n * Props for the PressableSpan component\n */\ntype PressableSpanProps = {\n  /**\n   * Callback function triggered when a long press is detected\n   * @example\n   * ```tsx\n   * <PressableSpan onPress={() => console.log('Long pressed!')}>\n   *   Press and hold me\n   * </PressableSpan>\n   * ```\n   */\n  onPress: () => void;\n\n  /**\n   * Optional callback function triggered when clicking outside the component while it's in selecting state\n   * @example\n   * ```tsx\n   * <PressableSpan\n   *   onPress={() => setIsEditing(true)}\n   *   onClickOutside={() => setIsEditing(false)}\n   * >\n   *   Click outside to deselect\n   * </PressableSpan>\n   * ```\n   */\n  onClickOutside?: () => void;\n\n  /**\n   * Duration in milliseconds for long press detection\n   * @default 400\n   * @example\n   * ```tsx\n   * <PressableSpan pressDuration={800} onPress={() => {}}>\n   *   Longer press required\n   * </PressableSpan>\n   * ```\n   */\n  pressDuration?: number;\n\n  /**\n   * External control for the selecting state\n   * @example\n   * ```tsx\n   * <PressableSpan isSelecting={isEditing} onPress={() => {}}>\n   *   Externally controlled\n   * </PressableSpan>\n   * ```\n   */\n  isSelecting?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/**\n * PressableSpan - An interactive span element that responds to long press gestures\n *\n * A versatile component that detects long press interactions and provides visual feedback.\n * Commonly used for text editing interfaces, selection systems, and interactive content\n * that requires differentiation between quick clicks and intentional long presses.\n *\n * ## Key Features\n * - **Long Press Detection**: Configurable press duration for different interaction patterns\n * - **Visual Feedback**: Smooth outline transitions to indicate interactive and selected states\n * - **Click Outside Detection**: Automatically deselects when clicking outside the component\n * - **Touch Support**: Works seamlessly on both desktop and mobile devices\n * - **Accessible**: Keyboard navigation support and proper ARIA attributes\n *\n * ## Use Cases\n * - Text editing interfaces where long press activates edit mode\n * - Content selection systems with visual feedback\n * - Interactive cards or elements that need press-and-hold activation\n * - Mobile-friendly interfaces requiring long press gestures\n *\n * ## Accessibility\n * - Uses semantic `role=\"button\"` for proper screen reader announcement\n * - Keyboard navigable with `tabIndex={0}`\n * - Focus management with proper blur handling\n * - Visual outline indicators for focus and selection states\n *\n * @example\n * Basic usage with long press detection:\n * ```tsx\n * <PressableSpan onPress={() => setIsEditing(true)}>\n *   Press and hold to edit this text\n * </PressableSpan>\n * ```\n *\n * @example\n * With custom press duration and click outside handling:\n * ```tsx\n * <PressableSpan\n *   pressDuration={600}\n *   onPress={() => setIsEditing(true)}\n *   onClickOutside={() => setIsEditing(false)}\n *   isSelecting={isEditing}\n * >\n *   Custom behavior configuration\n * </PressableSpan>\n * ```\n *\n * @example\n * In a content editing context:\n * ```tsx\n * <PressableSpan\n *   onPress={() => startEditingContent(contentId)}\n *   onClickOutside={() => saveAndExitEditing()}\n *   className=\"prose-text\"\n * >\n *   {editableContent}\n * </PressableSpan>\n * ```\n */\n\nexport const PressableSpan: FC<PressableSpanProps> = ({\n  children,\n  onPress: onSelect,\n  onClickOutside: onUnselect,\n  pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n  isSelecting: isSelectingProp,\n  ...props\n}) => {\n  const elementRef = useRef<HTMLSpanElement>(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 (\n        elementRef.current &&\n        !elementRef.current.contains(event.target as Node)\n      ) {\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  /**\n   * Handle keyboard interactions\n   * - Enter/Space: Trigger long press action immediately\n   * - Escape: Cancel selection/editing state\n   */\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        handleOnLongPress();\n        break;\n      case 'Escape':\n        e.preventDefault();\n        setIsSelectingState(false);\n        onUnselect?.();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const isCurrentlySelecting = isSelectingProp ?? isSelectingState;\n\n  return (\n    <span\n      className={cn(\n        'inline cursor-pointer select-none rounded-md outline outline-2 outline-transparent outline-offset-4 transition-all delay-100 duration-200',\n        isCurrentlySelecting ? 'outline-inherit' : 'hover:outline-inherit'\n      )}\n      role=\"button\"\n      tabIndex={0}\n      aria-pressed={isCurrentlySelecting ? 'true' : 'false'}\n      aria-label={`${isCurrentlySelecting ? 'Selected' : 'Selectable'} content`}\n      onKeyDown={handleKeyDown}\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={elementRef}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"mappings":";;;;;;;AAaA,MAAM,gCAAgC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHtC,MAAa,iBAAyC,EACpD,UACA,SAAS,UACT,gBAAgB,YAChB,gBAAgB,+BAChB,aAAa,iBACb,GAAG,YACC;CACJ,MAAM,aAAa,OAAwB,KAAK;CAChD,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,gBAAgB;CACzE,MAAM,gBAAgB,OAA6C,KAAK;CAExE,MAAM,0BAA0B;AAC9B,sBAAoB,KAAK;AACzB,YAAU;;CAGZ,MAAM,wBAAwB;AAC5B,gBAAc,UAAU,iBAAiB;AACvC,sBAAmB;KAClB,cAAc;;CAGnB,MAAM,wBAAwB;AAC5B,MAAI,cAAc,SAAS;AACzB,gBAAa,cAAc,QAAQ;AACnC,iBAAc,UAAU;;;CAI5B,MAAM,wBAAwB;AAC5B,mBAAiB;AACjB,mBAAiB;;CAGnB,MAAM,sBAAsB;AAC1B,mBAAiB;;CAInB,MAAM,qBAAqB,aACxB,UAAsB;AACrB,MACE,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,OAAe,EAClD;AACA,uBAAoB,MAAM;AAC1B,iBAAc;;IAGlB,CAAC,WAAW,CACb;AAED,iBAAgB;AAEd,WAAS,iBAAiB,aAAa,mBAAmB;AAE1D,eAAa;AAEX,YAAS,oBAAoB,aAAa,mBAAmB;;IAG9D,CAAC,mBAAmB,CAAC;CAExB,MAAM,iBAAoD,MAAM;AAC9D,MAAI,kBAAkB;AACpB,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;;CAIvB,MAAM,qBAAqB;AAEzB,sBAAoB,MAAM;;;;;;;CAQ5B,MAAM,iBAAiB,MAA4C;AACjE,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;AACH,MAAE,gBAAgB;AAClB,uBAAmB;AACnB;GACF,KAAK;AACH,MAAE,gBAAgB;AAClB,wBAAoB,MAAM;AAC1B,kBAAc;AACd;GACF,QACE;;;CAIN,MAAM,uBAAuB,mBAAmB;AAEhD,QACE,oBAAC,QAAD;EACE,WAAW,GACT,6IACA,uBAAuB,oBAAoB,wBAC5C;EACD,MAAK;EACL,UAAU;EACV,gBAAc,uBAAuB,SAAS;EAC9C,cAAY,GAAG,uBAAuB,aAAa,aAAa;EAChE,WAAW;EACX,SAAS;EACT,aAAa;EACb,WAAW;EACX,cAAc;EACd,cAAc;EACd,YAAY;EACZ,eAAe;EACf,QAAQ;EACR,KAAK;EACL,GAAI;EAEH;EACI"}

package/dist/esm/components/PressableSpan/index.mjs

@@ -1 +1,3 @@
-import{PressableSpan as e}from"./PressableSpan.mjs";export{e as PressableSpan};
+import { PressableSpan } from "./PressableSpan.mjs";
+
+export { PressableSpan };

package/dist/esm/components/RightDrawer/RightDrawer.mjs

@@ -1,2 +1,180 @@
-"use client";import{useGetElementOrWindow as e}from"../../hooks/useGetElementOrWindow.mjs";import{useDevice as t}from"../../hooks/useDevice.mjs";import{useScrollBlockage as n}from"../../hooks/useScrollBlockage/index.mjs";import{Container as r}from"../Container/index.mjs";import{Button as i,ButtonColor as a,ButtonSize as o,ButtonVariant as s}from"../Button/Button.mjs";import{KeyboardShortcut as c}from"../KeyboardShortcut/KeyboardShortcut.mjs";import{Popover as l}from"../Popover/dynamic.mjs";import{MaxWidthSmoother as u}from"../MaxWidthSmoother/index.mjs";import{isElementAtTopAndNotCovered as d}from"./isElementAtTopAndNotCovered.mjs";import{useRightDrawer as f}from"./useRightDrawer.mjs";import{useEffect as p,useRef as m}from"react";import{ChevronLeft as h,X as g}from"lucide-react";import{Fragment as _,jsx as v,jsxs as y}from"react/jsx-runtime";import{useIntlayer as b}from"react-intlayer";import{createPortal as x}from"react-dom";const S=({title:S,identifier:C,children:w,header:T,footer:E,closeOnOutsideClick:D=!0,backButton:O,isOpen:k,onClose:A,container:j})=>{let M=b(`right-drawer`),{isMobile:N}=t(`md`),P=m(null),F=m(null),I=e(j),{open:L,close:R,isOpen:z}=f(),B=z(C),V=B;n({disableScroll:V,key:C?`right_drawer_${C}`:`right_drawer`}),p(()=>{let e=e=>{try{if(!P.current)return;let t=V&&D,n=e.target&&!P.current.contains(e.target),r=d(P.current);(t&&n&&r||!e.target)&&(R(C),A?.())}catch{R(C),A?.()}};return window.addEventListener(`mousedown`,e),()=>window.removeEventListener(`mousedown`,e)},[V,R,A,D,C]);let H=m(A);return p(()=>{H.current=A},[A]),p(()=>{k!==void 0&&k!==B&&(k?L(C):(R(C),H.current?.()))},[k,B,C,L,R]),I?x(v(`div`,{className:`fixed top-0 right-0 z-50 flex h-full justify-end`,children:v(u,{isHidden:!V,align:`right`,children:y(r,{className:`relative flex h-screen w-screen flex-col text-text md:w-[400px]`,ref:P,roundedSize:`none`,children:[y(`div`,{className:`flex shrink-0 flex-col gap-3 px-6 pt-6`,children:[y(`div`,{className:`flex justify-between gap-3`,children:[v(`div`,{children:O&&v(i,{variant:s.HOVERABLE,color:a.TEXT,label:O.text??M.goBack.value,onClick:O.onBack,Icon:h,children:O?.text})}),v(`div`,{children:y(l,{identifier:`close-drawer`,children:[v(i,{variant:s.HOVERABLE,color:a.TEXT,label:`Close`,className:`ml-auto`,onClick:()=>{R(C),A?.()},Icon:g,size:o.ICON_MD}),v(l.Detail,{identifier:`close-drawer`,children:y(`div`,{className:`flex items-center gap-2 p-2`,children:[v(`span`,{className:`whitespace-nowrap text-neutral text-xs`,children:M.closeDrawer}),v(c,{shortcut:`Escape`,size:`sm`,onTriggered:()=>{R(C),A?.()}})]})})]})})]}),S&&v(`h2`,{className:`flex items-center justify-center font-bold text-lg`,children:S}),T]}),v(`div`,{className:`flex min-h-0 flex-1 flex-col overflow-y-auto p-2`,children:v(`div`,{className:`flex flex-1 flex-col outline-none`,onClick:e=>{e.target===e.currentTarget&&N&&(R(C),A?.())},onKeyDown:e=>{e.target===e.currentTarget&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),N&&(R(C),A?.()))},ref:F,role:`button`,tabIndex:0,children:w})}),E&&v(`div`,{className:`shrink-0`,children:E})]})})}),I):v(_,{})};export{S as RightDrawer};
+'use client';
+
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
+import { Container } from "../Container/index.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
+import { Popover } from "../Popover/dynamic.mjs";
+import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
+import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
+import { useRightDrawer } from "./useRightDrawer.mjs";
+import { useEffect, useRef } from "react";
+import { ChevronLeft, X } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+import { createPortal } from "react-dom";
+
+//#region src/components/RightDrawer/RightDrawer.tsx
+const RightDrawer = ({ title, identifier, children, header, footer, closeOnOutsideClick = true, backButton, isOpen: isOpenProp, onClose, container }) => {
+	const content = useIntlayer("right-drawer");
+	const { isMobile } = useDevice("md");
+	const panelRef = useRef(null);
+	const childrenContainerRef = useRef(null);
+	const containerElement = useGetElementOrWindow(container);
+	const { open: openDrawer, close: closeDrawer, isOpen: checkIsOpen } = useRightDrawer();
+	const storeIsOpen = checkIsOpen(identifier);
+	const isOpen = storeIsOpen;
+	useScrollBlockage({
+		disableScroll: isOpen,
+		key: identifier ? `right_drawer_${identifier}` : "right_drawer"
+	});
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			try {
+				if (!panelRef.current) return;
+				const isClickAble = isOpen && closeOnOutsideClick;
+				const isClickOutside = event.target && !panelRef.current.contains(event.target);
+				const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);
+				if (isClickAble && isClickOutside && isAtTopAndVisible || !event.target) {
+					closeDrawer(identifier);
+					onClose?.();
+				}
+			} catch (_e) {
+				closeDrawer(identifier);
+				onClose?.();
+			}
+		};
+		window.addEventListener("mousedown", handleClickOutside);
+		return () => window.removeEventListener("mousedown", handleClickOutside);
+	}, [
+		isOpen,
+		closeDrawer,
+		onClose,
+		closeOnOutsideClick,
+		identifier
+	]);
+	const onCloseRef = useRef(onClose);
+	useEffect(() => {
+		onCloseRef.current = onClose;
+	}, [onClose]);
+	useEffect(() => {
+		if (isOpenProp === void 0) return;
+		if (isOpenProp === storeIsOpen) return;
+		if (isOpenProp) openDrawer(identifier);
+		else {
+			closeDrawer(identifier);
+			onCloseRef.current?.();
+		}
+	}, [
+		isOpenProp,
+		storeIsOpen,
+		identifier,
+		openDrawer,
+		closeDrawer
+	]);
+	const handleSpareSpaceClick = (e) => {
+		if (e.target !== e.currentTarget) return;
+		if (isMobile) {
+			closeDrawer(identifier);
+			onClose?.();
+		}
+	};
+	const handleSpareSpaceKeyDown = (e) => {
+		if (e.target !== e.currentTarget) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			if (isMobile) {
+				closeDrawer(identifier);
+				onClose?.();
+			}
+		}
+	};
+	if (!containerElement) return /* @__PURE__ */ jsx(Fragment$1, {});
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: "fixed top-0 right-0 z-50 flex h-full justify-end",
+		children: /* @__PURE__ */ jsx(MaxWidthSmoother, {
+			isHidden: !isOpen,
+			align: "right",
+			children: /* @__PURE__ */ jsxs(Container, {
+				className: "relative flex h-screen w-screen flex-col text-text md:w-[400px]",
+				ref: panelRef,
+				roundedSize: "none",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 flex-col gap-3 px-6 pt-6",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex justify-between gap-3",
+								children: [/* @__PURE__ */ jsx("div", { children: backButton && /* @__PURE__ */ jsx(Button, {
+									variant: ButtonVariant.HOVERABLE,
+									color: ButtonColor.TEXT,
+									label: backButton.text ?? content.goBack.value,
+									onClick: backButton.onBack,
+									Icon: ChevronLeft,
+									children: backButton?.text
+								}) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Popover, {
+									identifier: "close-drawer",
+									children: [/* @__PURE__ */ jsx(Button, {
+										variant: ButtonVariant.HOVERABLE,
+										color: ButtonColor.TEXT,
+										label: "Close",
+										className: "ml-auto",
+										onClick: () => {
+											closeDrawer(identifier);
+											onClose?.();
+										},
+										Icon: X,
+										size: ButtonSize.ICON_MD
+									}), /* @__PURE__ */ jsx(Popover.Detail, {
+										identifier: "close-drawer",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "flex items-center gap-2 p-2",
+											children: [/* @__PURE__ */ jsx("span", {
+												className: "whitespace-nowrap text-neutral text-xs",
+												children: content.closeDrawer
+											}), /* @__PURE__ */ jsx(KeyboardShortcut, {
+												shortcut: "Escape",
+												size: "sm",
+												onTriggered: () => {
+													closeDrawer(identifier);
+													onClose?.();
+												}
+											})]
+										})
+									})]
+								}) })]
+							}),
+							title && /* @__PURE__ */ jsx("h2", {
+								className: "flex items-center justify-center font-bold text-lg",
+								children: title
+							}),
+							header
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex min-h-0 flex-1 flex-col overflow-y-auto p-2",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex flex-1 flex-col outline-none",
+							onClick: handleSpareSpaceClick,
+							onKeyDown: handleSpareSpaceKeyDown,
+							ref: childrenContainerRef,
+							role: "button",
+							tabIndex: 0,
+							children
+						})
+					}),
+					footer && /* @__PURE__ */ jsx("div", {
+						className: "shrink-0",
+						children: footer
+					})
+				]
+			})
+		})
+	}), containerElement);
+};
+
+//#endregion
+export { RightDrawer };
 //# sourceMappingURL=RightDrawer.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow } from '@hooks/index';\nimport { useDevice } from '@hooks/useDevice';\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { KeyboardShortcut } from '../KeyboardShortcut';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { Popover } from '../Popover';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawer } from './useRightDrawer';\n\n/**\n * Configuration for the back button functionality in the RightDrawer\n *\n * @interface BackButtonProps\n */\ntype BackButtonProps = {\n  /** Callback function triggered when the back button is clicked */\n  onBack: () => void;\n  /** Optional custom text for the back buttoDefaults to \"Go back\" if not provided */\n  text?: string;\n};\n\n/**\n * Props configuration for the RightDrawer component\n *\n * @interface RightDrawerProps\n */\ntype RightDrawerProps = {\n  /**\n   * Title displayed in the drawer header\n   */\n  title?: ReactNode;\n\n  /**\n   * Unique identifier for the drawer instancRequired for store management\n   */\n  identifier: string;\n\n  /** The content to be displayed inside the drawer */\n  children?: ReactNode;\n\n  /**\n   * Optional header content displayed below the title\n   */\n  header?: ReactNode;\n\n  /**\n   * Optional footer content pinned to the bottom of the drawer\n   */\n  footer?: ReactNode;\n\n  /**\n   * Whether the drawer should close when clicking outside of it\n   * @default true\n   */\n  closeOnOutsideClick?: boolean;\n\n  /**\n   * Configuration for an optional back button in the drawer header\n   */\n  backButton?: BackButtonProps;\n\n  /**\n   * External control for the open statWhen provided, overrides internal store state\n   */\n  isOpen?: boolean;\n\n  /**\n   * Callback function triggered when the drawer is closed\n   */\n  onClose?: () => void;\n\n  /**\n   * Optional container to render the drawer into.\n   * If not provided, it will be rendered into the body.\n   */\n  container?: HTMLElement;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  footer,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n  container,\n}) => {\n  const content = useIntlayer('right-drawer');\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const containerElement = useGetElementOrWindow(container);\n\n  const {\n    open: openDrawer,\n    close: closeDrawer,\n    isOpen: checkIsOpen,\n  } = useRightDrawer();\n  const storeIsOpen = checkIsOpen(identifier);\n  const isOpen = storeIsOpen;\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  // Handle Click Outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        const isClickAble = isOpen && closeOnOutsideClick;\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          closeDrawer(identifier);\n          onClose?.();\n        }\n      } catch (_e) {\n        closeDrawer(identifier);\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, closeDrawer, onClose, closeOnOutsideClick, identifier]);\n\n  const onCloseRef = useRef(onClose);\n  useEffect(() => {\n    onCloseRef.current = onClose;\n  }, [onClose]);\n\n  useEffect(() => {\n    if (isOpenProp === undefined) return;\n    if (isOpenProp === storeIsOpen) return;\n\n    if (isOpenProp) {\n      openDrawer(identifier);\n    } else {\n      closeDrawer(identifier);\n      onCloseRef.current?.();\n    }\n  }, [isOpenProp, storeIsOpen, identifier, openDrawer, closeDrawer]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n    if (isMobile) {\n      closeDrawer(identifier);\n      onClose?.();\n    }\n  };\n\n  // Handle Keyboard on Spare Space (Linter Fix)\n  const handleSpareSpaceKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n    if (e.target !== e.currentTarget) return;\n\n    // Allow closing via Enter or Space if focused on the spare area\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (isMobile) {\n        closeDrawer(identifier);\n        onClose?.();\n      }\n    }\n  };\n\n  if (!containerElement) return <></>;\n\n  return createPortal(\n    <div className=\"fixed top-0 right-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"relative flex h-screen w-screen flex-col text-text md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          {/* Header */}\n          <div className=\"flex shrink-0 flex-col gap-3 px-6 pt-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.TEXT}\n                    label={backButton.text ?? content.goBack.value}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Popover identifier=\"close-drawer\">\n                  <Button\n                    variant={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.TEXT}\n                    label=\"Close\"\n                    className=\"ml-auto\"\n                    onClick={() => {\n                      closeDrawer(identifier);\n                      onClose?.();\n                    }}\n                    Icon={X}\n                    size={ButtonSize.ICON_MD}\n                  />\n\n                  <Popover.Detail identifier=\"close-drawer\">\n                    <div className=\"flex items-center gap-2 p-2\">\n                      <span className=\"whitespace-nowrap text-neutral text-xs\">\n                        {content.closeDrawer}\n                      </span>\n                      <KeyboardShortcut\n                        shortcut=\"Escape\"\n                        size=\"sm\"\n                        onTriggered={() => {\n                          closeDrawer(identifier);\n                          onClose?.();\n                        }}\n                      />\n                    </div>\n                  </Popover.Detail>\n                </Popover>\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center font-bold text-lg\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          {/* Body */}\n          <div className=\"flex min-h-0 flex-1 flex-col overflow-y-auto p-2\">\n            {/** biome-ignore lint/a11y/useSemanticElements: This div is used to handle the spare space click and keydown events */}\n            <div\n              className=\"flex flex-1 flex-col outline-none\"\n              onClick={handleSpareSpaceClick}\n              onKeyDown={handleSpareSpaceKeyDown}\n              ref={childrenContainerRef}\n              role=\"button\" // Semantically acts as a button area\n              tabIndex={0} // Makes it focusable to receive key events\n            >\n              {children}\n            </div>\n          </div>\n\n          {/* Footer */}\n          {footer && <div className=\"shrink-0\">{footer}</div>}\n        </Container>\n      </MaxWidthSmoother>\n    </div>,\n    containerElement\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"RightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow } from '@hooks/index';\nimport { useDevice } from '@hooks/useDevice';\nimport { useScrollBlockage } from '@hooks/useScrollBlockage';\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { KeyboardShortcut } from '../KeyboardShortcut';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { Popover } from '../Popover';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawer } from './useRightDrawer';\n\n/**\n * Configuration for the back button functionality in the RightDrawer\n *\n * @interface BackButtonProps\n */\ntype BackButtonProps = {\n  /** Callback function triggered when the back button is clicked */\n  onBack: () => void;\n  /** Optional custom text for the back buttoDefaults to \"Go back\" if not provided */\n  text?: string;\n};\n\n/**\n * Props configuration for the RightDrawer component\n *\n * @interface RightDrawerProps\n */\ntype RightDrawerProps = {\n  /**\n   * Title displayed in the drawer header\n   */\n  title?: ReactNode;\n\n  /**\n   * Unique identifier for the drawer instancRequired for store management\n   */\n  identifier: string;\n\n  /** The content to be displayed inside the drawer */\n  children?: ReactNode;\n\n  /**\n   * Optional header content displayed below the title\n   */\n  header?: ReactNode;\n\n  /**\n   * Optional footer content pinned to the bottom of the drawer\n   */\n  footer?: ReactNode;\n\n  /**\n   * Whether the drawer should close when clicking outside of it\n   * @default true\n   */\n  closeOnOutsideClick?: boolean;\n\n  /**\n   * Configuration for an optional back button in the drawer header\n   */\n  backButton?: BackButtonProps;\n\n  /**\n   * External control for the open statWhen provided, overrides internal store state\n   */\n  isOpen?: boolean;\n\n  /**\n   * Callback function triggered when the drawer is closed\n   */\n  onClose?: () => void;\n\n  /**\n   * Optional container to render the drawer into.\n   * If not provided, it will be rendered into the body.\n   */\n  container?: HTMLElement;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  footer,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n  container,\n}) => {\n  const content = useIntlayer('right-drawer');\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const containerElement = useGetElementOrWindow(container);\n\n  const {\n    open: openDrawer,\n    close: closeDrawer,\n    isOpen: checkIsOpen,\n  } = useRightDrawer();\n  const storeIsOpen = checkIsOpen(identifier);\n  const isOpen = storeIsOpen;\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  // Handle Click Outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        const isClickAble = isOpen && closeOnOutsideClick;\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          closeDrawer(identifier);\n          onClose?.();\n        }\n      } catch (_e) {\n        closeDrawer(identifier);\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, closeDrawer, onClose, closeOnOutsideClick, identifier]);\n\n  const onCloseRef = useRef(onClose);\n  useEffect(() => {\n    onCloseRef.current = onClose;\n  }, [onClose]);\n\n  useEffect(() => {\n    if (isOpenProp === undefined) return;\n    if (isOpenProp === storeIsOpen) return;\n\n    if (isOpenProp) {\n      openDrawer(identifier);\n    } else {\n      closeDrawer(identifier);\n      onCloseRef.current?.();\n    }\n  }, [isOpenProp, storeIsOpen, identifier, openDrawer, closeDrawer]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n    if (isMobile) {\n      closeDrawer(identifier);\n      onClose?.();\n    }\n  };\n\n  // Handle Keyboard on Spare Space (Linter Fix)\n  const handleSpareSpaceKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n    if (e.target !== e.currentTarget) return;\n\n    // Allow closing via Enter or Space if focused on the spare area\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (isMobile) {\n        closeDrawer(identifier);\n        onClose?.();\n      }\n    }\n  };\n\n  if (!containerElement) return <></>;\n\n  return createPortal(\n    <div className=\"fixed top-0 right-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"relative flex h-screen w-screen flex-col text-text md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          {/* Header */}\n          <div className=\"flex shrink-0 flex-col gap-3 px-6 pt-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.TEXT}\n                    label={backButton.text ?? content.goBack.value}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Popover identifier=\"close-drawer\">\n                  <Button\n                    variant={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.TEXT}\n                    label=\"Close\"\n                    className=\"ml-auto\"\n                    onClick={() => {\n                      closeDrawer(identifier);\n                      onClose?.();\n                    }}\n                    Icon={X}\n                    size={ButtonSize.ICON_MD}\n                  />\n\n                  <Popover.Detail identifier=\"close-drawer\">\n                    <div className=\"flex items-center gap-2 p-2\">\n                      <span className=\"whitespace-nowrap text-neutral text-xs\">\n                        {content.closeDrawer}\n                      </span>\n                      <KeyboardShortcut\n                        shortcut=\"Escape\"\n                        size=\"sm\"\n                        onTriggered={() => {\n                          closeDrawer(identifier);\n                          onClose?.();\n                        }}\n                      />\n                    </div>\n                  </Popover.Detail>\n                </Popover>\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center font-bold text-lg\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          {/* Body */}\n          <div className=\"flex min-h-0 flex-1 flex-col overflow-y-auto p-2\">\n            {/** biome-ignore lint/a11y/useSemanticElements: This div is used to handle the spare space click and keydown events */}\n            <div\n              className=\"flex flex-1 flex-col outline-none\"\n              onClick={handleSpareSpaceClick}\n              onKeyDown={handleSpareSpaceKeyDown}\n              ref={childrenContainerRef}\n              role=\"button\" // Semantically acts as a button area\n              tabIndex={0} // Makes it focusable to receive key events\n            >\n              {children}\n            </div>\n          </div>\n\n          {/* Footer */}\n          {footer && <div className=\"shrink-0\">{footer}</div>}\n        </Container>\n      </MaxWidthSmoother>\n    </div>,\n    containerElement\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/RightDrawer/index.mjs

@@ -1 +1,4 @@
-import{drawerManager as e,useRightDrawer as t}from"./useRightDrawer.mjs";import{RightDrawer as n}from"./RightDrawer.mjs";export{n as RightDrawer,e as drawerManager,t as useRightDrawer};
+import { drawerManager, useRightDrawer } from "./useRightDrawer.mjs";
+import { RightDrawer } from "./RightDrawer.mjs";
+
+export { RightDrawer, drawerManager, useRightDrawer };

package/dist/esm/components/RightDrawer/isElementAtTopAndNotCovered.mjs

@@ -1,2 +1,61 @@
-const e=e=>{let t=e.getBoundingClientRect(),n=t.top,r=t.bottom-1;if(n>=0&&r<=window.innerHeight){let n=t.left+t.width/2,r=t.top+10,i=document.elementFromPoint(n,r);return e===i||e.contains(i)}return!1};export{e as isElementAtTopAndNotCovered};
+//#region src/components/RightDrawer/isElementAtTopAndNotCovered.tsx
+/**
+* Utility function to determine if an HTML element is at the top of the viewport and not covered by other elements
+*
+* This function is specifically used by the RightDrawer component to ensure that click-outside
+* detection only triggers when the drawer is actually visible and not obscured by other UI elements.
+*
+* ## Algorithm
+* 1. **Viewport Check**: Verifies the element is within the visible viewport bounds
+* 2. **Coverage Check**: Uses `document.elementFromPoint()` to ensure no other elements are covering the drawer
+* 3. **Center Point Testing**: Tests the center-top point of the element for accurate detection
+*
+* ## Use Cases
+* - Click-outside detection for modal and drawer components
+* - Visibility validation for overlay components
+* - Z-index conflict resolution
+* - Accessibility focus management
+*
+* @param element - The HTML element to check for visibility and coverage
+* @returns Boolean indicating if the element is visible at the top and not covered by other elements
+*
+* @example
+* Basic usage in click-outside detection:
+* ```tsx
+* const handleClickOutside = (event: MouseEvent) => {
+*   if (!drawerRef.current) return;
+*
+*   const isVisible = isElementAtTopAndNotCovered(drawerRef.current);
+*   const isClickOutside = !drawerRef.current.contains(event.target as Node);
+*
+*   if (isVisible && isClickOutside) {
+*     closeDrawer();
+*   }
+* };
+* ```
+*
+* @example
+* Checking multiple overlays:
+* ```tsx
+* const overlays = document.querySelectorAll('.overlay');
+* const visibleOverlays = Array.from(overlays).filter(overlay =>
+*   isElementAtTopAndNotCovered(overlay as HTMLElement)
+* );
+* ```
+*/
+const isElementAtTopAndNotCovered = (element) => {
+	const rect = element.getBoundingClientRect();
+	const elemTop = rect.top;
+	const elemBottom = rect.bottom - 1;
+	if (elemTop >= 0 && elemBottom <= window.innerHeight) {
+		const centerX = rect.left + rect.width / 2;
+		const centerY = rect.top + 10;
+		const topElement = document.elementFromPoint(centerX, centerY);
+		return element === topElement || element.contains(topElement);
+	}
+	return false;
+};
+
+//#endregion
+export { isElementAtTopAndNotCovered };
 //# sourceMappingURL=isElementAtTopAndNotCovered.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"isElementAtTopAndNotCovered.mjs","names":[],"sources":["../../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"sourcesContent":["/**\n * Utility function to determine if an HTML element is at the top of the viewport and not covered by other elements\n *\n * This function is specifically used by the RightDrawer component to ensure that click-outside\n * detection only triggers when the drawer is actually visible and not obscured by other UI elements.\n *\n * ## Algorithm\n * 1. **Viewport Check**: Verifies the element is within the visible viewport bounds\n * 2. **Coverage Check**: Uses `document.elementFromPoint()` to ensure no other elements are covering the drawer\n * 3. **Center Point Testing**: Tests the center-top point of the element for accurate detection\n *\n * ## Use Cases\n * - Click-outside detection for modal and drawer components\n * - Visibility validation for overlay components\n * - Z-index conflict resolution\n * - Accessibility focus management\n *\n * @param element - The HTML element to check for visibility and coverage\n * @returns Boolean indicating if the element is visible at the top and not covered by other elements\n *\n * @example\n * Basic usage in click-outside detection:\n * ```tsx\n * const handleClickOutside = (event: MouseEvent) => {\n *   if (!drawerRef.current) return;\n *\n *   const isVisible = isElementAtTopAndNotCovered(drawerRef.current);\n *   const isClickOutside = !drawerRef.current.contains(event.target as Node);\n *\n *   if (isVisible && isClickOutside) {\n *     closeDrawer();\n *   }\n * };\n * ```\n *\n * @example\n * Checking multiple overlays:\n * ```tsx\n * const overlays = document.querySelectorAll('.overlay');\n * const visibleOverlays = Array.from(overlays).filter(overlay =>\n *   isElementAtTopAndNotCovered(overlay as HTMLElement)\n * );\n * ```\n */\nexport const isElementAtTopAndNotCovered = (element: HTMLElement): boolean => {\n  const rect = element.getBoundingClientRect();\n  const elemTop = rect.top;\n  const elemBottom = rect.bottom - 1; // -1 to avoid the border of the element\n\n  // Check if element is at the top of the viewport\n  const isVisibleAtTop = elemTop >= 0 && elemBottom <= window.innerHeight;\n\n  // Further check if the element is not covered by any other element at the center point of its top boundary\n  if (isVisibleAtTop) {\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + 10; // slight offset from the very top to ensure we're within the element bounds\n    const topElement = document.elementFromPoint(centerX, centerY);\n\n    // Check if our element is the topmost element at these coordinates or a child of the topmost element\n    return element === topElement || element.contains(topElement);\n  }\n\n  return false;\n};\n"],"mappings":"AA4CA,MAAa,EAA+B,GAAkC,CAC5E,IAAM,EAAO,EAAQ,uBAAuB,CACtC,EAAU,EAAK,IACf,EAAa,EAAK,OAAS,EAMjC,GAHuB,GAAW,GAAK,GAAc,OAAO,YAGxC,CAClB,IAAM,EAAU,EAAK,KAAO,EAAK,MAAQ,EACnC,EAAU,EAAK,IAAM,GACrB,EAAa,SAAS,iBAAiB,EAAS,EAAQ,CAG9D,OAAO,IAAY,GAAc,EAAQ,SAAS,EAAW,CAG/D,MAAO"}
+{"version":3,"file":"isElementAtTopAndNotCovered.mjs","names":[],"sources":["../../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"sourcesContent":["/**\n * Utility function to determine if an HTML element is at the top of the viewport and not covered by other elements\n *\n * This function is specifically used by the RightDrawer component to ensure that click-outside\n * detection only triggers when the drawer is actually visible and not obscured by other UI elements.\n *\n * ## Algorithm\n * 1. **Viewport Check**: Verifies the element is within the visible viewport bounds\n * 2. **Coverage Check**: Uses `document.elementFromPoint()` to ensure no other elements are covering the drawer\n * 3. **Center Point Testing**: Tests the center-top point of the element for accurate detection\n *\n * ## Use Cases\n * - Click-outside detection for modal and drawer components\n * - Visibility validation for overlay components\n * - Z-index conflict resolution\n * - Accessibility focus management\n *\n * @param element - The HTML element to check for visibility and coverage\n * @returns Boolean indicating if the element is visible at the top and not covered by other elements\n *\n * @example\n * Basic usage in click-outside detection:\n * ```tsx\n * const handleClickOutside = (event: MouseEvent) => {\n *   if (!drawerRef.current) return;\n *\n *   const isVisible = isElementAtTopAndNotCovered(drawerRef.current);\n *   const isClickOutside = !drawerRef.current.contains(event.target as Node);\n *\n *   if (isVisible && isClickOutside) {\n *     closeDrawer();\n *   }\n * };\n * ```\n *\n * @example\n * Checking multiple overlays:\n * ```tsx\n * const overlays = document.querySelectorAll('.overlay');\n * const visibleOverlays = Array.from(overlays).filter(overlay =>\n *   isElementAtTopAndNotCovered(overlay as HTMLElement)\n * );\n * ```\n */\nexport const isElementAtTopAndNotCovered = (element: HTMLElement): boolean => {\n  const rect = element.getBoundingClientRect();\n  const elemTop = rect.top;\n  const elemBottom = rect.bottom - 1; // -1 to avoid the border of the element\n\n  // Check if element is at the top of the viewport\n  const isVisibleAtTop = elemTop >= 0 && elemBottom <= window.innerHeight;\n\n  // Further check if the element is not covered by any other element at the center point of its top boundary\n  if (isVisibleAtTop) {\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + 10; // slight offset from the very top to ensure we're within the element bounds\n    const topElement = document.elementFromPoint(centerX, centerY);\n\n    // Check if our element is the topmost element at these coordinates or a child of the topmost element\n    return element === topElement || element.contains(topElement);\n  }\n\n  return false;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,+BAA+B,YAAkC;CAC5E,MAAM,OAAO,QAAQ,uBAAuB;CAC5C,MAAM,UAAU,KAAK;CACrB,MAAM,aAAa,KAAK,SAAS;AAMjC,KAHuB,WAAW,KAAK,cAAc,OAAO,aAGxC;EAClB,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;EACzC,MAAM,UAAU,KAAK,MAAM;EAC3B,MAAM,aAAa,SAAS,iBAAiB,SAAS,QAAQ;AAG9D,SAAO,YAAY,cAAc,QAAQ,SAAS,WAAW;;AAG/D,QAAO"}

package/dist/esm/components/RightDrawer/rightDrawer.content.mjs

@@ -1,2 +1,60 @@
-import{t as e}from"intlayer";const t={key:`right-drawer`,content:{goBack:e({en:`Go back`,"en-GB":`Go back`,ru:`Назад`,ja:`戻る`,fr:`Retour`,ko:`뒤로`,zh:`返回`,es:`Volver`,de:`Zurück`,ar:`رجوع`,it:`Indietro`,pt:`Voltar`,hi:`वापस जाएं`,tr:`Geri dön`,pl:`Wstecz`,id:`Kembali`,vi:`Quay lại`,uk:`Назад`}),closeDrawer:e({en:`Close Drawer`,"en-GB":`Close Drawer`,ru:`Закрыть панель`,ja:`引き出しを閉じる`,fr:`Fermer le tiroir`,ko:`서랍 닫기`,zh:`关闭抽屉`,es:`Cerrar cajón`,de:`Schublade schließen`,ar:`إغلاق الدرج`,it:`Chiudi cassetto`,pt:`Fechar gaveta`,hi:`दराज बंद करें`,tr:`Çekmeceyi kapat`,pl:`Zamknij szufladę`,id:`Tutup laci`,vi:`Đóng ngăn kéo`,uk:`Закрити бічну панель`})},title:`Right Drawer`,description:`Localized UI strings for the Right Drawer component (labels: "Go back" and "Close Drawer").`,tags:[`component`,`right-drawer`,`ui`,`localization`]};export{t as default};
+import { t } from "intlayer";
+
+//#region src/components/RightDrawer/rightDrawer.content.ts
+const rightDrawerContent = {
+	key: "right-drawer",
+	content: {
+		goBack: t({
+			en: "Go back",
+			"en-GB": "Go back",
+			ru: "Назад",
+			ja: "戻る",
+			fr: "Retour",
+			ko: "뒤로",
+			zh: "返回",
+			es: "Volver",
+			de: "Zurück",
+			ar: "رجوع",
+			it: "Indietro",
+			pt: "Voltar",
+			hi: "वापस जाएं",
+			tr: "Geri dön",
+			pl: "Wstecz",
+			id: "Kembali",
+			vi: "Quay lại",
+			uk: "Назад"
+		}),
+		closeDrawer: t({
+			en: "Close Drawer",
+			"en-GB": "Close Drawer",
+			ru: "Закрыть панель",
+			ja: "引き出しを閉じる",
+			fr: "Fermer le tiroir",
+			ko: "서랍 닫기",
+			zh: "关闭抽屉",
+			es: "Cerrar cajón",
+			de: "Schublade schließen",
+			ar: "إغلاق الدرج",
+			it: "Chiudi cassetto",
+			pt: "Fechar gaveta",
+			hi: "दराज बंद करें",
+			tr: "Çekmeceyi kapat",
+			pl: "Zamknij szufladę",
+			id: "Tutup laci",
+			vi: "Đóng ngăn kéo",
+			uk: "Закрити бічну панель"
+		})
+	},
+	title: "Right Drawer",
+	description: "Localized UI strings for the Right Drawer component (labels: \"Go back\" and \"Close Drawer\").",
+	tags: [
+		"component",
+		"right-drawer",
+		"ui",
+		"localization"
+	]
+};
+
+//#endregion
+export { rightDrawerContent as default };
 //# sourceMappingURL=rightDrawer.content.mjs.map

package/dist/esm/components/RightDrawer/rightDrawer.content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rightDrawer.content.mjs","names":[],"sources":["../../../../src/components/RightDrawer/rightDrawer.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst rightDrawerContent = {\n  key: 'right-drawer',\n  content: {\n    goBack: t({\n      en: 'Go back',\n      'en-GB': 'Go back',\n      ru: 'Назад',\n      ja: '戻る',\n      fr: 'Retour',\n      ko: '뒤로',\n      zh: '返回',\n      es: 'Volver',\n      de: 'Zurück',\n      ar: 'رجوع',\n      it: 'Indietro',\n      pt: 'Voltar',\n      hi: 'वापस जाएं',\n      tr: 'Geri dön',\n      pl: 'Wstecz',\n      id: 'Kembali',\n      vi: 'Quay lại',\n      uk: 'Назад',\n    }),\n    closeDrawer: t({\n      en: 'Close Drawer',\n      'en-GB': 'Close Drawer',\n      ru: 'Закрыть панель',\n      ja: '引き出しを閉じる',\n      fr: 'Fermer le tiroir',\n      ko: '서랍 닫기',\n      zh: '关闭抽屉',\n      es: 'Cerrar cajón',\n      de: 'Schublade schließen',\n      ar: 'إغلاق الدرج',\n      it: 'Chiudi cassetto',\n      pt: 'Fechar gaveta',\n      hi: 'दराज बंद करें',\n      tr: 'Çekmeceyi kapat',\n      pl: 'Zamknij szufladę',\n      id: 'Tutup laci',\n      vi: 'Đóng ngăn kéo',\n      uk: 'Закрити бічну панель',\n    }),\n  },\n  title: 'Right Drawer',\n  description:\n    'Localized UI strings for the Right Drawer component (labels: \"Go back\" and \"Close Drawer\").',\n  tags: ['component', 'right-drawer', 'ui', 'localization'],\n} satisfies Dictionary;\n\nexport default rightDrawerContent;\n"],"mappings":"6BAEA,MAAM,EAAqB,CACzB,IAAK,eACL,QAAS,CACP,OAAQ,EAAE,CACR,GAAI,UACJ,QAAS,UACT,GAAI,QACJ,GAAI,KACJ,GAAI,SACJ,GAAI,KACJ,GAAI,KACJ,GAAI,SACJ,GAAI,SACJ,GAAI,OACJ,GAAI,WACJ,GAAI,SACJ,GAAI,YACJ,GAAI,WACJ,GAAI,SACJ,GAAI,UACJ,GAAI,WACJ,GAAI,QACL,CAAC,CACF,YAAa,EAAE,CACb,GAAI,eACJ,QAAS,eACT,GAAI,iBACJ,GAAI,WACJ,GAAI,mBACJ,GAAI,QACJ,GAAI,OACJ,GAAI,eACJ,GAAI,sBACJ,GAAI,cACJ,GAAI,kBACJ,GAAI,gBACJ,GAAI,gBACJ,GAAI,kBACJ,GAAI,mBACJ,GAAI,aACJ,GAAI,gBACJ,GAAI,uBACL,CAAC,CACH,CACD,MAAO,eACP,YACE,8FACF,KAAM,CAAC,YAAa,eAAgB,KAAM,eAAe,CAC1D"}
+{"version":3,"file":"rightDrawer.content.mjs","names":[],"sources":["../../../../src/components/RightDrawer/rightDrawer.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst rightDrawerContent = {\n  key: 'right-drawer',\n  content: {\n    goBack: t({\n      en: 'Go back',\n      'en-GB': 'Go back',\n      ru: 'Назад',\n      ja: '戻る',\n      fr: 'Retour',\n      ko: '뒤로',\n      zh: '返回',\n      es: 'Volver',\n      de: 'Zurück',\n      ar: 'رجوع',\n      it: 'Indietro',\n      pt: 'Voltar',\n      hi: 'वापस जाएं',\n      tr: 'Geri dön',\n      pl: 'Wstecz',\n      id: 'Kembali',\n      vi: 'Quay lại',\n      uk: 'Назад',\n    }),\n    closeDrawer: t({\n      en: 'Close Drawer',\n      'en-GB': 'Close Drawer',\n      ru: 'Закрыть панель',\n      ja: '引き出しを閉じる',\n      fr: 'Fermer le tiroir',\n      ko: '서랍 닫기',\n      zh: '关闭抽屉',\n      es: 'Cerrar cajón',\n      de: 'Schublade schließen',\n      ar: 'إغلاق الدرج',\n      it: 'Chiudi cassetto',\n      pt: 'Fechar gaveta',\n      hi: 'दराज बंद करें',\n      tr: 'Çekmeceyi kapat',\n      pl: 'Zamknij szufladę',\n      id: 'Tutup laci',\n      vi: 'Đóng ngăn kéo',\n      uk: 'Закрити бічну панель',\n    }),\n  },\n  title: 'Right Drawer',\n  description:\n    'Localized UI strings for the Right Drawer component (labels: \"Go back\" and \"Close Drawer\").',\n  tags: ['component', 'right-drawer', 'ui', 'localization'],\n} satisfies Dictionary;\n\nexport default rightDrawerContent;\n"],"mappings":";;;AAEA,MAAM,qBAAqB;CACzB,KAAK;CACL,SAAS;EACP,QAAQ,EAAE;GACR,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa,EAAE;GACb,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAa;EAAgB;EAAM;EAAe;CAC1D"}

package/dist/esm/components/RightDrawer/useRightDrawer.mjs

@@ -1,2 +1,65 @@
-"use client";import{useSyncExternalStore as e}from"react";const t=new class{listeners=new Set;drawers={};subscribe=e=>(this.listeners.add(e),()=>{this.listeners.delete(e)});getSnapshot=()=>this.drawers;open=e=>{this.drawers[e]||(this.drawers={...this.drawers,[e]:!0},this.emit())};close=e=>{this.drawers[e]&&(this.drawers={...this.drawers,[e]:!1},this.emit())};set=e=>{let t=!1,n={...this.drawers};for(let[r,i]of Object.entries(e))n[r]!==i&&(n[r]=i,t=!0);t&&(this.drawers=n,this.emit())};emit=()=>{this.listeners.forEach(e=>{e()})}},n=()=>{let n=e(t.subscribe,t.getSnapshot,()=>({}));return{open:t.open,close:t.close,set:t.set,isOpen:e=>!!n[e]}};export{t as drawerManager,n as useRightDrawer};
+'use client';
+
+import { useSyncExternalStore } from "react";
+
+//#region src/components/RightDrawer/useRightDrawer.ts
+var DrawerObservable = class {
+	listeners = /* @__PURE__ */ new Set();
+	drawers = {};
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	getSnapshot = () => {
+		return this.drawers;
+	};
+	open = (key) => {
+		if (this.drawers[key]) return;
+		this.drawers = {
+			...this.drawers,
+			[key]: true
+		};
+		this.emit();
+	};
+	close = (key) => {
+		if (!this.drawers[key]) return;
+		this.drawers = {
+			...this.drawers,
+			[key]: false
+		};
+		this.emit();
+	};
+	set = (states) => {
+		let changed = false;
+		const newDrawers = { ...this.drawers };
+		for (const [key, value] of Object.entries(states)) if (newDrawers[key] !== value) {
+			newDrawers[key] = value;
+			changed = true;
+		}
+		if (changed) {
+			this.drawers = newDrawers;
+			this.emit();
+		}
+	};
+	emit = () => {
+		this.listeners.forEach((listener) => {
+			listener();
+		});
+	};
+};
+const drawerManager = new DrawerObservable();
+const useRightDrawer = () => {
+	const drawers = useSyncExternalStore(drawerManager.subscribe, drawerManager.getSnapshot, () => ({}));
+	return {
+		open: drawerManager.open,
+		close: drawerManager.close,
+		set: drawerManager.set,
+		isOpen: (key) => !!drawers[key]
+	};
+};
+
+//#endregion
+export { drawerManager, useRightDrawer };
 //# sourceMappingURL=useRightDrawer.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"useRightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/useRightDrawer.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'react';\n\ntype DrawerState = Record<string, boolean>;\n\nclass DrawerObservable {\n  private listeners = new Set<() => void>();\n  private drawers: DrawerState = {};\n\n  subscribe = (listener: () => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = () => {\n    return this.drawers;\n  };\n\n  open = (key: string) => {\n    if (this.drawers[key]) return;\n    this.drawers = { ...this.drawers, [key]: true };\n    this.emit();\n  };\n\n  close = (key: string) => {\n    if (!this.drawers[key]) return;\n    this.drawers = { ...this.drawers, [key]: false };\n    this.emit();\n  };\n\n  set = (states: DrawerState) => {\n    let changed = false;\n    const newDrawers = { ...this.drawers };\n\n    for (const [key, value] of Object.entries(states)) {\n      if (newDrawers[key] !== value) {\n        newDrawers[key] = value;\n        changed = true;\n      }\n    }\n\n    if (changed) {\n      this.drawers = newDrawers;\n      this.emit();\n    }\n  };\n\n  private emit = () => {\n    this.listeners.forEach((listener) => {\n      listener();\n    });\n  };\n}\n\nexport const drawerManager = new DrawerObservable();\n\nexport const useRightDrawer = () => {\n  const drawers = useSyncExternalStore(\n    drawerManager.subscribe,\n    drawerManager.getSnapshot,\n    () => ({}) as DrawerState\n  );\n\n  return {\n    open: drawerManager.open,\n    close: drawerManager.close,\n    set: drawerManager.set,\n    isOpen: (key: string) => !!drawers[key],\n  };\n};\n"],"mappings":"0DAyDA,MAAa,EAAgB,IAnD7B,KAAuB,CACrB,UAAoB,IAAI,IACxB,QAA+B,EAAE,CAEjC,UAAa,IACX,KAAK,UAAU,IAAI,EAAS,KACf,CACX,KAAK,UAAU,OAAO,EAAS,GAInC,gBACS,KAAK,QAGd,KAAQ,GAAgB,CAClB,KAAK,QAAQ,KACjB,KAAK,QAAU,CAAE,GAAG,KAAK,SAAU,GAAM,GAAM,CAC/C,KAAK,MAAM,GAGb,MAAS,GAAgB,CAClB,KAAK,QAAQ,KAClB,KAAK,QAAU,CAAE,GAAG,KAAK,SAAU,GAAM,GAAO,CAChD,KAAK,MAAM,GAGb,IAAO,GAAwB,CAC7B,IAAI,EAAU,GACR,EAAa,CAAE,GAAG,KAAK,QAAS,CAEtC,IAAK,GAAM,CAAC,EAAK,KAAU,OAAO,QAAQ,EAAO,CAC3C,EAAW,KAAS,IACtB,EAAW,GAAO,EAClB,EAAU,IAIV,IACF,KAAK,QAAU,EACf,KAAK,MAAM,GAIf,SAAqB,CACnB,KAAK,UAAU,QAAS,GAAa,CACnC,GAAU,EACV,GAMO,MAAuB,CAClC,IAAM,EAAU,EACd,EAAc,UACd,EAAc,iBACP,EAAE,EACV,CAED,MAAO,CACL,KAAM,EAAc,KACpB,MAAO,EAAc,MACrB,IAAK,EAAc,IACnB,OAAS,GAAgB,CAAC,CAAC,EAAQ,GACpC"}
+{"version":3,"file":"useRightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/useRightDrawer.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'react';\n\ntype DrawerState = Record<string, boolean>;\n\nclass DrawerObservable {\n  private listeners = new Set<() => void>();\n  private drawers: DrawerState = {};\n\n  subscribe = (listener: () => void) => {\n    this.listeners.add(listener);\n    return () => {\n      this.listeners.delete(listener);\n    };\n  };\n\n  getSnapshot = () => {\n    return this.drawers;\n  };\n\n  open = (key: string) => {\n    if (this.drawers[key]) return;\n    this.drawers = { ...this.drawers, [key]: true };\n    this.emit();\n  };\n\n  close = (key: string) => {\n    if (!this.drawers[key]) return;\n    this.drawers = { ...this.drawers, [key]: false };\n    this.emit();\n  };\n\n  set = (states: DrawerState) => {\n    let changed = false;\n    const newDrawers = { ...this.drawers };\n\n    for (const [key, value] of Object.entries(states)) {\n      if (newDrawers[key] !== value) {\n        newDrawers[key] = value;\n        changed = true;\n      }\n    }\n\n    if (changed) {\n      this.drawers = newDrawers;\n      this.emit();\n    }\n  };\n\n  private emit = () => {\n    this.listeners.forEach((listener) => {\n      listener();\n    });\n  };\n}\n\nexport const drawerManager = new DrawerObservable();\n\nexport const useRightDrawer = () => {\n  const drawers = useSyncExternalStore(\n    drawerManager.subscribe,\n    drawerManager.getSnapshot,\n    () => ({}) as DrawerState\n  );\n\n  return {\n    open: drawerManager.open,\n    close: drawerManager.close,\n    set: drawerManager.set,\n    isOpen: (key: string) => !!drawers[key],\n  };\n};\n"],"mappings":";;;;;AAMA,IAAM,mBAAN,MAAuB;CACrB,AAAQ,4BAAY,IAAI,KAAiB;CACzC,AAAQ,UAAuB,EAAE;CAEjC,aAAa,aAAyB;AACpC,OAAK,UAAU,IAAI,SAAS;AAC5B,eAAa;AACX,QAAK,UAAU,OAAO,SAAS;;;CAInC,oBAAoB;AAClB,SAAO,KAAK;;CAGd,QAAQ,QAAgB;AACtB,MAAI,KAAK,QAAQ,KAAM;AACvB,OAAK,UAAU;GAAE,GAAG,KAAK;IAAU,MAAM;GAAM;AAC/C,OAAK,MAAM;;CAGb,SAAS,QAAgB;AACvB,MAAI,CAAC,KAAK,QAAQ,KAAM;AACxB,OAAK,UAAU;GAAE,GAAG,KAAK;IAAU,MAAM;GAAO;AAChD,OAAK,MAAM;;CAGb,OAAO,WAAwB;EAC7B,IAAI,UAAU;EACd,MAAM,aAAa,EAAE,GAAG,KAAK,SAAS;AAEtC,OAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,OAAO,CAC/C,KAAI,WAAW,SAAS,OAAO;AAC7B,cAAW,OAAO;AAClB,aAAU;;AAId,MAAI,SAAS;AACX,QAAK,UAAU;AACf,QAAK,MAAM;;;CAIf,AAAQ,aAAa;AACnB,OAAK,UAAU,SAAS,aAAa;AACnC,aAAU;IACV;;;AAIN,MAAa,gBAAgB,IAAI,kBAAkB;AAEnD,MAAa,uBAAuB;CAClC,MAAM,UAAU,qBACd,cAAc,WACd,cAAc,oBACP,EAAE,EACV;AAED,QAAO;EACL,MAAM,cAAc;EACpB,OAAO,cAAc;EACrB,KAAK,cAAc;EACnB,SAAS,QAAgB,CAAC,CAAC,QAAQ;EACpC"}