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

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

@@ -2,29 +2,41 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var ButtonGroup = require('../button/ButtonGroup.js');
-var ActionLabel_module = require('./ActionLabel.module.css');
 var jsxRuntime = require('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; }
+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; }
 /**
- * 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
+ * A label with action buttons that can be aligned to the start or end.
+ * This component is useful for displaying a label with associated actions, such as buttons, that can be aligned based on the design requirements.
+ * It automatically calculates the width of the action buttons to ensure that the label text does not overflow the container.
+ * It uses CSS variables to manage the width of the label text dynamically based on the action buttons' width.
+ * This component is designed to be flexible and can be used in various contexts where a label with actions is needed.
+ * It supports custom alignment, disabled states, and can be easily styled with additional CSS classes.
+ *
+ * @example
+ * ```jsx
+ * <ActionLabel
+ *   actions={[<Button>Action 1</Button>, <Button>Action 2</Button>]}
+ *   align="end"
+ * >
+ *   Label Text
+ * </ActionLabel>
+ * ```
  */
-var ActionLabel = function ActionLabel(_ref) {
+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
-   */
+  // Calculate the width of the action buttons to set a CSS variable
+  // This is used to ensure the label text does not overflow the container
   var calculateBasis = react.useCallback(function (el) {
     if (el) {
       var clone = el.cloneNode(true);
@@ -39,18 +51,19 @@ var ActionLabel = function ActionLabel(_ref) {
     }
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(className, ActionLabel_module.actionLabel, "flex overflow-hidden gap-1 items-center cursor-default select-none"),
+    className: utilities.cn(className, "fabric-actionLabel", "flex overflow-hidden gap-1 items-center cursor-default select-none"),
     "data-disabled": disabled
   }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(ButtonGroup.ButtonGroup, {
       ref: calculateBasis,
-      className: classNames(ActionLabel_module.actions, "overflow-hidden flex-content", align === "end" && "order-2"),
+      "data-inner-clickable": true,
+      className: utilities.cn("fabric-actions", "overflow-hidden flex-content", align === "end" && "order-2"),
       children: actions
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-initial truncate",
       children: children
     })]
   }));
-};
+}
 
 exports.ActionLabel = ActionLabel;

package/dist/cjs/{overlays → components}/alert/Alert.js

@@ -3,22 +3,19 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var react$1 = require('@floating-ui/react');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var reactI18next = require('react-i18next');
-var Animations = require('../../components/animations/Animations.js');
-var Button = require('../../components/button/Button.js');
-var Icon = require('../../components/icon/Icon.js');
-var icons = require('../../types/icons.js');
+var Indicator = require('../animations/Indicator.js');
+var Button = require('../button/Button.js');
+var Icon = require('../icon/Icon.js');
 var Title = require('../../typography/Title.js');
