npm - @intlayer/design-system - Versions diffs - 7.6.0-canary.1 → 8.0.0-canary.0 - Mend

@intlayer/design-system 7.6.0-canary.1 → 8.0.0-canary.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

package/dist/esm/components/Popover/static.mjs CHANGED Viewed

@@ -9,6 +9,8 @@ import { jsx } from "react/jsx-runtime";
 let PopoverXAlign = /* @__PURE__ */ function(PopoverXAlign$1) {
 	/** Align popover to start (left) of trigger */
 	PopoverXAlign$1["START"] = "start";
+	/** Align popover to center of trigger */
+	PopoverXAlign$1["CENTER"] = "center";
 	/** Align popover to end (right) of trigger */
 	PopoverXAlign$1["END"] = "end";
 	return PopoverXAlign$1;
@@ -32,7 +34,7 @@ let PopoverYAlign = /* @__PURE__ */ function(PopoverYAlign$1) {
 *
 * Features:
 * - Hover and focus-based triggering
-* - Multiple positioning options (above/below, start/end)
+* - Multiple positioning options (above/below, start/center/end)
 * - Accessibility compliant with ARIA attributes
 * - Smooth animations with configurable delays
 * - Optional directional arrows
@@ -127,7 +129,7 @@ const PopoverStatic = ({ children, className, identifier, ...props }) => /* @__P
 * - Automatic visibility management
 *
 * Positioning System:
-* - X-axis: START (left-aligned) or END (right-aligned)
+* - X-axis: START (left-aligned), CENTER (centered), or END (right-aligned)
 * - Y-axis: BELOW (underneath) or ABOVE (on top)
 * - Automatic spacing with 1rem gap from trigger
 * - Responsive minimum width matching trigger
@@ -160,14 +162,14 @@ const PopoverStatic = ({ children, className, identifier, ...props }) => /* @__P
 * Menu-style popover:
 * ```jsx
 * <Popover.Detail
-*   identifier="context-menu"
-*   displayArrow={false}
-*   xAlign={PopoverXAlign.END}
+* 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>
+* <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>
 * ```
 *
@@ -180,7 +182,7 @@ const Detail = ({ children, isHidden = void 0, isOverable = true, isFocusable =
 	"aria-hidden": isHidden,
 	"aria-labelledby": `unrollable-panel-button-${identifier}`,
 	id: `unrollable-panel-${identifier}`,
-	className: cn("absolute z-50 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),
+	className: cn("absolute z-50 min-w-full rounded-md ring-1 ring-neutral", xAlign === "start" && "left-0", xAlign === "center" && "left-1/2 -translate-x-1/2", 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 === "center" && "before:left-1/2 before:-translate-x-1/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
 });

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

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

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

@@ -8,7 +8,7 @@ import { Popover } from "../Popover/dynamic.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 { useRightDrawer } from "./useRightDrawer.mjs";
 import { ChevronLeft, X } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -20,10 +20,9 @@ const RightDrawer = ({ title, identifier, children, header, footer, closeOnOutsi
 	const { isMobile } = useDevice("md");
 	const panelRef = useRef(null);
 	const childrenContainerRef = useRef(null);
-	const openDrawer = useRightDrawerStore((s) => s.open);
-	const closeDrawer = useRightDrawerStore((s) => s.close);
-	const storeIsOpen = useRightDrawerStore((s) => s.isOpen(identifier));
-	const isOpen = useRightDrawerStore((s) => s.isOpen(identifier));
+	const { open: openDrawer, close: closeDrawer, isOpen: checkIsOpen } = useRightDrawer();
+	const storeIsOpen = checkIsOpen(identifier);
+	const isOpen = storeIsOpen;
 	useScrollBlockage({
 		disableScroll: isOpen,
 		key: identifier ? `right_drawer_${identifier}` : "right_drawer"

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

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

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

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

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"useRightDrawer.mjs","names":[],"sources":["../../../../src/components/RightDrawer/useRightDrawer.ts"],"sourcesContent":["'use client';\n\nimport { useSyncExternalStore } from 'react';\n\ntype DrawerState = Record<string, boolean>;\n\nclass DrawerObservable {\n private listeners = new Set<() => void>();\n private drawers: DrawerState = {};\n\n subscribe = (listener: () => void) => {\n this.listeners.add(listener);\n return () => {\n this.listeners.delete(listener);\n };\n };\n\n getSnapshot = () => {\n return this.drawers;\n };\n\n open = (key: string) => {\n if (this.drawers[key]) return;\n this.drawers = { ...this.drawers, [key]: true };\n this.emit();\n };\n\n close = (key: string) => {\n if (!this.drawers[key]) return;\n this.drawers = { ...this.drawers, [key]: false };\n this.emit();\n };\n\n set = (states: DrawerState) => {\n let changed = false;\n const newDrawers = { ...this.drawers };\n\n for (const [key, value] of Object.entries(states)) {\n if (newDrawers[key] !== value) {\n newDrawers[key] = value;\n changed = true;\n }\n }\n\n if (changed) {\n this.drawers = newDrawers;\n this.emit();\n }\n };\n\n private emit = () => {\n this.listeners.forEach((listener) => {\n listener();\n });\n };\n}\n\nexport const drawerManager = new DrawerObservable();\n\nexport const useRightDrawer = () => {\n const drawers = useSyncExternalStore(\n drawerManager.subscribe,\n drawerManager.getSnapshot,\n () => ({}) as DrawerState\n );\n\n return {\n open: drawerManager.open,\n close: drawerManager.close,\n set: drawerManager.set,\n isOpen: (key: string) => !!drawers[key],\n };\n};\n"],"mappings":";;;;;AAMA,IAAM,mBAAN,MAAuB;CACrB,AAAQ,4BAAY,IAAI,KAAiB;CACzC,AAAQ,UAAuB,EAAE;CAEjC,aAAa,aAAyB;AACpC,OAAK,UAAU,IAAI,SAAS;AAC5B,eAAa;AACX,QAAK,UAAU,OAAO,SAAS;;;CAInC,oBAAoB;AAClB,SAAO,KAAK;;CAGd,QAAQ,QAAgB;AACtB,MAAI,KAAK,QAAQ,KAAM;AACvB,OAAK,UAAU;GAAE,GAAG,KAAK;IAAU,MAAM;GAAM;AAC/C,OAAK,MAAM;;CAGb,SAAS,QAAgB;AACvB,MAAI,CAAC,KAAK,QAAQ,KAAM;AACxB,OAAK,UAAU;GAAE,GAAG,KAAK;IAAU,MAAM;GAAO;AAChD,OAAK,MAAM;;CAGb,OAAO,WAAwB;EAC7B,IAAI,UAAU;EACd,MAAM,aAAa,EAAE,GAAG,KAAK,SAAS;AAEtC,OAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,OAAO,CAC/C,KAAI,WAAW,SAAS,OAAO;AAC7B,cAAW,OAAO;AAClB,aAAU;;AAId,MAAI,SAAS;AACX,QAAK,UAAU;AACf,QAAK,MAAM;;;CAIf,AAAQ,aAAa;AACnB,OAAK,UAAU,SAAS,aAAa;AACnC,aAAU;IACV;;;AAIN,MAAa,gBAAgB,IAAI,kBAAkB;AAEnD,MAAa,uBAAuB;CAClC,MAAM,UAAU,qBACd,cAAc,WACd,cAAc,oBACP,EAAE,EACV;AAED,QAAO;EACL,MAAM,cAAc;EACpB,OAAO,cAAc;EACrB,KAAK,cAAc;EACnB,SAAS,QAAgB,CAAC,CAAC,QAAQ;EACpC"}

package/dist/esm/components/index.mjs CHANGED Viewed

@@ -45,6 +45,7 @@ import { TabSelector, TabSelectorColor } from "./TabSelector/TabSelector.mjs";
 import { Tab } from "./Tab/Tab.mjs";
 import { Modal, ModalSize } from "./Modal/Modal.mjs";
 import { Table } from "./Table/Table.mjs";
+import { MarkdownProcessor, RuleType, compiler, sanitizer as defaultSanitizer, slugify as defaultSlugify } from "./MarkDownRender/processor-adapter.mjs";
 import { MarkdownRenderer } from "./MarkDownRender/MarkDownRender.mjs";
 import { TextEditor, TextEditorContainer, traceKeys } from "./DictionaryFieldEditor/ContentEditorView/TextEditor.mjs";
 import { KeyPathBreadcrumb } from "./DictionaryFieldEditor/KeyPathBreadcrumb.mjs";
@@ -90,7 +91,7 @@ import { ShowingResultsNumberItems } from "./Pagination/ShowingResultsNumberItem
 import { DotPattern } from "./Pattern/DotPattern.mjs";
 import { GridPattern } from "./Pattern/GridPattern.mjs";
 import { Spotlight } from "./Pattern/SpotLight.mjs";
-import { useRightDrawerStore } from "./RightDrawer/useRightDrawerStore.mjs";
+import { drawerManager, useRightDrawer } from "./RightDrawer/useRightDrawer.mjs";
 import { RightDrawer } from "./RightDrawer/RightDrawer.mjs";
 import { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize } from "./Tag/index.mjs";
 import { Terminal } from "./Terminal/Terminal.mjs";
@@ -101,4 +102,4 @@ import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastT
 import { reducer, toast, useToast } from "./Toaster/useToast.mjs";
 import { Toaster } from "./Toaster/Toaster.mjs";
-export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BadgeColor, BadgeSize, BadgeVariant, Breadcrumb, Browser, Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, Carousel, Checkbox, CheckboxColor, CheckboxSize, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CollapsibleTable, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditor, ContentSelector, CopyButton, CopyToClipboard, DesktopThemeSwitcher, Detail, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, DropDownYAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, flags_exports as Flags, Footer, Form, GridPattern, H1, H2, H3, H4, H5, H6, HeightResizer, HideShow, IDE, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputSize, InputVariant, InstagramLogo, KeyList, KeyPathBreadcrumb, KeyboardScreenAdapter, KeyboardShortcut, Label, LanguageBackground, LanguageSection, Link, LinkColor, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, LinkedInLogo, Loader, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NumberItemsSelector, OTPInput, OTPInputContext, Pagination, PaginationSize, PaginationVariant, Popover, PopoverStatic, PopoverXAlign, PopoverYAlign, PressableSpan, ProductHuntLogo, RightDrawer, SaveForm, SearchInput, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator, ShowingResultsNumberItems, SocialNetworks, Spotlight, SwitchSelector, SwitchSelectorColor, SwitchSelectorSize, Tab, TabSelector, TabSelectorColor, Table, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, Terminal, TextArea, TextEditor, TextEditorContainer, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, VersionSwitcher, VersionSwitcherProvider, WithResizer, XLogo, YoutubeLogo, badgeVariants, buttonVariants, checkIsExternalLink, checkboxVariants, containerVariants, getCapitals, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, reducer, toast, traceKeys, useCopyToClipboard, useDebounce, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawerStore, useToast, useVersionSwitcher };
+export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BadgeColor, BadgeSize, BadgeVariant, Breadcrumb, Browser, Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, Carousel, Checkbox, CheckboxColor, CheckboxSize, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CollapsibleTable, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditor, ContentSelector, CopyButton, CopyToClipboard, DesktopThemeSwitcher, Detail, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, DropDownYAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, flags_exports as Flags, Footer, Form, GridPattern, H1, H2, H3, H4, H5, H6, HeightResizer, HideShow, IDE, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputSize, InputVariant, InstagramLogo, KeyList, KeyPathBreadcrumb, KeyboardScreenAdapter, KeyboardShortcut, Label, LanguageBackground, LanguageSection, Link, LinkColor, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, LinkedInLogo, Loader, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkdownProcessor, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NumberItemsSelector, OTPInput, OTPInputContext, Pagination, PaginationSize, PaginationVariant, Popover, PopoverStatic, PopoverXAlign, PopoverYAlign, PressableSpan, ProductHuntLogo, RightDrawer, RuleType, SaveForm, SearchInput, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator, ShowingResultsNumberItems, SocialNetworks, Spotlight, SwitchSelector, SwitchSelectorColor, SwitchSelectorSize, Tab, TabSelector, TabSelectorColor, Table, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, Terminal, TextArea, TextEditor, TextEditorContainer, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, VersionSwitcher, VersionSwitcherProvider, WithResizer, XLogo, YoutubeLogo, badgeVariants, buttonVariants, checkIsExternalLink, checkboxVariants, compiler, containerVariants, drawerManager, getCapitals, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, reducer, defaultSanitizer as sanitizer, defaultSlugify as slugify, toast, traceKeys, useCopyToClipboard, useDebounce, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawer, useToast, useVersionSwitcher };

package/dist/esm/hooks/useScrollBlockage/index.mjs CHANGED Viewed

@@ -3,16 +3,11 @@
 import { useGetElementOrWindow } from "../useGetElementOrWindow.mjs";
 import { useScrollBlockageStore } from "./useScrollBlockageStore.mjs";
 import { useEffect } from "react";
-import { useShallow } from "zustand/react/shallow";
 //#region src/hooks/useScrollBlockage/index.tsx
 const useScrollBlockage = (props) => {
 	const { disableScroll = false, element, key = "unnamed_blocker" } = props ?? {};
-	const { isElementScrollBlocked, addBlockage, removeBlockage } = useScrollBlockageStore(useShallow((s) => ({
-		isElementScrollBlocked: s.isElementScrollBlocked,
-		addBlockage: s.addBlockage,
-		removeBlockage: s.removeBlockage
-	})));
+	const { isElementScrollBlocked, addBlockage, removeBlockage } = useScrollBlockageStore();
 	const containerElement = useGetElementOrWindow(element);
 	useEffect(() => {
 		const el = element ?? window.document.body;

package/dist/esm/hooks/useScrollBlockage/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/hooks/useScrollBlockage/index.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { ~~useShallow } from 'zustand/react/shallow';\nimport {~~ useGetElementOrWindow } from '../useGetElementOrWindow';\n\nimport { useScrollBlockageStore } from './useScrollBlockageStore';\n\ntype useScrollBlockagePropsReadOnly = {\n disableScroll: undefined;\n key: undefined;\n element?: HTMLElement; // The element to block the scroll. If not defined, the window will be used\n};\n\ntype useScrollBlockageProps = {\n disableScroll: boolean;\n key: string; // The key to identify the blockage to avoid conflicts. Required if disableScroll is defined\n element?: HTMLElement; // The element to block the scroll. If not defined, the window will be used\n};\n\nexport const useScrollBlockage = (\n props?: useScrollBlockageProps \| useScrollBlockagePropsReadOnly\n) => {\n const {\n disableScroll = false,\n element,\n key = 'unnamed_blocker',\n } = props ?? {};\n\n const { isElementScrollBlocked, addBlockage, removeBlockage } =\n useScrollBlockageStore(~~\n useShallow((s~~) ~~=> ({\n isElementScrollBlocked: s.isElementScrollBlocked,\n addBlockage: s.addBlockage,\n removeBlockage: s.removeBlockage,\n }))\n )~~;\n\n const containerElement = useGetElementOrWindow(element);\n\n useEffect(() => {\n const el = element ?? window.document.body;\n\n if (disableScroll) {\n addBlockage(key, el);\n } else {\n removeBlockage(key, el);\n }\n }, [addBlockage, disableScroll, element, key, removeBlockage]);\n\n const isScrollBlocked = containerElement\n ? isElementScrollBlocked(containerElement)\n : false;\n\n return { isScrollBlocked };\n};\n"],"mappings":"~~;;;;;;;;AAoBA~~,MAAa,qBACX,UACG;CACH,MAAM,EACJ,gBAAgB,OAChB,SACA,MAAM,sBACJ,SAAS,EAAE;CAEf,MAAM,EAAE,wBAAwB,aAAa,mBAC3C,~~uBACE,YAAY,OAAO;EACjB,~~wBAAwB~~,EAAE~~;~~EAC1B~~,~~aAAa,EAAE;EACf,gBAAgB,EAAE;EACnB,EAAE,CACJ;CAEH,~~MAAM,mBAAmB,sBAAsB,QAAQ;AAEvD,iBAAgB;EACd,MAAM,KAAK,WAAW,OAAO,SAAS;AAEtC,MAAI,cACF,aAAY,KAAK,GAAG;MAEpB,gBAAe,KAAK,GAAG;IAExB;EAAC;EAAa;EAAe;EAAS;EAAK;EAAe,CAAC;AAM9D,QAAO,EAAE,iBAJe,mBACpB,uBAAuB,iBAAiB,GACxC,OAEsB"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/hooks/useScrollBlockage/index.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useGetElementOrWindow } from '../useGetElementOrWindow';\n\nimport { useScrollBlockageStore } from './useScrollBlockageStore';\n\ntype useScrollBlockagePropsReadOnly = {\n disableScroll: undefined;\n key: undefined;\n element?: HTMLElement; // The element to block the scroll. If not defined, the window will be used\n};\n\ntype useScrollBlockageProps = {\n disableScroll: boolean;\n key: string; // The key to identify the blockage to avoid conflicts. Required if disableScroll is defined\n element?: HTMLElement; // The element to block the scroll. If not defined, the window will be used\n};\n\nexport const useScrollBlockage = (\n props?: useScrollBlockageProps \| useScrollBlockagePropsReadOnly\n) => {\n const {\n disableScroll = false,\n element,\n key = 'unnamed_blocker',\n } = props ?? {};\n\n const { isElementScrollBlocked, addBlockage, removeBlockage } =\n useScrollBlockageStore();\n\n const containerElement = useGetElementOrWindow(element);\n\n useEffect(() => {\n const el = element ?? window.document.body;\n\n if (disableScroll) {\n addBlockage(key, el);\n } else {\n removeBlockage(key, el);\n }\n }, [addBlockage, disableScroll, element, key, removeBlockage]);\n\n const isScrollBlocked = containerElement\n ? isElementScrollBlocked(containerElement)\n : false;\n\n return { isScrollBlocked };\n};\n"],"mappings":";;;;;;;AAmBA,MAAa,qBACX,UACG;CACH,MAAM,EACJ,gBAAgB,OAChB,SACA,MAAM,sBACJ,SAAS,EAAE;CAEf,MAAM,EAAE,wBAAwB,aAAa,mBAC3C,wBAAwB;CAE1B,MAAM,mBAAmB,sBAAsB,QAAQ;AAEvD,iBAAgB;EACd,MAAM,KAAK,WAAW,OAAO,SAAS;AAEtC,MAAI,cACF,aAAY,KAAK,GAAG;MAEpB,gBAAe,KAAK,GAAG;IAExB;EAAC;EAAa;EAAe;EAAS;EAAK;EAAe,CAAC;AAM9D,QAAO,EAAE,iBAJe,mBACpB,uBAAuB,iBAAiB,GACxC,OAEsB"}

package/dist/esm/hooks/useScrollBlockage/useScrollBlockageStore.mjs CHANGED Viewed

@@ -1,41 +1,70 @@
-import { create } from "zustand";
+import { useSyncExternalStore } from "react";
 //#region src/hooks/useScrollBlockage/useScrollBlockageStore.ts
-const useScrollBlockageStore = create((set, get) => ({
-	scrollBlockers: [],
-	addBlockage: (blockerName, element) => set((state) => {
-		const scrollBlockers = state.scrollBlockers;
-		const blockersElement = scrollBlockers.find((blocker) => blocker.element === element);
+var ScrollBlockageObservable = class {
+	listeners = /* @__PURE__ */ new Set();
+	scrollBlockers = [];
+	subscribe = (listener) => {
+		this.listeners.add(listener);
+		return () => {
+			this.listeners.delete(listener);
+		};
+	};
+	getSnapshot = () => {
+		return this.scrollBlockers;
+	};
+	addBlockage = (blockerName, element) => {
+		const blockersElement = this.scrollBlockers.find((blocker) => blocker.element === element);
 		if (blockersElement) {
-			const newBlockers = blockersElement.blockers.includes(blockerName) ? blockersElement.blockers : [...blockersElement.blockers, blockerName];
-			return { scrollBlockers: scrollBlockers.map((blocker) => blocker.element === element ? {
+			if (blockersElement.blockers.includes(blockerName)) return;
+			this.scrollBlockers = this.scrollBlockers.map((blocker) => blocker.element === element ? {
 				...blocker,
-				blockers: newBlockers
-			} : blocker) };
+				blockers: [...blocker.blockers, blockerName]
+			} : blocker);
+		} else {
+			element.style.overflowY = "hidden";
+			element.style.overflowX = "hidden";
+			this.scrollBlockers = [...this.scrollBlockers, {
+				element,
+				blockers: [blockerName]
+			}];
 		}
-		element.style.overflowY = "hidden";
-		element.style.overflowX = "hidden";
-		return { scrollBlockers: [...scrollBlockers, {
-			element,
-			blockers: [blockerName]
-		}] };
-	}),
-	removeBlockage: (blockerName, element) => set((state) => {
-		const scrollBlockers = state.scrollBlockers;
-		const blocker = scrollBlockers.find((blocker$1) => blocker$1.element === element);
+		this.emit();
+	};
+	removeBlockage = (blockerName, element) => {
+		const blocker = this.scrollBlockers.find((blocker$1) => blocker$1.element === element);
 		if (blocker) {
-			if (blocker.blockers.length > 1) return { scrollBlockers: scrollBlockers.map((blocker$1) => blocker$1.element === element ? {
-				...blocker$1,
-				blockers: blocker$1.blockers.filter((b) => b !== blockerName)
-			} : blocker$1) };
-			element.style.overflowY = "auto";
-			return { scrollBlockers: scrollBlockers.filter((blocker$1) => blocker$1.element !== element) };
+			if (blocker.blockers.length > 1) this.scrollBlockers = this.scrollBlockers.map((b) => b.element === element ? {
+				...b,
+				blockers: b.blockers.filter((name) => name !== blockerName)
+			} : b);
+			else {
+				element.style.overflowY = "";
+				element.style.overflowX = "";
+				this.scrollBlockers = this.scrollBlockers.filter((b) => b.element !== element);
+			}
+			this.emit();
 		}
-		return { scrollBlockers };
-	}),
-	isElementScrollBlocked: (element) => get().scrollBlockers.some((blocker) => blocker.element === element)
-}));
+	};
+	isElementScrollBlocked = (element) => {
+		return this.scrollBlockers.some((blocker) => blocker.element === element);
+	};
+	emit = () => {
+		this.listeners.forEach((listener) => {
+			listener();
+		});
+	};
+};
+const scrollBlockageManager = new ScrollBlockageObservable();
+const useScrollBlockageStore = () => {
+	return {
+		scrollBlockers: useSyncExternalStore(scrollBlockageManager.subscribe, scrollBlockageManager.getSnapshot, () => []),
+		addBlockage: scrollBlockageManager.addBlockage,
+		removeBlockage: scrollBlockageManager.removeBlockage,
+		isElementScrollBlocked: scrollBlockageManager.isElementScrollBlocked
+	};
+};
 //#endregion
