@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/dist/cjs/typography/Copy.js

@@ -1,37 +1,37 @@
 'use strict';
 
-var classNames = require('classnames');
-var react = require('react');
+var utilities = require('@react-fabric/utilities');
 var reactI18next = require('react-i18next');
 var Button = require('../components/button/Button.js');
-var Tooltip = require('../overlays/tooltip/Tooltip.js');
-var icons = require('../types/icons.js');
+var Tooltip = require('../components/tooltip/Tooltip.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * 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 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 Copy = function Copy(_ref) {
+function Copy(_ref) {
   var text = _ref.text,
     size = _ref.size,
     className = _ref.className;
@@ -39,21 +39,21 @@ var Copy = function Copy(_ref) {
     t = _useTranslation.t;
 
   /** ***************** handle copy *******************/
-  var doCopy = react.useCallback(function () {
+  var doCopy = function doCopy() {
     void navigator.clipboard.writeText(text);
-  }, [text]);
+  };
   return /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
     content: t("action.copy"),
     children: /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
-      icon: icons.CoreIcons.copy,
+      icon: "icon-[mdi--content-copy]",
       "aria-label": "Copy text",
-      actionMessage: t("action.copied"),
       variant: "link",
       size: size,
-      className: classNames(className, "align-bottom"),
+      showActionDone: true,
+      className: utilities.cn(className, "align-bottom"),
       onClick: doCopy
     })
   });
-};
+}
 
 exports.Copy = Copy;

package/dist/cjs/typography/Kbd.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var reactHotkeys = require('@tanstack/react-hotkeys');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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.
+ */
+
+function Kbd(_ref) {
+  var keys = _ref.keys;
+  return [keys].flat().map(function (key, i) {
+    return /*#__PURE__*/jsxRuntime.jsx("kbd", {
+      className: "hotkey-label align-top inline-flex gap-1 select-none self-center font-sans items-center text-[0.625rem] leading-4 bg-tint-500/20 text-tint-900/65 whitespace-nowrap rounded px-2 mx-1",
+      children: reactHotkeys.formatForDisplay(key, {
+        useSymbols: true
+      })
+    }, "".concat(key, "-").concat(i.toString(16)));
+  });
+}
+
+exports.Kbd = Kbd;

package/dist/cjs/typography/Mark.js

@@ -3,35 +3,47 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var react = require('react');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
-var getColor = require('../utils/getColor.js');
-var Typography_module = require('./Typography.module.css');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../utils/getColor.js');
 
 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 MarkText = function MarkText(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
+function MarkText(_ref) {
   var color = _ref.color,
     children = _ref.children;
   return /*#__PURE__*/jsxRuntime.jsx("mark", {
-    className: classNames(Typography_module.mark, "whitespace-nowrap", color && getColor.getBgClass(color)),
+    className: utilities.cn("fabric-mark", "whitespace-nowrap"),
     style: color ? {
       "--mark-color": getColor.getColor(color)
     } : undefined,
     children: children
   });
-};
+}
 /**
- * Typography mark component to wrap text parts in `mark`
+ * A component that highlights specific text parts with a mark element, allowing for custom rendering and color.
+ * It tokenizes the children string based on the provided `mark` array,
+ * which contains pairs of text parts and their corresponding colors.
+ * The component can use a custom renderer to display the marked text,
+ * allowing for greater flexibility in how the text is presented.
+ *
+ * @example
+ * <Mark
+ *   mark={[
+ *     ["important", "red"],
+ *     ["note", "blue"],
+ *   ]}
+ * >
+ *   This is an important note that should be highlighted.
+ * </Mark>
  */