-var getColor = require('../../utils/getColor.js');
-require('@react-fabric/utilities');
-var Alert_module = require('./Alert.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 Alert = function Alert(_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 Alert(_ref) {
   var title = _ref.title,
     message = _ref.message,
     _ref$color = _ref.color,
@@ -27,14 +24,18 @@ var Alert = function Alert(_ref) {
     rtlFlip = _ref.rtlFlip,
     actions = _ref.actions,
     onClose = _ref.onClose,
-    type = _ref.type,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "alert" : _ref$type,
+    multiline = _ref.multiline,
     okLabel = _ref.okLabel,
     cancelLabel = _ref.cancelLabel,
     placeholder = _ref.placeholder,
     defaultValue = _ref.defaultValue;
   var _useTranslation = reactI18next.useTranslation("core"),
     t = _useTranslation.t;
-  var _useState = react.useState(defaultValue),
+  var _useState = react.useState(function () {
+      return defaultValue;
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
@@ -60,71 +61,93 @@ var Alert = function Alert(_ref) {
       icon: icon,
       size: "md",
       rtlFlip: rtlFlip,
-      color: color + "-600"
+      color: "".concat(color, "-600")
     });
     switch (color) {
       case "danger":
-        return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
+        return /*#__PURE__*/jsxRuntime.jsx(Indicator.AnimationIndicator, {
           type: "cross",
-          className: getColor.getColorClass(color + "-600")
+          className: "text-danger-600"
         });
       case "success":
-        return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
+        return /*#__PURE__*/jsxRuntime.jsx(Indicator.AnimationIndicator, {
           type: "check",
-          className: getColor.getColorClass(color + "-600")
+          className: "text-success-600"
         });
       case "warning":
-        return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
+        return /*#__PURE__*/jsxRuntime.jsx(Indicator.AnimationIndicator, {
           type: "exclaim",
-          className: getColor.getColorClass(color + "-600")
+          className: "text-warning-600"
         });
       default:
-        return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
+        return /*#__PURE__*/jsxRuntime.jsx(Indicator.AnimationIndicator, {
           type: type === "confirm" ? "question" : "info",
-          className: getColor.getColorClass(color + "-600")
+          className: "text-".concat(color, "-600")
         });
     }
-  }, [color, type, icon]);
-  var handleClose = react.useCallback(function (ret) {
-    refs.floating.current && (refs.floating.current.dataset.show = "false");
+  }, [color, type, icon, rtlFlip]);
+  var handleClose = function handleClose(ret) {
+    if (refs.floating.current) refs.floating.current.dataset.show = "false";
     setTimeout(function () {
-      onClose(ret);
+      onClose === null || onClose === void 0 || onClose(ret);
     }, 250);
-  }, [onClose]);
+  };
   react.useLayoutEffect(function () {
-    setTimeout(function () {
+    var tmr = setTimeout(function () {
       return refs.floating.current && (refs.floating.current.dataset.show = "true");
     }, 100);
-  }, []);
+    return function () {
+      clearTimeout(tmr);
+      try {
+        // call on close to kill the promise if unloaded without using close actions
+        onClose === null || onClose === void 0 || onClose(false);
+      } catch (_unused) {
+        //
+      }
+    };
+  }, [refs.floating, onClose]);
+  var E = multiline ? "textarea" : "input";
   return /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
     children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingOverlay, {
       lockScroll: true,
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
-      className: "bg-base/50 backdrop-blur-sm grid place-items-center",
+      className: "bg-tint-100/50 backdrop-blur-sm grid place-items-center",
       children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,
+        modal: true,
         children: /*#__PURE__*/jsxRuntime.jsxs("dialog", _objectSpread(_objectSpread({
           role: "alertdialog",
-          className: classNames(Alert_module.alert, getColor.getBorderClass(color + "-300"), "grid bg-base border-2 pointer-events-auto overflow-hidden rounded-capped select-none", "min-w-72 max-w-sm p-6 relative outline-0 shadow-lg"),
-          ref: refs.setFloating
+          className: utilities.cn("fabric-alert", "grid bg-default border-2 pointer-events-auto overflow-hidden rounded-capped select-none", "min-w-72 max-w-sm py-2 px-6 relative outline-0 shadow-lg"),
+          style: {
+            borderColor: getColor.getColor("".concat(color, "-300"))
+          },
+          ref: function ref(el) {
+            return refs.setFloating(el);
+          }
         }, getFloatingProps()), {}, {
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: classNames("area-[icon] text-lg py-2"),
+            className: utilities.cn("area-[icon] self-start text-2xl"),
             children: iconType
-          }), /*#__PURE__*/jsxRuntime.jsx(Title.Title, {
-            className: "font-medium area-[title]",
-            children: title
-          }), /*#__PURE__*/jsxRuntime.jsx("p", {
-            className: "area-[message] py-4",
-            children: message
-          }), type === "prompt" && /*#__PURE__*/jsxRuntime.jsx("input", {
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "area-[message]",
+            children: [title && /*#__PURE__*/jsxRuntime.jsx(Title.Title, {
+              className: "font-medium",
+              children: title
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              children: message
+            })]
+          }), type === "prompt" && /*#__PURE__*/jsxRuntime.jsx(E, {
             value: value,
             placeholder: placeholder,
-            className: classNames("border rounded focus:border-primary-500"),
+            className: utilities.cn("area-[input] appearance-none outline-0 border rounded w-full px-2 py-1"),
+            style: {
+              borderColor: getColor.getColor("".concat(color, "-200")),
+              "--tw-ring-color": getColor.getColor("".concat(color, "-500"))
+            },
             ref: function ref(e) {
-              return e != null && setTimeout(function () {
+              if (e !== null) setTimeout(function () {
                 return e.focus();
               }, 100);
             },
@@ -135,17 +158,11 @@ var Alert = function Alert(_ref) {
               return setValue(e.target.value);
             },
             onKeyDown: function onKeyDown(e) {
-              return e.key === "Enter" && handleClose(value);
+              return !e.shiftKey && e.key === "Enter" && handleClose(value);
             }
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex gap-1 justify-center flex-nowrap pt-2 area-[actions]",
-            children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-              className: "contents",
-              onClickCapture: function onClickCapture(e) {
-                return handleClose(e.target.value);
-              },
-              children: actions
-            }), type === "confirm" && /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+            children: [type === "confirm" && /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
               size: "sm",
               variant: "link",
               color: color,
@@ -153,17 +170,23 @@ var Alert = function Alert(_ref) {
                 return handleClose(false);
               },
               children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : t("action.cancel", "Cancel")
+            }), /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "contents",
+              onClickCapture: function onClickCapture(e) {
+                return handleClose(e.target.dataset.value);
+              },
+              children: actions
             }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
               size: "sm",
               variant: "solid",
               color: color,
               onClick: function onClick() {
-                return handleClose(true);
+                return handleClose(type === "prompt" ? value : true);
               },
               children: okLabel !== null && okLabel !== void 0 ? okLabel : t("action.ok", "OK")
             })]
           }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "absolute top-2 end-2",
