@react-fabric/core 1.0.0-beta.0

package/dist/esm/core/headfoot/HeadFoot.js

@@ -0,0 +1,61 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
+import '@react-fabric/utilities';
+import classes from './HeadFoot.module.css';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded = ["as", "children", "className", "bg", "color", "flex", "area", "dir", "align", "justify"];
+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 HeadFoot = function HeadFoot(_ref) {
+  var E = _ref.as,
+    children = _ref.children,
+    className = _ref.className,
+    bg = _ref.bg,
+    color = _ref.color,
+    flex = _ref.flex,
+    area = _ref.area,
+    dir = _ref.dir,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "center" : _ref$align,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? "start" : _ref$justify,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  /** ***************** style map *******************/
+  var styles = useMemoDebugger(function () {
+    var s = {};
+    if (bg) {
+      s.backgroundColor = getColor(bg);
+    }
+    if (color) {
+      s.color = getColor(color);
+    }
+    return s;
+  }, [bg], "HeadFoot styles");
+  return /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({
+    dir: dir,
+    className: classNames(classes.headfoot, className, bg && getBgClass(bg), color && getColorClass(color), area === "head" ? "area-head" : "area-foot", "leading-none", flex && "flex flex-nowrap gap-px", align && "items-".concat(align), justify && "justify-".concat(justify)),
+    style: styles
+  }, aria), {}, {
+    children: children
+  }));
+};
+var Header = function Header(props) {
+  return /*#__PURE__*/jsx(HeadFoot, _objectSpread({
+    as: "header",
+    area: "head"
+  }, props));
+};
+var Footer = function Footer(props) {
+  return /*#__PURE__*/jsx(HeadFoot, _objectSpread({
+    as: "footer",
+    area: "foot"
+  }, props));
+};
+
+export { Footer, Header };

package/dist/esm/core/headfoot/HeadFoot.module.css

@@ -0,0 +1 @@
+@layer comp{.headfoot{.buttonWrapper+.buttonWrapper{margin-inline-start:.25rem}}}@layer util{.headfoot{height:unset;margin:unset;width:unset}}

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

@@ -0,0 +1,65 @@
+'use client';
+
+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 { jsxs, 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.
+ */
+
+/**
+ * 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.
+ */
+var Page = function Page(_ref) {
+  var 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", {
+    "data-testid": testId,
+    "data-test-value": testValue,
+    className: classNames(classes.page, "overflow-hidden grid area-content", paper && "shadow-paper m-[6px] rounded-capped"),
+    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]
+    }), loading && /*#__PURE__*/jsx(Loading, {}), children]
+  });
+};
+
+export { Page };

package/dist/esm/core/page/Page.module.css

@@ -0,0 +1 @@
+@layer comp{.page{--fabric-page:color-mix(in lab,var(--fabric-bg) 94%,var(--tint));--fabric-page-title:color-mix(in lab,var(--fabric-bg) 90%,var(--tint));background-color:var(--fabric-page);grid-template:"title title title" auto "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto;.pageTitle{background-color:var(--fabric-page-title);color:theme(colors.primary.600);grid-area:title}}}@layer util{.pageTitle{height:unset;margin:unset;width:unset}}

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

@@ -0,0 +1,62 @@
+'use client';
+
+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"];
+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
+ */
+var Container = function Container(_ref) {
+  var children = _ref.children,
+    fullWidth = _ref.fullWidth,
+    className = _ref.className,
+    gutter = _ref.gutter,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+    className: classNames(classes.container, className, !fullWidth && "container mx-auto"),
+    "data-gutter": gutter
+  }, aria), {}, {
+    children: children
+  }));
+};
+var Row = function Row(_ref2) {
+  var children = _ref2.children,
+    gutter = _ref2.gutter,
+    noWrap = _ref2.noWrap,
+    orient = _ref2.orient,
+    _ref2$align = _ref2.align,
+    align = _ref2$align === void 0 ? "stretch" : _ref2$align,
+    _ref2$justify = _ref2.justify,
+    justify = _ref2$justify === void 0 ? "start" : _ref2$justify,
+    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)),
+    "data-gutter": gutter
+  }, aria), {}, {
+    children: children
+  }));
+};
+var Col = function Col(_ref3) {
+  var children = _ref3.children,
+    flex = _ref3.flex,
+    align = _ref3.align,
+    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))
+  }, aria), {}, {
+    children: children
+  }));
+};
+
+export { Col, Container, Row };

