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

package/dist/esm/typography/Mark.js

@@ -2,36 +2,48 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { isString, isEmpty, tokenize } from '@react-fabric/utilities';
-import classNames from 'classnames';
+import { cn, isString, isEmpty, tokenize } from '@react-fabric/utilities';
 import { useCallback, Fragment } from 'react';
 import { useMemoDebugger } from '../hooks/useEffectDebugger.js';
-import { getBgClass, getColor } from '../utils/getColor.js';
-import classes from './Typography.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../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__*/jsx("mark", {
-    className: classNames(classes.mark, "whitespace-nowrap", color && getBgClass(color)),
+    className: cn("fabric-mark", "whitespace-nowrap"),
     style: color ? {
       "--mark-color": 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 = useCallback(function (text) {
+  /** ***************** mark text renderer *******************/
+  var markRender = useCallback(function (text) {
     var _renderer;
     var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
     return /*#__PURE__*/jsx(MarkText, {
@@ -40,7 +52,7 @@ var Mark = function Mark(_ref2) {
     });
   }, [renderer]);
 
-  /** ***************** tokenize text with abbr list *******************/
+  /** ***************** tokenize text with mark list *******************/
   var inner = useMemoDebugger(function () {
     if (isString(children)) {
       if (!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__*/jsxs(Fragment, {
-              children: [start, text ? abbrRender(text, color) : null]
-            }, i);
+            return (
+              /*#__PURE__*/
+              // eslint-disable-next-line @eslint-react/no-array-index-key
+              jsxs(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__*/jsx("span", {
+    className: "mixed-lang whitespace-pre-wrap",
     children: inner
   });
-};
+}
 
 export { Mark };

package/dist/esm/typography/Text.js

@@ -3,108 +3,87 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isNumber } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useRef, useState, useCallback } from 'react';
+import { isNumber, cn } from '@react-fabric/utilities';
+import { useRef, useState, useEffectEvent } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLayoutEffectDebugger, useMemoDebugger } from '../hooks/useEffectDebugger.js';
+import { useLayoutEffectDebugger } from '../hooks/useEffectDebugger.js';
 import { usePropToggle } from '../hooks/usePropToggle.js';
 import { calculateTextHeight } from '../utils/calculateDimensions.js';
-import { getColor, getBgClass, getColorClass } from '../utils/getColor.js';
-import classes from './Typography.module.css';
-import { TextSizeMap } from './types.js';
 import { jsx, jsxs } from '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 = useTranslation("core"),
     t = _useTranslation.t;
-  var refContainer = useRef(null);
+  var containerRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     clipped = _useState2[0],
     setClipped = _useState2[1];
   var _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 = useCallback(function () {
-    var el = refContainer.current;
-    if (el && isNumber(clamp) && clamp > 0 && !refShowMore.current) {
+  var checkHeight = useEffectEvent(function () {
+    var el = containerRef.current;
+    if (el && isNumber(clamp) && clamp > 0 && !showMore) {
       setClipped(calculateTextHeight(el.firstElementChild, el) > el.offsetHeight);
     }
-  }, [clamp]);
+  });
 
   /** ***************** observe element resize to recalculate height *******************/
   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 = useMemoDebugger(function () {
-    var s = {};
-    if (bg) {
-      s.backgroundColor = getColor(bg);
-    }
-    if (color) {
-      s.color = getColor(color);
-    }
-    if (align) {
-      s.textAlign = align;
-    }
-    if (size && !(size in TextSizeMap)) {
-      s.fontSize = size;
-    }
-    if (size && size in TextSizeMap) {
-      s.fontSize = TextSizeMap[size];
-    }
-    return s;
-  }, [bg, color, size, align, family], "Text styles");
   return inline ? /*#__PURE__*/jsx("span", _objectSpread(_objectSpread({
-    className: className,
-    style: styles
-  }, aria), {}, {
+    className: className
+  }, props), {}, {
     children: children
   })) : /*#__PURE__*/jsxs("article", {
     className: className,
     children: [/*#__PURE__*/jsx("div", {
-      ref: refContainer,
+      ref: containerRef,
       style: {
         "--text-clamp": showMore ? "unset" : clamp !== null && clamp !== void 0 ? clamp : "unset"
       },
       children: /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-        className: classNames(classes.text, "text-reset mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), bg && getBgClass(bg), color && getColorClass(color), clamp && "line-clamp-1"),
-        style: styles
-      }, aria), {}, {
+        className: cn("fabric-text", "mixed-lang px-0.5 whitespace-pre-wrap", clamp && "line-clamp-1")
+      }, props), {}, {
         children: children
       }))
     }), clipped && /*#__PURE__*/jsx("div", {
-      className: classes.moreLink,
+      className: "fabric-moreLink",
       children: /*#__PURE__*/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"))]
       })
     })]
   });
-};
+}
 
 export { Text };

package/dist/esm/typography/Title.js

@@ -2,57 +2,34 @@
 
 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 { TitleSizeMap } from './types.js';
-import classes from './Typography.module.css';
+import { cn } from '@react-fabric/utilities';
 import { jsx } from '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 = useMemoDebugger(function () {