-var Mark = function Mark(_ref2) {
+function Mark(_ref2) {
   var children = _ref2.children,
     mark = _ref2.mark,
     renderer = _ref2.renderer;
-  /** ***************** abbr text renderer *******************/
-  var abbrRender = react.useCallback(function (text) {
+  /** ***************** mark text renderer *******************/
+  var markRender = react.useCallback(function (text) {
     var _renderer;
     var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
     return /*#__PURE__*/jsxRuntime.jsx(MarkText, {
@@ -40,7 +52,7 @@ var Mark = function Mark(_ref2) {
     });
   }, [renderer]);
 
-  /** ***************** tokenize text with abbr list *******************/
+  /** ***************** tokenize text with mark list *******************/
   var inner = useEffectDebugger.useMemoDebugger(function () {
     if (utilities.isString(children)) {
       if (!utilities.isEmpty(mark)) {
@@ -67,20 +79,25 @@ var Mark = function Mark(_ref2) {
             var _ref9 = (_titles$text$toLowerC = titles[text.toLowerCase()]) !== null && _titles$text$toLowerC !== void 0 ? _titles$text$toLowerC : {},
               _ref9$color = _ref9.color,
               color = _ref9$color === void 0 ? "" : _ref9$color;
-            return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
-              children: [start, text ? abbrRender(text, color) : null]
-            }, i);
+            return (
+              /*#__PURE__*/
+              // eslint-disable-next-line @eslint-react/no-array-index-key
+              jsxRuntime.jsxs(react.Fragment, {
+                children: [start, text ? markRender(text, color) : null]
+              }, "".concat(text, "-").concat(i))
+            );
           })
         });
       }
     }
     return children;
-  }, [children, mark, abbrRender], "TextMark inner");
+  }, [children, mark, markRender], "TextMark inner");
 
   /** ***************** component *******************/
   return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: "mixed-lang whitespace-pre-wrap",
     children: inner
   });
-};
+}
 
 exports.Mark = Mark;

package/dist/cjs/typography/Text.js

@@ -4,107 +4,86 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var utilities = require('@react-fabric/utilities');
-var classNames = require('classnames');
 var react = require('react');
 var reactI18next = require('react-i18next');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
 var usePropToggle = require('../hooks/usePropToggle.js');
 var calculateDimensions = require('../utils/calculateDimensions.js');
-var getColor = require('../utils/getColor.js');
-var Typography_module = require('./Typography.module.css');
-var types = require('./types.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "className", "inline", "bg", "color", "family", "size", "clamp", "align"];
+var _excluded = ["children", "className", "inline", "clamp"];
 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
 /**
- * Typography text component
+ * A component that renders text with various styles, supports line clamping, and provides a "show more" link if the text is clipped.
+ * The component uses a combination of CSS and JavaScript to achieve the desired effects, ensuring a smooth user experience.
+ * It leverages the ResizeObserver API to detect changes in the text container's size and adjust the line clamping accordingly.
+ *
+ * @example
+ * ```jsx
+ * <Text
+ *   inline={false}
+ *   clamp={2}
+ * >
+ *   This is a sample text that demonstrates the Text component with various styles applied.
+ * </Text>
+ * ```
  */
-var Text = function Text(_ref) {
+function Text(_ref) {
   var children = _ref.children,
     className = _ref.className,
     inline = _ref.inline,
-    bg = _ref.bg,
-    color = _ref.color,
-    family = _ref.family,
-    size = _ref.size,
     clamp = _ref.clamp,
-    align = _ref.align,
-    aria = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation("core"),
     t = _useTranslation.t;
-  var refContainer = react.useRef(null);
+  var containerRef = react.useRef(null);
   var _useState = react.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     clipped = _useState2[0],
     setClipped = _useState2[1];
   var _usePropToggle = usePropToggle.usePropToggle(false),
-    _usePropToggle2 = _slicedToArray(_usePropToggle, 3),
+    _usePropToggle2 = _slicedToArray(_usePropToggle, 2),
     showMore = _usePropToggle2[0],
-    toggleShowMore = _usePropToggle2[1],
-    refShowMore = _usePropToggle2[2];
+    toggleShowMore = _usePropToggle2[1];
 
   /** ***************** check text height if clip enabled *******************/
-  var checkHeight = react.useCallback(function () {
-    var el = refContainer.current;
-    if (el && utilities.isNumber(clamp) && clamp > 0 && !refShowMore.current) {
+  var checkHeight = react.useEffectEvent(function () {
+    var el = containerRef.current;
+    if (el && utilities.isNumber(clamp) && clamp > 0 && !showMore) {
       setClipped(calculateDimensions.calculateTextHeight(el.firstElementChild, el) > el.offsetHeight);
     }
-  }, [clamp]);
+  });
 
   /** ***************** observe element resize to recalculate height *******************/
   useEffectDebugger.useLayoutEffectDebugger(function () {
-    if (refContainer.current) {
+    if (containerRef.current) {
       var ob = new ResizeObserver(checkHeight);
-      ob.observe(refContainer.current);
+      ob.observe(containerRef.current);
       checkHeight();
       return function () {
         ob.disconnect();
       };
     }
   }, [children, checkHeight], "Text check height");
-
-  /** ***************** style map *******************/
-  var styles = useEffectDebugger.useMemoDebugger(function () {
-    var s = {};
-    if (bg) {
-      s.backgroundColor = getColor.getColor(bg);
-    }
-    if (color) {
-      s.color = getColor.getColor(color);
-    }
-    if (align) {
-      s.textAlign = align;
-    }
-    if (size && !(size in types.TextSizeMap)) {
-      s.fontSize = size;
-    }
-    if (size && size in types.TextSizeMap) {
-      s.fontSize = types.TextSizeMap[size];
-    }
-    return s;
-  }, [bg, color, size, align, family], "Text styles");
   return inline ? /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread(_objectSpread({
-    className: className,
-    style: styles
-  }, aria), {}, {
+    className: className
+  }, props), {}, {
     children: children
   })) : /*#__PURE__*/jsxRuntime.jsxs("article", {
     className: className,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      ref: refContainer,
+      ref: containerRef,
       style: {
         "--text-clamp": showMore ? "unset" : clamp !== null && clamp !== void 0 ? clamp : "unset"
       },
       children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-        className: classNames(Typography_module.text, "text-reset mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), clamp && "line-clamp-1"),
-        style: styles
-      }, aria), {}, {
+        className: utilities.cn("fabric-text", "mixed-lang px-0.5 whitespace-pre-wrap", clamp && "line-clamp-1")
+      }, props), {}, {
         children: children
       }))
     }), clipped && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: Typography_module.moreLink,
