@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.60

package/dist/esm/core/page/Page.js

@@ -1,66 +1,67 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { Loading } from '../../components/animations/Animations.js';
-import { Icon } from '../../components/icon/Icon.js';
-import classes from './Page.module.css';
+import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+var _excluded = ["ref", "children", "paper", "title", "titleClassName", "icon", "loading", "data-testid", "data-test-value"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Page component that wraps children in a div element.
+ * It includes a title section with an optional icon and a loading indicator.
+ * The component can be styled with a paper effect, page icon and title.
+ * It also accepts a loading prop to display a loading indicator.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
+ * @param {PageProps} props - The properties for the Page component.
+ * @returns A div element containing the title and children, with optional loading indicator.
  *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
+ * @example
+ * ```jsx
+ * <Page
+ *   title="My Page"
+ *   icon="home"
+ *   loading={false}
+ *   paper={true}
+ *   data-testid="my-page"
+ *   data-test-value="page-value"
+ * >
+ *   <p>This is the content of the page.</p>
+ * </Page>
+ * // Renders a page with a title, icon, and content.
+ * ```
  *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-/**
- * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--page} for more details.
  */
 var Page = function Page(_ref) {
-  var children = _ref.children,
+  var ref = _ref.ref,
+    children = _ref.children,
     paper = _ref.paper,
     title = _ref.title,
     titleClassName = _ref.titleClassName,
     icon = _ref.icon,
-    rtlFlip = _ref.rtlFlip,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
     loading = _ref.loading,
     testId = _ref["data-testid"],
-    testValue = _ref["data-test-value"];
-  return /*#__PURE__*/jsxs("div", {
+    testValue = _ref["data-test-value"],
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     "data-testid": testId,
     "data-test-value": testValue,
     "data-loading": loading,
-    className: classNames(classes.page, "overflow-hidden grid area-content", paper && "shadow-paper m-[6px] rounded-capped"),
+    className: classNames("fabric-page relative", "overflow-hidden grid area-content", paper && "shadow-paper m-1.5 rounded-capped"),
+    ref: ref
+  }, rest), {}, {
     children: [title && /*#__PURE__*/jsxs("div", {
       "data-ref": "pageTitle",
-      className: classNames(classes.pageTitle, "select-none flex gap-1 items-center justify-center px-1 py-0.5 font-medium text-center", titleClassName),
-      children: [icon && /*#__PURE__*/jsx(Icon, {
-        icon: icon,
-        size: "1.25em",
-        rtlFlip: rtlFlip,
-        bg: iconBg,
-        color: iconColor
-      }), title]
+      className: classNames("fabric-pageTitle", "select-none flex gap-1 items-center justify-center px-1 py-0.5 font-medium text-center", titleClassName),
+      children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({
+        size: "1.25em"
+      }, getIconProps(icon))), title]
     }), loading && /*#__PURE__*/jsx(Loading, {}), children]
-  });
+  }));
 };
 
 export { Page };

package/dist/esm/core/responsive/Responsive.js

@@ -3,16 +3,28 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
-import classes from './Responsive.module.css';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "fullWidth", "className", "gutter"],
   _excluded2 = ["children", "gutter", "noWrap", "orient", "align", "justify", "className"],
-  _excluded3 = ["children", "flex", "align", "className", "stretchContent"];
+  _excluded3 = ["children", "flex", "align", "truncate", "className", "stretchContent"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Responsive layout container
+ * Container component that wraps children in a div element.
+ * It supports full width, gutter size, and additional CSS classes.
+ * It can be used to create a responsive layout with optional gutters for spacing.
+ * It accepts properties for full width, gutter size, and additional CSS classes.
+ *
+ * @param {ContainerProps} props - The properties for the Container component.
+ * @returns A div element containing the children with optional full width and gutter size.
+ *
+ * @example
+ * ```jsx
+ * <Container fullWidth={true} gutter="16px" className="custom-container">
+ *   <p>This is a container with full width and gutter.</p>
+ * </Container>
+ * ```
  */
 var Container = function Container(_ref) {
   var children = _ref.children,
@@ -21,12 +33,33 @@ var Container = function Container(_ref) {
     gutter = _ref.gutter,
     aria = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    className: classNames(classes.container, className, !fullWidth && "container mx-auto"),
+    className: classNames("fabric-container", className, !fullWidth && "container mx-auto"),
     "data-gutter": gutter
   }, aria), {}, {
     children: children
   }));
 };
