@intlayer/design-system 6.1.6 → 7.0.0-canary.1

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

@@ -0,0 +1,191 @@
+import { cn } from "../../utils/cn.mjs";
+import { Container } from "../Container/index.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Popover/index.tsx
+/**
+* Horizontal alignment options for popover positioning
+*/
+let PopoverXAlign = /* @__PURE__ */ function(PopoverXAlign$1) {
+	/** Align popover to start (left) of trigger */
+	PopoverXAlign$1["START"] = "start";
+	/** Align popover to end (right) of trigger */
+	PopoverXAlign$1["END"] = "end";
+	return PopoverXAlign$1;
+}({});
+/**
+* Vertical alignment options for popover positioning
+*/
+let PopoverYAlign = /* @__PURE__ */ function(PopoverYAlign$1) {
+	/** Position popover below the trigger */
+	PopoverYAlign$1["BELOW"] = "bellow";
+	/** Position popover above the trigger */
+	PopoverYAlign$1["ABOVE"] = "above";
+	return PopoverYAlign$1;
+}({});
+/**
+* Popover Component
+*
+* A versatile popover container that displays contextual content when triggered by hover
+* or focus interactions. Built with accessibility in mind and supports multiple positioning
+* options with smooth animations.
+*
+* Features:
+* - Hover and focus-based triggering
+* - Multiple positioning options (above/below, start/end)
+* - Accessibility compliant with ARIA attributes
+* - Smooth animations with configurable delays
+* - Optional directional arrows
+* - Automatic z-index management
+* - Responsive design support
+*
+* Architecture:
+* - Main Popover acts as trigger container
+* - Popover.Detail renders the actual popover content
+* - Uses CSS groups for coordinated hover/focus states
+* - Unique identifier system prevents conflicts
+*
+* @example
+* Basic hover popover:
+* ```jsx
+* <Popover identifier="help-tooltip">
+*   <button>Need Help?</button>
+*
+*   <Popover.Detail identifier="help-tooltip">
+*     <div>This is helpful information!</div>
+*   </Popover.Detail>
+* </Popover>
+* ```
+*
+* @example
+* Focus-triggered popover:
+* ```jsx
+* <Popover identifier="focus-menu">
+*   <input placeholder="Focus me" />
+*
+*   <Popover.Detail
+*     identifier="focus-menu"
+*     isFocusable
+*     isOverable={false}
+*   >
+*     <div>Focus-only menu content</div>
+*   </Popover.Detail>
+* </Popover>
+* ```
+*
+* @example
+* Positioned popover with custom alignment:
+* ```jsx
+* <Popover identifier="positioned">
+*   <span>Hover me</span>
+*
+*   <Popover.Detail
+*     identifier="positioned"
+*     xAlign={PopoverXAlign.END}
+*     yAlign={PopoverYAlign.ABOVE}
+*     displayArrow={false}
+*   >
+*     <div>Above and right-aligned</div>
+*   </Popover.Detail>
+* </Popover>
+* ```
+*
+* Accessibility Features:
+* - Proper ARIA labeling and relationships
+* - Keyboard navigation support
+* - Screen reader compatibility
+* - Focus management
+*
+* Performance Considerations:
+* - CSS-only animations for smooth transitions
+* - Efficient group-based state management
+* - Minimal DOM updates during interactions
+*
+* @param props - Popover component props
+* @returns Trigger container with popover functionality
+*/
+const Popover = ({ children, className, identifier,...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("group/popover relative flex cursor-pointer", className),
+	id: `unrollable-panel-button-${identifier}`,
+	"aria-haspopup": true,
+	...props,
+	children
+});
+/**
+* Popover Detail Component
+*
+* The actual popover content container with advanced positioning, animation, and
+* accessibility features. Automatically manages visibility based on trigger interactions.
+*
+* Features:
+* - Precise positioning with alignment options
+* - Smooth fade and slide animations
+* - Configurable directional arrows
+* - Hover and focus interaction support
+* - Accessibility-compliant ARIA attributes
+* - High z-index for overlay behavior
+* - Automatic visibility management
+*
+* Positioning System:
+* - X-axis: START (left-aligned) or END (right-aligned)
+* - Y-axis: BELOW (underneath) or ABOVE (on top)
+* - Automatic spacing with 1rem gap from trigger
+* - Responsive minimum width matching trigger
+*
+* Arrow Indicators:
+* - CSS-generated triangular arrows
+* - Positioned based on alignment settings
+* - Points toward trigger for visual connection
+* - Can be disabled for clean, minimal appearance
+*
+* Animation Behavior:
+* - Starts invisible with opacity: 0
+* - Smooth 400ms transitions with easing
+* - 800ms delay for hover states (prevents flicker)
+* - Immediate hiding when trigger loses focus/hover
+*
+* @example
+* Rich content popover:
+* ```jsx
+* <Popover.Detail identifier="rich-content">
+*   <div className="p-4">
+*     <h3>Popover Title</h3>
+*     <p>Detailed information with multiple paragraphs.</p>
+*     <button>Action Button</button>
+*   </div>
+* </Popover.Detail>
+* ```
+*
+* @example
+* Menu-style popover:
+* ```jsx
+* <Popover.Detail
+*   identifier="context-menu"
+*   displayArrow={false}
+*   xAlign={PopoverXAlign.END}
+* >
+*   <ul className="py-2">
+*     <li><button className="w-full px-4 py-2">Edit</button></li>
+*     <li><button className="w-full px-4 py-2">Delete</button></li>
+*   </ul>
+* </Popover.Detail>
+* ```
+*
+* @param props - Popover Detail component props
+* @returns Positioned popover content with animations and accessibility
+*/
+const Detail = ({ children, isHidden = void 0, isOverable = true, isFocusable = false, xAlign = PopoverXAlign.START, yAlign = PopoverYAlign.BELOW, identifier, className, displayArrow = true,...props }) => /* @__PURE__ */ jsx(Container, {
+	transparency: "sm",
+	role: "group",
+	"aria-hidden": isHidden,
+	"aria-labelledby": `unrollable-panel-button-${identifier}`,
+	id: `unrollable-panel-${identifier}`,
+	className: cn("absolute z-[1000] min-w-full rounded-md ring-1 ring-neutral", xAlign === "start" && "left-0", xAlign === "end" && "right-0", yAlign === "bellow" && "top-[calc(100%+1rem)]", yAlign === "above" && "bottom-[calc(100%+1rem)]", displayArrow && "before:absolute before:z-[999] before:h-0 before:w-0 before:content-[\"\"]", displayArrow && xAlign === "start" && "before:left-2", displayArrow && xAlign === "end" && "before:right-2", displayArrow && yAlign === "bellow" && "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", displayArrow && yAlign === "above" && "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", "overflow-x-visible opacity-0 transition-all duration-400 ease-in-out", isHidden !== false ? "invisible" : "visible opacity-100 delay-800", isOverable && "group-hover/popover:visible group-hover/popover:opacity-100 group-hover/popover:delay-800", isFocusable && "group-focus-within/popover:visible group-focus-within/popover:opacity-100 group-focus-within/popover:delay-800", className),
+	...props,
+	children
+});
+Popover.Detail = Detail;
+
+//#endregion
+export { Popover, PopoverXAlign, PopoverYAlign };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Popover: PopoverType","Detail: FC<DetailProps>"],"sources":["../../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\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 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/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 Popover: 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) 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=\"sm\"\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-[1000] min-w-full rounded-md ring-1 ring-neutral',\n\n      /* Positioning */\n      xAlign === 'start' && 'left-0',\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 && 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\nPopover.Detail = Detail;\n"],"mappings":";;;;;;;;AA2BA,IAAY,0DAAL;;AAEL;;AAEA;;;;;;AAMF,IAAY,0DAAL;;AAEL;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFF,MAAaA,WAAwB,EACnC,UACA,WACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,8CAA8C,UAAU;CACtE,IAAI,2BAA2B;CAC/B;CACA,GAAI;CAEH;EACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFR,MAAMC,UAA2B,EAC/B,UACA,WAAW,QACX,aAAa,MACb,cAAc,OACd,SAAS,cAAc,OACvB,SAAS,cAAc,OACvB,YACA,WACA,eAAe,KACf,GAAG,YAEH,oBAAC;CACC,cAAa;CACb,MAAK;CACL,eAAa;CACb,mBAAiB,2BAA2B;CAC5C,IAAI,oBAAoB;CACxB,WAAW,GACT,+DAGA,WAAW,WAAW,UACtB,WAAW,SAAS,WACpB,WAAW,YAAY,yBACvB,WAAW,WAAW,4BAGtB,gBACE,8EAGF,gBAAgB,WAAW,WAAW,iBACtC,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,QAAQ,SAAS"}

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

