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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.9",
+  "version": "1.0.2",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
-  "repository": "https://github.com/adarshpastakia/react-ui-framework/tree/main/packages/core",
+  "repository": "https://github.com/adarshpastakia/react-fabric/tree/main/packages/core",
   "source": "src/index.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -24,8 +24,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "makelink": "yarn link",
-    "removelink": "yarn unlink",
     "prebuild": "rm -rf ./dist",
     "build:dts": "tsc -p ./tsconfig.build.json",
     "build:rollup": "rollup -c ../../rollup.config.mjs",
@@ -35,26 +33,37 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.9",
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.13",
-    "boring-avatars": "^1.10.2",
-    "classnames": "^2.5.1",
-    "color": "^4.2.3",
-    "resize-observer-polyfill": "^1.5.1",
-    "tailwindcss": "^3.4.4"
+    "@floating-ui/react": "~0.27.20",
+    "@fontsource-variable/alexandria": "~5.3.0",
+    "@fontsource-variable/inconsolata": "~5.3.0",
+    "@fontsource-variable/merriweather": "~5.3.0",
+    "@fontsource-variable/noto-kufi-arabic": "~5.3.0",
+    "@fontsource-variable/noto-sans": "~5.3.0",
+    "@fontsource/noto-color-emoji": "~5.3.0",
+    "@iconify-icon/react": "~3.0.5",
+    "@iconify-json/line-md": "~1.2.16",
+    "@iconify-json/mdi": "~1.2.3",
+    "@iconify-json/mdi-light": "~1.2.2",
+    "@iconify-json/svg-spinners": "~1.2.4",
+    "@iconify/tailwind4": "~1.2.3",
+    "@react-fabric/utilities": "^1.0.2",
+    "@tailwindcss/postcss": "~4.3.3",
+    "@tanstack/react-hotkeys": "~0.10.0",
+    "boring-avatars": "~2.0.4",
+    "iconify-icon": "~3.0.2",
+    "resize-observer-polyfill": "~1.5.1",
+    "sonner": "~2.0.7",
+    "tailwindcss": "~4.3.3"
   },
   "peerDependencies": {
-    "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
-    "react-i18next": "^15.0.2"
+    "i18next": "~26.3.6",
+    "react": "~19.3.0",
+    "react-dom": "~19.3.0",
+    "react-i18next": "~17.0.11"
   },
   "engines": {
-    "node": ">=18.12.0",
-    "npm": ">=8.19.0"
+    "node": ">=24.0.0",
+    "npm": ">=11.0.0"
   },
-  "gitHead": "3dde23444bcebf68c30198af5c2fef55572da38f"
+  "gitHead": "b9fc477b5b3a13b782977bf17762027f376ac30e"
 }

package/src/components/actionLabel/ActionLabel.tsx

@@ -21,22 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import classNames from "classnames";
-import { useCallback, type ReactElement } from "react";
-import {
-  type AriaProps,
-  type ChildProp,
-  type CssProp,
-  type TestProps,
-} from "../../types";
+import { cn } from "@react-fabric/utilities";
+import { useCallback } from "react";
+import type { ChildProp, CssProp, TestProps } from "../../types";
 import { ButtonGroup } from "../button/ButtonGroup";
-import classes from "./ActionLabel.module.css";
 