+
+/**
+ * Row component that allows for flexible layout of columns.
+ * It supports various flex properties, alignment, and wrapping.
+ * It can be used to create a responsive layout with optional gutters for spacing.
+ * It accepts properties for gutter size, orientation, alignment, justification, and additional CSS classes.
+ *
+ * @param {RowProps} props - The properties for the Row component.
+ * @returns A div element representing a row with the specified flex and alignment properties.
+ *
+ * @example
+ * ```jsx
+ * <Row gutter="16px" orient="row" align="center" justify="between">
+ *   <Col flex="fill">Column 1</Col>
+ *   <Col flex="fill">Column 2</Col>
+ * </Row>
+ * // Renders a row with two columns, each taking equal space, centered vertically and spaced evenly.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--responsive} for more details.
+ */
 var Row = function Row(_ref2) {
   var children = _ref2.children,
     gutter = _ref2.gutter,
@@ -39,21 +72,41 @@ var Row = function Row(_ref2) {
     className = _ref2.className,
     aria = _objectWithoutProperties(_ref2, _excluded2);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    className: classNames(classes.row, className, "flex", orient === "row" && "flex-row", orient === "col" && "flex-col", orient === "row-reverse" && "flex-row-reverse", orient === "col-reverse" && "flex-col-reverse", noWrap ? "flex-nowrap" : "flex-wrap", "justify-".concat(justify), "items-".concat(align)),
+    className: classNames("fabric-row", className, "flex", orient === "row" && "flex-row", orient === "col" && "flex-col", orient === "row-reverse" && "flex-row-reverse", orient === "col-reverse" && "flex-col-reverse", noWrap ? "flex-nowrap" : "flex-wrap", "justify-".concat(justify), "items-".concat(align)),
     "data-gutter": gutter
   }, aria), {}, {
     children: children
   }));
 };
+
+/**
+ * Column component that allows for flexible layout within a row.
+ * It supports various flex properties, alignment, and truncation.
+ * It can be used to create a responsive layout with optional stretching of inner content.
+ * It accepts properties for flex size, alignment, truncation, and additional CSS classes.
+ *
+ * @param {ColProps} props - The properties for the Col component.
+ * @returns A div element representing a column with the specified flex and alignment properties.
+ *
+ * @example
+ * ```jsx
+ * <Col flex="fill" align="center" truncate className="custom-col">
+ *   <p>This is a column with flexible layout.</p>
+ * </Col>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--responsive} for more details.
+ */
 var Col = function Col(_ref3) {
   var children = _ref3.children,
     flex = _ref3.flex,
     align = _ref3.align,
+    truncate = _ref3.truncate,
     className = _ref3.className,
     stretchContent = _ref3.stretchContent,
     aria = _objectWithoutProperties(_ref3, _excluded3);
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    className: classNames(classes.col, className, stretchContent && classes.stretchContent, flex === "auto" && "flex-content", flex === "fill" && "flex-1", flex === "full" && "flex-full", align && "self-".concat(align))
+    className: classNames("fabric-col", className, stretchContent && "stretchContent", flex === "fill" && "flex-1", flex === "full" && "flex-full", flex === "auto" && "flex-auto", flex === "initial" && "flex-initial", flex === "content" && "flex-content", align && "self-".concat(align), truncate && "truncate")
   }, aria), {}, {
     children: children
   }));

package/dist/esm/core/section/Section.js

@@ -1,47 +1,30 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import { ErrorBoundary } from '../boundary/ErrorBoundary.js';
-import classes from './Section.module.css';
 import { jsx } from 'react/jsx-runtime';
 
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
+var _excluded = ["children", "className", "dir", "ref"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Section = function Section(_ref) {
   var children = _ref.children,
     className = _ref.className,
     dir = _ref.dir,
-    ref = _ref.ref;
-  return /*#__PURE__*/jsx("div", {
+    ref = _ref.ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     "data-ref": "section",
     dir: dir,
-    ref: ref,
-    className: classNames(classes.section, className, "grid area-content overflow-hidden"),
+    ref: ref
+  }, rest), {}, {
+    className: classNames("fabric-section", className, "grid area-content overflow-hidden"),
     children: /*#__PURE__*/jsx(ErrorBoundary, {
       children: children
     })
-  });
+  }));
 };
 
 export { Section };

package/dist/esm/core/theme/ThemeProvider.js

@@ -3,7 +3,7 @@
 import { isColor } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo } from 'react';
