@react-fabric/core 1.0.0-beta.0

package/dist/cjs/typography/Mark.js

@@ -0,0 +1,86 @@
+'use strict';
+
+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');
+
+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) {
+  var color = _ref.color,
+    children = _ref.children;
+  return /*#__PURE__*/jsxRuntime.jsx("mark", {
+    className: classNames(Typography_module.mark, "whitespace-nowrap", color && getColor.getBgClass(color)),
+    style: color ? {
+      "--mark-color": getColor.getColor(color)
+    } : undefined,
+    children: children
+  });
+};
+/**
+ * Typography mark component to wrap text parts in `mark`
+ */
+var Mark = function Mark(_ref2) {
+  var children = _ref2.children,
+    mark = _ref2.mark,
+    renderer = _ref2.renderer;
+  /** ***************** abbr text renderer *******************/
+  var abbrRender = react.useCallback(function (text) {
+    var _renderer;
+    var color = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+    return /*#__PURE__*/jsxRuntime.jsx(MarkText, {
+      color: color,
+      children: (_renderer = renderer === null || renderer === void 0 ? void 0 : renderer([text, color])) !== null && _renderer !== void 0 ? _renderer : text
+    });
+  }, [renderer]);
+
+  /** ***************** tokenize text with abbr list *******************/
+  var inner = useEffectDebugger.useMemoDebugger(function () {
+    if (utilities.isString(children)) {
+      if (!utilities.isEmpty(mark)) {
+        var tokens = utilities.tokenize(children, mark.map(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 1),
+            keyword = _ref4[0];
+          return keyword;
+        }));
+        var titles = mark.reduce(function (t, _ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2),
+            a = _ref6[0],
+            _ref6$ = _ref6[1],
+            color = _ref6$ === void 0 ? "" : _ref6$;
+          return _objectSpread(_objectSpread({}, t), {}, _defineProperty({}, a.toLowerCase(), {
+            color: color
+          }));
+        }, {});
+        return /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
+          children: tokens.map(function (_ref7, i) {
+            var _titles$text$toLowerC;
+            var _ref8 = _slicedToArray(_ref7, 2),
+              start = _ref8[0],
+              text = _ref8[1];
+            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 children;
+  }, [children, mark, abbrRender], "TextMark inner");
+
+  /** ***************** component *******************/
+  return /*#__PURE__*/jsxRuntime.jsx("span", {
+    children: inner
+  });
+};
+
+exports.Mark = Mark;

package/dist/cjs/typography/Text.js

@@ -0,0 +1,121 @@
+'use strict';
+
+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"];
+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; }
+/**
+ * Typography text component
+ */
+var Text = 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);
+  var _useTranslation = reactI18next.useTranslation("core"),
+    t = _useTranslation.t;
+  var refContainer = 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),
+    showMore = _usePropToggle2[0],
+    toggleShowMore = _usePropToggle2[1],
+    refShowMore = _usePropToggle2[2];
+
+  /** ***************** check text height if clip enabled *******************/
+  var checkHeight = react.useCallback(function () {
+    var el = refContainer.current;
+    if (el && utilities.isNumber(clamp) && clamp > 0 && !refShowMore.current) {
+      setClipped(calculateDimensions.calculateTextHeight(el.firstElementChild, el) > el.offsetHeight);
+    }
+  }, [clamp]);
+
+  /** ***************** observe element resize to recalculate height *******************/
+  useEffectDebugger.useLayoutEffectDebugger(function () {
+    if (refContainer.current) {
+      var ob = new ResizeObserver(checkHeight);
+      ob.observe(refContainer.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), {}, {
+    children: children
+  })) : /*#__PURE__*/jsxRuntime.jsxs("article", {
+    className: className,
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: refContainer,
+      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), {}, {
+        children: children
+      }))
+    }), clipped && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: Typography_module.moreLink,
+      children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+        role: "link",
+        tabIndex: 0,
+        "data-inner-clickable": true,
+        onClick: function onClick(e) {
+          return [e.stopPropagation(), toggleShowMore()];
+        },
+        children: ["...", t("action.".concat(showMore ? "less" : "more"))]
+      })
+    })]
+  });
+};
+
+exports.Text = Text;

package/dist/cjs/typography/Title.js

@@ -0,0 +1,58 @@
+'use strict';
+
+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 jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["children", "className", "as", "bg", "color", "size", "align", "family"];
+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; }
+/**
+ * Typography title component
+ */
+var Title = 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");
+  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), {}, {
+    children: children
+  }));
+};
+
+exports.Title = Title;

