@intlayer/design-system 6.1.5 → 6.1.6-canary.0

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

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type FC,\n  type MouseEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\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 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={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.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={ButtonVariant.HOVERABLE}\n                  color={ButtonColor.TEXT}\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size={ButtonSize.ICON_MD}\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex flex-1 flex-col\"\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","ButtonVariant","ButtonColor","ChevronLeft","X","ButtonSize"],"mappings":"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"}
+{"version":3,"file":"RightDrawer.cjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type FC,\n  type MouseEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawerStore } from './useRightDrawerStore';\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 button. Defaults 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   * @example\n   * ```tsx\n   * <RightDrawer title=\"User Settings\" identifier=\"settings\">\n   *   Content here\n   * </RightDrawer>\n   * ```\n   */\n  title?: ReactNode;\n\n  /**\n   * Unique identifier for the drawer instance. Required for store management\n   * @example\n   * ```tsx\n   * <RightDrawer identifier=\"user-profile\" title=\"Profile\">\n   *   Profile content\n   * </RightDrawer>\n   * ```\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   * @example\n   * ```tsx\n   * <RightDrawer\n   *   title=\"Settings\"\n   *   header={<div className=\"text-sm opacity-80\">Configure your preferences</div>}\n   *   identifier=\"settings\"\n   * >\n   *   Settings content\n   * </RightDrawer>\n   * ```\n   */\n  header?: ReactNode;\n\n  /**\n   * Whether the drawer should close when clicking outside of it\n   * @default true\n   * @example\n   * ```tsx\n   * <RightDrawer closeOnOutsideClick={false} identifier=\"persistent\">\n   *   This drawer requires explicit close action\n   * </RightDrawer>\n   * ```\n   */\n  closeOnOutsideClick?: boolean;\n\n  /**\n   * Configuration for an optional back button in the drawer header\n   * @example\n   * ```tsx\n   * <RightDrawer\n   *   backButton={{\n   *     text: \"Back to List\",\n   *     onBack: () => navigate('/list')\n   *   }}\n   *   identifier=\"detail-view\"\n   * >\n   *   Detail content\n   * </RightDrawer>\n   * ```\n   */\n  backButton?: BackButtonProps;\n\n  /**\n   * External control for the open state. When provided, overrides internal store state\n   * @example\n   * ```tsx\n   * const [isOpen, setIsOpen] = useState(false);\n   *\n   * <RightDrawer\n   *   isOpen={isOpen}\n   *   onClose={() => setIsOpen(false)}\n   *   identifier=\"controlled\"\n   * >\n   *   Controlled drawer content\n   * </RightDrawer>\n   * ```\n   */\n  isOpen?: boolean;\n\n  /**\n   * Callback function triggered when the drawer is closed\n   * @example\n   * ```tsx\n   * <RightDrawer\n   *   onClose={() => console.log('Drawer closed')}\n   *   identifier=\"tracked\"\n   * >\n   *   Content with close tracking\n   * </RightDrawer>\n   * ```\n   */\n  onClose?: () => void;\n};\n\n/**\n * RightDrawer - A slide-out drawer panel that appears from the right side of the screen\n *\n * A versatile drawer component that provides an overlay panel for displaying secondary content,\n * forms, details, or navigation. Features responsive design that adapts to mobile devices,\n * configurable close behavior, and integrated state management through Zustand store.\n *\n * ## Key Features\n * - **Responsive Design**: Full-width on mobile, fixed 400px width on desktop\n * - **State Management**: Built-in Zustand store for managing multiple drawer instances\n * - **Accessibility**: Proper ARIA attributes, keyboard navigation, and focus management\n * - **Flexible Layout**: Customizable header, title, and content areas\n * - **Click Outside**: Configurable outside click detection for auto-closing\n * - **Scroll Management**: Automatic body scroll blocking when open\n *\n * ## Use Cases\n * - Navigation menus and sidebars\n * - Detail panels and forms\n * - Settings and configuration interfaces\n * - Shopping carts and checkout processes\n * - User profiles and account management\n * - Multi-step workflows and wizards\n *\n * ## Accessibility\n * - **Focus Management**: Traps focus within the drawer when open\n * - **Keyboard Navigation**: Escape key closes the drawer\n * - **Screen Reader Support**: Proper ARIA labels and announcements\n * - **Touch Support**: Mobile-optimized touch interactions\n *\n * ## State Management\n * The component uses a Zustand store (`useRightDrawerStore`) to manage drawer state:\n * - Multiple drawers can be managed simultaneously using unique identifiers\n * - External components can open/close drawers using the store\n * - Supports both controlled (via props) and uncontrolled (via store) patterns\n *\n * @example\n * Basic usage with store management:\n * ```tsx\n * // Opening the drawer from another component\n * const { open } = useRightDrawerStore();\n *\n * <button onClick={() => open('user-menu')}>\n *   Open Menu\n * </button>\n *\n * <RightDrawer identifier=\"user-menu\" title=\"User Menu\">\n *   <nav>Navigation items here</nav>\n * </RightDrawer>\n * ```\n *\n * @example\n * Controlled drawer with external state:\n * ```tsx\n * const [showDrawer, setShowDrawer] = useState(false);\n *\n * <RightDrawer\n *   identifier=\"controlled-drawer\"\n *   title=\"Settings\"\n *   isOpen={showDrawer}\n *   onClose={() => setShowDrawer(false)}\n *   closeOnOutsideClick={false}\n * >\n *   <SettingsForm onSave={() => setShowDrawer(false)} />\n * </RightDrawer>\n * ```\n *\n * @example\n * Complex drawer with back button and header:\n * ```tsx\n * <RightDrawer\n *   identifier=\"product-detail\"\n *   title=\"Product Details\"\n *   header={\n *     <div className=\"text-sm text-gray-600\">\n *       SKU: {product.sku} | Stock: {product.stock}\n *     </div>\n *   }\n *   backButton={{\n *     text: \"Back to Catalog\",\n *     onBack: () => navigate('/catalog')\n *   }}\n * >\n *   <ProductDetailView product={product} />\n * </RightDrawer>\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 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={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.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={ButtonVariant.HOVERABLE}\n                  color={ButtonColor.TEXT}\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size={ButtonSize.ICON_MD}\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex flex-1 flex-col\"\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","ButtonVariant","ButtonColor","ChevronLeft","X","ButtonSize"],"mappings":";;;;;;;;;;;;;AAgOO,MAAM,cAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB;AAAA,EACA,QAAQ;AAAA,EACR;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAaA,gBAAAA,UAAU,IAAI;AACnC,QAAM,WAAWC,aAAAA,OAAuB,IAAI;AAC5C,QAAM,uBAAuBA,aAAAA,OAAuB,IAAI;AACxD,QAAM,EAAE,OAAO,MAAM,OAAA,IAAWC,2CAAAA;AAAAA,IAC9BC,8BAAAA,WAAW,CAAC,OAAO;AAAA,MACjB,OAAO,MAAM,EAAE,MAAM,UAAU;AAAA,MAC/B,MAAM,MAAM,EAAE,KAAK,UAAU;AAAA,MAC7B,QAAQ,EAAE,OAAO,UAAU;AAAA,IAAA,EAC3B;AAAA,EAAA;AAGJC,kDAAkB;AAAA,IAChB,eAAe;AAAA,IACf,KAAK,aAAa,gBAAgB,UAAU,KAAK;AAAA,EAAA,CAClD;AAEDC,eAAAA,UAAU,MAAM;AACd,UAAM,qBAAqB,CAAC,UAAsB;AAChD,UAAI;AACF,YAAI,CAAC,SAAS,QAAS;AAGvB,cAAM,cAAc,UAAU;AAG9B,cAAM,iBACJ,MAAM,UAAU,CAAC,SAAS,QAAQ,SAAS,MAAM,MAAc;AAGjE,cAAM,oBAAoBC,mDAAAA,4BAA4B,SAAS,OAAO;AAEtE,YACG,eAAe,kBAAkB,qBAClC,CAAC,MAAM,QACP;AACA,gBAAA;AACA,oBAAA;AAAA,QACF;AAAA,MACF,SAAS,IAAI;AACX,cAAA;AACA,kBAAA;AAAA,MACF;AAAA,IACF;AAEA,WAAO,iBAAiB,aAAa,kBAAkB;AACvD,WAAO,MAAM,OAAO,oBAAoB,aAAa,kBAAkB;AAAA,EACzE,GAAG,CAAC,QAAQ,OAAO,SAAS,qBAAqB,UAAU,CAAC;AAE5DD,eAAAA,UAAU,MAAM;AACd,QAAI,eAAe,QAAW;AAC5B,UAAI,YAAY;AACd,aAAA;AAAA,MACF,OAAO;AACL,cAAA;AACA,kBAAA;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,MAAM,SAAS,YAAY,UAAU,CAAC;AAEjD,QAAM,wBAA2D,CAAC,MAAM;AAEtE,QAAI,EAAE,WAAW,EAAE,eAAe;AAChC;AAAA,IACF;AAEA,QAAI,UAAU;AACZ,YAAA;AACA,gBAAA;AAAA,IACF;AAAA,EACF;AAEA,SACEE,2BAAAA,IAAC,OAAA,EAAI,WAAU,oDACb,UAAAA,2BAAAA,IAACC,kCAAAA,oBAAiB,UAAU,CAAC,QAAQ,OAAM,SACzC,UAAAC,2BAAAA;AAAAA,IAACC,2BAAAA;AAAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK;AAAA,MACL,aAAY;AAAA,MAEZ,UAAA;AAAA,QAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAAF,2BAAAA,IAAC,SACE,UAAA,cACCA,2BAAAA;AAAAA,cAACI,yBAAAA;AAAAA,cAAA;AAAA,gBACC,SAASC,yBAAAA,cAAc;AAAA,gBACvB,OAAOC,yBAAAA,YAAY;AAAA,gBACnB,OAAO,WAAW,QAAQ;AAAA,gBAC1B,SAAS,WAAW;AAAA,gBACpB,MAAMC,YAAAA;AAAAA,gBAEL,UAAA,YAAY;AAAA,cAAA;AAAA,YAAA,GAGnB;AAAA,2CACC,OAAA,EACC,UAAAP,2BAAAA;AAAAA,cAACI,yBAAAA;AAAAA,cAAA;AAAA,gBACC,SAASC,yBAAAA,cAAc;AAAA,gBACvB,OAAOC,yBAAAA,YAAY;AAAA,gBACnB,OAAM;AAAA,gBACN,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,MAAME,YAAAA;AAAAA,gBACN,MAAMC,yBAAAA,WAAW;AAAA,cAAA;AAAA,YAAA,EACnB,CACF;AAAA,UAAA,GACF;AAAA,UACC,SACCT,2BAAAA,IAAC,MAAA,EAAG,WAAU,sDACX,UAAA,OACH;AAAA,UAED;AAAA,QAAA,GACH;AAAA,QAEAA,2BAAAA,IAAC,OAAA,EAAI,WAAU,4CACb,UAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS;AAAA,YACT,KAAK;AAAA,YAEJ;AAAA,UAAA;AAAA,QAAA,EACH,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAEJ,EAAA,CACF;AAEJ;;"}

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