-import classes from './Theme.module.css';
+import { useApplicationContext } from '../../context/Global.js';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -30,7 +30,27 @@ import { jsx } from 'react/jsx-runtime';
  */
 
 /**
- * Theme override
+ * This component provides a way to set the theme for the application.
+ * It allows you to set the primary, accent, and tint colors, as well as the color scheme and rounding.
+ * It uses CSS variables to apply the colors and styles.
+ * It also applies the branding className to the root element.
+ * The component uses the `useApplicationContext` hook to get the current color scheme from the application context.
+ *
+ * @example
+ * ```jsx
+ * <ThemeProvider
+ *   branding="my-branding"
+ *   primaryColor="#ff0000"
+ *   accentColor="#00ff00"
+ *   tintColor="#0000ff"
+ *   colorScheme="dark"
+ *   rounding="md"
+ * >
+ *   <div>Your content here</div>
+ * </ThemeProvider>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--theme-provider} for more details.
  */
 var ThemeProvider = function ThemeProvider(_ref) {
   var children = _ref.children,
@@ -40,33 +60,35 @@ var ThemeProvider = function ThemeProvider(_ref) {
     tintColor = _ref.tintColor,
     colorScheme = _ref.colorScheme,
     rounding = _ref.rounding;
+  var _useApplicationContex = useApplicationContext(),
+    currentColorScheme = _useApplicationContex.currentColorScheme;
   var styles = useMemo(function () {
     var ret = {};
     if (primaryColor && isColor(primaryColor)) {
-      ret["--primary"] = primaryColor;
+      ret["--color-primary"] = primaryColor;
     }
     if (primaryColor && !isColor(primaryColor)) {
-      ret["--primary"] = "var(--".concat(primaryColor, ")");
+      ret["--color-primary"] = "var(--color-".concat(primaryColor, ")");
     }
     if (accentColor && isColor(accentColor)) {
-      ret["--accent"] = accentColor;
+      ret["--color-accent"] = accentColor;
     }
     if (accentColor && !isColor(accentColor)) {
-      ret["--accent"] = "var(--".concat(accentColor, ")");
+      ret["--color-accent"] = "var(--color-".concat(accentColor, ")");
     }
     if (tintColor && isColor(tintColor)) {
-      ret["--tint"] = tintColor;
+      ret["--color-tint"] = tintColor;
     }
     if (tintColor && !isColor(tintColor)) {
-      ret["--tint"] = "var(--".concat(tintColor, ")");
+      ret["--color-tint"] = "var(--color-".concat(tintColor, ")");
     }
     return ret;
   }, [primaryColor, accentColor, tintColor]);
   return /*#__PURE__*/jsx("div", {
     style: styles,
-    "data-color-scheme": colorScheme,
+    "data-color-scheme": colorScheme !== null && colorScheme !== void 0 ? colorScheme : currentColorScheme,
     "data-rounding": rounding,
-    className: classNames(classes.themeProvider, "contents theme-base", branding),
+    className: classNames("fabric-themeProvider", "contents theme-base", branding),
     children: children
   });
 };

package/dist/esm/core/viewport/Viewport.js

@@ -1,7 +1,6 @@
 'use client';
 
 import classNames from 'classnames';
-import classes from './Viewport.module.css';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -27,11 +26,28 @@ import { jsx } from 'react/jsx-runtime';
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+/**
+ * This component is used to create a full-screen viewport
+ * that can be used to display content in a grid layout.
+ * It is typically used as a container for the main content of the application.
+ * It is styled to take up the full width and height of the viewport,
+ * and it uses absolute positioning to ensure it covers the entire screen.
+ * The component accepts children as props, allowing you to nest other components inside it.
+ *
+ * @example
+ * ```jsx
+ * <Viewport>
+ *   <YourContentComponent />
+ * </Viewport>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-application--viewport} for more details.
+ */
 var Viewport = function Viewport(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx("div", {
     "data-ref": "viewport",
-    className: classNames(classes.viewport, "grid overflow-hidden absolute inset-0"),
+    className: classNames("fabric-viewport", "grid overflow-hidden absolute inset-0"),
     children: children
   });
 };

package/dist/esm/hooks/useControlledValue.js

@@ -4,6 +4,18 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useDeferredValue } from 'react';
 import { useEffectDebugger } from './useEffectDebugger.js';
 
