@intlayer/design-system 8.1.2 → 8.1.3-canary.0

package/dist/esm/components/Popover/static.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"static.mjs","names":[],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\n\n/**\n * Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n */\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  /** Unique identifier linking the trigger to its popover content for accessibility */\n  identifier: string;\n};\n\n/**\n * Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n */\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Horizontal alignment options for popover positioning\n */\nexport enum PopoverXAlign {\n  /** Align popover to start (left) of trigger */\n  START = 'start',\n  /** Align popover to center of trigger */\n  CENTER = 'center',\n  /** Align popover to end (right) of trigger */\n  END = 'end',\n}\n\n/**\n * Vertical alignment options for popover positioning\n */\nexport enum PopoverYAlign {\n  /** Position popover below the trigger */\n  BELOW = 'bellow',\n  /** Position popover above the trigger */\n  ABOVE = 'above',\n}\n\n/**\n * Popover Component\n *\n * A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n *\n * Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/center/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n *\n * Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n *\n * @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n *   <button>Need Help?</button>\n *\n *   <Popover.Detail identifier=\"help-tooltip\">\n *     <div>This is helpful information!</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n *   <input placeholder=\"Focus me\" />\n *\n *   <Popover.Detail\n *     identifier=\"focus-menu\"\n *     isFocusable\n *     isOverable={false}\n *   >\n *     <div>Focus-only menu content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n *   <span>Hover me</span>\n *\n *   <Popover.Detail\n *     identifier=\"positioned\"\n *     xAlign={PopoverXAlign.END}\n *     yAlign={PopoverYAlign.ABOVE}\n *     displayArrow={false}\n *   >\n *     <div>Above and right-aligned</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n *\n * Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nexport const PopoverStatic: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn('group/popover relative flex cursor-pointer', className)}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n */\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  /** Whether the popover responds to focus events on the trigger */\n  isFocusable?: boolean;\n  /** Controls visibility state - undefined allows automatic hover/focus control */\n  isHidden?: boolean;\n  /** Whether the popover responds to hover events on the trigger */\n  isOverable?: boolean;\n  /** Unique identifier matching the trigger's identifier for accessibility */\n  identifier: string;\n  /** Horizontal positioning relative to trigger */\n  xAlign?: PopoverXAlign | `${PopoverXAlign}`;\n  /** Vertical positioning relative to trigger */\n  yAlign?: PopoverYAlign | `${PopoverYAlign}`;\n  /** Whether to display the directional arrow indicator */\n  displayArrow?: boolean;\n};\n\n/**\n * Popover Detail Component\n *\n * The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n *\n * Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n *\n * Positioning System:\n * - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n *\n * Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n *\n * Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n *\n * @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n *   <div className=\"p-4\">\n *     <h3>Popover Title</h3>\n *     <p>Detailed information with multiple paragraphs.</p>\n *     <button>Action Button</button>\n *   </div>\n * </Popover.Detail>\n * ```\n *\n * @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n * identifier=\"context-menu\"\n * displayArrow={false}\n * xAlign={PopoverXAlign.END}\n * >\n * <ul className=\"py-2\">\n * <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n * <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n * </ul>\n * </Popover.Detail>\n * ```\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = true,\n  isFocusable = false,\n  xAlign = PopoverXAlign.START,\n  yAlign = PopoverYAlign.BELOW,\n  identifier,\n  className,\n  displayArrow = true,\n  ...props\n}) => (\n  <Container\n    transparency=\"xs\"\n    role=\"group\"\n    aria-hidden={isHidden}\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n    className={cn(\n      'absolute z-50 min-w-full rounded-md ring-1 ring-neutral',\n\n      /* Positioning */\n      xAlign === 'start' && 'left-0',\n      xAlign === 'center' && 'left-1/2 -translate-x-1/2',\n      xAlign === 'end' && 'right-0',\n      yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n      yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n      /* Arrow indicator */\n      displayArrow &&\n        'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n      /* Horizontal positioning */\n      displayArrow && xAlign === 'start' && 'before:left-2',\n      displayArrow &&\n        xAlign === 'center' &&\n        'before:left-1/2 before:-translate-x-1/2',\n      displayArrow && xAlign === 'end' && 'before:right-2',\n\n      /* Arrow pointing up (when popover is below trigger) */\n      displayArrow &&\n        yAlign === 'bellow' &&\n        'before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n      /* Visibility management */\n      'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n      isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n      isOverable &&\n        'group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800',\n      isFocusable &&\n        'group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800',\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </Container>\n);\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":";;;;;;;;AA2BA,IAAY,wDAAL;;AAEL;;AAEA;;AAEA;;;;;;AAMF,IAAY,wDAAL;;AAEL;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFF,MAAa,iBAA8B,EACzC,UACA,WACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,8CAA8C,UAAU;CACtE,IAAI,2BAA2B;CAC/B;CACA,GAAI;CAEH;EACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFR,MAAM,UAA2B,EAC/B,UACA,WAAW,QACX,aAAa,MACb,cAAc,OACd,SAAS,cAAc,OACvB,SAAS,cAAc,OACvB,YACA,WACA,eAAe,MACf,GAAG,YAEH,oBAAC;CACC,cAAa;CACb,MAAK;CACL,eAAa;CACb,mBAAiB,2BAA2B;CAC5C,IAAI,oBAAoB;CACxB,WAAW,GACT,2DAGA,WAAW,WAAW,UACtB,WAAW,YAAY,6BACvB,WAAW,SAAS,WACpB,WAAW,YAAY,yBACvB,WAAW,WAAW,4BAGtB,gBACE,8EAGF,gBAAgB,WAAW,WAAW,iBACtC,gBACE,WAAW,YACX,2CACF,gBAAgB,WAAW,SAAS,kBAGpC,gBACE,WAAW,YACX,2KAGF,gBACE,WAAW,WACX,8KAGF,wEACA,aAAa,QAAQ,cAAc,iCACnC,cACE,6FACF,eACE,kHACF,UACD;CACD,GAAI;CAEH;EACS;AAGd,cAAc,SAAS"}
+{"version":3,"file":"static.mjs","names":[],"sources":["../../../../src/components/Popover/static.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\n\n/**\n * Props for the main Popover component\n * Extends HTMLDivElement attributes for full DOM compatibility\n */\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  /** Unique identifier linking the trigger to its popover content for accessibility */\n  identifier: string;\n};\n\n/**\n * Composite type for the Popover component with Detail subcomponent\n * Allows for Popover.Detail usage pattern\n */\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Horizontal alignment options for popover positioning\n */\nexport enum PopoverXAlign {\n  /** Align popover to start (left) of trigger */\n  START = 'start',\n  /** Align popover to center of trigger */\n  CENTER = 'center',\n  /** Align popover to end (right) of trigger */\n  END = 'end',\n}\n\n/**\n * Vertical alignment options for popover positioning\n */\nexport enum PopoverYAlign {\n  /** Position popover below the trigger */\n  BELOW = 'bellow',\n  /** Position popover above the trigger */\n  ABOVE = 'above',\n}\n\n/**\n * Popover Component\n *\n * A versatile popover container that displays contextual content when triggered by hover\n * or focus interactions. Built with accessibility in mind and supports multiple positioning\n * options with smooth animations.\n *\n * Features:\n * - Hover and focus-based triggering\n * - Multiple positioning options (above/below, start/center/end)\n * - Accessibility compliant with ARIA attributes\n * - Smooth animations with configurable delays\n * - Optional directional arrows\n * - Automatic z-index management\n * - Responsive design support\n *\n * Architecture:\n * - Main Popover acts as trigger container\n * - Popover.Detail renders the actual popover content\n * - Uses CSS groups for coordinated hover/focus states\n * - Unique identifier system prevents conflicts\n *\n * @example\n * Basic hover popover:\n * ```jsx\n * <Popover identifier=\"help-tooltip\">\n *   <button>Need Help?</button>\n *\n *   <Popover.Detail identifier=\"help-tooltip\">\n *     <div>This is helpful information!</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Focus-triggered popover:\n * ```jsx\n * <Popover identifier=\"focus-menu\">\n *   <input placeholder=\"Focus me\" />\n *\n *   <Popover.Detail\n *     identifier=\"focus-menu\"\n *     isFocusable\n *     isOverable={false}\n *   >\n *     <div>Focus-only menu content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * @example\n * Positioned popover with custom alignment:\n * ```jsx\n * <Popover identifier=\"positioned\">\n *   <span>Hover me</span>\n *\n *   <Popover.Detail\n *     identifier=\"positioned\"\n *     xAlign={PopoverXAlign.END}\n *     yAlign={PopoverYAlign.ABOVE}\n *     displayArrow={false}\n *   >\n *     <div>Above and right-aligned</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * Accessibility Features:\n * - Proper ARIA labeling and relationships\n * - Keyboard navigation support\n * - Screen reader compatibility\n * - Focus management\n *\n * Performance Considerations:\n * - CSS-only animations for smooth transitions\n * - Efficient group-based state management\n * - Minimal DOM updates during interactions\n *\n * @param props - Popover component props\n * @returns Trigger container with popover functionality\n */\nexport const PopoverStatic: PopoverType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn('group/popover relative flex cursor-pointer', className)}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the Popover.Detail component\n * Extends HTMLDivElement attributes for styling flexibility\n */\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  /** Whether the popover responds to focus events on the trigger */\n  isFocusable?: boolean;\n  /** Controls visibility state - undefined allows automatic hover/focus control */\n  isHidden?: boolean;\n  /** Whether the popover responds to hover events on the trigger */\n  isOverable?: boolean;\n  /** Unique identifier matching the trigger's identifier for accessibility */\n  identifier: string;\n  /** Horizontal positioning relative to trigger */\n  xAlign?: PopoverXAlign | `${PopoverXAlign}`;\n  /** Vertical positioning relative to trigger */\n  yAlign?: PopoverYAlign | `${PopoverYAlign}`;\n  /** Whether to display the directional arrow indicator */\n  displayArrow?: boolean;\n};\n\n/**\n * Popover Detail Component\n *\n * The actual popover content container with advanced positioning, animation, and\n * accessibility features. Automatically manages visibility based on trigger interactions.\n *\n * Features:\n * - Precise positioning with alignment options\n * - Smooth fade and slide animations\n * - Configurable directional arrows\n * - Hover and focus interaction support\n * - Accessibility-compliant ARIA attributes\n * - High z-index for overlay behavior\n * - Automatic visibility management\n *\n * Positioning System:\n * - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)\n * - Y-axis: BELOW (underneath) or ABOVE (on top)\n * - Automatic spacing with 1rem gap from trigger\n * - Responsive minimum width matching trigger\n *\n * Arrow Indicators:\n * - CSS-generated triangular arrows\n * - Positioned based on alignment settings\n * - Points toward trigger for visual connection\n * - Can be disabled for clean, minimal appearance\n *\n * Animation Behavior:\n * - Starts invisible with opacity: 0\n * - Smooth 400ms transitions with easing\n * - 800ms delay for hover states (prevents flicker)\n * - Immediate hiding when trigger loses focus/hover\n *\n * @example\n * Rich content popover:\n * ```jsx\n * <Popover.Detail identifier=\"rich-content\">\n *   <div className=\"p-4\">\n *     <h3>Popover Title</h3>\n *     <p>Detailed information with multiple paragraphs.</p>\n *     <button>Action Button</button>\n *   </div>\n * </Popover.Detail>\n * ```\n *\n * @example\n * Menu-style popover:\n * ```jsx\n * <Popover.Detail\n * identifier=\"context-menu\"\n * displayArrow={false}\n * xAlign={PopoverXAlign.END}\n * >\n * <ul className=\"py-2\">\n * <li><button className=\"w-full px-4 py-2\">Edit</button></li>\n * <li><button className=\"w-full px-4 py-2\">Delete</button></li>\n * </ul>\n * </Popover.Detail>\n * ```\n *\n * @param props - Popover Detail component props\n * @returns Positioned popover content with animations and accessibility\n */\nconst Detail: FC<DetailProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = true,\n  isFocusable = false,\n  xAlign = PopoverXAlign.START,\n  yAlign = PopoverYAlign.BELOW,\n  identifier,\n  className,\n  displayArrow = true,\n  ...props\n}) => (\n  <Container\n    transparency=\"xs\"\n    role=\"group\"\n    aria-hidden={isHidden}\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n    className={cn(\n      'absolute z-50 min-w-full rounded-md ring-1 ring-neutral',\n\n      /* Positioning */\n      xAlign === 'start' && 'left-0',\n      xAlign === 'center' && 'left-1/2 -translate-x-1/2',\n      xAlign === 'end' && 'right-0',\n      yAlign === 'bellow' && 'top-[calc(100%+1rem)]',\n      yAlign === 'above' && 'bottom-[calc(100%+1rem)]',\n\n      /* Arrow indicator */\n      displayArrow &&\n        'before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]',\n\n      /* Horizontal positioning */\n      displayArrow && xAlign === 'start' && 'before:left-2',\n      displayArrow &&\n        xAlign === 'center' &&\n        'before:left-1/2 before:-translate-x-1/2',\n      displayArrow && xAlign === 'end' && 'before:right-2',\n\n      /* Arrow pointing up (when popover is below trigger) */\n      displayArrow &&\n        yAlign === 'bellow' &&\n        'before:-top-[10px] before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral before:border-l-[10px] before:border-l-transparent',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-t-[10px] before:border-t-neutral before:border-r-[10px] before:border-r-transparent before:border-l-[10px] before:border-l-transparent',\n\n      /* Visibility management */\n      'overflow-x-visible opacity-0 transition-all duration-400 ease-in-out',\n      isHidden !== false ? 'invisible' : 'visible opacity-100 delay-800',\n      isOverable &&\n        'group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800',\n      isFocusable &&\n        'group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800',\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </Container>\n);\n\nPopoverStatic.Detail = Detail;\n\n// Export Detail for use in dynamic version\nexport { Detail };\n"],"mappings":"mIA2BA,IAAY,EAAA,SAAA,EAAL,OAEL,GAAA,MAAA,QAEA,EAAA,OAAA,SAEA,EAAA,IAAA,aAMU,EAAA,SAAA,EAAL,OAEL,GAAA,MAAA,SAEA,EAAA,MAAA,eAoFF,MAAa,GAA8B,CACzC,WACA,YACA,aACA,GAAG,KAEH,EAAC,MAAA,CACC,UAAW,EAAG,6CAA8C,EAAU,CACtE,GAAI,2BAA2B,IAC/B,gBAAA,GACA,GAAI,EAEH,YACG,CAuFF,GAA2B,CAC/B,WACA,WAAW,IAAA,GACX,aAAa,GACb,cAAc,GACd,SAAS,EAAc,MACvB,SAAS,EAAc,MACvB,aACA,YACA,eAAe,GACf,GAAG,KAEH,EAAC,EAAA,CACC,aAAa,KACb,KAAK,QACL,cAAa,EACb,kBAAiB,2BAA2B,IAC5C,GAAI,oBAAoB,IACxB,UAAW,EACT,0DAGA,IAAW,SAAW,SACtB,IAAW,UAAY,4BACvB,IAAW,OAAS,UACpB,IAAW,UAAY,wBACvB,IAAW,SAAW,2BAGtB,GACE,2EAGF,GAAgB,IAAW,SAAW,gBACtC,GACE,IAAW,UACX,0CACF,GAAgB,IAAW,OAAS,iBAGpC,GACE,IAAW,UACX,0KAGF,GACE,IAAW,SACX,6KAGF,uEACA,IAAa,GAAsB,gCAAd,YACrB,GACE,4FACF,GACE,iHACF,EACD,CACD,GAAI,EAEH,YACS,CAGd,EAAc,OAAS"}

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