@@ -0,0 +1,160 @@
+'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 };
+//# sourceMappingURL=PressableSpan.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PressableSpan.mjs","names":["PressableSpan: FC<PressableSpanProps>","handleOnClick: MouseEventHandler<HTMLDivElement>"],"sources":["../../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  type MouseEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\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,MAAaA,iBAAyC,EACpD,UACA,SAAS,UACT,gBAAgB,YAChB,gBAAgB,+BAChB,aAAa,gBACb,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,MAAMC,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"}

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

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

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

@@ -0,0 +1,214 @@
+'use client';
+
+
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { Container } from "../Container/index.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
+import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
+import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
+import { useRightDrawerStore } from "./useRightDrawerStore.mjs";
+import { ChevronLeft, X } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useShallow } from "zustand/react/shallow";
+
+//#region src/components/RightDrawer/RightDrawer.tsx
+/**
+* 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>
+* ```
+*/
+const RightDrawer = ({ title, identifier, children, header, closeOnOutsideClick = true, backButton, isOpen: isOpenProp, onClose }) => {
+	const { isMobile } = useDevice("md");
+	const panelRef = useRef(null);
+	const childrenContainerRef = useRef(null);
+	const { close, open, isOpen } = useRightDrawerStore(useShallow((s) => ({
+		close: () => s.close(identifier),
+		open: () => s.open(identifier),
+		isOpen: s.isOpen(identifier)
+	})));
+	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) {
+					close();
+					onClose?.();
+				}
+			} catch (_e) {
+				close();
+				onClose?.();
+			}
+		};
+		window.addEventListener("mousedown", handleClickOutside);
+		return () => window.removeEventListener("mousedown", handleClickOutside);
+	}, [
+		isOpen,
+		close,
+		onClose,
+		closeOnOutsideClick,
+		identifier
+	]);
+	useEffect(() => {
+		if (isOpenProp !== void 0) if (isOpenProp) open();
+		else {
+			close();
+			onClose?.();
+		}
+	}, [
+		close,
+		open,
+		onClose,
+		isOpenProp,
+		identifier
+	]);
+	const handleSpareSpaceClick = (e) => {
+		if (e.target !== e.currentTarget) return;
+		if (isMobile) {
+			close();
+			onClose?.();
+		}
+	};
+	return /* @__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 flex-col gap-3 p-6",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex justify-between gap-3",
+							children: [/* @__PURE__ */ jsx("div", { children: backButton && /* @__PURE__ */ jsx(Button, {
+								variant: ButtonVariant.HOVERABLE,
+								color: ButtonColor.TEXT,
+								label: backButton.text ?? "Go back",
+								onClick: backButton.onBack,
+								Icon: ChevronLeft,
+								children: backButton?.text
+							}) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
+								variant: ButtonVariant.HOVERABLE,
+								color: ButtonColor.TEXT,
+								label: "Close",
+								className: "ml-auto",
+								onClick: close,
+								Icon: X,
+								size: ButtonSize.ICON_MD
+							}) })]
+						}),
+						title && /* @__PURE__ */ jsx("h2", {
+							className: "flex items-center justify-center font-bold text-lg",
+							children: title
+						}),
+						header
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex h-full flex-col overflow-y-auto p-2",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex flex-1 flex-col",
+						onClick: handleSpareSpaceClick,
+						ref: childrenContainerRef,
+						children
+					})
+				})]
+			})
+		})
+	});
+};
+
+//#endregion
+export { RightDrawer };
+//# sourceMappingURL=RightDrawer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RightDrawer.mjs","names":["RightDrawer: FC<RightDrawerProps>","handleSpareSpaceClick: MouseEventHandler<HTMLDivElement>"],"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 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          <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 font-bold text-lg\">\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgOA,MAAaA,eAAqC,EAChD,OACA,YACA,UACA,QACA,sBAAsB,MACtB,YACA,QAAQ,YACR,cACI;CACJ,MAAM,EAAE,aAAa,UAAU,KAAK;CACpC,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,uBAAuB,OAAuB,KAAK;CACzD,MAAM,EAAE,OAAO,MAAM,WAAW,oBAC9B,YAAY,OAAO;EACjB,aAAa,EAAE,MAAM,WAAW;EAChC,YAAY,EAAE,KAAK,WAAW;EAC9B,QAAQ,EAAE,OAAO,WAAW;EAC7B,EAAE,CACJ;AAED,mBAAkB;EAChB,eAAe;EACf,KAAK,aAAa,gBAAgB,eAAe;EAClD,CAAC;AAEF,iBAAgB;EACd,MAAM,sBAAsB,UAAsB;AAChD,OAAI;AACF,QAAI,CAAC,SAAS,QAAS;IAGvB,MAAM,cAAc,UAAU;IAG9B,MAAM,iBACJ,MAAM,UAAU,CAAC,SAAS,QAAQ,SAAS,MAAM,OAAe;IAGlE,MAAM,oBAAoB,4BAA4B,SAAS,QAAQ;AAEvE,QACG,eAAe,kBAAkB,qBAClC,CAAC,MAAM,QACP;AACA,YAAO;AACP,gBAAW;;YAEN,IAAI;AACX,WAAO;AACP,eAAW;;;AAIf,SAAO,iBAAiB,aAAa,mBAAmB;AACxD,eAAa,OAAO,oBAAoB,aAAa,mBAAmB;IACvE;EAAC;EAAQ;EAAO;EAAS;EAAqB;EAAW,CAAC;AAE7D,iBAAgB;AACd,MAAI,eAAe,OACjB,KAAI,WACF,OAAM;OACD;AACL,UAAO;AACP,cAAW;;IAGd;EAAC;EAAO;EAAM;EAAS;EAAY;EAAW,CAAC;CAElD,MAAMC,yBAA4D,MAAM;AAEtE,MAAI,EAAE,WAAW,EAAE,cACjB;AAGF,MAAI,UAAU;AACZ,UAAO;AACP,cAAW;;;AAIf,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAiB,UAAU,CAAC;GAAQ,OAAM;aACzC,qBAAC;IACC,WAAU;IACV,KAAK;IACL,aAAY;eAEZ,qBAAC;KAAI,WAAU;;MACb,qBAAC;OAAI,WAAU;kBACb,oBAAC,mBACE,cACC,oBAAC;QACC,SAAS,cAAc;QACvB,OAAO,YAAY;QACnB,OAAO,WAAW,QAAQ;QAC1B,SAAS,WAAW;QACpB,MAAM;kBAEL,YAAY;SACN,GAEP,EACN,oBAAC,mBACC,oBAAC;QACC,SAAS,cAAc;QACvB,OAAO,YAAY;QACnB,OAAM;QACN,WAAU;QACV,SAAS;QACT,MAAM;QACN,MAAM,WAAW;SACjB,GACE;QACF;MACL,SACC,oBAAC;OAAG,WAAU;iBACX;QACE;MAEN;;MACG,EAEN,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,WAAU;MACV,SAAS;MACT,KAAK;MAEJ;OACG;MACF;KACI;IACK;GACf"}

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

@@ -0,0 +1,4 @@
+import { useRightDrawerStore } from "./useRightDrawerStore.mjs";
+import { RightDrawer } from "./RightDrawer.mjs";
+
+export { RightDrawer, useRightDrawerStore };