package/dist/cjs/typography/Typography.module.css

@@ -0,0 +1 @@
+@layer comp{.title{line-height:1.125}.moreLink{margin:-.25rem 0 1rem;text-align:end;&>span{color:theme(colors.accent.700);cursor:pointer;font-size:.75rem;user-select:none;&:hover{color:theme(colors.accent.500);text-decoration:underline;text-underline-offset:2px}}}}@layer util{.text{-webkit-line-clamp:var(--text-clamp)}.abbr{--abbr-color:var(--accent);color:color-mix(in lab,var(--abbr-color) 50%,var(--fabric-text))}.mark{--mark-color:var(--accent);background-color:color-mix(in lab,var(--mark-color) 25%,var(--fabric-bg))}}

package/dist/cjs/typography/types.js

@@ -0,0 +1,42 @@
+'use strict';
+
+/*
+ * 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 TitleSizeMap = {
+  xs: "0.875rem",
+  sm: "1.125rem",
+  md: "1.5rem",
+  lg: "1.75rem",
+  xl: "2rem"
+};
+var TextSizeMap = {
+  xs: "0.75rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "1.75rem"
+};
+
+exports.TextSizeMap = TextSizeMap;
+exports.TitleSizeMap = TitleSizeMap;

package/dist/cjs/utils/calculateDimensions.js

@@ -0,0 +1,51 @@
+'use strict';
+
+/*
+ * 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.
+ */
+
+/* istanbul ignore file */
+
+/** ***************** get css style property value *******************/
+var getCssStyle = function getCssStyle(element, property) {
+  return getComputedStyle(element).getPropertyValue(property);
+};
+
+/** ***************** calculate full height for given element *******************/
+var calculateTextHeight = 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");
+  clone.style.padding = getCssStyle(styleRoot !== null && styleRoot !== void 0 ? styleRoot : element, "padding");
+  clone.style.lineHeight = getCssStyle(styleRoot !== null && styleRoot !== void 0 ? styleRoot : element, "line-height");
+  clone.style.letterSpacing = getCssStyle(styleRoot !== null && styleRoot !== void 0 ? styleRoot : element, "letter-spacing");
+  clone.style.webkitLineClamp = "unset";
+  clone.style.position = "absolute";
+  clone.style.left = "-10000%";
+  document.body.appendChild(clone);
+  var height = clone.offsetHeight;
+  clone.remove();
+  return height;
+};
+
+exports.calculateTextHeight = calculateTextHeight;
+exports.getCssStyle = getCssStyle;

package/dist/cjs/utils/getColor.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var utilities = require('@react-fabric/utilities');
+
+/*
+ * 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 getColor = function getColor(color) {
+  if (color && utilities.isColor(color)) {
+    return color;
+  }
+};
+var getBgClass = function getBgClass(bg) {
+  if (bg && !utilities.isColor(bg)) {
+    return "bg-".concat(bg);
+  }
+};
+var getColorClass = function getColorClass(color) {
+  if (color && !utilities.isColor(color)) {
+    return "text-".concat(color);
+  }
+};
+var getBorderClass = function getBorderClass(color) {
+  if (color && !utilities.isColor(color)) {
+    return "border-".concat(color);
+  }
+};
+
+exports.getBgClass = getBgClass;
+exports.getBorderClass = getBorderClass;
+exports.getColor = getColor;
+exports.getColorClass = getColorClass;

package/dist/cjs/utils/nodeCheck.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var utilities = require('@react-fabric/utilities');
+
+/*
+ * 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 nodeCheck = function nodeCheck(node) {
+  for (var _len = arguments.length, types = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    types[_key - 1] = arguments[_key];
+  }
+  return utilities.isObject(node) && "type" in node && types.includes(node.type);
+};
+
+exports.nodeCheck = nodeCheck;

package/dist/esm/components/actionLabel/ActionLabel.js

@@ -0,0 +1,56 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { useCallback } from 'react';
+import { ButtonGroup } from '../button/ButtonGroup.js';
+import classes from './ActionLabel.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["children", "className", "align", "actions", "disabled"];
+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; }
+/**
+ * A simple label component with additional actions (like a button or icon) that becomes visible only when the user hovers over the label,
+ * useful in interfaces where space is limited or where it's important to keep the UI clean and focused
+ */
+var ActionLabel = function ActionLabel(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    align = _ref.align,
+    actions = _ref.actions,
+    disabled = _ref.disabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  /**
+   * calculate the width of the action box, width will be used for a delayed transition on hover
+   */
+  var calculateBasis = useCallback(function (el) {
+    if (el) {
+      var clone = el.cloneNode(true);
+      clone.className = "";
+      clone.style.left = "-200%";
+      clone.style.overflow = "hidden";
+      clone.style.position = "absolute";
+      clone.style.whiteSpace = "nowrap";
+      document.body.appendChild(clone);
+      el.style.setProperty("--width", "".concat(clone.offsetWidth, "px"));
+      clone.remove();
+    }
+  }, []);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+    className: classNames(className, classes.actionLabel, "flex overflow-hidden gap-1 items-center cursor-default select-none"),
+    "data-disabled": disabled
+  }, rest), {}, {
+    children: [/*#__PURE__*/jsx(ButtonGroup, {
+      ref: calculateBasis,
+      className: classNames(classes.actions, "overflow-hidden flex-content", align === "end" && "order-2"),
+      children: actions
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex-initial truncate",
+      children: children
+    })]
+  }));
+};
+
+export { ActionLabel };