+/**
+ * Custom hook to manage a controlled value with a default fallback for inputs.
+ * It updates the current value whenever the deferred value changes.
+ * This is useful for scenarios where you want to control the value of a component
+ * while also providing a default value if the controlled value is not set.
+ * This hook is particularly useful for form inputs or components that require a controlled value
+ * but also need to handle cases where the value might not be immediately available.
+ *
+ * @param value - The controlled value that may change.
+ * @param defaultValue - The default value to use if the controlled value is not set.
+ * @returns An object containing the current value and a function to update it.
+ */
 var useControlledValue = function useControlledValue(value, defaultValue) {
   var _useState = useState(defaultValue),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/esm/hooks/useDebounce.js

@@ -25,9 +25,22 @@ import { useRef, useMemo } from 'react';
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+
+/**
+ * Custom hook to debounce a function.
+ * This hook delays the processing of the function until after a specified delay period
+ * has elapsed since the last time the function was invoked. This is useful for optimizing
+ * performance in scenarios where a function may be called frequently, such as during
+ * user input or window resizing events.
+ *
+ * @param callback - The function to debounce.
+ * @param deps - The dependency array for the hook.
+ * @param delay - The debounce delay in milliseconds.
+ * @returns A debounced version of the callback function.
+ */
 var useDebounce = function useDebounce(callback, deps) {
   var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
-  var timerRef = useRef();
+  var timerRef = useRef(null);
   var cb = useMemo(function () {
     if (typeof window !== "undefined") {
       window.clearTimeout(timerRef.current);

package/dist/esm/hooks/useEffectDebugger.js

@@ -30,9 +30,9 @@ var loggerM = useLogger("useMemoDebugger");
 var loggerE = useLogger("useEffectDebugger");
 var loggerLE = useLogger("useLayoutEffectDebugger");
 var compareInputs = function compareInputs(oldInputs, newInputs, prefix, logger) {
-  if (process.env.NODE_ENV === "production" && typeof window !== "undefined" &&
+  if (typeof window !== "undefined" &&
   // @ts-expect-error ignore
-  window.DEBUG_HOOKS !== true) return;
+  window.DEBUG_EFFECTS !== true) return;
 
   // Edge-case: different array lengths
   if (oldInputs.length !== newInputs.length) {
@@ -56,6 +56,20 @@ var compareInputs = function compareInputs(oldInputs, newInputs, prefix, logger)
     }].concat(diff));
   });
 };
+
+/**
+ * Custom hook to debug useMemo hooks.
+ * It compares the current and previous dependency arrays and logs any differences.
+ * @param func - The function to be memoized or executed in the effect.
+ * @param inputs - The dependency array for the hook.
+ * @param prefix - A prefix for the log messages to identify the hook.
+ * @returns The result of the memoized function or the effect.
+ *
+ * @example
+ * ```jsx
+ * const value = useMemoDebugger(() => computeValue(), [dependency1, dependency2], "MyComponent");
+ * ```
+ */
 var useMemoDebugger = function useMemoDebugger(func, inputs, prefix) {
   // Using a ref to hold the inputs from the previous run (or same run for initial run
   var oldInputsRef = useRef(inputs);
@@ -73,6 +87,25 @@ var useMemoDebugger = function useMemoDebugger(func, inputs, prefix) {
     return func();
   }, inputs);
 };
+
+/**
+ * Custom hook to debug useEffect and useLayoutEffect hooks.
+ * It compares the current and previous dependency arrays and logs any differences.
+ * @param func - The effect function to be executed.
+ * @param inputs - The dependency array for the effect.
+ * @param prefix - A prefix for the log messages to identify the effect.
+ * @returns A cleanup function if the effect returns one.
+ *
+ * @example
+ * ```jsx
+ * useEffectDebugger(() => {
+ *   // Effect logic here
+ *   return () => {
+ *     // Cleanup logic here
+ *   };
+ * }, [dependency1, dependency2], "MyComponent");
+ * ```
+ */
 var useEffectDebugger = function useEffectDebugger(func, inputs, prefix) {
   // Using a ref to hold the inputs from the previous run (or same run for initial run
   var oldInputsRef = useRef(inputs);
@@ -90,6 +123,25 @@ var useEffectDebugger = function useEffectDebugger(func, inputs, prefix) {
     return func();
   }, inputs);
 };
