@react-fabric/core 1.0.0-beta.60 → 1.0.0-beta.61

package/dist/esm/overlays/alert/Alert.js

@@ -9,7 +9,6 @@ import { useTranslation } from 'react-i18next';
 import { AnimationIndicator } from '../../components/animations/Animations.js';
 import { Button } from '../../components/button/Button.js';
 import { Icon } from '../../components/icon/Icon.js';
-import { CoreIcons } from '../../types/icons.js';
 import { Title } from '../../typography/Title.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
@@ -180,7 +179,7 @@ var Alert = function Alert(_ref) {
               onClick: function onClick() {
                 return handleClose(false);
               },
-              icon: CoreIcons.close,
+              icon: "icon-[mdi--close]",
               "aria-label": "close"
             })
           })]

package/dist/esm/overlays/flyout/Flyout.js

@@ -6,11 +6,10 @@ import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, Floa
 import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useCallback, useEffect, isValidElement } from 'react';
-import { Loading } from '../../components/animations/Animations.js';
+import { LoadingLine } from '../../components/animations/Animations.js';
 import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
 import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
-import { CoreIcons } from '../../types/icons.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["icon", "iconClassName", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "root", "hideMask", "align"];
@@ -116,12 +115,12 @@ var Flyout = function Flyout(_ref) {
             }), actions, /*#__PURE__*/jsx(Icon, {
               "data-ref": "panelClose",
               className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
-              icon: CoreIcons.close,
+              icon: "icon-[mdi--close]",
               onClick: function onClick() {
                 return handleClose(false);
               }
             })]
-          }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
+          }), loading && /*#__PURE__*/jsx(LoadingLine, {}), /*#__PURE__*/jsx("div", {
             role: "dialog",
             className: classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden"),
             tabIndex: 0,

package/dist/esm/overlays/modal/Modal.js

@@ -6,11 +6,10 @@ import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, Floa
 import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useCallback, useEffect, isValidElement } from 'react';
-import { Loading } from '../../components/animations/Animations.js';
+import { LoadingLine } from '../../components/animations/Animations.js';
 import { Icon, getIconProps } from '../../components/icon/Icon.js';
 import { Header } from '../../core/headfoot/HeadFoot.js';
 import { HotKeyWrapper } from '../../hotkeys/HotKeyWrapper.js';
-import { CoreIcons } from '../../types/icons.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["icon", "iconClassName", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "root", "size", "hideMask", "width", "height", "minHeight", "minWidth"];
@@ -108,12 +107,12 @@ var Modal = function Modal(_ref) {
               }), actions, /*#__PURE__*/jsx(Icon, {
                 "data-ref": "panelClose",
                 className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
-                icon: CoreIcons.close,
+                icon: "icon-[mdi--close]",
                 onClick: function onClick() {
                   return handleClose(false);
                 }
               })]