-export { useScrollBlockageStore };
+export { scrollBlockageManager, useScrollBlockageStore };
 //# sourceMappingURL=useScrollBlockageStore.mjs.map

package/dist/esm/hooks/useScrollBlockage/useScrollBlockageStore.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useScrollBlockageStore.mjs","names":["blocker"],"sources":["../../../../src/hooks/useScrollBlockage/useScrollBlockageStore.ts"],"sourcesContent":["import { ~~create~~ } from '~~zustand~~';\n\ntype Blocker = {\n element: Element;\n blockers: string[];\n};\n\~~ntype~~ ~~ScrollBlockageStore~~ = {\n ~~scrollBlockers:~~ ~~Blocker[];\n addBlockage:~~ ~~(blockerName:~~ ~~string,~~ ~~element: HTMLElement~~) => void;\n ~~removeBlockage~~: (~~blockerName~~: ~~string,~~ ~~element:~~ ~~HTMLElement~~) => ~~void~~;\n ~~isElementScrollBlocked:~~ (~~element: HTMLElement~~) => ~~boolean~~;\n};\n\~~nexport~~ ~~const useScrollBlockageStore~~ = ~~create<ScrollBlockageStore>~~(~~\n (set, get~~) => ({\n scrollBlockers~~: [],\~~n\n addBlockage: (blockerName: string, element: HTMLElement) ~~=>\n set((state)~~ => {\n const ~~scrollBlockers~~ = ~~state~~.scrollBlockers~~;\n const blockersElement = scrollBlockers~~.find(\n (blocker) => blocker.element === element\n );\n\n if (blockersElement) {\n ~~const~~ ~~isBlockerNameExist =\n~~ blockersElement.blockers.includes(blockerName);\n\n ~~const~~ ~~newBlockers~~ = ~~isBlockerNameExist\n ? blockersElement~~.~~blockers\n : [...blockersElement.blockers, blockerName];\n\n return {\n~~ scrollBlockers~~: scrollBlockers~~.map((blocker) =>\n blocker.element === element\n ? { ...blocker, blockers: ~~newBlockers~~ }\n : blocker\n )~~,\n }~~;\n }\n\n element.style.overflowY = 'hidden';\n element.style.overflowX = 'hidden';\n ~~return {\n~~ scrollBlockers: [\n ...scrollBlockers,\n { element, blockers: [blockerName] },\n ],\n };\n }~~),\~~n\n removeBlockage: (blockerName: string, element: HTMLElement) ~~=>\n set((state)~~ => {\n const ~~scrollBlockers~~ = ~~state~~.scrollBlockers~~;\n const blocker = scrollBlockers~~.find(\n (blocker) => blocker.element === element\n );\n\n if (blocker) {\n // if ~~there are more than one blocker, remove the blockerName from the list\n if~~ (blocker.blockers.length > 1) {\n ~~return {\n~~ scrollBlockers: scrollBlockers.map((~~blocker~~) =>\n ~~blocker~~.element === element\n ? {\n ...~~blocker~~,\n blockers: ~~blocker~~.blockers.filter(\n (b) => b !== blockerName\n ),\n }\n : ~~blocker~~\n )~~,\n }~~;\n }~~\n\n //~~ if ~~there is only one blocker, remove the full blocker element~~\n element.style.overflowY = '~~auto~~';\n ~~return~~ {\n scrollBlockers: scrollBlockers.filter(\n (~~blocker~~) => ~~blocker~~.element !== element\n )~~,\n }~~;\n }\n\n ~~return {~~\n ~~scrollBlockers,\n~~ };\n ~~}),\n~~\n isElementScrollBlocked: (element: HTMLElement) ~~=>\~~n ~~get()~~.scrollBlockers.some((blocker) => blocker.element === element),\n })\n);\n"],"mappings":";;;~~AAcA~~,~~MAAa~~,~~yBAAyB~~,~~QACnC~~,~~KAAK~~,~~SAAS~~;~~CACb~~,~~gBAAgB~~,EAAE;~~CAElB~~,~~cAAc~~,~~aAAqB~~,~~YACjC~~,~~KAAK~~,UAAU;~~EACb~~,~~MAAM~~,~~iBAAiB~~,~~MAAM~~;~~EAC7B~~,MAAM,kBAAkB,eAAe,~~MACpC~~,YAAY,QAAQ,YAAY,QAClC;AAED,MAAI,iBAAiB;~~GAInB~~,~~MAAM~~,~~cAFJ,~~gBAAgB,SAAS,SAAS,YAAY,~~GAG5C,gBAAgB,WAChB,CAAC,GAAG,gBAAgB,UAAU,YAAY~~;~~AAE9C~~,~~UAAO~~,~~EACL~~,~~gBAAgB~~,eAAe,KAAK,~~YAClC~~,QAAQ,YAAY,UAChB;IAAE,GAAG;IAAS,UAAU;~~IAAa~~,~~GACrC~~,QACL,~~EACF;;AAGH~~,~~UAAQ,~~MAAM,YAAY;AAC1B,~~UAAQ~~,MAAM,YAAY;AAC1B,~~SAAO~~,~~EACL~~,~~gBAAgB~~,~~CACd,~~GAAG,~~gBACH~~;~~GAAE~~;~~GAAS~~,UAAU,CAAC,YAAY;~~GAAE~~,CACrC,~~EACF;GACD;CAEJ~~,~~iBAAiB~~,aAAqB,~~YACpC,KAAK,UAAU~~;~~EACb~~,MAAM,~~iBAAiB~~,~~MAAM;EAC7B~~,~~MAAM,UAAU,~~eAAe,~~MAC5B~~,cAAYA,UAAQ,YAAY,QAClC;AAED,MAAI,SAAS;~~AAEX~~,OAAI,QAAQ,SAAS,SAAS,EAC5B,~~QAAO~~,~~EACL~~,~~gBAAgB~~,eAAe,KAAK,~~cAClCA~~,~~UAAQ~~,YAAY,~~UAChB~~;IACE,~~GAAGA~~;IACH,~~UAAUA~~,~~UAAQ~~,SAAS,~~QACxB~~,~~MAAM~~,~~MAAM~~,~~YACd~~;~~IACF~~,~~GACDA~~,~~UACL~~,~~EACF~~;~~AAIH~~,~~WAAQ~~,MAAM,YAAY;AAC1B,~~UAAO~~,~~EACL~~,~~gBAAgB~~,eAAe,~~QAC5B~~,~~cAAYA~~,~~UAAQ~~,YAAY,~~QAClC,EACF~~;;~~AAGH~~,~~SAAO~~,~~EACL~~,~~gBACD~~;~~GACD;CAEJ~~,~~yBAAyB~~,~~YACvB,~~KAAK,~~CAAC,~~eAAe,MAAM,YAAY,QAAQ,YAAY,QAAQ;~~CACtE~~,~~EACF~~"}
1	+ {"version":3,"file":"useScrollBlockageStore.mjs","names":["blocker"],"sources":["../../../../src/hooks/useScrollBlockage/useScrollBlockageStore.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\ntype Blocker = {\n element: Element;\n blockers: string[];\n};\n\nclass ScrollBlockageObservable {\n private listeners = new Set<() => void>();\n private scrollBlockers: Blocker[] = [];\n\n subscribe = (listener: () => void) => {\n this.listeners.add(listener);\n return () => {\n this.listeners.delete(listener);\n };\n };\n\n getSnapshot = () => {\n return this.scrollBlockers;\n };\n\n addBlockage = (blockerName: string, element: HTMLElement) => {\n const blockersElement = this.scrollBlockers.find(\n (blocker) => blocker.element === element\n );\n\n if (blockersElement) {\n if (blockersElement.blockers.includes(blockerName)) return;\n\n this.scrollBlockers = this.scrollBlockers.map((blocker) =>\n blocker.element === element\n ? { ...blocker, blockers: [...blocker.blockers, blockerName] }\n : blocker\n );\n } else {\n element.style.overflowY = 'hidden';\n element.style.overflowX = 'hidden';\n this.scrollBlockers = [\n ...this.scrollBlockers,\n { element, blockers: [blockerName] },\n ];\n }\n this.emit();\n };\n\n removeBlockage = (blockerName: string, element: HTMLElement) => {\n const blocker = this.scrollBlockers.find(\n (blocker) => blocker.element === element\n );\n\n if (blocker) {\n if (blocker.blockers.length > 1) {\n this.scrollBlockers = this.scrollBlockers.map((b) =>\n b.element === element\n ? {\n ...b,\n blockers: b.blockers.filter((name) => name !== blockerName),\n }\n : b\n );\n } else {\n element.style.overflowY = '';\n element.style.overflowX = '';\n this.scrollBlockers = this.scrollBlockers.filter(\n (b) => b.element !== element\n );\n }\n this.emit();\n }\n };\n\n isElementScrollBlocked = (element: HTMLElement) => {\n return this.scrollBlockers.some((blocker) => blocker.element === element);\n };\n\n private emit = () => {\n this.listeners.forEach((listener) => {\n listener();\n });\n };\n}\n\nexport const scrollBlockageManager = new ScrollBlockageObservable();\n\nexport const useScrollBlockageStore = () => {\n const scrollBlockers = useSyncExternalStore(\n scrollBlockageManager.subscribe,\n scrollBlockageManager.getSnapshot,\n () => []\n );\n\n return {\n scrollBlockers,\n addBlockage: scrollBlockageManager.addBlockage,\n removeBlockage: scrollBlockageManager.removeBlockage,\n isElementScrollBlocked: scrollBlockageManager.isElementScrollBlocked,\n };\n};\n"],"mappings":";;;AAOA,IAAM,2BAAN,MAA+B;CAC7B,AAAQ,4BAAY,IAAI,KAAiB;CACzC,AAAQ,iBAA4B,EAAE;CAEtC,aAAa,aAAyB;AACpC,OAAK,UAAU,IAAI,SAAS;AAC5B,eAAa;AACX,QAAK,UAAU,OAAO,SAAS;;;CAInC,oBAAoB;AAClB,SAAO,KAAK;;CAGd,eAAe,aAAqB,YAAyB;EAC3D,MAAM,kBAAkB,KAAK,eAAe,MACzC,YAAY,QAAQ,YAAY,QAClC;AAED,MAAI,iBAAiB;AACnB,OAAI,gBAAgB,SAAS,SAAS,YAAY,CAAE;AAEpD,QAAK,iBAAiB,KAAK,eAAe,KAAK,YAC7C,QAAQ,YAAY,UAChB;IAAE,GAAG;IAAS,UAAU,CAAC,GAAG,QAAQ,UAAU,YAAY;IAAE,GAC5D,QACL;SACI;AACL,WAAQ,MAAM,YAAY;AAC1B,WAAQ,MAAM,YAAY;AAC1B,QAAK,iBAAiB,CACpB,GAAG,KAAK,gBACR;IAAE;IAAS,UAAU,CAAC,YAAY;IAAE,CACrC;;AAEH,OAAK,MAAM;;CAGb,kBAAkB,aAAqB,YAAyB;EAC9D,MAAM,UAAU,KAAK,eAAe,MACjC,cAAYA,UAAQ,YAAY,QAClC;AAED,MAAI,SAAS;AACX,OAAI,QAAQ,SAAS,SAAS,EAC5B,MAAK,iBAAiB,KAAK,eAAe,KAAK,MAC7C,EAAE,YAAY,UACV;IACE,GAAG;IACH,UAAU,EAAE,SAAS,QAAQ,SAAS,SAAS,YAAY;IAC5D,GACD,EACL;QACI;AACL,YAAQ,MAAM,YAAY;AAC1B,YAAQ,MAAM,YAAY;AAC1B,SAAK,iBAAiB,KAAK,eAAe,QACvC,MAAM,EAAE,YAAY,QACtB;;AAEH,QAAK,MAAM;;;CAIf,0BAA0B,YAAyB;AACjD,SAAO,KAAK,eAAe,MAAM,YAAY,QAAQ,YAAY,QAAQ;;CAG3E,AAAQ,aAAa;AACnB,OAAK,UAAU,SAAS,aAAa;AACnC,aAAU;IACV;;;AAIN,MAAa,wBAAwB,IAAI,0BAA0B;AAEnE,MAAa,+BAA+B;AAO1C,QAAO;EACL,gBAPqB,qBACrB,sBAAsB,WACtB,sBAAsB,mBAChB,EAAE,CACT;EAIC,aAAa,sBAAsB;EACnC,gBAAgB,sBAAsB;EACtC,wBAAwB,sBAAsB;EAC/C"}

package/dist/types/components/Badge/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import * as class_variance_authority_types1 from "class-variance-authority/types";
+import * as class_variance_authority_types2 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 //#region src/components/Badge/index.d.ts
@@ -47,7 +47,7 @@ declare const badgeVariants: (props?: {
   color?: BadgeColor;
   variant?: BadgeVariant;
   size?: BadgeSize;
-} & class_variance_authority_types1.ClassProp) => string;
+} & class_variance_authority_types2.ClassProp) => string;
 /**
  * Badge component props interface
  * @description Comprehensive props for the Badge component with accessibility and interactive features

package/dist/types/components/Breadcrumb/breadcrumb.content.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-import * as _intlayer_types329 from "@intlayer/types";
+import * as _intlayer_types436 from "@intlayer/types";
 //#region src/components/Breadcrumb/breadcrumb.content.d.ts
 declare const breadCrumbContent: {
   key: string;
   content: {
-    linkLabel: _intlayer_types329.TypedNodeModel<_intlayer_types329.NodeType.Translation, {
+    linkLabel: _intlayer_types436.TypedNodeModel<_intlayer_types436.NodeType.Translation, {
       en: string;
       fr: string;
       es: string;
@@ -24,7 +24,7 @@ declare const breadCrumbContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: "translation" | _intlayer_types329.NodeType.Translation;
+      nodeType: "translation" | _intlayer_types436.NodeType.Translation;
     } & {
       translation: {
         en: string;

package/dist/types/components/Breadcrumb/index.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { LinkColor } from "../Link/Link.js";
 import "../Link/index.js";
 import { FC, HTMLAttributes, ReactNode } from "react";
-import * as class_variance_authority_types2 from "class-variance-authority/types";
+import * as class_variance_authority_types9 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import { LocalesValues } from "@intlayer/types";
@@ -12,7 +12,7 @@ import { LocalesValues } from "@intlayer/types";
 declare const breadcrumbVariants: (props?: {
   size?: "small" | "medium" | "large";
   spacing?: "compact" | "normal" | "loose";
-} & class_variance_authority_types2.ClassProp) => string;
+} & class_variance_authority_types9.ClassProp) => string;
 /**
  * Detailed breadcrumb link configuration with optional href or onClick
  */