package/dist/esm/components/actionLabel/ActionLabel.module.css

@@ -0,0 +1 @@
+@layer comp{.actionLabel{&>.actions{--width:4rem;width:0}&:not([data-disabled=true]):hover>.actions{transition:all .1s cubic-bezier(.215,.61,.355,1);transition-delay:.5s;width:var(--width)}}}

package/dist/esm/components/animations/Animations.js

@@ -0,0 +1,131 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
+import { getColor, getColorClass } from '../../utils/getColor.js';
+import '@react-fabric/utilities';
+import classes from './Animations.module.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["className", "color", "strokeColor", "type"];
+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 AnimationIndicator = function AnimationIndicator(_ref) {
+  var className = _ref.className,
+    color = _ref.color,
+    strokeColor = _ref.strokeColor,
+    type = _ref.type,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var styles = useMemoDebugger(function () {
+    var s = {};
+    if (color) {
+      s.color = getColor(color);
+    }
+    if (strokeColor) {
+      s.stroke = getColor(strokeColor);
+    }
+    return s;
+  }, [color, strokeColor], "Animation styles");
+  var path = useMemo(function () {
+    if (type === "check") return "M14.1 27.2l7.1 7.2 16.7-16.8";
+    if (type === "cross") return "M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8";
+    if (type === "question") return "M18.949 17.621c0.426-0.787 1.354-1.6 2.108-2.223 1.279-0.984 3.87-1.778 5.805-1.778 3.837 0 6.189 2.689 6.189 6.034 0 2.23-1.193 4.214-3.751 6.346-2.886 2.361-3.497 3.362-3.497 5.788v0c0-2.263 0.689-3.509 3.476-5.772 2.689-2.23 3.772-3.968 3.772-6.362 0-3.772-2.492-6.034-6.789-6.034-2.132 0-3.903 0.722-5.28 1.804-0.82 0.623-1.476 1.377-2.033 2.197zM26 41.329v0-2.948z";
+    if (type === "exclaim") return "M26.611 10.873c-0.002 1.015-0.002 2.071-0.002 3.086v11.777c0 3.086 0.002 2.232 0 3.288h-0.018c-0.001-1.056 0-0.202 0-3.288v-11.777c0-1.015 0-2.071-0.002-3.086zM26.59 37.472h0.018v3.655h-0.018z";
+    return "M26 22L26 41M27 22L27 41M25 22L25 41M26 11L26 16M27 11L27 16M25 11L25 16Z";
+  }, [type]);
+  /** ***************** component *******************/
+  return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
+    "data-ref": "animated-indicator",
+    className: classNames(classes.checkAnimation, className, "inline-block rounded-full", color && getColorClass(color)),
+    style: styles,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 52 52",
+    "aria-hidden": "true"
+  }, aria), {}, {
+    children: [/*#__PURE__*/jsx("circle", {
+      className: classes.circlePart,
+      cx: "26",
+      cy: "26",
+      r: "25"
+    }), /*#__PURE__*/jsx("path", {
+      className: classNames(classes.iconPart, getColorClass(strokeColor !== null && strokeColor !== void 0 ? strokeColor : "invert")),
+      d: path
+    })]
+  }));
+};
+var AnimationBars = function AnimationBars(_ref2) {
+  var _ref2$color = _ref2.color,
+    color = _ref2$color === void 0 ? "tint-700" : _ref2$color,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? "2rem" : _ref2$size;
+  return /*#__PURE__*/jsx("div", {
+    className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
+    children: /*#__PURE__*/jsx("div", {
+      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      children: /*#__PURE__*/jsx("div", {
+        className: classNames(classes.bars, getColorClass(color + "-500/50")),
+        style: {
+          width: size
+        }
+      })
+    })
+  });
+};
+var AnimationSpinner = function AnimationSpinner(_ref3) {
+  var _ref3$color = _ref3.color,
+    color = _ref3$color === void 0 ? "tint-700" : _ref3$color,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? "2rem" : _ref3$size;
+  return /*#__PURE__*/jsx("div", {
+    className: classNames("absolute inset-0 z-10 flex justify-center items-center cursor-wait"),
+    children: /*#__PURE__*/jsx("div", {
+      className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
+      children: /*#__PURE__*/jsx("div", {
+        className: classNames(classes.spinner, getColorClass(color)),
+        style: {
+          width: size
+        }
+      })
+    })
+  });
+};
+var Loading = function Loading() {
+  return /*#__PURE__*/jsx("div", {
+    className: classNames(classes.loader, "area-[loader] relative overflow-x-clip"),
+    children: /*#__PURE__*/jsx("div", {
+      className: "absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500"
+    })
+  });
+};
+var Skeleton = function Skeleton() {
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames("p-2 animate-pulse flex gap-2 max-w-lg"),
+    children: [/*#__PURE__*/jsx("div", {
+      className: "bg-tint-100 rounded aspect-square h-12"
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex-1 flex flex-col gap-2",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "bg-tint-100 h-3 rounded-full"
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex gap-2",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "bg-tint-100 h-2 rounded-full basis-[30%]"
+        }), /*#__PURE__*/jsx("div", {
+          className: "bg-tint-100 h-2 rounded-full basis-[60%]"
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex gap-2",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "bg-tint-100 h-2 rounded-full basis-[30%]"
+        }), /*#__PURE__*/jsx("div", {
+          className: "bg-tint-100 h-2 rounded-full basis-[60%]"
+        })]
+      })]
+    })]
+  });
+};
+
+export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton };

