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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Popover/index.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\n\nexport type PopoverProps = DetailedHTMLProps<\n  HTMLAttributes<HTMLDivElement>,\n  HTMLDivElement\n> & {\n  identifier: string;\n};\n\nexport type PopoverType = FC<PopoverProps> & {\n  Detail: FC<DetailProps>;\n};\n\n/**\n * Trigger allowing to open a popover menu.\n *\n * Example:\n * ```jsx\n * <Popover identifier=\"popover\">\n *   Open popover\n *\n *   <Popover.Detail identifier=\"popover\">\n *     <div>Content</div>\n *   </Popover.Detail>\n * </Popover>\n * ```\n *\n * > Note Popover.Trigger can be replaced by a button. Don't add a button inside the trigger.\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    aria-label={`Popover ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type DetailProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  xAlign?: PopoverXAlign | `${PopoverXAlign}`;\n  yAlign?: PopoverYAlign | `${PopoverYAlign}`;\n  displayArrow?: boolean;\n};\n\nexport enum PopoverXAlign {\n  START = 'start',\n  END = 'end',\n}\n\nexport enum PopoverYAlign {\n  BELOW = 'bellow',\n  ABOVE = 'above',\n}\n\n/**\n * Component that opens a popover menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <Popover.Detail identifier=\"popover\">\n *   <div>Content</div>\n * </Popover.Detail>\n * ```\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    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 ring-neutral ring-1 rounded-md',\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:content-[\"\"] before:w-0 before:h-0',\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-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-neutral',\n\n      /* Visibility management */\n      'overflow-x-visible transition-all duration-400 ease-in-out opacity-0',\n      isHidden !== false ? 'invisible' : 'delay-800 visible opacity-100',\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"],"names":["PopoverXAlign","PopoverYAlign"],"mappings":";;;AA+BO,MAAM,UAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,8CAA8C,SAAS;AAAA,IACrE,cAAY,WAAW,UAAU;AAAA,IACjC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAaK,IAAK,kCAAAA,mBAAL;AACLA,iBAAA,OAAA,IAAQ;AACRA,iBAAA,KAAA,IAAM;AAFI,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAKL,IAAK,kCAAAC,mBAAL;AACLA,iBAAA,OAAA,IAAQ;AACRA,iBAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAeZ,MAAM,SAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,cAAa;AAAA,IACb,eAAa;AAAA,IACb,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAClC,WAAW;AAAA,MACT;AAAA;AAAA,MAGA,WAAW,WAAW;AAAA,MACtB,WAAW,SAAS;AAAA,MACpB,WAAW,YAAY;AAAA,MACvB,WAAW,WAAW;AAAA;AAAA,MAGtB,gBACE;AAAA;AAAA,MAGF,gBAAgB,WAAW,WAAW;AAAA,MACtC,gBAAgB,WAAW,SAAS;AAAA;AAAA,MAGpC,gBACE,WAAW,YACX;AAAA;AAAA,MAGF,gBACE,WAAW,WACX;AAAA;AAAA,MAGF;AAAA,MACA,aAAa,QAAQ,cAAc;AAAA,MACnC,cACE;AAAA,MACF,eACE;AAAA,MACF;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,QAAQ,SAAS;"}
+{"version":3,"file":"index.mjs","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    aria-label={`Popover ${identifier}`}\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    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 ring-neutral ring-1 rounded-md',\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:content-[\"\"] before:w-0 before:h-0',\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-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-b-[10px] before:border-b-neutral',\n\n      /* Arrow pointing down (when popover is above trigger) */\n      displayArrow &&\n        yAlign === 'above' &&\n        'before:-bottom-[10px] before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-neutral',\n\n      /* Visibility management */\n      'overflow-x-visible transition-all duration-400 ease-in-out opacity-0',\n      isHidden !== false ? 'invisible' : 'delay-800 visible opacity-100',\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"],"names":["PopoverXAlign","PopoverYAlign"],"mappings":";;;AA2BO,IAAK,kCAAAA,mBAAL;AAELA,iBAAA,OAAA,IAAQ;AAERA,iBAAA,KAAA,IAAM;AAJI,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAUL,IAAK,kCAAAC,mBAAL;AAELA,iBAAA,OAAA,IAAQ;AAERA,iBAAA,OAAA,IAAQ;AAJE,SAAAA;AAAA,GAAA,iBAAA,CAAA,CAAA;AAwFL,MAAM,UAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,8CAA8C,SAAS;AAAA,IACrE,cAAY,WAAW,UAAU;AAAA,IACjC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAuFF,MAAM,SAA0B,CAAC;AAAA,EAC/B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,cAAa;AAAA,IACb,eAAa;AAAA,IACb,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAClC,WAAW;AAAA,MACT;AAAA;AAAA,MAGA,WAAW,WAAW;AAAA,MACtB,WAAW,SAAS;AAAA,MACpB,WAAW,YAAY;AAAA,MACvB,WAAW,WAAW;AAAA;AAAA,MAGtB,gBACE;AAAA;AAAA,MAGF,gBAAgB,WAAW,WAAW;AAAA,MACtC,gBAAgB,WAAW,SAAS;AAAA;AAAA,MAGpC,gBACE,WAAW,YACX;AAAA;AAAA,MAGF,gBACE,WAAW,WACX;AAAA;AAAA,MAGF;AAAA,MACA,aAAa,QAAQ,cAAc;AAAA,MACnC,cACE;AAAA,MACF,eACE;AAAA,MACF;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAGF,QAAQ,SAAS;"}