@@ -1,18 +1,200 @@
 import { FC, ReactNode } from 'react';
+/**
+ * Configuration for the back button functionality in the RightDrawer
+ *
+ * @interface BackButtonProps
+ */
 type BackButtonProps = {
+    /** Callback function triggered when the back button is clicked */
     onBack: () => void;
+    /** Optional custom text for the back button. Defaults to "Go back" if not provided */
     text?: string;
 };
+/**
+ * Props configuration for the RightDrawer component
+ *
+ * @interface RightDrawerProps
+ */
 type RightDrawerProps = {
+    /**
+     * Title displayed in the drawer header
+     * @example
+     * ```tsx
+     * <RightDrawer title="User Settings" identifier="settings">
+     *   Content here
+     * </RightDrawer>
+     * ```
+     */
     title?: ReactNode;
+    /**
+     * Unique identifier for the drawer instance. Required for store management
+     * @example
+     * ```tsx
+     * <RightDrawer identifier="user-profile" title="Profile">
+     *   Profile content
+     * </RightDrawer>
+     * ```
+     */
     identifier: string;
+    /** The content to be displayed inside the drawer */
     children?: ReactNode;
+    /**
+     * Optional header content displayed below the title
+     * @example
+     * ```tsx
+     * <RightDrawer
+     *   title="Settings"
+     *   header={<div className="text-sm opacity-80">Configure your preferences</div>}
+     *   identifier="settings"
+     * >
+     *   Settings content
+     * </RightDrawer>
+     * ```
+     */
     header?: ReactNode;
+    /**
+     * Whether the drawer should close when clicking outside of it
+     * @default true
+     * @example
+     * ```tsx
+     * <RightDrawer closeOnOutsideClick={false} identifier="persistent">
+     *   This drawer requires explicit close action
+     * </RightDrawer>
+     * ```
+     */
     closeOnOutsideClick?: boolean;
+    /**
+     * Configuration for an optional back button in the drawer header
+     * @example
+     * ```tsx
+     * <RightDrawer
+     *   backButton={{
+     *     text: "Back to List",
+     *     onBack: () => navigate('/list')
+     *   }}
+     *   identifier="detail-view"
+     * >
+     *   Detail content
+     * </RightDrawer>
+     * ```
+     */
     backButton?: BackButtonProps;
+    /**
+     * External control for the open state. When provided, overrides internal store state
+     * @example
+     * ```tsx
+     * const [isOpen, setIsOpen] = useState(false);
+     *
+     * <RightDrawer
+     *   isOpen={isOpen}
+     *   onClose={() => setIsOpen(false)}
+     *   identifier="controlled"
+     * >
+     *   Controlled drawer content
+     * </RightDrawer>
+     * ```
+     */
     isOpen?: boolean;
+    /**
+     * Callback function triggered when the drawer is closed
+     * @example
+     * ```tsx
+     * <RightDrawer
+     *   onClose={() => console.log('Drawer closed')}
+     *   identifier="tracked"
+     * >
+     *   Content with close tracking
+     * </RightDrawer>
+     * ```
+     */
     onClose?: () => void;
 };