+      className: "fabric-moreLink",
       children: /*#__PURE__*/jsxRuntime.jsxs("span", {
         role: "link",
         tabIndex: 0,
@@ -112,10 +91,13 @@ var Text = function Text(_ref) {
         onClick: function onClick(e) {
           return [e.stopPropagation(), toggleShowMore()];
         },
+        onKeyDown: function onKeyDown() {
+          return toggleShowMore();
+        },
         children: ["...", t("action.".concat(showMore ? "less" : "more"))]
       })
     })]
   });
-};
+}
 
 exports.Text = Text;

package/dist/cjs/typography/Title.js

@@ -2,57 +2,34 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var classNames = require('classnames');
-var useEffectDebugger = require('../hooks/useEffectDebugger.js');
-var getColor = require('../utils/getColor.js');
-require('@react-fabric/utilities');
-var types = require('./types.js');
-var Typography_module = require('./Typography.module.css');
+var utilities = require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "className", "as", "bg", "color", "size", "align", "family"];
+var _excluded = ["children", "className", "as"];
 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
 /**
- * Typography title component
+ * A component that renders a title as different HTML elements based on the `as` prop.
+ * This component is useful for creating headings or titles in a consistent style across an application.
+ *
+ * @example
+ * ```jsx
+ * <Title as="h1">
+ *   This is a Title
+ * </Title>
+ * ```
  */