package/dist/esm/core/responsive/Responsive.module.css

@@ -0,0 +1 @@
+@layer comp{.row{margin:calc(var(--gutter)*-.5);&+.row{margin-top:calc(var(--gutter)*.5)}}.col{flex:0 0 auto;margin:calc(var(--gutter)*.5);max-width:calc(100% - var(--gutter, 0px));&.stretchContent>*{min-height:100%;min-width:100%}}[data-gutter="0"]{&.container,&.row{--gutter:0px}}[data-gutter=xs]{&.container,&.row{--gutter:2px}}[data-gutter=sm]{&.container,&.row{--gutter:0.25rem}}[data-gutter=md]{&.container,&.row{--gutter:0.75rem}}[data-gutter=lg]{&.container,&.row{--gutter:1rem}}[data-gutter=xl]{&.container,&.row{--gutter:1.5rem}}}

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

@@ -0,0 +1,44 @@
+'use client';
+
+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 Section = function Section(_ref) {
+  var children = _ref.children,
+    dir = _ref.dir;
+  return /*#__PURE__*/jsx("div", {
+    "data-ref": "section",
+    dir: dir,
+    className: classNames(classes.section, "grid area-content overflow-hidden"),
+    children: /*#__PURE__*/jsx(ErrorBoundary, {
+      children: children
+    })
+  });
+};
+
+export { Section };

package/dist/esm/core/section/Section.module.css

@@ -0,0 +1 @@
+@layer comp{.section{grid-template:"head head head" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}

package/dist/esm/core/theme/Theme.module.css

@@ -0,0 +1 @@
+@layer comp{.themeProvider{&>*{background-color:theme(backgroundColor.base)}}}

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

@@ -0,0 +1,74 @@
+'use client';
+
+import { isColor } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import classes from './Theme.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.
+ */
+
+/**
+ * Theme override
+ */
+var ThemeProvider = function ThemeProvider(_ref) {
+  var children = _ref.children,
+    branding = _ref.branding,
+    primaryColor = _ref.primaryColor,
+    accentColor = _ref.accentColor,
+    tintColor = _ref.tintColor,
+    colorScheme = _ref.colorScheme,
+    rounding = _ref.rounding;
+  var styles = useMemo(function () {
+    var ret = {};
+    if (primaryColor && isColor(primaryColor)) {
+      ret["--primary"] = primaryColor;
+    }
+    if (primaryColor && !isColor(primaryColor)) {
+      ret["--primary"] = "var(--".concat(primaryColor, ")");
+    }
+    if (accentColor && isColor(accentColor)) {
+      ret["--accent"] = accentColor;
+    }
+    if (accentColor && !isColor(accentColor)) {
+      ret["--accent"] = "var(--".concat(accentColor, ")");
+    }
+    if (tintColor && isColor(tintColor)) {
+      ret["--tint"] = tintColor;
+    }
+    if (tintColor && !isColor(tintColor)) {
+      ret["--tint"] = "var(--".concat(tintColor, ")");
+    }
+    return ret;
+  }, [primaryColor, accentColor, tintColor]);
+  return /*#__PURE__*/jsx("div", {
+    style: styles,
+    "data-color-scheme": colorScheme,
+    "data-rounding": rounding,
+    className: classNames(classes.themeProvider, "contents theme-base", branding),
+    children: children
+  });
+};
+
+export { ThemeProvider };

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

@@ -0,0 +1,39 @@
+'use client';
+
+import classNames from 'classnames';
+import classes from './Viewport.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 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"),
+    children: children
+  });
+};
+
+export { Viewport };

package/dist/esm/core/viewport/Viewport.module.css