+/**
+ * RightDrawer - A slide-out drawer panel that appears from the right side of the screen
+ *
+ * A versatile drawer component that provides an overlay panel for displaying secondary content,
+ * forms, details, or navigation. Features responsive design that adapts to mobile devices,
+ * configurable close behavior, and integrated state management through Zustand store.
+ *
+ * ## Key Features
+ * - **Responsive Design**: Full-width on mobile, fixed 400px width on desktop
+ * - **State Management**: Built-in Zustand store for managing multiple drawer instances
+ * - **Accessibility**: Proper ARIA attributes, keyboard navigation, and focus management
+ * - **Flexible Layout**: Customizable header, title, and content areas
+ * - **Click Outside**: Configurable outside click detection for auto-closing
+ * - **Scroll Management**: Automatic body scroll blocking when open
+ *
+ * ## Use Cases
+ * - Navigation menus and sidebars
+ * - Detail panels and forms
+ * - Settings and configuration interfaces
+ * - Shopping carts and checkout processes
+ * - User profiles and account management
+ * - Multi-step workflows and wizards
+ *
+ * ## Accessibility
+ * - **Focus Management**: Traps focus within the drawer when open
+ * - **Keyboard Navigation**: Escape key closes the drawer
+ * - **Screen Reader Support**: Proper ARIA labels and announcements
+ * - **Touch Support**: Mobile-optimized touch interactions
+ *
+ * ## State Management
+ * The component uses a Zustand store (`useRightDrawerStore`) to manage drawer state:
+ * - Multiple drawers can be managed simultaneously using unique identifiers
+ * - External components can open/close drawers using the store
+ * - Supports both controlled (via props) and uncontrolled (via store) patterns
+ *
+ * @example
+ * Basic usage with store management:
+ * ```tsx
+ * // Opening the drawer from another component
+ * const { open } = useRightDrawerStore();
+ *
+ * <button onClick={() => open('user-menu')}>
+ *   Open Menu
+ * </button>
+ *
+ * <RightDrawer identifier="user-menu" title="User Menu">
+ *   <nav>Navigation items here</nav>
+ * </RightDrawer>
+ * ```
+ *
+ * @example
+ * Controlled drawer with external state:
+ * ```tsx
+ * const [showDrawer, setShowDrawer] = useState(false);
+ *
+ * <RightDrawer
+ *   identifier="controlled-drawer"
+ *   title="Settings"
+ *   isOpen={showDrawer}
+ *   onClose={() => setShowDrawer(false)}
+ *   closeOnOutsideClick={false}
+ * >
+ *   <SettingsForm onSave={() => setShowDrawer(false)} />
+ * </RightDrawer>
+ * ```
+ *
+ * @example
+ * Complex drawer with back button and header:
+ * ```tsx
+ * <RightDrawer
+ *   identifier="product-detail"
+ *   title="Product Details"
+ *   header={
+ *     <div className="text-sm text-gray-600">
+ *       SKU: {product.sku} | Stock: {product.stock}
+ *     </div>
+ *   }
+ *   backButton={{
+ *     text: "Back to Catalog",
+ *     onBack: () => navigate('/catalog')
+ *   }}
+ * >
+ *   <ProductDetailView product={product} />
+ * </RightDrawer>
+ * ```
+ */
 export declare const RightDrawer: FC<RightDrawerProps>;
 export {};
 //# sourceMappingURL=RightDrawer.d.ts.map

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":"AAGA,OAAO,EACL,KAAK,EAAE,EAEP,KAAK,SAAS,EAGf,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,CAyI5C,CAAC"}
+{"version":3,"file":"RightDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,EAAE,EAEP,KAAK,SAAS,EAGf,MAAM,OAAO,CAAC;AAUf;;;;GAIG;AACH,KAAK,eAAe,GAAG;IACrB,kEAAkE;IAClE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,sFAAsF;IACtF,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,KAAK,gBAAgB,GAAG;IACtB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;;;;;;OAQG;IACH,UAAU,EAAE,MAAM,CAAC;IAEnB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;;;;;;;;OAcG;IACH,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B;;;;;;;;;;;;;;OAcG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAyI5C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type FC,\n  type MouseEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\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 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={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.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={ButtonVariant.HOVERABLE}\n                  color={ButtonColor.TEXT}\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size={ButtonSize.ICON_MD}\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex flex-1 flex-col\"\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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"}
+{"version":3,"file":"RightDrawer.mjs","sources":["../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type FC,\n  type MouseEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useShallow } from 'zustand/react/shallow';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawerStore } from './useRightDrawerStore';\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 button. Defaults 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   * @example\n   * ```tsx\n   * <RightDrawer title=\"User Settings\" identifier=\"settings\">\n   *   Content here\n   * </RightDrawer>\n   * ```\n   */\n  title?: ReactNode;\n\n  /**\n   * Unique identifier for the drawer instance. Required for store management\n   * @example\n   * ```tsx\n   * <RightDrawer identifier=\"user-profile\" title=\"Profile\">\n   *   Profile content\n   * </RightDrawer>\n   * ```\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   * @example\n   * ```tsx\n   * <RightDrawer\n   *   title=\"Settings\"\n   *   header={<div className=\"text-sm opacity-80\">Configure your preferences</div>}\n   *   identifier=\"settings\"\n   * >\n   *   Settings content\n   * </RightDrawer>\n   * ```\n   */\n  header?: ReactNode;\n\n  /**\n   * Whether the drawer should close when clicking outside of it\n   * @default true\n   * @example\n   * ```tsx\n   * <RightDrawer closeOnOutsideClick={false} identifier=\"persistent\">\n   *   This drawer requires explicit close action\n   * </RightDrawer>\n   * ```\n   */\n  closeOnOutsideClick?: boolean;\n\n  /**\n   * Configuration for an optional back button in the drawer header\n   * @example\n   * ```tsx\n   * <RightDrawer\n   *   backButton={{\n   *     text: \"Back to List\",\n   *     onBack: () => navigate('/list')\n   *   }}\n   *   identifier=\"detail-view\"\n   * >\n   *   Detail content\n   * </RightDrawer>\n   * ```\n   */\n  backButton?: BackButtonProps;\n\n  /**\n   * External control for the open state. When provided, overrides internal store state\n   * @example\n   * ```tsx\n   * const [isOpen, setIsOpen] = useState(false);\n   *\n   * <RightDrawer\n   *   isOpen={isOpen}\n   *   onClose={() => setIsOpen(false)}\n   *   identifier=\"controlled\"\n   * >\n   *   Controlled drawer content\n   * </RightDrawer>\n   * ```\n   */\n  isOpen?: boolean;\n\n  /**\n   * Callback function triggered when the drawer is closed\n   * @example\n   * ```tsx\n   * <RightDrawer\n   *   onClose={() => console.log('Drawer closed')}\n   *   identifier=\"tracked\"\n   * >\n   *   Content with close tracking\n   * </RightDrawer>\n   * ```\n   */\n  onClose?: () => void;\n};\n\n/**\n * RightDrawer - A slide-out drawer panel that appears from the right side of the screen\n *\n * A versatile drawer component that provides an overlay panel for displaying secondary content,\n * forms, details, or navigation. Features responsive design that adapts to mobile devices,\n * configurable close behavior, and integrated state management through Zustand store.\n *\n * ## Key Features\n * - **Responsive Design**: Full-width on mobile, fixed 400px width on desktop\n * - **State Management**: Built-in Zustand store for managing multiple drawer instances\n * - **Accessibility**: Proper ARIA attributes, keyboard navigation, and focus management\n * - **Flexible Layout**: Customizable header, title, and content areas\n * - **Click Outside**: Configurable outside click detection for auto-closing\n * - **Scroll Management**: Automatic body scroll blocking when open\n *\n * ## Use Cases\n * - Navigation menus and sidebars\n * - Detail panels and forms\n * - Settings and configuration interfaces\n * - Shopping carts and checkout processes\n * - User profiles and account management\n * - Multi-step workflows and wizards\n *\n * ## Accessibility\n * - **Focus Management**: Traps focus within the drawer when open\n * - **Keyboard Navigation**: Escape key closes the drawer\n * - **Screen Reader Support**: Proper ARIA labels and announcements\n * - **Touch Support**: Mobile-optimized touch interactions\n *\n * ## State Management\n * The component uses a Zustand store (`useRightDrawerStore`) to manage drawer state:\n * - Multiple drawers can be managed simultaneously using unique identifiers\n * - External components can open/close drawers using the store\n * - Supports both controlled (via props) and uncontrolled (via store) patterns\n *\n * @example\n * Basic usage with store management:\n * ```tsx\n * // Opening the drawer from another component\n * const { open } = useRightDrawerStore();\n *\n * <button onClick={() => open('user-menu')}>\n *   Open Menu\n * </button>\n *\n * <RightDrawer identifier=\"user-menu\" title=\"User Menu\">\n *   <nav>Navigation items here</nav>\n * </RightDrawer>\n * ```\n *\n * @example\n * Controlled drawer with external state:\n * ```tsx\n * const [showDrawer, setShowDrawer] = useState(false);\n *\n * <RightDrawer\n *   identifier=\"controlled-drawer\"\n *   title=\"Settings\"\n *   isOpen={showDrawer}\n *   onClose={() => setShowDrawer(false)}\n *   closeOnOutsideClick={false}\n * >\n *   <SettingsForm onSave={() => setShowDrawer(false)} />\n * </RightDrawer>\n * ```\n *\n * @example\n * Complex drawer with back button and header:\n * ```tsx\n * <RightDrawer\n *   identifier=\"product-detail\"\n *   title=\"Product Details\"\n *   header={\n *     <div className=\"text-sm text-gray-600\">\n *       SKU: {product.sku} | Stock: {product.stock}\n *     </div>\n *   }\n *   backButton={{\n *     text: \"Back to Catalog\",\n *     onBack: () => navigate('/catalog')\n *   }}\n * >\n *   <ProductDetailView product={product} />\n * </RightDrawer>\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 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={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.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={ButtonVariant.HOVERABLE}\n                  color={ButtonColor.TEXT}\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={close}\n                  Icon={X}\n                  size={ButtonSize.ICON_MD}\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center text-lg font-bold\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex flex-1 flex-col\"\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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"isElementAtTopAndNotCovered.cjs","sources":["../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"sourcesContent":["export const isElementAtTopAndNotCovered = (element: HTMLElement) => {\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"],"names":[],"mappings":";;AAAO,MAAM,8BAA8B,CAAC,YAAyB;AACnE,QAAM,OAAO,QAAQ,sBAAA;AACrB,QAAM,UAAU,KAAK;AACrB,QAAM,aAAa,KAAK,SAAS;AAGjC,QAAM,iBAAiB,WAAW,KAAK,cAAc,OAAO;AAG5D,MAAI,gBAAgB;AAClB,UAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;AACzC,UAAM,UAAU,KAAK,MAAM;AAC3B,UAAM,aAAa,SAAS,iBAAiB,SAAS,OAAO;AAG7D,WAAO,YAAY,cAAc,QAAQ,SAAS,UAAU;AAAA,EAC9D;AAEA,SAAO;AACT;;"}
+{"version":3,"file":"isElementAtTopAndNotCovered.cjs","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"],"names":[],"mappings":";;AA4CO,MAAM,8BAA8B,CAAC,YAAkC;AAC5E,QAAM,OAAO,QAAQ,sBAAA;AACrB,QAAM,UAAU,KAAK;AACrB,QAAM,aAAa,KAAK,SAAS;AAGjC,QAAM,iBAAiB,WAAW,KAAK,cAAc,OAAO;AAG5D,MAAI,gBAAgB;AAClB,UAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;AACzC,UAAM,UAAU,KAAK,MAAM;AAC3B,UAAM,aAAa,SAAS,iBAAiB,SAAS,OAAO;AAG7D,WAAO,YAAY,cAAc,QAAQ,SAAS,UAAU;AAAA,EAC9D;AAEA,SAAO;AACT;;"}

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