package/dist/components/PressableSpan/PressableSpan.cjs

@@ -13,7 +13,7 @@ const PressableSpan = ({
   isSelecting: isSelectingProp,
   ...props
 }) => {
-  const divRef = ReactExports.useRef(null);
+  const elementRef = ReactExports.useRef(null);
   const [isSelectingState, setIsSelectingState] = ReactExports.useState(isSelectingProp);
   const pressTimerRef = ReactExports.useRef(null);
   const handleOnLongPress = () => {
@@ -40,7 +40,7 @@ const PressableSpan = ({
   };
   const handleClickOutside = ReactExports.useCallback(
     (event) => {
-      if (divRef.current && !divRef.current.contains(event.target)) {
+      if (elementRef.current && !elementRef.current.contains(event.target)) {
         setIsSelectingState(false);
         onUnselect?.();
       }
@@ -62,16 +62,33 @@ const PressableSpan = ({
   const handleOnBlur = () => {
     setIsSelectingState(false);
   };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        handleOnLongPress();
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsSelectingState(false);
+        onUnselect?.();
+        break;
+    }
+  };
+  const isCurrentlySelecting = isSelectingProp ?? isSelectingState;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
       className: utils_cn.cn(
         "inline cursor-pointer select-none rounded-md outline outline-2 outline-offset-4 outline-transparent transition-all delay-100 duration-200",
-        isSelectingProp ?? isSelectingState ? "outline-inherit" : "hover:outline-inherit"
+        isCurrentlySelecting ? "outline-inherit" : "hover:outline-inherit"
       ),
       role: "button",
       tabIndex: 0,
-      onKeyUp: () => null,
+      "aria-pressed": isCurrentlySelecting ? "true" : "false",
+      "aria-label": `${isCurrentlySelecting ? "Selected" : "Selectable"} content`,
+      onKeyDown: handleKeyDown,
       onClick: handleOnClick,
       onMouseDown: handleMouseDown,
       onMouseUp: handleMouseUp,
@@ -80,7 +97,7 @@ const PressableSpan = ({
       onTouchEnd: handleMouseUp,
       onTouchCancel: handleMouseUp,
       onBlur: handleOnBlur,
-      ref: divRef,
+      ref: elementRef,
       ...props,
       children
     }

package/dist/components/PressableSpan/PressableSpan.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PressableSpan.cjs","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type HTMLAttributes,\n  type MouseEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\ntype PressableDivProps = {\n  onPress: () => void;\n  onClickOutside?: () => void;\n  pressDuration?: number;\n  isSelecting?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const PressableSpan: FC<PressableDivProps> = ({\n  children,\n  onPress: onSelect,\n  onClickOutside: onUnselect,\n  pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n  isSelecting: isSelectingProp,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n  const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n  const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleOnLongPress = () => {\n    setIsSelectingState(true);\n    onSelect();\n  };\n\n  const startPressTimer = () => {\n    pressTimerRef.current = setTimeout(() => {\n      handleOnLongPress();\n    }, pressDuration);\n  };\n\n  const clearPressTimer = () => {\n    if (pressTimerRef.current) {\n      clearTimeout(pressTimerRef.current);\n      pressTimerRef.current = null;\n    }\n  };\n\n  const handleMouseDown = () => {\n    clearPressTimer(); // Ensure any previous timer is cleared\n    startPressTimer();\n  };\n\n  const handleMouseUp = () => {\n    clearPressTimer();\n  };\n\n  // Use useCallback to ensure the function identity remains stable\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        setIsSelectingState(false);\n        onUnselect?.();\n      }\n    },\n    [onUnselect]\n  );\n\n  useEffect(() => {\n    // Attach click outside listener\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      // Cleanup\n      document.removeEventListener('mousedown', handleClickOutside);\n      // clearPressTimer(); // Ensure to clear the timer when component unmounts\n    };\n  }, [handleClickOutside]);\n\n  const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isSelectingState) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleOnBlur = () => {\n    // Stop editing when the element loses focus\n    setIsSelectingState(false);\n  };\n\n  return (\n    <span\n      className={cn(\n        'inline cursor-pointer select-none rounded-md outline outline-2 outline-offset-4 outline-transparent transition-all delay-100 duration-200',\n        (isSelectingProp ?? isSelectingState)\n          ? 'outline-inherit'\n          : 'hover:outline-inherit'\n      )}\n      role=\"button\"\n      tabIndex={0}\n      onKeyUp={() => null}\n      onClick={handleOnClick}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseUp}\n      onTouchStart={handleMouseDown}\n      onTouchEnd={handleMouseUp}\n      onTouchCancel={handleMouseUp}\n      onBlur={handleOnBlur}\n      ref={divRef}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":["useRef","useState","useCallback","useEffect","jsx","cn"],"mappings":";;;;;;AAaA,MAAM,gCAAgC;AAS/B,MAAM,gBAAuC,CAAC;AAAA,EACnD;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,QAAM,SAASA,aAAAA,OAAuB,IAAI;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAIC,aAAAA,SAAS,eAAe;AACxE,QAAM,gBAAgBD,aAAAA,OAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,wBAAoB,IAAI;AACxB,aAAA;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,kBAAc,UAAU,WAAW,MAAM;AACvC,wBAAA;AAAA,IACF,GAAG,aAAa;AAAA,EAClB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,oBAAA;AACA,oBAAA;AAAA,EACF;AAEA,QAAM,gBAAgB,MAAM;AAC1B,oBAAA;AAAA,EACF;AAGA,QAAM,qBAAqBE,aAAAA;AAAAA,IACzB,CAAC,UAAsB;AACrB,UAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,4BAAoB,KAAK;AACzB,qBAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAGbC,eAAAA,UAAU,MAAM;AAEd,aAAS,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAE9D;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,QAAM,gBAAmD,CAAC,MAAM;AAC9D,QAAI,kBAAkB;AACpB,QAAE,eAAA;AACF,QAAE,gBAAA;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AAEzB,wBAAoB,KAAK;AAAA,EAC3B;AAEA,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACC,mBAAmB,mBAChB,oBACA;AAAA,MAAA;AAAA,MAEN,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MACf,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,KAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
+{"version":3,"file":"PressableSpan.cjs","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type HTMLAttributes,\n  type MouseEventHandler,\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-offset-4 outline-transparent 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"],"names":["useRef","useState","useCallback","useEffect","jsx","cn"],"mappings":";;;;;;AAaA,MAAM,gCAAgC;AAmH/B,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,QAAM,aAAaA,aAAAA,OAAwB,IAAI;AAC/C,QAAM,CAAC,kBAAkB,mBAAmB,IAAIC,aAAAA,SAAS,eAAe;AACxE,QAAM,gBAAgBD,aAAAA,OAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,wBAAoB,IAAI;AACxB,aAAA;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,kBAAc,UAAU,WAAW,MAAM;AACvC,wBAAA;AAAA,IACF,GAAG,aAAa;AAAA,EAClB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,oBAAA;AACA,oBAAA;AAAA,EACF;AAEA,QAAM,gBAAgB,MAAM;AAC1B,oBAAA;AAAA,EACF;AAGA,QAAM,qBAAqBE,aAAAA;AAAAA,IACzB,CAAC,UAAsB;AACrB,UACE,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,MAAc,GACjD;AACA,4BAAoB,KAAK;AACzB,qBAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAGbC,eAAAA,UAAU,MAAM;AAEd,aAAS,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAE9D;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,QAAM,gBAAmD,CAAC,MAAM;AAC9D,QAAI,kBAAkB;AACpB,QAAE,eAAA;AACF,QAAE,gBAAA;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AAEzB,wBAAoB,KAAK;AAAA,EAC3B;AAOA,QAAM,gBAAgB,CAAC,MAA4C;AACjE,YAAQ,EAAE,KAAA;AAAA,MACR,KAAK;AAAA,MACL,KAAK;AACH,UAAE,eAAA;AACF,0BAAA;AACA;AAAA,MACF,KAAK;AACH,UAAE,eAAA;AACF,4BAAoB,KAAK;AACzB,qBAAA;AACA;AAAA,IAEA;AAAA,EAEN;AAEA,QAAM,uBAAuB,mBAAmB;AAEhD,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA,uBAAuB,oBAAoB;AAAA,MAAA;AAAA,MAE7C,MAAK;AAAA,MACL,UAAU;AAAA,MACV,gBAAc,uBAAuB,SAAS;AAAA,MAC9C,cAAY,GAAG,uBAAuB,aAAa,YAAY;AAAA,MAC/D,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,KAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

package/dist/components/PressableSpan/PressableSpan.d.ts

@@ -1,10 +1,112 @@
 import { FC, HTMLAttributes } from 'react';
-type PressableDivProps = {
+/**
+ * Props for the PressableSpan component
+ */
+type PressableSpanProps = {
+    /**
+     * Callback function triggered when a long press is detected
+     * @example
+     * ```tsx
+     * <PressableSpan onPress={() => console.log('Long pressed!')}>
+     *   Press and hold me
+     * </PressableSpan>
+     * ```
+     */
     onPress: () => void;
+    /**
+     * Optional callback function triggered when clicking outside the component while it's in selecting state
+     * @example
+     * ```tsx
+     * <PressableSpan
+     *   onPress={() => setIsEditing(true)}
+     *   onClickOutside={() => setIsEditing(false)}
+     * >
+     *   Click outside to deselect
+     * </PressableSpan>
+     * ```
+     */
     onClickOutside?: () => void;
+    /**
+     * Duration in milliseconds for long press detection
+     * @default 400
+     * @example
+     * ```tsx
+     * <PressableSpan pressDuration={800} onPress={() => {}}>
+     *   Longer press required
+     * </PressableSpan>
+     * ```
+     */
     pressDuration?: number;
+    /**
+     * External control for the selecting state
+     * @example
+     * ```tsx
+     * <PressableSpan isSelecting={isEditing} onPress={() => {}}>
+     *   Externally controlled
+     * </PressableSpan>
+     * ```
+     */
     isSelecting?: boolean;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const PressableSpan: FC<PressableDivProps>;
+} & HTMLAttributes<HTMLSpanElement>;
+/**
+ * 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>
+ * ```
+ */
+export declare const PressableSpan: FC<PressableSpanProps>;
 export {};
 //# sourceMappingURL=PressableSpan.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PressableSpan.d.ts","sourceRoot":"","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,EAAE,EACP,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAKf,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEnC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAkG/C,CAAC"}
+{"version":3,"file":"PressableSpan.d.ts","sourceRoot":"","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,EAAE,EACP,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAKf;;GAEG;AACH,KAAK,kBAAkB,GAAG;IACxB;;;;;;;;OAQG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;;;;;;;;OASG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AAEH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA6HhD,CAAC"}

package/dist/components/PressableSpan/PressableSpan.mjs

@@ -11,7 +11,7 @@ const PressableSpan = ({
   isSelecting: isSelectingProp,
   ...props
 }) => {
-  const divRef = useRef(null);
+  const elementRef = useRef(null);
   const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);
   const pressTimerRef = useRef(null);
   const handleOnLongPress = () => {
@@ -38,7 +38,7 @@ const PressableSpan = ({
   };
   const handleClickOutside = useCallback(
     (event) => {
-      if (divRef.current && !divRef.current.contains(event.target)) {
+      if (elementRef.current && !elementRef.current.contains(event.target)) {
         setIsSelectingState(false);
         onUnselect?.();
       }
@@ -60,16 +60,33 @@ const PressableSpan = ({
   const handleOnBlur = () => {
     setIsSelectingState(false);
   };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        handleOnLongPress();
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsSelectingState(false);
+        onUnselect?.();
+        break;
+    }
+  };
+  const isCurrentlySelecting = isSelectingProp ?? isSelectingState;
   return /* @__PURE__ */ jsx(
     "span",
     {
       className: cn(
         "inline cursor-pointer select-none rounded-md outline outline-2 outline-offset-4 outline-transparent transition-all delay-100 duration-200",
-        isSelectingProp ?? isSelectingState ? "outline-inherit" : "hover:outline-inherit"
+        isCurrentlySelecting ? "outline-inherit" : "hover:outline-inherit"
       ),
       role: "button",
       tabIndex: 0,
-      onKeyUp: () => null,
+      "aria-pressed": isCurrentlySelecting ? "true" : "false",
+      "aria-label": `${isCurrentlySelecting ? "Selected" : "Selectable"} content`,
+      onKeyDown: handleKeyDown,
       onClick: handleOnClick,
       onMouseDown: handleMouseDown,
       onMouseUp: handleMouseUp,
@@ -78,7 +95,7 @@ const PressableSpan = ({
       onTouchEnd: handleMouseUp,
       onTouchCancel: handleMouseUp,
       onBlur: handleOnBlur,
-      ref: divRef,
+      ref: elementRef,
       ...props,
       children
     }

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

@@ -1 +1 @@
-{"version":3,"file":"PressableSpan.mjs","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type HTMLAttributes,\n  type MouseEventHandler,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nconst DEFAULT_PRESS_DETECT_DURATION = 400;\n\ntype PressableDivProps = {\n  onPress: () => void;\n  onClickOutside?: () => void;\n  pressDuration?: number;\n  isSelecting?: boolean;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const PressableSpan: FC<PressableDivProps> = ({\n  children,\n  onPress: onSelect,\n  onClickOutside: onUnselect,\n  pressDuration = DEFAULT_PRESS_DETECT_DURATION,\n  isSelecting: isSelectingProp,\n  ...props\n}) => {\n  const divRef = useRef<HTMLDivElement>(null);\n  const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);\n  const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleOnLongPress = () => {\n    setIsSelectingState(true);\n    onSelect();\n  };\n\n  const startPressTimer = () => {\n    pressTimerRef.current = setTimeout(() => {\n      handleOnLongPress();\n    }, pressDuration);\n  };\n\n  const clearPressTimer = () => {\n    if (pressTimerRef.current) {\n      clearTimeout(pressTimerRef.current);\n      pressTimerRef.current = null;\n    }\n  };\n\n  const handleMouseDown = () => {\n    clearPressTimer(); // Ensure any previous timer is cleared\n    startPressTimer();\n  };\n\n  const handleMouseUp = () => {\n    clearPressTimer();\n  };\n\n  // Use useCallback to ensure the function identity remains stable\n  const handleClickOutside = useCallback(\n    (event: MouseEvent) => {\n      if (divRef.current && !divRef.current.contains(event.target as Node)) {\n        setIsSelectingState(false);\n        onUnselect?.();\n      }\n    },\n    [onUnselect]\n  );\n\n  useEffect(() => {\n    // Attach click outside listener\n    document.addEventListener('mousedown', handleClickOutside);\n\n    return () => {\n      // Cleanup\n      document.removeEventListener('mousedown', handleClickOutside);\n      // clearPressTimer(); // Ensure to clear the timer when component unmounts\n    };\n  }, [handleClickOutside]);\n\n  const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isSelectingState) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  const handleOnBlur = () => {\n    // Stop editing when the element loses focus\n    setIsSelectingState(false);\n  };\n\n  return (\n    <span\n      className={cn(\n        'inline cursor-pointer select-none rounded-md outline outline-2 outline-offset-4 outline-transparent transition-all delay-100 duration-200',\n        (isSelectingProp ?? isSelectingState)\n          ? 'outline-inherit'\n          : 'hover:outline-inherit'\n      )}\n      role=\"button\"\n      tabIndex={0}\n      onKeyUp={() => null}\n      onClick={handleOnClick}\n      onMouseDown={handleMouseDown}\n      onMouseUp={handleMouseUp}\n      onMouseLeave={handleMouseUp}\n      onTouchStart={handleMouseDown}\n      onTouchEnd={handleMouseUp}\n      onTouchCancel={handleMouseUp}\n      onBlur={handleOnBlur}\n      ref={divRef}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;AAaA,MAAM,gCAAgC;AAS/B,MAAM,gBAAuC,CAAC;AAAA,EACnD;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,QAAM,SAAS,OAAuB,IAAI;AAC1C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,eAAe;AACxE,QAAM,gBAAgB,OAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,wBAAoB,IAAI;AACxB,aAAA;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,kBAAc,UAAU,WAAW,MAAM;AACvC,wBAAA;AAAA,IACF,GAAG,aAAa;AAAA,EAClB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,oBAAA;AACA,oBAAA;AAAA,EACF;AAEA,QAAM,gBAAgB,MAAM;AAC1B,oBAAA;AAAA,EACF;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAsB;AACrB,UAAI,OAAO,WAAW,CAAC,OAAO,QAAQ,SAAS,MAAM,MAAc,GAAG;AACpE,4BAAoB,KAAK;AACzB,qBAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAGb,YAAU,MAAM;AAEd,aAAS,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAE9D;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,QAAM,gBAAmD,CAAC,MAAM;AAC9D,QAAI,kBAAkB;AACpB,QAAE,eAAA;AACF,QAAE,gBAAA;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AAEzB,wBAAoB,KAAK;AAAA,EAC3B;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACC,mBAAmB,mBAChB,oBACA;AAAA,MAAA;AAAA,MAEN,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAM;AAAA,MACf,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,KAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"PressableSpan.mjs","sources":["../../../src/components/PressableSpan/PressableSpan.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type FC,\n  type HTMLAttributes,\n  type MouseEventHandler,\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-offset-4 outline-transparent 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"],"names":[],"mappings":";;;;AAaA,MAAM,gCAAgC;AAmH/B,MAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,OAAwB,IAAI;AAC/C,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,eAAe;AACxE,QAAM,gBAAgB,OAA6C,IAAI;AAEvE,QAAM,oBAAoB,MAAM;AAC9B,wBAAoB,IAAI;AACxB,aAAA;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,kBAAc,UAAU,WAAW,MAAM;AACvC,wBAAA;AAAA,IACF,GAAG,aAAa;AAAA,EAClB;AAEA,QAAM,kBAAkB,MAAM;AAC5B,QAAI,cAAc,SAAS;AACzB,mBAAa,cAAc,OAAO;AAClC,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF;AAEA,QAAM,kBAAkB,MAAM;AAC5B,oBAAA;AACA,oBAAA;AAAA,EACF;AAEA,QAAM,gBAAgB,MAAM;AAC1B,oBAAA;AAAA,EACF;AAGA,QAAM,qBAAqB;AAAA,IACzB,CAAC,UAAsB;AACrB,UACE,WAAW,WACX,CAAC,WAAW,QAAQ,SAAS,MAAM,MAAc,GACjD;AACA,4BAAoB,KAAK;AACzB,qBAAA;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAGb,YAAU,MAAM;AAEd,aAAS,iBAAiB,aAAa,kBAAkB;AAEzD,WAAO,MAAM;AAEX,eAAS,oBAAoB,aAAa,kBAAkB;AAAA,IAE9D;AAAA,EACF,GAAG,CAAC,kBAAkB,CAAC;AAEvB,QAAM,gBAAmD,CAAC,MAAM;AAC9D,QAAI,kBAAkB;AACpB,QAAE,eAAA;AACF,QAAE,gBAAA;AAAA,IACJ;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AAEzB,wBAAoB,KAAK;AAAA,EAC3B;AAOA,QAAM,gBAAgB,CAAC,MAA4C;AACjE,YAAQ,EAAE,KAAA;AAAA,MACR,KAAK;AAAA,MACL,KAAK;AACH,UAAE,eAAA;AACF,0BAAA;AACA;AAAA,MACF,KAAK;AACH,UAAE,eAAA;AACF,4BAAoB,KAAK;AACzB,qBAAA;AACA;AAAA,IAEA;AAAA,EAEN;AAEA,QAAM,uBAAuB,mBAAmB;AAEhD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,uBAAuB,oBAAoB;AAAA,MAAA;AAAA,MAE7C,MAAK;AAAA,MACL,UAAU;AAAA,MACV,gBAAc,uBAAuB,SAAS;AAAA,MAC9C,cAAY,GAAG,uBAAuB,aAAa,YAAY;AAAA,MAC/D,WAAW;AAAA,MACX,SAAS;AAAA,MACT,aAAa;AAAA,MACb,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,KAAK;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

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

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

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

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

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