package/dist/esm/components/animations/Animations.module.css

@@ -0,0 +1 @@
+@layer comp{@keyframes l2{0%,25%{background-position:0 50%,0 calc(50% - 2px),0 calc(50% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}50%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% calc(50% - 2px),50% calc(50% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}75%{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% calc(50% - 2px),100% calc(50% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 0,8px 4px,8px 4px}95%,to{background-position:0 50%,0 -2px,0 calc(100% + 2px),50% 50%,50% -2px,50% calc(100% + 2px),100% 50%,100% -2px,100% calc(100% + 2px);background-size:8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px,8px 100%,8px 4px,8px 4px}}.bars{--c:linear-gradient(currentcolor 0 0);--r1:radial-gradient(farthest-side at bottom,currentcolor 93%,#0000);--r2:radial-gradient(farthest-side at top,currentcolor 93%,#0000);animation:l2 1s infinite alternate;aspect-ratio:1;background:var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2),var(--c),var(--r1),var(--r2);background-repeat:no-repeat}@keyframes l4{to{transform:rotate(1turn)}}.spinner{--b:8px;animation:l4 2s steps(10) infinite;aspect-ratio:1;background:conic-gradient(#0000 10%,currentcolor) content-box;border-radius:50%;mask:repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg),radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b)));mask-composite:destination-in;mask-composite:intersect}@keyframes loader{0%{transform:translateX(calc(-100%*var(--multiplier)))}to{transform:translateX(calc(100%*var(--multiplier)))}}.loader{--multiplier:1;&>div{height:calc(.125rem + 2px);&:after{animation:loader 1s cubic-bezier(.65,0,.45,1) infinite}}:global([dir=rtl]) &{--multiplier:-1}}@keyframes check-stroke{to{stroke-dashoffset:0}}@keyframes check-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes check-fill{to{box-shadow:inset 0 0 0 1em currentcolor}}.checkAnimation{box-shadow:inset 0 0 0 currentcolor;color:theme(colors.primary.DEFAULT);height:1.5em;width:1.5em;fill:transparent;stroke-miterlimit:10;stroke-width:4px;animation:check-fill .4s ease-in-out .4s forwards,check-scale .3s ease-in-out .9s both;animation-delay:.75s;& .circlePart{fill:transparent;stroke:currentcolor;stroke-dasharray:166;stroke-dashoffset:166;stroke-miterlimit:10;stroke-width:8px;animation:check-stroke .6s cubic-bezier(.65,0,.45,1) forwards;animation-delay:.25s}& .iconPart{transform-origin:50% 50%;stroke:currentcolor;stroke-dasharray:48;stroke-dashoffset:48;animation:check-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation-delay:.75s}}}