@@ -0,0 +1 @@
+@layer comp{.viewport{--fabric-viewport:color-mix(in lab,var(--fabric-bg) 76%,var(--tint));background-color:var(--fabric-viewport);color:var(--fabric-text);grid-template:"head head head" auto "crumbbar crumbbar crumbbar" auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}

package/dist/esm/hooks/useClientService.js

@@ -0,0 +1,30 @@
+'use client';
+
+/*
+ * 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 useClientService = function useClientService(clientApi, serverMock) {
+  return typeof window === "undefined" ? serverMock : clientApi;
+};
+
+export { useClientService };

package/dist/esm/hooks/useControlledValue.js

@@ -0,0 +1,22 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useDeferredValue } from 'react';
+import { useEffectDebugger } from './useEffectDebugger.js';
+
+var useControlledValue = function useControlledValue(value, defaultValue) {
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentValue = _useState2[0],
+    updateValue = _useState2[1];
+  var deferred = useDeferredValue(value);
+  useEffectDebugger(function () {
+    updateValue(deferred !== null && deferred !== void 0 ? deferred : defaultValue);
+  }, [deferred], "useControlledValue change");
+  return {
+    currentValue: currentValue,
+    updateValue: updateValue
+  };
+};
+
+export { useControlledValue };

package/dist/esm/hooks/useDebounce.js

@@ -0,0 +1,56 @@
+'use client';
+
+import { useRef, useMemo } from 'react';
+
+/*
+ * 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 useDebounce = function useDebounce(callback, deps) {
+  var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
+  var timerRef = useRef();
+  var cb = useMemo(function () {
+    if (typeof window !== "undefined") {
+      window.clearTimeout(timerRef.current);
+    }
+    var fn = function fn() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      if (typeof window !== "undefined") {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(function () {
+          return callback === null || callback === void 0 ? void 0 : callback.apply(void 0, args);
+        }, delay);
+      }
+    };
+    fn.cancel = function () {
+      if (typeof window !== "undefined") {
+        clearTimeout(timerRef.current);
+      }
+    };
+    return fn;
+  }, deps);
+  return cb;
+};
+
+export { useDebounce };

package/dist/esm/hooks/useEffectDebugger.js

@@ -0,0 +1,111 @@
+'use client';
+
+import { useLogger } from '@react-fabric/utilities';
+import { useRef, useMemo, useEffect, useLayoutEffect } from 'react';
+
+/*
+ * 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 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" &&
+  // @ts-expect-error ignore
+  window.DEBUG_HOOKS !== true) return;
+
+  // Edge-case: different array lengths
+  if (oldInputs.length !== newInputs.length) {
+    // Not helpful to compare item by item, so just output the whole array
+    logger.debug("Deps have a different length", {
+      process: prefix
+    }, oldInputs.length, newInputs.length);
+    return;
+  }
+
+  // Compare individual items
+  oldInputs.forEach(function (oldInput, index) {
+    var newInput = newInputs[index];
+    var diff = [];
+    if (oldInput !== newInput) {
+      var _ref, _ref2, _ref3, _oldInput$type$name, _oldInput$type, _oldInput$substr, _ref4, _ref5, _ref6, _newInput$type$name, _newInput$type, _newInput$substr;
+      diff.push("Dep [".concat(index, "] has a different value"), (_ref = (_ref2 = (_ref3 = (_oldInput$type$name = oldInput === null || oldInput === void 0 || (_oldInput$type = oldInput.type) === null || _oldInput$type === void 0 ? void 0 : _oldInput$type.name) !== null && _oldInput$type$name !== void 0 ? _oldInput$type$name : oldInput === null || oldInput === void 0 ? void 0 : oldInput.tagName) !== null && _ref3 !== void 0 ? _ref3 : oldInput === null || oldInput === void 0 ? void 0 : oldInput.name) !== null && _ref2 !== void 0 ? _ref2 : oldInput === null || oldInput === void 0 || (_oldInput$substr = oldInput.substr) === null || _oldInput$substr === void 0 ? void 0 : _oldInput$substr.call(oldInput, 0, 24)) !== null && _ref !== void 0 ? _ref : oldInput, (_ref4 = (_ref5 = (_ref6 = (_newInput$type$name = newInput === null || newInput === void 0 || (_newInput$type = newInput.type) === null || _newInput$type === void 0 ? void 0 : _newInput$type.name) !== null && _newInput$type$name !== void 0 ? _newInput$type$name : newInput === null || newInput === void 0 ? void 0 : newInput.tagName) !== null && _ref6 !== void 0 ? _ref6 : newInput === null || newInput === void 0 ? void 0 : newInput.name) !== null && _ref5 !== void 0 ? _ref5 : newInput === null || newInput === void 0 || (_newInput$substr = newInput.substr) === null || _newInput$substr === void 0 ? void 0 : _newInput$substr.call(newInput, 0, 24)) !== null && _ref4 !== void 0 ? _ref4 : newInput, "\n\n");
+    }
+    diff.length && logger.debug.apply(logger, ["Diff", {
+      process: prefix
+    }].concat(diff));
+  });
+};
+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);
+  return useMemo(function () {
+    // Get the old inputs
+    var oldInputs = oldInputsRef.current;
+
+    // Compare the old inputs to the current inputs
+    compareInputs(oldInputs, inputs, prefix, loggerM);
+
+    // Save the current inputs
+    oldInputsRef.current = inputs;
+
+    // Execute wrapped effect
+    return func();
+  }, inputs);
+};
+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);
+  useEffect(function () {
+    // Get the old inputs
+    var oldInputs = oldInputsRef.current;
+
+    // Compare the old inputs to the current inputs
+    compareInputs(oldInputs, inputs, prefix, loggerE);
+
+    // Save the current inputs
+    oldInputsRef.current = inputs;
+
+    // Execute wrapped effect
+    return func();
+  }, inputs);
+};
+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);
+  useLayoutEffect(function () {
+    // Get the old inputs
+    var oldInputs = oldInputsRef.current;
+
+    // Compare the old inputs to the current inputs
+    compareInputs(oldInputs, inputs, prefix, loggerLE);
+
+    // Save the current inputs
+    oldInputsRef.current = inputs;
+
+    // Execute wrapped effect
+    return func();
+  }, inputs);
+};
+
+export { useEffectDebugger, useLayoutEffectDebugger, useMemoDebugger };

package/dist/esm/hooks/useIsDark.js

@@ -0,0 +1,33 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useCallback } from 'react';
+import { useLayoutEffectDebugger } from './useEffectDebugger.js';
+
+var useIsDark = function useIsDark() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDark = _useState2[0],
+    setDark = _useState2[1];
+  var checkTheme = useCallback(function () {
+    var _ref = getComputedStyle(document.documentElement).backgroundColor.match(/\d?\d?\d/g),
+      _ref2 = _slicedToArray(_ref, 1),
+      r = _ref2[0];
+    setDark(+r < 50);
+  }, []);
+  useLayoutEffectDebugger(function () {
+    if (MutationObserver) {
+      var ob = new MutationObserver(checkTheme);
+      ob.observe(document.documentElement, {
+        attributes: true
+      });
+      checkTheme();
+      return function () {
+        ob.disconnect();
+      };
+    }
+  }, [], "useIsDark");
+  return isDark;
+};
+
+export { useIsDark };

package/dist/esm/hooks/useIsRtl.js

@@ -0,0 +1,27 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLayoutEffectDebugger } from './useEffectDebugger.js';
+
+var useIsRtl = function useIsRtl() {
+  var _useTranslation = useTranslation("core"),
+    i18n = _useTranslation.i18n;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isRtl = _useState2[0],
+    setIsRtl = _useState2[1];
+
+  /** ***************** update RTL flag on i18n locale change *******************/
+  useLayoutEffectDebugger(function () {
+    try {
+      setIsRtl(i18n.dir() === "rtl");
+    } catch (_unused) {
+      //
+    }
+  }, [i18n.language], "useIsRtl");
+  return isRtl;
+};
+
+export { useIsRtl };