+
+/**
+ * Custom hook to debug useLayoutEffect hooks.
+ * It compares the current and previous dependency arrays and logs any differences.
+ * @param func - The layout effect function to be executed.
+ * @param inputs - The dependency array for the layout effect.
+ * @param prefix - A prefix for the log messages to identify the layout effect.
+ * @returns A cleanup function if the layout effect returns one.
+ *
+ * @example
+ * ```jsx
+ * useLayoutEffectDebugger(() => {
+ *   // Layout effect logic here
+ *   return () => {
+ *     // Cleanup logic here
+ *   };
+ * }, [dependency1, dependency2], "MyComponent");
+ * ```
+ */
 var useLayoutEffectDebugger = function useLayoutEffectDebugger(func, inputs, prefix) {
   // Using a ref to hold the inputs from the previous run (or same run for initial run
   var oldInputsRef = useRef(inputs);

package/dist/esm/hooks/useIsDark.js

@@ -4,6 +4,14 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useCallback } from 'react';
 import { useLayoutEffectDebugger } from './useEffectDebugger.js';
 
+/**
+ * Custom hook to determine if the current theme is dark.
+ * It checks the background color of the document's root element
+ * and sets the `isDark` state based on the red component of the RGB color.
+ * If the red component is less than 50, it considers the theme to be dark.
+ *
+ * @returns {boolean} - Returns true if the theme is dark, false otherwise.
+ */
 var useIsDark = function useIsDark() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/esm/hooks/useIsRtl.js

@@ -5,6 +5,18 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLayoutEffectDebugger } from './useEffectDebugger.js';
 
+/**
+ * Custom hook to determine if the current locale is RTL (Right-to-Left).
+ * It uses the i18n instance from react-i18next to check the direction.
+ *
+ * @returns {boolean} - Returns true if the current locale is RTL, false otherwise.
+ *
+ * @example
+ * ```jsx
+ * const isRtl = useIsRtl();
+ * // This will return true if the current locale is RTL, false otherwise.
+ * ```
+ */
 var useIsRtl = function useIsRtl() {
   var _useTranslation = useTranslation("core"),
     i18n = _useTranslation.i18n;

package/dist/esm/hooks/useNavigator.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useRef, useCallback, useMemo } from 'react';
 import { jsxs } from 'react/jsx-runtime';
 
 var useNavigator = function useNavigator() {
@@ -11,17 +11,19 @@ var useNavigator = function useNavigator() {
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
     setCurrentIndex = _useState2[1];
+  var refCurrent = useRef(defaultIndex);
   var onNavigate = useCallback(function (dir) {
     if (dir === -1) {
-      setCurrentIndex(currentIndex > 0 ? currentIndex - 1 : totalCount - 1);
+      refCurrent.current = refCurrent.current > 0 ? refCurrent.current - 1 : totalCount - 1;
     }
     if (dir === 1) {
-      setCurrentIndex(currentIndex + 1 < totalCount ? currentIndex + 1 : 0);
+      refCurrent.current = refCurrent.current + 1 < totalCount ? refCurrent.current + 1 : 0;
     }
-  }, [currentIndex, totalCount]);
+    setCurrentIndex(refCurrent.current);
+  }, [totalCount]);
   var headLabel = useMemo(function () {
     return /*#__PURE__*/jsxs("span", {
-      className: "text-muted leading-none",
+      className: "text-muted leading-none select-none",
       children: [currentIndex + 1, "/", totalCount]
     });
   }, [currentIndex, totalCount]);

package/dist/esm/hooks/useOverlayService.js

@@ -11,6 +11,30 @@ import { jsx } from 'react/jsx-runtime';
 var _excluded = ["onClose"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Hook to manage overlay components like modals or flyouts.
+ * It provides a way to open an overlay with specified properties and handle its closure.
+ * This hook returns the current overlay component and a function to open it with props.
+ * It is useful for scenarios where you need to display overlays dynamically,
+ * such as modals, flyouts, or any other overlay components in a React application.
+ * The `openOverlay` function returns a promise that resolves with the result
+ * of the overlay when it is closed, allowing you to handle the result in a controlled manner.
+ *
+ * @param ModalOrFlyout - The component to be used as an overlay.
+ * @returns An array containing the current overlay and a function to open it.
+ *
+ * @example
+ * ```jsx
+ * const [Overlay, openOverlay] = useOverlayService(MyModalComponent);
+ * // To open the overlay:
+ * const handleOpen = async () => {
+ *   const result = await openOverlay({ title: "My Modal", content: "Hello World" });
+ *   console.log(result); // Handle the result from the overlay
+ * };
+ * <button onClick={handleOpen}>Open Modal</button>
+ * <Overlay />
+ * ```
+ */
 var useOverlayService = function useOverlayService(ModalOrFlyout) {
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),