+            className: "absolute top-2 inset-e-0",
             children: /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
               size: "sm",
               variant: "link",
@@ -172,7 +195,7 @@ var Alert = function Alert(_ref) {
               onClick: function onClick() {
                 return handleClose(false);
               },
-              icon: icons.CoreIcons.close,
+              icon: "icon-[mdi--close]",
               "aria-label": "close"
             })
           })]
@@ -180,6 +203,6 @@ var Alert = function Alert(_ref) {
       })
     })
   });
-};
+}
 
 exports.Alert = Alert;

package/dist/cjs/components/animations/Indicator.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var AlertCircleIcon = require('@iconify-react/line-md/alert-circle');
+var CloseCircleIcon = require('@iconify-react/line-md/close-circle');
+var ConfirmCircleIcon = require('@iconify-react/line-md/confirm-circle');
+var QuestionCircleIcon = require('@iconify-react/line-md/question-circle');
+var Icon = require('../icon/Icon.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["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), 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; }
+var ANIMATION_ICONS = {
+  info: /*#__PURE__*/jsxRuntime.jsx(AlertCircleIcon, {
+    height: "1.25em",
+    width: "1.25em",
+    className: "rotate-180"
+  }),
+  check: /*#__PURE__*/jsxRuntime.jsx(ConfirmCircleIcon, {
+    height: "1.25em",
+    width: "1.25em"
+  }),
+  cross: /*#__PURE__*/jsxRuntime.jsx(CloseCircleIcon, {
+    height: "1.25em",
+    width: "1.25em"
+  }),
+  question: /*#__PURE__*/jsxRuntime.jsx(QuestionCircleIcon, {
+    height: "1.25em",
+    width: "1.25em"
+  }),
+  exclaim: /*#__PURE__*/jsxRuntime.jsx(AlertCircleIcon, {
+    height: "1.25em",
+    width: "1.25em"
+  })
+};
+
+/**
+ * Animated status indicator that renders a themed icon with animation.
+ *
+ * Renders one of five predefined icon types (check, cross, question, exclaim, info)
+ * using the `Icon` component. Useful for displaying success, error, help, alert,
+ * or info states in forms, notifications, and feedback UI.
+ *
+ * @example
+ * ```tsx
+ * import { AnimationIndicator } from "@react-fabric/core";
+ *
+ * // Success indicator
+ * <AnimationIndicator type="check" color="success-500" />
+ *
+ * // Error indicator
+ * <AnimationIndicator type="cross" color="error-500" />
+ *
+ * // Warning indicator
+ * <AnimationIndicator type="exclaim" color="warning-500" />
+ *
+ * // Help indicator
+ * <AnimationIndicator type="question" />
+ * ```
+ */
+function AnimationIndicator(_ref) {
+  var type = _ref.type,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Map the type to its corresponding icon and delegate rendering to the Icon component
+  return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread(_objectSpread({}, props), {}, {
+    icon: ANIMATION_ICONS[type || "info"]
+  }));
+}
+
+exports.AnimationIndicator = AnimationIndicator;