-export interface ActionLabelProps
-  extends AriaProps,
-    CssProp,
-    ChildProp,
-    TestProps {
+export interface ActionLabelProps extends CssProp, ChildProp, TestProps {
   /**
    * action buttons aligment
    */
@@ -48,24 +38,30 @@ export interface ActionLabelProps
   /**
    * buttons
    */
-  actions: ReactElement[];
+  actions: React.ReactElement[];
 }
 
 /**
- * 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>
+ * ```
  */
-export const ActionLabel = ({
-  children,
-  className,
-  align,
-  actions,
-  disabled,
-  ...rest
-}: ActionLabelProps) => {
-  /**
-   * calculate the width of the action box, width will be used for a delayed transition on hover
-   */
+export function ActionLabel({ children, className, align, actions, disabled, ...rest }: ActionLabelProps) {
+  // 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
   const calculateBasis = useCallback((el: HTMLElement | null) => {
     if (el) {
       const clone = el.cloneNode(true) as HTMLElement;
@@ -82,25 +78,18 @@ export const ActionLabel = ({
 
   return (
     <div
-      className={classNames(
-        className,
-        classes.actionLabel,
-        "flex overflow-hidden gap-1 items-center cursor-default select-none",
-      )}
+      className={cn(className, "fabric-actionLabel", "flex overflow-hidden gap-1 items-center cursor-default select-none")}
       data-disabled={disabled}
       {...rest}
     >
       <ButtonGroup
         ref={calculateBasis}
-        className={classNames(
-          classes.actions,
-          "overflow-hidden flex-content",
-          align === "end" && "order-2",
-        )}
+        data-inner-clickable
+        className={cn("fabric-actions", "overflow-hidden flex-content", align === "end" && "order-2")}
       >
         {actions}
       </ButtonGroup>
       <div className="flex-initial truncate">{children}</div>
     </div>
   );
-};
+}

package/src/components/alert/Alert.tsx

@@ -0,0 +1,261 @@
+/*
+ * 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.
+ */
+
+import {
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useRole,
+} from "@floating-ui/react";
+import { cn } from "@react-fabric/utilities";
+import { useLayoutEffect, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AnimationIndicator } from "../../components/animations/Indicator";
+import { Button } from "../../components/button/Button";
+import { Icon } from "../../components/icon/Icon";
+import type { ColorBase } from "../../types";
+import { Title } from "../../typography/Title";
+import { getColor } from "../../utils";
+
+interface AlertBaseProps {
+  /**
+   * toast type
+   */
+  type?: "alert" | "confirm" | "prompt";
+  /**
+   * svg path / webfont className / 1-4 letter text
+   */
+  icon?: string;
+  /**
+   * flip icon in rtl
+   */
+  rtlFlip?: boolean;
+  /**
+   * toast title
+   */
+  title?: string;
+  /**
+   * toast text
+   */
+  message: string | React.ReactElement;
+  /**
+   * theme color
+   */
+  color?: ColorBase;
+  /**
+   * extra action button
+   */
+  actions?: React.ReactNode;
+  /**
+   * ok label
+   */
+  okLabel?: string;
+  /**
+   * cancel label
+   */
+  cancelLabel?: string;
+  /**
+   * placeholder for prompt
+   */
+  placeholder?: string;
+  /**
+   * default value for prompt
+   */
+  defaultValue?: string;
+  multiline?: boolean;
+}
+
+export type AlertProps = AlertBaseProps &
+  (
+    | {
+        type?: "alert";
+        okLabel?: string;
+        cancelLabel?: never;
+        placeholder?: never;
+        defaultValue?: never;
+        multiline?: never;
+      }
+    | {
+        type: "confirm";
+        okLabel?: string;
+        cancelLabel?: string;
+        placeholder?: never;
+        defaultValue?: never;
+        multiline?: never;
+      }
+    | {
+        type: "prompt";
+        okLabel?: string;
+        cancelLabel?: string;
+        placeholder?: string;
+        defaultValue?: string;
+        multiline?: boolean;
+      }
+  );
+
+export function Alert({
+  title,
+  message,
+  color = "primary",
+  icon,
+  rtlFlip,
+  actions,
+  onClose,
+  type = "alert",
+  multiline,
+  okLabel,
+  cancelLabel,
+  placeholder,
+  defaultValue,
+}: AlertProps & { onClose?: (ret?: string | boolean) => void }) {
+  const { t } = useTranslation("core");
+  const [value, setValue] = useState(() => defaultValue);
+  const { refs, context } = useFloating({
+    open: true,
+    onOpenChange: () => {
+      handleClose(false);
+    },
+  });
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: true,
+  });
+  const role = useRole(context);
+
+  // Merge all the interactions into prop getters
+  const { getFloatingProps } = useInteractions([dismiss, role]);
+
+  const iconType = useMemo(() => {
+    if (icon) return <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={`${color}-600`} />;
+    switch (color) {
+      case "danger":
+        return <AnimationIndicator type="cross" className="text-danger-600" />;
+      case "success":
+        return <AnimationIndicator type="check" className="text-success-600" />;
+      case "warning":
+        return <AnimationIndicator type="exclaim" className="text-warning-600" />;
+      default:
+        return <AnimationIndicator type={type === "confirm" ? "question" : "info"} className={`text-${color}-600`} />;
+    }
+  }, [color, type, icon, rtlFlip]);
+
+  const handleClose = (ret?: string | boolean) => {
+    if (refs.floating.current) refs.floating.current.dataset.show = "false";
+    setTimeout(() => {
+      onClose?.(ret);
+    }, 250);
+  };
+  useLayoutEffect(() => {
+    const tmr = setTimeout(() => refs.floating.current && (refs.floating.current.dataset.show = "true"), 100);
+    return () => {
+      clearTimeout(tmr);
+
+      try {
+        // call on close to kill the promise if unloaded without using close actions
+        onClose?.(false);
+      } catch {
+        //
+      }
+    };
+  }, [refs.floating, onClose]);
+
+  const E = multiline ? "textarea" : "input";
+
+  return (
+    <FloatingPortal>
+      <FloatingOverlay
+        lockScroll
+        style={{ zIndex: "var(--z-overlay-mask)" }}
+        className="bg-tint-100/50 backdrop-blur-sm grid place-items-center"
+      >
+        <FloatingFocusManager context={context} modal>
+          <dialog
+            role="alertdialog"
+            className={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(`${color}-300`),
+            }}
+            ref={(el) => refs.setFloating(el)}
+            {...getFloatingProps()}
+          >
+            <div className={cn("area-[icon] self-start text-2xl")}>{iconType}</div>
+            <div className="area-[message]">
+              {title && <Title className="font-medium">{title}</Title>}
+              <div>{message}</div>
+            </div>
+            {type === "prompt" && (
+              <E
+                value={value}
+                placeholder={placeholder}
+                className={cn(`area-[input] appearance-none outline-0 border rounded w-full px-2 py-1`)}
+                style={
+                  {
+                    borderColor: getColor(`${color}-200`),
+                    "--tw-ring-color": getColor(`${color}-500`),
+                  } as React.CSSProperties
+                }
+                ref={(e: HTMLInputElement | HTMLTextAreaElement | null) => {
+                  if (e !== null) setTimeout(() => e.focus(), 100);
+                }}
+                onBlur={(e) => e.target.focus()}
+                onChange={(e) => setValue(e.target.value)}
+                onKeyDown={(e) => !e.shiftKey && e.key === "Enter" && handleClose(value)}
+              />
+            )}
+            <div className="flex gap-1 justify-center flex-nowrap pt-2 area-[actions]">
+              {type === "confirm" && (
+                <Button size="sm" variant="link" color={color} onClick={() => handleClose(false)}>
+                  {cancelLabel ?? t("action.cancel", "Cancel")}
+                </Button>
+              )}
+              <div className="contents" onClickCapture={(e) => handleClose((e.target as HTMLElement).dataset.value)}>
+                {actions}
+              </div>
+              <Button size="sm" variant="solid" color={color} onClick={() => handleClose(type === "prompt" ? value : true)}>
+                {okLabel ?? t("action.ok", "OK")}
+              </Button>
+            </div>
+            <div className="absolute top-2 inset-e-0">
+              <Button
+                size="sm"
+                variant="link"
+                className="m-0"
+                color={color}
+                onClick={() => handleClose(false)}
+                icon="icon-[mdi--close]"
+                aria-label="close"
+              />
+            </div>
+          </dialog>
+        </FloatingFocusManager>
+      </FloatingOverlay>
+    </FloatingPortal>
+  );
+}

package/src/components/animations/Indicator.tsx

@@ -0,0 +1,75 @@
+/**
+ * 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.
+ */
+
+import { Icon as Iconify } from "@iconify-icon/react";
+import { shortHash } from "@react-fabric/utilities";
+import type { CssProp } from "../../types";
+import { Icon } from "../icon/Icon";
+
+export interface AnimationIndicatorProps extends CssProp {
+  /**
+   * The indicator icon type. Each type maps to a distinct status icon.
+   * Defaults to `"info"`.
+   */
+  type?: "info" | "check" | "cross" | "question" | "exclaim";
+}
+
+const ANIMATION_ICONS = {
+  info: <Iconify icon="line-md:alert-circle" className="rotate-180" />,
+  // <AlertCircleIcon height="1.25em" width="1.25em" className="rotate-180" />,
+  check: <Iconify icon="line-md:confirm-circle" />,
+  cross: <Iconify icon="line-md:close-circle" />,
+  question: <Iconify icon="line-md:question-circle" />,
+  exclaim: <Iconify icon="line-md:alert-circle" />,
+};
+
+/**
+ * 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" />
+ * ```
+ */
+export function AnimationIndicator({ type, ...props }: AnimationIndicatorProps) {
+  // Map the type to its corresponding icon and delegate rendering to the Icon component
+  return <Icon key={shortHash()} {...props} icon={ANIMATION_ICONS[type || "info"]} />;
+}

package/src/components/animations/Loader.tsx

@@ -0,0 +1,89 @@
+/**
+ * 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.
+ */
+
+import { cn } from "@react-fabric/utilities";
+import type { CustomColors } from "../../types/colors";
+import { getColor } from "../../utils";
+
+export interface AnimationLoaderProps {
+  /**
+   * CSS class name for the icon to display (e.g., an iconify icon class like `"icon-[mdi--loading]"`).
+   */
+  icon: string;
+
+  /**
+   * Blur intensity for the background mask. Defaults to no blur.
+   */
+  maskBlur?: "sm" | "md" | "lg";
+
+  /**
+   * Icon color. Accepts palette tokens or any CSS color. Defaults to `"tint-300"`.
+   */
+  color?: CustomColors;
+
+  /**
+   * Icon size. Accepts CSS size values (px, em, rem). Defaults to `"2rem"`.
+   */
+  size?: number | string;
+}
+
+/**
+ * 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" />
+ * ```
+ */
+export function AnimationLoader({ color = "tint-500", size = "2rem", icon, maskBlur }: AnimationLoaderProps) {
+  return (
+    <div
+      className={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",
+      )}
+    >
+      <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">
+        <div className={cn(icon, "aspect-square")} style={{ fontSize: size, color: getColor(color) }} />
+      </div>
+    </div>
+  );
+}

package/src/components/animations/LoadingBars.tsx

@@ -0,0 +1,70 @@
+/**
+ * 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.
+ */
+
+import type { CustomColors } from "../../types";
+import { AnimationLoader } from "./Loader";
+
+export interface LoadingBarsProps {
+  /**
+   * Spinner color. Accepts palette tokens or any CSS color.
+   */
+  color?: CustomColors;
+
+  /**
+   * Spinner size. Accepts CSS size values (px, em, rem).
+   */
+  size?: number | string;
+
+  /**
+   * Blur intensity for the background mask. Defaults to no blur.
+   */
+  maskBlur?: "sm" | "md" | "lg";
+}
+
+/**
+ * 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" />
+ * ```
+ */
+export function LoadingBars(props: LoadingBarsProps) {
+  // Delegate to AnimationLoader with a pre-configured bars-scale-fade icon
+  return <AnimationLoader icon="icon-[svg-spinners--bars-scale-fade]" {...props} />;
+}