@@ -1,2 +1,46 @@
+/**
+ * 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)
+ * );
+ * ```
+ */
 export declare const isElementAtTopAndNotCovered: (element: HTMLElement) => boolean;
 //# sourceMappingURL=isElementAtTopAndNotCovered.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"isElementAtTopAndNotCovered.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,2BAA2B,GAAI,SAAS,WAAW,YAmB/D,CAAC"}
+{"version":3,"file":"isElementAtTopAndNotCovered.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,2BAA2B,GAAI,SAAS,WAAW,KAAG,OAmBlE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"isElementAtTopAndNotCovered.mjs","sources":["../../../src/components/RightDrawer/isElementAtTopAndNotCovered.tsx"],"sourcesContent":["export const isElementAtTopAndNotCovered = (element: HTMLElement) => {\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"],"names":[],"mappings":"AAAO,MAAM,8BAA8B,CAAC,YAAyB;AACnE,QAAM,OAAO,QAAQ,sBAAA;AACrB,QAAM,UAAU,KAAK;AACrB,QAAM,aAAa,KAAK,SAAS;AAGjC,QAAM,iBAAiB,WAAW,KAAK,cAAc,OAAO;AAG5D,MAAI,gBAAgB;AAClB,UAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;AACzC,UAAM,UAAU,KAAK,MAAM;AAC3B,UAAM,aAAa,SAAS,iBAAiB,SAAS,OAAO;AAG7D,WAAO,YAAY,cAAc,QAAQ,SAAS,UAAU;AAAA,EAC9D;AAEA,SAAO;AACT;"}
+{"version":3,"file":"isElementAtTopAndNotCovered.mjs","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"],"names":[],"mappings":"AA4CO,MAAM,8BAA8B,CAAC,YAAkC;AAC5E,QAAM,OAAO,QAAQ,sBAAA;AACrB,QAAM,UAAU,KAAK;AACrB,QAAM,aAAa,KAAK,SAAS;AAGjC,QAAM,iBAAiB,WAAW,KAAK,cAAc,OAAO;AAG5D,MAAI,gBAAgB;AAClB,UAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;AACzC,UAAM,UAAU,KAAK,MAAM;AAC3B,UAAM,aAAa,SAAS,iBAAiB,SAAS,OAAO;AAG7D,WAAO,YAAY,cAAc,QAAQ,SAAS,UAAU;AAAA,EAC9D;AAEA,SAAO;AACT;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useRightDrawerStore.cjs","sources":["../../../src/components/RightDrawer/useRightDrawerStore.ts"],"sourcesContent":["import { create } from 'zustand';\n\ntype RightDrawerStore = {\n  drawers: Record<string, boolean>;\n  open: (key: string) => void;\n  close: (key: string) => void;\n  isOpen: (key: string) => boolean;\n};\n\nexport const useRightDrawerStore = create<RightDrawerStore>((set, get) => ({\n  drawers: {},\n  open: (key: string) =>\n    set((state) => ({\n      drawers: {\n        ...state.drawers,\n        [key]: true,\n      },\n    })),\n  close: (key: string) =>\n    set((state) => ({\n      drawers: {\n        ...state.drawers,\n        [key]: false,\n      },\n    })),\n  isOpen: (key: string) => get().drawers[key] ?? false,\n}));\n"],"names":["create"],"mappings":";;;AASO,MAAM,sBAAsBA,QAAAA,OAAyB,CAAC,KAAK,SAAS;AAAA,EACzE,SAAS,CAAA;AAAA,EACT,MAAM,CAAC,QACL,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,OAAO,CAAC,QACN,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,QAAQ,CAAC,QAAgB,MAAM,QAAQ,GAAG,KAAK;AACjD,EAAE;;"}
+{"version":3,"file":"useRightDrawerStore.cjs","sources":["../../../src/components/RightDrawer/useRightDrawerStore.ts"],"sourcesContent":["import { create } from 'zustand';\n\n/**\n * Type definition for the RightDrawer Zustand store state and actions\n *\n * @interface RightDrawerStore\n */\ntype RightDrawerStore = {\n  /** Record of drawer identifiers and their open/closed states */\n  drawers: Record<string, boolean>;\n\n  /**\n   * Opens a drawer with the specified identifier\n   * @param key - Unique identifier for the drawer instance\n   * @example\n   * ```tsx\n   * const { open } = useRightDrawerStore();\n   * open('user-profile'); // Opens the drawer with identifier 'user-profile'\n   * ```\n   */\n  open: (key: string) => void;\n\n  /**\n   * Closes a drawer with the specified identifier\n   * @param key - Unique identifier for the drawer instance\n   * @example\n   * ```tsx\n   * const { close } = useRightDrawerStore();\n   * close('user-profile'); // Closes the drawer with identifier 'user-profile'\n   * ```\n   */\n  close: (key: string) => void;\n\n  /**\n   * Checks if a drawer with the specified identifier is currently open\n   * @param key - Unique identifier for the drawer instance\n   * @returns Boolean indicating if the drawer is open (defaults to false if not found)\n   * @example\n   * ```tsx\n   * const { isOpen } = useRightDrawerStore();\n   * const isProfileOpen = isOpen('user-profile');\n   * ```\n   */\n  isOpen: (key: string) => boolean;\n};\n\n/**\n * Zustand store for managing RightDrawer component states\n *\n * This store provides centralized state management for multiple drawer instances,\n * allowing different parts of the application to open, close, and check the status\n * of drawers using unique identifiers.\n *\n * ## Features\n * - **Multi-instance Management**: Handle multiple drawers simultaneously\n * - **Simple API**: Open, close, and check drawer states with string identifiers\n * - **Persistent State**: Drawer states persist until explicitly changed\n * - **Type Safety**: Full TypeScript support with proper type inference\n *\n * ## Usage Patterns\n *\n * ### Basic Usage\n * ```tsx\n * import { useRightDrawerStore } from './useRightDrawerStore';\n *\n * function NavigationButton() {\n *   const { open } = useRightDrawerStore();\n *\n *   return (\n *     <button onClick={() => open('main-menu')}>\n *       Open Menu\n *     </button>\n *   );\n * }\n * ```\n *\n * ### Conditional Rendering\n * ```tsx\n * function ConditionalContent() {\n *   const isMenuOpen = useRightDrawerStore(state => state.isOpen('main-menu'));\n *\n *   return (\n *     <div>\n *       {isMenuOpen ? 'Menu is open' : 'Menu is closed'}\n *     </div>\n *   );\n * }\n * ```\n *\n * ### Multiple Drawers\n * ```tsx\n * function MultiDrawerManager() {\n *   const { open, close, isOpen } = useRightDrawerStore();\n *\n *   return (\n *     <div>\n *       <button onClick={() => open('cart')}>Open Cart</button>\n *       <button onClick={() => open('profile')}>Open Profile</button>\n *       <button onClick={() => {\n *         close('cart');\n *         close('profile');\n *       }}>Close All</button>\n *\n *       <div>\n *         Cart: {isOpen('cart') ? 'Open' : 'Closed'}\n *         Profile: {isOpen('profile') ? 'Open' : 'Closed'}\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @returns RightDrawerStore instance with drawer management capabilities\n */\nexport const useRightDrawerStore = create<RightDrawerStore>((set, get) => ({\n  drawers: {},\n  open: (key: string) =>\n    set((state) => ({\n      drawers: {\n        ...state.drawers,\n        [key]: true,\n      },\n    })),\n  close: (key: string) =>\n    set((state) => ({\n      drawers: {\n        ...state.drawers,\n        [key]: false,\n      },\n    })),\n  isOpen: (key: string) => get().drawers[key] ?? false,\n}));\n"],"names":["create"],"mappings":";;;AAkHO,MAAM,sBAAsBA,QAAAA,OAAyB,CAAC,KAAK,SAAS;AAAA,EACzE,SAAS,CAAA;AAAA,EACT,MAAM,CAAC,QACL,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,OAAO,CAAC,QACN,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,QAAQ,CAAC,QAAgB,MAAM,QAAQ,GAAG,KAAK;AACjD,EAAE;;"}

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

@@ -1,9 +1,111 @@
+/**
+ * Type definition for the RightDrawer Zustand store state and actions
+ *
+ * @interface RightDrawerStore
+ */
 type RightDrawerStore = {
+    /** Record of drawer identifiers and their open/closed states */
     drawers: Record<string, boolean>;
+    /**
+     * Opens a drawer with the specified identifier
+     * @param key - Unique identifier for the drawer instance
+     * @example
+     * ```tsx
+     * const { open } = useRightDrawerStore();
+     * open('user-profile'); // Opens the drawer with identifier 'user-profile'
+     * ```
+     */
     open: (key: string) => void;
+    /**
+     * Closes a drawer with the specified identifier
+     * @param key - Unique identifier for the drawer instance
+     * @example
+     * ```tsx
+     * const { close } = useRightDrawerStore();
+     * close('user-profile'); // Closes the drawer with identifier 'user-profile'
+     * ```
+     */
     close: (key: string) => void;
+    /**
+     * Checks if a drawer with the specified identifier is currently open
+     * @param key - Unique identifier for the drawer instance
+     * @returns Boolean indicating if the drawer is open (defaults to false if not found)
+     * @example
+     * ```tsx
+     * const { isOpen } = useRightDrawerStore();
+     * const isProfileOpen = isOpen('user-profile');
+     * ```
+     */
     isOpen: (key: string) => boolean;
 };
+/**
+ * Zustand store for managing RightDrawer component states
+ *
+ * This store provides centralized state management for multiple drawer instances,
+ * allowing different parts of the application to open, close, and check the status
+ * of drawers using unique identifiers.
+ *
+ * ## Features
+ * - **Multi-instance Management**: Handle multiple drawers simultaneously
+ * - **Simple API**: Open, close, and check drawer states with string identifiers
+ * - **Persistent State**: Drawer states persist until explicitly changed
+ * - **Type Safety**: Full TypeScript support with proper type inference
+ *
+ * ## Usage Patterns
+ *
+ * ### Basic Usage
+ * ```tsx
+ * import { useRightDrawerStore } from './useRightDrawerStore';
+ *
+ * function NavigationButton() {
+ *   const { open } = useRightDrawerStore();
+ *
+ *   return (
+ *     <button onClick={() => open('main-menu')}>
+ *       Open Menu
+ *     </button>
+ *   );
+ * }
+ * ```
+ *
+ * ### Conditional Rendering
+ * ```tsx
+ * function ConditionalContent() {
+ *   const isMenuOpen = useRightDrawerStore(state => state.isOpen('main-menu'));
+ *
+ *   return (
+ *     <div>
+ *       {isMenuOpen ? 'Menu is open' : 'Menu is closed'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * ### Multiple Drawers
+ * ```tsx
+ * function MultiDrawerManager() {
+ *   const { open, close, isOpen } = useRightDrawerStore();
+ *
+ *   return (
+ *     <div>
+ *       <button onClick={() => open('cart')}>Open Cart</button>
+ *       <button onClick={() => open('profile')}>Open Profile</button>
+ *       <button onClick={() => {
+ *         close('cart');
+ *         close('profile');
+ *       }}>Close All</button>
+ *
+ *       <div>
+ *         Cart: {isOpen('cart') ? 'Open' : 'Closed'}
+ *         Profile: {isOpen('profile') ? 'Open' : 'Closed'}
+ *       </div>
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @returns RightDrawerStore instance with drawer management capabilities
+ */
 export declare const useRightDrawerStore: import('zustand').UseBoundStore<import('zustand').StoreApi<RightDrawerStore>>;
 export {};
 //# sourceMappingURL=useRightDrawerStore.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useRightDrawerStore.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/useRightDrawerStore.ts"],"names":[],"mappings":"AAEA,KAAK,gBAAgB,GAAG;IACtB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjC,IAAI,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5B,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,mBAAmB,+EAiB7B,CAAC"}
+{"version":3,"file":"useRightDrawerStore.d.ts","sourceRoot":"","sources":["../../../src/components/RightDrawer/useRightDrawerStore.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,KAAK,gBAAgB,GAAG;IACtB,gEAAgE;IAChE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEjC;;;;;;;;OAQG;IACH,IAAI,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5B;;;;;;;;OAQG;IACH,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7B;;;;;;;;;OASG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;CAClC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,eAAO,MAAM,mBAAmB,+EAiB7B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"useRightDrawerStore.mjs","sources":["../../../src/components/RightDrawer/useRightDrawerStore.ts"],"sourcesContent":["import { create } from 'zustand';\n\ntype RightDrawerStore = {\n  drawers: Record<string, boolean>;\n  open: (key: string) => void;\n  close: (key: string) => void;\n  isOpen: (key: string) => boolean;\n};\n\nexport const useRightDrawerStore = create<RightDrawerStore>((set, get) => ({\n  drawers: {},\n  open: (key: string) =>\n    set((state) => ({\n      drawers: {\n        ...state.drawers,\n        [key]: true,\n      },\n    })),\n  close: (key: string) =>\n    set((state) => ({\n      drawers: {\n        ...state.drawers,\n        [key]: false,\n      },\n    })),\n  isOpen: (key: string) => get().drawers[key] ?? false,\n}));\n"],"names":[],"mappings":";AASO,MAAM,sBAAsB,OAAyB,CAAC,KAAK,SAAS;AAAA,EACzE,SAAS,CAAA;AAAA,EACT,MAAM,CAAC,QACL,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,OAAO,CAAC,QACN,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,QAAQ,CAAC,QAAgB,MAAM,QAAQ,GAAG,KAAK;AACjD,EAAE;"}
+{"version":3,"file":"useRightDrawerStore.mjs","sources":["../../../src/components/RightDrawer/useRightDrawerStore.ts"],"sourcesContent":["import { create } from 'zustand';\n\n/**\n * Type definition for the RightDrawer Zustand store state and actions\n *\n * @interface RightDrawerStore\n */\ntype RightDrawerStore = {\n  /** Record of drawer identifiers and their open/closed states */\n  drawers: Record<string, boolean>;\n\n  /**\n   * Opens a drawer with the specified identifier\n   * @param key - Unique identifier for the drawer instance\n   * @example\n   * ```tsx\n   * const { open } = useRightDrawerStore();\n   * open('user-profile'); // Opens the drawer with identifier 'user-profile'\n   * ```\n   */\n  open: (key: string) => void;\n\n  /**\n   * Closes a drawer with the specified identifier\n   * @param key - Unique identifier for the drawer instance\n   * @example\n   * ```tsx\n   * const { close } = useRightDrawerStore();\n   * close('user-profile'); // Closes the drawer with identifier 'user-profile'\n   * ```\n   */\n  close: (key: string) => void;\n\n  /**\n   * Checks if a drawer with the specified identifier is currently open\n   * @param key - Unique identifier for the drawer instance\n   * @returns Boolean indicating if the drawer is open (defaults to false if not found)\n   * @example\n   * ```tsx\n   * const { isOpen } = useRightDrawerStore();\n   * const isProfileOpen = isOpen('user-profile');\n   * ```\n   */\n  isOpen: (key: string) => boolean;\n};\n\n/**\n * Zustand store for managing RightDrawer component states\n *\n * This store provides centralized state management for multiple drawer instances,\n * allowing different parts of the application to open, close, and check the status\n * of drawers using unique identifiers.\n *\n * ## Features\n * - **Multi-instance Management**: Handle multiple drawers simultaneously\n * - **Simple API**: Open, close, and check drawer states with string identifiers\n * - **Persistent State**: Drawer states persist until explicitly changed\n * - **Type Safety**: Full TypeScript support with proper type inference\n *\n * ## Usage Patterns\n *\n * ### Basic Usage\n * ```tsx\n * import { useRightDrawerStore } from './useRightDrawerStore';\n *\n * function NavigationButton() {\n *   const { open } = useRightDrawerStore();\n *\n *   return (\n *     <button onClick={() => open('main-menu')}>\n *       Open Menu\n *     </button>\n *   );\n * }\n * ```\n *\n * ### Conditional Rendering\n * ```tsx\n * function ConditionalContent() {\n *   const isMenuOpen = useRightDrawerStore(state => state.isOpen('main-menu'));\n *\n *   return (\n *     <div>\n *       {isMenuOpen ? 'Menu is open' : 'Menu is closed'}\n *     </div>\n *   );\n * }\n * ```\n *\n * ### Multiple Drawers\n * ```tsx\n * function MultiDrawerManager() {\n *   const { open, close, isOpen } = useRightDrawerStore();\n *\n *   return (\n *     <div>\n *       <button onClick={() => open('cart')}>Open Cart</button>\n *       <button onClick={() => open('profile')}>Open Profile</button>\n *       <button onClick={() => {\n *         close('cart');\n *         close('profile');\n *       }}>Close All</button>\n *\n *       <div>\n *         Cart: {isOpen('cart') ? 'Open' : 'Closed'}\n *         Profile: {isOpen('profile') ? 'Open' : 'Closed'}\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @returns RightDrawerStore instance with drawer management capabilities\n */\nexport const useRightDrawerStore = create<RightDrawerStore>((set, get) => ({\n  drawers: {},\n  open: (key: string) =>\n    set((state) => ({\n      drawers: {\n        ...state.drawers,\n        [key]: true,\n      },\n    })),\n  close: (key: string) =>\n    set((state) => ({\n      drawers: {\n        ...state.drawers,\n        [key]: false,\n      },\n    })),\n  isOpen: (key: string) => get().drawers[key] ?? false,\n}));\n"],"names":[],"mappings":";AAkHO,MAAM,sBAAsB,OAAyB,CAAC,KAAK,SAAS;AAAA,EACzE,SAAS,CAAA;AAAA,EACT,MAAM,CAAC,QACL,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,OAAO,CAAC,QACN,IAAI,CAAC,WAAW;AAAA,IACd,SAAS;AAAA,MACP,GAAG,MAAM;AAAA,MACT,CAAC,GAAG,GAAG;AAAA,IAAA;AAAA,EACT,EACA;AAAA,EACJ,QAAQ,CAAC,QAAgB,MAAM,QAAQ,GAAG,KAAK;AACjD,EAAE;"}