package/dist/cjs/components/animations/Loader.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var utilities = require('@react-fabric/utilities');
+require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
+
+/**
+ * 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.
+ */
+
+/**
+ * Loading overlay that renders an animated icon over a blurred backdrop.
+ *
+ * Renders a centered icon inside a frosted-glass mask, typically used to
+ * indicate loading or disabled states. The mask covers its parent element
+ * and prevents user interaction while visible.
+ *
+ * @example
+ * ```tsx
+ * import { AnimationLoader } from "@react-fabric/core";
+ *
+ * // Loading overlay with medium blur
+ * <div style={{ position: "relative" }}>
+ *     <p>Page content</p>
+ *     <AnimationLoader icon="icon-[mdi--loading]" maskBlur="md" />
+ * </div>
+ *
+ * // Custom color and size
+ * <AnimationLoader icon="icon-[mdi--loading]" color="primary-500" size="3rem" />
+ * ```
+ */
+function AnimationLoader(_ref) {
+  var _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "tint-500" : _ref$color,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "2rem" : _ref$size,
+    icon = _ref.icon,
+    maskBlur = _ref.maskBlur;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: utilities.cn("fabric-loader-mask", "absolute inset-0 z-10 flex justify-center items-center cursor-wait", maskBlur === "sm" && "backdrop-blur-sm", maskBlur === "md" && "backdrop-blur-md", maskBlur === "lg" && "backdrop-blur-lg"),
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      "data-ref": "loader",
+      className: "outline outline-tint-300/50 p-4 bg-white/50 dark:bg-black/50 backdrop-blur-xs leading-0 rounded",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: utilities.cn(icon, "aspect-square"),
+        style: {
+          fontSize: size,
+          color: getColor.getColor(color)
+        }
+      })
+    })
+  });
+}
+
+exports.AnimationLoader = AnimationLoader;

package/dist/cjs/components/animations/LoadingBars.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var Loader = require('./Loader.js');
+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), 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; }
+/**
+ * Animated loading indicator that renders a "bars scale fade" spinner.
+ *
+ * A thin wrapper around `AnimationLoader` that provides a pre-configured
+ * bars-style loading animation. Useful for inline loading indicators in
+ * forms, tables, or content areas.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingBars } from "@react-fabric/core";
+ *
+ * // Basic bars spinner
+ * <LoadingBars />
+ *
+ * // Custom color and size
+ * <LoadingBars color="primary-500" size="2rem" />
+ *
+ * // With backdrop blur
+ * <LoadingBars maskBlur="sm" />
+ * ```
+ */
+function LoadingBars(props) {
+  // Delegate to AnimationLoader with a pre-configured bars-scale-fade icon
+  return /*#__PURE__*/jsxRuntime.jsx(Loader.AnimationLoader, _objectSpread({
+    icon: "icon-[svg-spinners--bars-scale-fade]"
+  }, props));
+}
+
+exports.LoadingBars = LoadingBars;

package/dist/cjs/components/animations/LoadingLine.js

@@ -0,0 +1,59 @@
+'use strict';
+
+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.
+ */
+
+/**
+ * Inline loading indicator that renders a top-border shimmer animation.
+ *
+ * A lightweight loading bar displayed as a thin horizontal line at the top
+ * of its container. Useful for page-level or section-level loading states
+ * where a full overlay would be too intrusive.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingLine } from "@react-fabric/core";
+ *
+ * // Page-level loading indicator
+ * <div>
+ *     <LoadingLine />
+ *     <p>Content loads below...</p>
+ * </div>
+ * ```
+ */
+function LoadingLine() {
+  // Renders a thin shimmer bar at the top of the container using CSS animations
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "fabric-loader area-loader relative overflow-x-clip h-0",
+    "data-ref": "loading",
+    children: /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "absolute inset-x-0 top-0 z-10 py-px overflow-hidden after:absolute after:block after:inset-0"
+    })
+  });
+}
+
+exports.LoadingLine = LoadingLine;

package/dist/cjs/components/animations/LoadingSpinner.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var Loader = require('./Loader.js');
+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), 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; }
+/**
+ * Animated loading indicator that renders an "eclipse" spinner.
+ *
+ * A thin wrapper around `AnimationLoader` that provides a pre-configured
+ * circular loading animation. Useful for inline loading indicators in
+ * images, charts, and data cards.
+ *
+ * @example
+ * ```tsx
+ * import { LoadingSpinner } from "@react-fabric/core";
+ *
+ * // Basic spinner
+ * <LoadingSpinner />
+ *
+ * // Custom color and size
+ * <LoadingSpinner color="primary-500" size="2rem" />
+ *
+ * // With backdrop blur
+ * <LoadingSpinner maskBlur="sm" />
+ * ```
+ */
+function LoadingSpinner(props) {
+  // Delegate to AnimationLoader with a pre-configured eclipse spinner icon
+  return /*#__PURE__*/jsxRuntime.jsx(Loader.AnimationLoader, _objectSpread({
+    icon: "icon-[svg-spinners--eclipse]"
+  }, props));
+}
+
+exports.LoadingSpinner = LoadingSpinner;