-    var s = {};
-    if (bg) {
-      s.backgroundColor = getColor(bg);
-    }
-    if (color) {
-      s.color = getColor(color);
-    }
-    if (align) {
-      s.textAlign = align;
-    }
-    if (size && !(size in TitleSizeMap)) {
-      s.fontSize = size;
-    }
-    if (size && size in TitleSizeMap) {
-      s.fontSize = 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__*/jsx(E, _objectSpread(_objectSpread({
-    className: classNames(classes.title, "px-[2px] py-1 truncate whitespace-pre-wrap", className, family && "font-".concat(family), !as && "text-lg", bg && getBgClass(bg), color && getColorClass(color)),
-    style: styles
-  }, aria), {}, {
+    className: cn("fabric-title", className, !as && "text-lg")
+  }, props), {}, {
     children: children
   }));
-};
+}
 
 export { Title };

package/dist/esm/utils/calculateDimensions.js

@@ -1,37 +1,52 @@
 'use client';
 
-/*
+/**
  * 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,6 +60,6 @@ var calculateTextHeight = function calculateTextHeight(element, styleRoot) {
   var height = clone.offsetHeight;
   clone.remove();
   return height;
-};
+}
 
 export { calculateTextHeight, getCssStyle };

package/dist/esm/utils/cloneElement.js

@@ -0,0 +1,64 @@
+'use client';
+
+import { Children, isValidElement } from 'react';
+import { Fragment } from '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 = Children.map(children, function (c) {
+    if (/*#__PURE__*/isValidElement(c)) {
+      if (c.type === 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);
+}
+
+export { cloneChildren };

package/dist/esm/{core/section/Section.js → utils/getBadgeProps.js}

@@ -1,9 +1,7 @@
 'use client';
 
-import classNames from 'classnames';
-import { ErrorBoundary } from '../boundary/ErrorBoundary.js';
-import classes from './Section.module.css';
-import { jsx } from 'react/jsx-runtime';
+import { isObject } from '@react-fabric/utilities';
+import { isValidElement } from 'react';
 
 /*
  * React Fabric
@@ -11,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
  *
  *
  * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * Copyright (c) 2026 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,
@@ -28,20 +26,26 @@ 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.
  */
 
-var Section = function Section(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    dir = _ref.dir,
-    ref = _ref.ref;
-  return /*#__PURE__*/jsx("div", {
-    "data-ref": "section",
-    dir: dir,
-    ref: ref,
-    className: classNames(classes.section, className, "grid area-content overflow-hidden"),
-    children: /*#__PURE__*/jsx(ErrorBoundary, {
-      children: children
-    })
-  });
-};
+/**
+ * Utility function to get badge properties from a badge value or object.
+ * It checks if the badge is an object and returns its properties,
+ *
+ * @param {string | number | BadgeType} badge - The badge value or object.
+ * @returns {BadgeType} An object containing badge properties.
+ */
+function getBadgeProps(badge) {
+  if (isObject(badge) && ! /*#__PURE__*/isValidElement(badge)) {
+    return Object.assign({
+      forButton: true,
+      placement: ""
+    }, badge);
+  } else {
+    return {
+      value: badge,
+      forButton: true,
+      placement: ""
+    };
+  }
+}
 
-export { Section };
+export { getBadgeProps };

package/dist/esm/utils/getColor.js

@@ -2,48 +2,57 @@
 
 import { isColor } from '@react-fabric/utilities';
 
-/*
+/**
  * 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 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.
+ */
+
+
+/**
+ * Resolves a color value to a CSS color string.
+ *
+ * If the input is a valid CSS color (e.g., `"#ff0000"`, `"rgb(255,0,0)"`), it is returned as-is.
+ * Otherwise, it is treated as a design token name and resolved to a CSS custom property
+ * (e.g., `"primary-500"` → `"var(--color-primary-500)"`).
  *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
+ * @param {ColorUnion} color - The color value to resolve. Accepts CSS color strings or design token names.
+ * @returns The resolved CSS color string, or `undefined` if color is falsy.
  *
- * 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.
+ * @example
+ * ```ts
+ * getColor("primary-500");    // "var(--color-primary-500)"
+ * getColor("#ff0000");       // "#ff0000"
+ * getColor("red");           // "var(--color-red)"
+ * getColor(undefined);       // undefined
+ * ```
  */
-
-var getColor = function getColor(color) {
+function getColor(color) {
+  if (!color) return undefined;
   if (color && isColor(color)) {
     return color;
   }
-};
-var getBgClass = function getBgClass(bg) {
-  if (bg && !isColor(bg)) {
-    return "bg-".concat(bg);
-  }
-};
-var getColorClass = function getColorClass(color) {
-  if (color && !isColor(color)) {
-    return "text-".concat(color);
-  }
-};
-var getBorderClass = function getBorderClass(color) {
-  if (color && !isColor(color)) {
-    return "border-".concat(color);
-  }
-};
+  if (color.startsWith("--")) return "var(".concat(color, ")");
+  return "var(--color-".concat(color, ")");
+}
 
-export { getBgClass, getBorderClass, getColor, getColorClass };
+export { getColor };