-            }), loading && /*#__PURE__*/jsx(Loading, {}), /*#__PURE__*/jsx("div", {
+            }), loading && /*#__PURE__*/jsx(LoadingLine, {}), /*#__PURE__*/jsx("div", {
               role: "dialog",
               className: classNames("fabric-modalBody", "flex-1 grid overflow-hidden"),
               tabIndex: 0,

package/dist/esm/overlays/toast/Toast.js

@@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next';
 import { AnimationIndicator } from '../../components/animations/Animations.js';
 import { Button } from '../../components/button/Button.js';
 import { Icon } from '../../components/icon/Icon.js';
-import { CoreIcons } from '../../types/icons.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
@@ -122,7 +121,7 @@ var Toast = function Toast(_ref) {
             variant: "link",
             className: "m-0",
             color: color,
-            icon: CoreIcons.closeAll,
+            icon: "icon-[mdi--close-box-multiple-outline]",
             "aria-label": "close-all",
             onClick: onCloseAll
           }), /*#__PURE__*/jsx(Button, {
@@ -130,7 +129,7 @@ var Toast = function Toast(_ref) {
             variant: "link",
             className: "m-0",
             color: color,
-            icon: CoreIcons.close,
+            icon: "icon-[mdi--close]",
             "aria-label": "close",
             onClick: function onClick() {
               return handleClose(false);

package/dist/esm/overlays/tooltip/Tooltip.js

@@ -9,7 +9,6 @@ import classNames from 'classnames';
 import { useRef, useState, useEffect, useMemo, Fragment, cloneElement, isValidElement } from 'react';
 import { Icon } from '../../components/icon/Icon.js';
 import { useIsRtl } from '../../hooks/useIsRtl.js';
-import { CoreIcons } from '../../types/icons.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { getColor } from '../../utils/getColor.js';
 
@@ -102,7 +101,7 @@ var Tooltip = function Tooltip(_ref) {
         className: "ms-2 cursor-pointer text-dimmed flex-content opacity-75 hover:opacity-90 active:opacity-60",
         onClick: handler,
         children: /*#__PURE__*/jsx(Icon, {
-          icon: CoreIcons.copy
+          icon: "icon-[mdi--content-copy]"
         })
       });
     }

package/dist/esm/typography/Copy.js

@@ -5,7 +5,6 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from '../components/button/Button.js';
 import { Tooltip } from '../overlays/tooltip/Tooltip.js';
-import { CoreIcons } from '../types/icons.js';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -45,7 +44,7 @@ var Copy = function Copy(_ref) {
   return /*#__PURE__*/jsx(Tooltip, {
     content: t("action.copy"),
     children: /*#__PURE__*/jsx(Button, {
-      icon: CoreIcons.copy,
+      icon: "icon-[mdi--content-copy]",
       "aria-label": "Copy text",
       actionMessage: t("action.copied"),
       variant: "link",

package/dist/types/components/animations/Animations.d.ts

@@ -33,47 +33,66 @@ export interface AnimationProps extends CssProp, AriaProps {
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
  */
 export declare const AnimationIndicator: ({ className, color, strokeColor, type, ...aria }: AnimationProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that displays a loading animation with a customizable icon, color, size, and mask blur.
+ * It is typically used to indicate loading states in the UI.
+ *
+ * @param {Object} props - The properties for the AnimationLoader component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the loader icon.
+ * @param {number | string} [props.size="2rem"] - The size of the loader icon.
+ * @param {string} props.icon - The icon to be displayed as the loader.
+ * @param {"sm" | "md" | "lg"} [props.maskBlur] - The blur effect for the background mask.
+ * @returns {JSX.Element} The rendered AnimationLoader component.
+ */
+export declare const AnimationLoader: ({ color, size, icon, maskBlur, }: {
+    icon: string;
+    maskBlur?: "sm" | "md" | "lg";
+    color?: ColorType | PaletteType | string;
+    size?: number | string;
+}) => import("react/jsx-runtime").JSX.Element;
 /**
  * A component that displays an animated bars loader.
  * It can be customized with color and size properties.
  * This component is typically used to indicate loading states in the UI.
  *
- * @param {Object} props - The properties for the AnimationBars component.
+ * @param {Object} props - The properties for the LoadingBars component.
  * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
  * @param {number | string} [props.size="2rem"] - The size of the bars.
- * @returns {JSX.Element} The rendered AnimationBars component.
+ * @returns {JSX.Element} The rendered LoadingBars component.
  *
  * @example
  * ```jsx
- * <AnimationBars color="primary-500" size="3rem" />
+ * <LoadingBars color="primary-500" size="3rem" />
  * ```
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
  */
-export declare const AnimationBars: ({ color, size, }: {
+export declare const LoadingBars: (props: {
     color?: ColorType | PaletteType | string;
     size?: number | string;
+    maskBlur?: "sm" | "md" | "lg";
 }) => import("react/jsx-runtime").JSX.Element;
 /**
  * A component that displays a spinner animation.
  * It can be customized with color and size properties.
  * This component is typically used to indicate loading states in the UI.
  *
- * @param {Object} props - The properties for the AnimationSpinner component.
+ * @param {Object} props - The properties for the LoadingSpinner component.
  * @param {ColorType | PaletteType | string} [props.color="tint-700"] - The color of the spinner.
  * @param {number | string} [props.size="2rem"] - The size of the spinner.
- * @returns {JSX.Element} The rendered AnimationSpinner component.
+ * @returns {JSX.Element} The rendered LoadingSpinner component.
  *
  * @example
  * ```jsx
- * <AnimationSpinner color="primary-500" size="3rem" />
+ * <LoadingSpinner color="primary-500" size="3rem" />
  * ```
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
  */
-export declare const AnimationSpinner: ({ color, size, }: {
+export declare const LoadingSpinner: (props: {
     color?: ColorType | PaletteType | string;
     size?: number | string;
+    maskBlur?: "sm" | "md" | "lg";
 }) => import("react/jsx-runtime").JSX.Element;
 /**
  * A component that displays a skeleton loader with a placeholder for content.
@@ -99,4 +118,4 @@ export declare const Skeleton: ({ className, ...rest }: CssProp) => import("reac
  *
  * @returns {JSX.Element} The rendered Loading component.
  */
-export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingLine: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/collapsable/Collapsable.d.ts

@@ -60,8 +60,8 @@ export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp
  * ```jsx
  * <Collapsable
  *   iconAlign="start"
- *   iconOpen={CoreIcons.chevronDown}
- *   iconClosed={CoreIcons.chevronRight}
+ *   iconOpen="icon-[mdi--chevron-down]"
+ *   iconClosed="icon-[mdi--chevron-right]"
  *   open={true}
  *   onOpen={() => console.log("Opened")}
  *   onClose={() => console.log("Closed")}

package/dist/types/components/index.d.ts

@@ -1,5 +1,5 @@
 export { ActionLabel } from "./actionLabel/ActionLabel";
-export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton, } from "./animations/Animations";
+export { LoadingBars, AnimationIndicator, LoadingSpinner, LoadingLine, Skeleton, } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";
 export { Badge, getBadgeProps } from "./badge/Badge";

package/dist/types/components/panel/Panel.d.ts

@@ -75,7 +75,7 @@ export interface PanelProps extends CssProp, AriaProps, TestProps, ExpandProps,
  * ```jsx
  * <Panel
  *   title="Panel Title"
- *   icon={CoreIcons.info}
+ *   icon="icon-[mdi--info]"
  *   actions={<button>Action</button>}
  *   expandable
  *   collapsable

package/dist/types/core/aside/Aside.d.ts

@@ -66,7 +66,7 @@ export interface AsideProps extends ChildrenProp, CollapseProps, CssProp, TestPr
  * ```jsx
  * <Aside
  *   title="Sidebar Title"
- *   icon={CoreIcons.menu}
+ *   icon=icon-[mdi--menu]
  *   rtlFlip={true}
  *   className="custom-aside"
  *   bodyClassName="custom-aside-body"

package/dist/types/index.d.ts

@@ -18,6 +18,5 @@ export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
 export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 export { type ModalProps } from "./types";
-export { CoreIcons } from "./types/icons";
 export { cloneChildren } from "./utils";
 export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService, } from "./context/Global";

package/dist/types/types/index.d.ts

@@ -5,7 +5,7 @@ export type ModalProps<P = unknown> = P & {
 };
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
-export type ColorState = "primary" | "accent" | "info" | "danger" | "success" | "warning";
+export type ColorState = "default" | "primary" | "accent" | "muted" | "info" | "danger" | "success" | "warning";
 export type ColorType = "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "primary-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "info-50" | "info-100" | "info-200" | "info-300" | "info-400" | "info-500" | "info-600" | "info-700" | "info-800" | "info-900" | "info-950" | "danger-50" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "danger-600" | "danger-700" | "danger-800" | "danger-900" | "danger-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950";
 export type PaletteType = "scarlet-50" | "scarlet-100" | "scarlet-200" | "scarlet-300" | "scarlet-400" | "scarlet-500" | "scarlet-600" | "scarlet-700" | "scarlet-800" | "scarlet-900" | "scarlet-950" | "pumpkin-50" | "pumpkin-100" | "pumpkin-200" | "pumpkin-300" | "pumpkin-400" | "pumpkin-500" | "pumpkin-600" | "pumpkin-700" | "pumpkin-800" | "pumpkin-900" | "pumpkin-950" | "marigold-50" | "marigold-100" | "marigold-200" | "marigold-300" | "marigold-400" | "marigold-500" | "marigold-600" | "marigold-700" | "marigold-800" | "marigold-900" | "marigold-950" | "avacado-50" | "avacado-100" | "avacado-200" | "avacado-300" | "avacado-400" | "avacado-500" | "avacado-600" | "avacado-700" | "avacado-800" | "avacado-900" | "avacado-950" | "jade-50" | "jade-100" | "jade-200" | "jade-300" | "jade-400" | "jade-500" | "jade-600" | "jade-700" | "jade-800" | "jade-900" | "jade-950" | "denim-50" | "denim-100" | "denim-200" | "denim-300" | "denim-400" | "denim-500" | "denim-600" | "denim-700" | "denim-800" | "denim-900" | "denim-950" | "iris-50" | "iris-100" | "iris-200" | "iris-300" | "iris-400" | "iris-500" | "iris-600" | "iris-700" | "iris-800" | "iris-900" | "iris-950" | "lilac-50" | "lilac-100" | "lilac-200" | "lilac-300" | "lilac-400" | "lilac-500" | "lilac-600" | "lilac-700" | "lilac-800" | "lilac-900" | "lilac-950" | "coral-50" | "coral-100" | "coral-200" | "coral-300" | "coral-400" | "coral-500" | "coral-600" | "coral-700" | "coral-800" | "coral-900" | "coral-950" | "wood-50" | "wood-100" | "wood-200" | "wood-300" | "wood-400" | "wood-500" | "wood-600" | "wood-700" | "wood-800" | "wood-900" | "wood-950" | "silver-50" | "silver-100" | "silver-200" | "silver-300" | "silver-400" | "silver-500" | "silver-600" | "silver-700" | "silver-800" | "silver-900" | "silver-950" | "steel-50" | "steel-100" | "steel-200" | "steel-300" | "steel-400" | "steel-500" | "steel-600" | "steel-700" | "steel-800" | "steel-900" | "steel-950" | "olive-50" | "olive-100" | "olive-200" | "olive-300" | "olive-400" | "olive-500" | "olive-600" | "olive-700" | "olive-800" | "olive-900" | "olive-950" | "sand-50" | "sand-100" | "sand-200" | "sand-300" | "sand-400" | "sand-500" | "sand-600" | "sand-700" | "sand-800" | "sand-900" | "sand-950" | "tint-50" | "tint-100" | "tint-200" | "tint-300" | "tint-400" | "tint-500" | "tint-600" | "tint-700" | "tint-800" | "tint-900" | "tint-950";
 export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
@@ -118,10 +118,11 @@ export interface TooltipProp {
      */
     tooltip?: string | TooltipType;
 }
-export interface ChildProp<T = JSX.Element> {
+export type ReactElement = React.ReactElement | string | number | bigint | Iterable<React.ReactNode> | React.ReactPortal | boolean | null | undefined;
+export interface ChildProp<T = ReactElement> {
     children: Elements<T>;
 }
-export interface ChildrenProp<T = JSX.Element> {
+export interface ChildrenProp<T = ReactElement> {
     children: Elements<T> | Array<Elements<T>>;
 }
 export interface PositionObject {
@@ -140,3 +141,8 @@ export type ArrayType<T extends readonly any[] | ArrayLike<any> | undefined> = T
 export type Complete<T> = {
     [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>> ? T[P] : T[P] | undefined;
 };
+export type NestedKeys<T> = T extends object ? {
+    [K in keyof T]: K extends string | number ? T[K] extends object ? T[K] extends readonly any[] ? T[K][number] extends object ? // Array of objects/items: return key with array index notation and recurse
+    `${K}.${NestedKeys<T[K][number]>}` | `${K}` : `${K}` : // Standard object: return key with dot notation and recurse
+    `${K}.${NestedKeys<T[K]>}` | `${K}` : `${K}` : never;
+}[keyof T] : "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.60",
+  "version": "1.0.0-beta.61",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "~0.27.16",
-    "@react-fabric/utilities": "^1.0.0-beta.60",
+    "@iconify-json/mdi": "~1.2.3",
+    "@iconify-json/svg-spinners": "~1.2.4",
+    "@iconify/tailwind4": "~1.2.1",
+    "@react-fabric/utilities": "^1.0.0-beta.61",
     "@tailwindcss/postcss": "~4.1.16",
     "boring-avatars": "~1.11.2",
     "classnames": "~2.5.1",
@@ -54,5 +57,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
+  "gitHead": "a0b0c571bf9c189fa3355bbc3b896ecc4b9d6a04"
 }

package/src/components/animations/Animations.tsx

@@ -126,26 +126,24 @@ export const AnimationIndicator = ({
 };
 
 /**
- * A component that displays an animated bars loader.
- * It can be customized with color and size properties.
- * This component is typically used to indicate loading states in the UI.
+ * A component that displays a loading animation with a customizable icon, color, size, and mask blur.
+ * It is typically used to indicate loading states in the UI.
  *
- * @param {Object} props - The properties for the AnimationBars component.
- * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
- * @param {number | string} [props.size="2rem"] - The size of the bars.
- * @returns {JSX.Element} The rendered AnimationBars component.
- *
- * @example
- * ```jsx
- * <AnimationBars color="primary-500" size="3rem" />
- * ```
- *
- * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ * @param {Object} props - The properties for the AnimationLoader component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the loader icon.
+ * @param {number | string} [props.size="2rem"] - The size of the loader icon.
+ * @param {string} props.icon - The icon to be displayed as the loader.
+ * @param {"sm" | "md" | "lg"} [props.maskBlur] - The blur effect for the background mask.
+ * @returns {JSX.Element} The rendered AnimationLoader component.
  */
-export const AnimationBars = ({
+export const AnimationLoader = ({
   color = "tint-500",
   size = "2rem",
+  icon,
+  maskBlur,
 }: {
+  icon: string;
+  maskBlur?: "sm" | "md" | "lg";
   color?: ColorType | PaletteType | string;
   size?: number | string;
 }) => {
@@ -153,65 +151,75 @@ export const AnimationBars = ({
     <div
       className={classNames(
         "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",
       )}
     >
       <div
         className={classNames(
-          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded",
+          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm leading-0 rounded",
         )}
       >
         <div
-          className={classNames("fabric-bars")}
-          style={{ width: size, color: getColor(color) }}
+          className={classNames("aspect-square", icon)}
+          style={{ fontSize: size, color: getColor(color) }}
         />
       </div>
     </div>
   );
 };
 
+/**
+ * A component that displays an animated bars loader.
+ * It can be customized with color and size properties.
+ * This component is typically used to indicate loading states in the UI.
+ *
+ * @param {Object} props - The properties for the LoadingBars component.
+ * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
+ * @param {number | string} [props.size="2rem"] - The size of the bars.
+ * @returns {JSX.Element} The rendered LoadingBars component.
+ *
+ * @example
+ * ```jsx
+ * <LoadingBars color="primary-500" size="3rem" />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
+ */
+export const LoadingBars = (props: {
+  color?: ColorType | PaletteType | string;
+  size?: number | string;
+  maskBlur?: "sm" | "md" | "lg";
+}) => {
+  return (
+    <AnimationLoader icon="icon-[svg-spinners--bars-scale-fade]" {...props} />
+  );
+};
+
 /**
  * A component that displays a spinner animation.
  * It can be customized with color and size properties.
  * This component is typically used to indicate loading states in the UI.
  *
- * @param {Object} props - The properties for the AnimationSpinner component.
+ * @param {Object} props - The properties for the LoadingSpinner component.
  * @param {ColorType | PaletteType | string} [props.color="tint-700"] - The color of the spinner.
  * @param {number | string} [props.size="2rem"] - The size of the spinner.
- * @returns {JSX.Element} The rendered AnimationSpinner component.
+ * @returns {JSX.Element} The rendered LoadingSpinner component.
  *
  * @example
  * ```jsx
- * <AnimationSpinner color="primary-500" size="3rem" />
+ * <LoadingSpinner color="primary-500" size="3rem" />
  * ```
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-components-animations--docs} for more details.
  */
-export const AnimationSpinner = ({
-  color = "tint-700",
-  size = "2rem",
-}: {
+export const LoadingSpinner = (props: {
   color?: ColorType | PaletteType | string;
   size?: number | string;
+  maskBlur?: "sm" | "md" | "lg";
 }) => {
-  return (
-    <div
-      className={classNames(
-        "absolute inset-0 z-10 flex justify-center items-center cursor-wait",
-      )}
-      data-ref="spinner"
-    >
-      <div
-        className={classNames(
-          "outline outline-tint-500/20 p-4 bg-tint-50/50 backdrop-blur-sm rounded",
-        )}
-      >
-        <div
-          className={classNames("fabric-spinner")}
-          style={{ width: size, color: getColor(color) }}
-        />
-      </div>
-    </div>
-  );
+  return <AnimationLoader icon="icon-[svg-spinners--eclipse]" {...props} />;
 };
 
 /**
@@ -260,7 +268,7 @@ export const Skeleton = ({ className, ...rest }: CssProp) => {
  *
  * @returns {JSX.Element} The rendered Loading component.
  */
-export const Loading = () => {
+export const LoadingLine = () => {
   return (
     <div
       className={classNames(

package/src/components/button/Button.tsx

@@ -187,7 +187,7 @@ export const Button = <Tag extends React.ElementType = "button">({
   children,
   className,
   active,
-  color = "primary",
+  color = "default",
   icon,
   iconAlign = "start",
   altIcon,

package/src/components/callout/Callout.tsx

@@ -29,7 +29,6 @@ import {
   type CssProp,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
 
 export interface CalloutProps
@@ -66,7 +65,8 @@ export interface CalloutProps
 // colors for different callout types
 const colors = {
   none: "bg-base text-tint-900 border-tint-100",
-  tint: "bg-tint-50/50 text-tint-800 border-tint-300",
+  default: "bg-tint-50/50 text-tint-800 border-tint-300",
+  muted: "bg-tint-50/50 text-muted border-muted",
   primary: "bg-primary-50/50 text-primary-800 border-primary-300",
   accent: "bg-accent-50/50 text-accent-800 border-accent-300",
   info: "bg-info-50/50 text-info-800 border-info-300",
@@ -103,8 +103,7 @@ const colors = {
  */
 export const Callout = ({
   children,
-  // @ts-expect-error ignore
-  color = "tint",
+  color = "default",
   legend,
   title,
   icon,
@@ -145,7 +144,7 @@ export const Callout = ({
           size="md"
           data-ref="calloutClose"
           className={classNames("absolute end-2", legend ? "top-0" : "top-2")}
-          icon={CoreIcons.close}
+          icon="icon-[mdi--close]"
           onClick={onClose}
         />
       )}

package/src/components/collapsable/Collapsable.tsx

@@ -38,7 +38,6 @@ import {
   type RefProp,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
 
 interface CollapsableRef {
@@ -108,8 +107,8 @@ export interface CollapsableProps
  * ```jsx
  * <Collapsable
  *   iconAlign="start"
- *   iconOpen={CoreIcons.chevronDown}
- *   iconClosed={CoreIcons.chevronRight}
+ *   iconOpen="icon-[mdi--chevron-down]"
+ *   iconClosed="icon-[mdi--chevron-right]"
  *   open={true}
  *   onOpen={() => console.log("Opened")}
  *   onClose={() => console.log("Closed")}
@@ -130,8 +129,8 @@ export const Collapsable = ({
   children,
   iconAlign,
   stickyHeader,
-  iconClosed = CoreIcons.chevronRight,
-  iconOpen = CoreIcons.chevronDown,
+  iconClosed = "icon-[mdi--chevron-right]",
+  iconOpen = "icon-[mdi--chevron-down]",
   open,
   onClose,
   onOpen,

package/src/components/dropdown/DropdownTool.tsx

@@ -23,7 +23,6 @@
 
 import classNames from "classnames";
 import { type ChildProp, type CssProp } from "../../types";
-import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
 import { Dropdown, type DropdownProps } from "./Dropdown";
 
@@ -70,7 +69,7 @@ export const DropdownTool = ({
   return (
     <Dropdown {...props}>
       <Icon
-        icon={icon ?? CoreIcons.caretDown}
+        icon={icon ?? "icon-[mdi--menu-down]"}
         className={classNames(
           "outline bg-tint-50/50 flex-content pointer-events-auto cursor-pointer",
           className,

package/src/components/index.ts

@@ -23,10 +23,10 @@
 
 export { ActionLabel } from "./actionLabel/ActionLabel";
 export {
-  AnimationBars,
+  LoadingBars,
   AnimationIndicator,
-  AnimationSpinner,
-  Loading,
+  LoadingSpinner,
+  LoadingLine,
   Skeleton,
 } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";