-var Title = function Title(_ref) {
+function Title(_ref) {
   var children = _ref.children,
     className = _ref.className,
     as = _ref.as,
-    bg = _ref.bg,
-    color = _ref.color,
-    size = _ref.size,
-    align = _ref.align,
-    family = _ref.family,
-    aria = _objectWithoutProperties(_ref, _excluded);
-  /** ***************** style map *******************/
-  var styles = useEffectDebugger.useMemoDebugger(function () {
-    var s = {};
-    if (bg) {
-      s.backgroundColor = getColor.getColor(bg);
-    }
-    if (color) {
-      s.color = getColor.getColor(color);
-    }
-    if (align) {
-      s.textAlign = align;
-    }
-    if (size && !(size in types.TitleSizeMap)) {
-      s.fontSize = size;
-    }
-    if (size && size in types.TitleSizeMap) {
-      s.fontSize = types.TitleSizeMap[size];
-    }
-    return s;
-  }, [bg, color, size, align], "Title styles");
+    props = _objectWithoutProperties(_ref, _excluded);
   var E = as !== null && as !== void 0 ? as : "p";
   return /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
-    className: classNames(Typography_module.title, "px-[2px] py-1 truncate whitespace-pre-wrap", className, family && "font-".concat(family), !as && "text-lg", bg && getColor.getBgClass(bg), color && getColor.getColorClass(color)),
-    style: styles
-  }, aria), {}, {
+    className: utilities.cn("fabric-title", className, !as && "text-lg")
+  }, props), {}, {
     children: children
   }));
-};
+}
 
 exports.Title = Title;

package/dist/cjs/utils/calculateDimensions.js

@@ -1,37 +1,52 @@
 'use strict';
 
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * 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 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.
  */
 
 /* istanbul ignore file */
 
-/** ***************** get css style property value *******************/
-var getCssStyle = function getCssStyle(element, property) {
+/**
+ * Retrieves a computed CSS property value from an element.
+ *
+ * @param {HTMLElement} element - The DOM element to read from.
+ * @param {string} property - The CSS property name to retrieve.
+ * @returns The computed value of the property.
+ */
+function getCssStyle(element, property) {
   return getComputedStyle(element).getPropertyValue(property);
-};
+}
 
-/** ***************** calculate full height for given element *******************/
-var calculateTextHeight = function calculateTextHeight(element, styleRoot) {
+/**
+ * Calculates the full rendered height of an element by cloning it with matching styles
+ * and measuring its offsetHeight in an off-screen position.
+ *
+ * @param {HTMLElement} element - The element to measure.
+ * @param {HTMLElement} styleRoot - Optional element whose computed styles to copy; falls back to element itself.
+ * @returns The element's full height in pixels.
+ */
+function calculateTextHeight(element, styleRoot) {
   var clone = element.cloneNode(true);
   clone.style.font = getCssStyle(styleRoot !== null && styleRoot !== void 0 ? styleRoot : element, "font");
   clone.style.width = "".concat(element.offsetWidth, "px");
@@ -45,7 +60,7 @@ var calculateTextHeight = function calculateTextHeight(element, styleRoot) {
   var height = clone.offsetHeight;
   clone.remove();
   return height;
-};
+}
 
 exports.calculateTextHeight = calculateTextHeight;
 exports.getCssStyle = getCssStyle;

package/dist/cjs/utils/cloneElement.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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.
+ */
+
+
+/**
+ * Flattens and clones React children, unwrapping `Fragment` wrappers.
+ *
+ * Recursively processes children to flatten nested `Fragment` elements,
+ * returning a plain array of cloned React nodes. Useful when you need
+ * to iterate over children without Fragment wrappers interfering.
+ *
+ * @param {React.ReactNode} children - The React children to flatten and clone.
+ * @returns An array of cloned React nodes, or `undefined` if children is falsy.
+ *
+ * @example
+ * ```tsx
+ * const children = cloneChildren(<><div>A</div><Fragment><div>B</div></Fragment></>);
+ * // Returns: [<div>A</div>, <div>B</div>]
+ * ```
+ */
+function cloneChildren(children) {
+  var _Children$map;
+  // eslint-disable-next-line @eslint-react/no-children-map
+  return (_Children$map = react.Children.map(children, function (c) {
+    if (/*#__PURE__*/react.isValidElement(c)) {
+      if (c.type === jsxRuntime.Fragment) {
+        var _c$props;
+        // just compare to `Fragment`
+        return cloneChildren((_c$props = c.props) === null || _c$props === void 0 ? void 0 : _c$props.children);
+      }
+      return c;
+    }
+    return c;
+  })) === null || _Children$map === void 0 ? void 0 : _Children$map.flat().filter(Boolean);
+}
+
+exports.cloneChildren = cloneChildren;