@@ -1,159 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/PressableSpan/PressableSpan.tsx
-const DEFAULT_PRESS_DETECT_DURATION = 400;
-/**
-* PressableSpan - An interactive span element that responds to long press gestures
-*
-* A versatile component that detects long press interactions and provides visual feedback.
-* Commonly used for text editing interfaces, selection systems, and interactive content
-* that requires differentiation between quick clicks and intentional long presses.
-*
-* ## Key Features
-* - **Long Press Detection**: Configurable press duration for different interaction patterns
-* - **Visual Feedback**: Smooth outline transitions to indicate interactive and selected states
-* - **Click Outside Detection**: Automatically deselects when clicking outside the component
-* - **Touch Support**: Works seamlessly on both desktop and mobile devices
-* - **Accessible**: Keyboard navigation support and proper ARIA attributes
-*
-* ## Use Cases
-* - Text editing interfaces where long press activates edit mode
-* - Content selection systems with visual feedback
-* - Interactive cards or elements that need press-and-hold activation
-* - Mobile-friendly interfaces requiring long press gestures
-*
-* ## Accessibility
-* - Uses semantic `role="button"` for proper screen reader announcement
-* - Keyboard navigable with `tabIndex={0}`
-* - Focus management with proper blur handling
-* - Visual outline indicators for focus and selection states
-*
-* @example
-* Basic usage with long press detection:
-* ```tsx
-* <PressableSpan onPress={() => setIsEditing(true)}>
-*   Press and hold to edit this text
-* </PressableSpan>
-* ```
-*
-* @example
-* With custom press duration and click outside handling:
-* ```tsx
-* <PressableSpan
-*   pressDuration={600}
-*   onPress={() => setIsEditing(true)}
-*   onClickOutside={() => setIsEditing(false)}
-*   isSelecting={isEditing}
-* >
-*   Custom behavior configuration
-* </PressableSpan>
-* ```
-*
-* @example
-* In a content editing context:
-* ```tsx
-* <PressableSpan
-*   onPress={() => startEditingContent(contentId)}
-*   onClickOutside={() => saveAndExitEditing()}
-*   className="prose-text"
-* >
-*   {editableContent}
-* </PressableSpan>
-* ```
-*/
-const PressableSpan = ({ children, onPress: onSelect, onClickOutside: onUnselect, pressDuration = DEFAULT_PRESS_DETECT_DURATION, isSelecting: isSelectingProp, ...props }) => {
-	const elementRef = useRef(null);
-	const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);
-	const pressTimerRef = useRef(null);
-	const handleOnLongPress = () => {
-		setIsSelectingState(true);
-		onSelect();
-	};
-	const startPressTimer = () => {
-		pressTimerRef.current = setTimeout(() => {
-			handleOnLongPress();
-		}, pressDuration);
-	};
-	const clearPressTimer = () => {
-		if (pressTimerRef.current) {
-			clearTimeout(pressTimerRef.current);
-			pressTimerRef.current = null;
-		}
-	};
-	const handleMouseDown = () => {
-		clearPressTimer();
-		startPressTimer();
-	};
-	const handleMouseUp = () => {
-		clearPressTimer();
-	};
-	const handleClickOutside = useCallback((event) => {
-		if (elementRef.current && !elementRef.current.contains(event.target)) {
-			setIsSelectingState(false);
-			onUnselect?.();
-		}
-	}, [onUnselect]);
-	useEffect(() => {
-		document.addEventListener("mousedown", handleClickOutside);
-		return () => {
-			document.removeEventListener("mousedown", handleClickOutside);
-		};
-	}, [handleClickOutside]);
-	const handleOnClick = (e) => {
-		if (isSelectingState) {
-			e.preventDefault();
-			e.stopPropagation();
-		}
-	};
-	const handleOnBlur = () => {
-		setIsSelectingState(false);
-	};
-	/**
-	* Handle keyboard interactions
-	* - Enter/Space: Trigger long press action immediately
-	* - Escape: Cancel selection/editing state
-	*/
-	const handleKeyDown = (e) => {
-		switch (e.key) {
-			case "Enter":
-			case " ":
-				e.preventDefault();
-				handleOnLongPress();
-				break;
-			case "Escape":
-				e.preventDefault();
-				setIsSelectingState(false);
-				onUnselect?.();
-				break;
-			default: break;
-		}
-	};
-	const isCurrentlySelecting = isSelectingProp ?? isSelectingState;
-	return /* @__PURE__ */ jsx("span", {
-		className: cn("inline cursor-pointer select-none rounded-md outline outline-2 outline-transparent outline-offset-4 transition-all delay-100 duration-200", isCurrentlySelecting ? "outline-inherit" : "hover:outline-inherit"),
-		role: "button",
-		tabIndex: 0,
-		"aria-pressed": isCurrentlySelecting ? "true" : "false",
-		"aria-label": `${isCurrentlySelecting ? "Selected" : "Selectable"} content`,
-		onKeyDown: handleKeyDown,
-		onClick: handleOnClick,
-		onMouseDown: handleMouseDown,
-		onMouseUp: handleMouseUp,
-		onMouseLeave: handleMouseUp,
-		onTouchStart: handleMouseDown,
-		onTouchEnd: handleMouseUp,
-		onTouchCancel: handleMouseUp,
-		onBlur: handleOnBlur,
-		ref: elementRef,
-		...props,
-		children
-	});
-};
-
-//#endregion
-export { PressableSpan };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{useCallback as t,useEffect as n,useRef as r,useState as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=({children:o,onPress:s,onClickOutside:c,pressDuration:l=400,isSelecting:u,...d})=>{let f=r(null),[p,m]=i(u),h=r(null),g=()=>{m(!0),s()},_=()=>{h.current=setTimeout(()=>{g()},l)},v=()=>{h.current&&=(clearTimeout(h.current),null)},y=()=>{v(),_()},b=()=>{v()},x=t(e=>{f.current&&!f.current.contains(e.target)&&(m(!1),c?.())},[c]);n(()=>(document.addEventListener(`mousedown`,x),()=>{document.removeEventListener(`mousedown`,x)}),[x]);let S=e=>{p&&(e.preventDefault(),e.stopPropagation())},C=()=>{m(!1)},w=e=>{switch(e.key){case`Enter`:case` `:e.preventDefault(),g();break;case`Escape`:e.preventDefault(),m(!1),c?.();break;default:break}},T=u??p;return a(`span`,{className:e(`inline cursor-pointer select-none rounded-md outline outline-2 outline-transparent outline-offset-4 transition-all delay-100 duration-200`,T?`outline-inherit`:`hover:outline-inherit`),role:`button`,tabIndex:0,"aria-pressed":T?`true`:`false`,"aria-label":`${T?`Selected`:`Selectable`} content`,onKeyDown:w,onClick:S,onMouseDown:y,onMouseUp:b,onMouseLeave:b,onTouchStart:y,onTouchEnd:b,onTouchCancel:b,onBlur:C,ref:f,...d,children:o})};export{o as PressableSpan};
 //# sourceMappingURL=PressableSpan.mjs.map

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":";;;;;;;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;EACC,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;GACI"}
+{"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,OAAA,CACC,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,YACI"}

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

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

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

@@ -1,180 +1,2 @@
-'use client';
-
-import { Container } from "../Container/index.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
-import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
-import { Popover } from "../Popover/dynamic.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
-import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
-import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
-import { useRightDrawer } from "./useRightDrawer.mjs";
-import { ChevronLeft, X } from "lucide-react";
-import { useEffect, useRef } from "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 };
+"use client";import{Container as e}from"../Container/index.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonVariant as i}from"../Button/Button.mjs";import{useDevice as a}from"../../hooks/useDevice.mjs";import{KeyboardShortcut as o}from"../KeyboardShortcut/KeyboardShortcut.mjs";import{Popover as s}from"../Popover/dynamic.mjs";import{useGetElementOrWindow as c}from"../../hooks/useGetElementOrWindow.mjs";import{useScrollBlockage as l}from"../../hooks/useScrollBlockage/index.mjs";import{MaxWidthSmoother as u}from"../MaxWidthSmoother/index.mjs";import{isElementAtTopAndNotCovered as d}from"./isElementAtTopAndNotCovered.mjs";import{useRightDrawer as f}from"./useRightDrawer.mjs";import{ChevronLeft as p,X as m}from"lucide-react";import{useEffect as h,useRef as g}from"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}=a(`md`),P=g(null),F=g(null),I=c(j),{open:L,close:R,isOpen:z}=f(),B=z(C),V=B;l({disableScroll:V,key:C?`right_drawer_${C}`:`right_drawer`}),h(()=>{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=g(A);return h(()=>{H.current=A},[A]),h(()=>{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(e,{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(t,{variant:i.HOVERABLE,color:n.TEXT,label:O.text??M.goBack.value,onClick:O.onBack,Icon:p,children:O?.text})}),v(`div`,{children:y(s,{identifier:`close-drawer`,children:[v(t,{variant:i.HOVERABLE,color:n.TEXT,label:`Close`,className:`ml-auto`,onClick:()=>{R(C),A?.()},Icon:m,size:r.ICON_MD}),v(s.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(o,{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};
 //# 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,4 +1 @@
-import { drawerManager, useRightDrawer } from "./useRightDrawer.mjs";
-import { RightDrawer } from "./RightDrawer.mjs";
-
-export { RightDrawer, drawerManager, useRightDrawer };
+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};

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

@@ -1,61 +1,2 @@
-//#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 };
+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};
 //# 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,+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"}
+{"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"}