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

package/dist/esm/core/aside/Aside.js

@@ -2,37 +2,69 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import classNames from 'classnames';
-import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
-import { Loading } from '../../components/animations/Animations.js';
+import { cn } from '@react-fabric/utilities';
+import { useRef, useState, useEffect, useMemo, Activity } from 'react';
+import { StyleEffect } from '../../components/effect/StyleEffect.js';
 import { Icon } from '../../components/icon/Icon.js';
+import { Titlebar } from '../../components/titlebar/Titlebar.js';
+import { useGlobals } from '../../context/context.js';
 import { useLayoutEffectDebugger } from '../../hooks/useEffectDebugger.js';
+import { usePropState } from '../../hooks/usePropState.js';
 import { usePropToggle } from '../../hooks/usePropToggle.js';
 import { useResize } from '../../hooks/useResize.js';
-import { CoreIcons } from '../../types/icons.js';
-import { ErrorBoundary } from '../boundary/ErrorBoundary.js';
-import classes from './Aside.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getIconProps } from '../../utils/getIconProps.js';
+import { ErrorBoundary } from '../boundary/ErrorBoundary.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; }
+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; }
 /**
- * Side panel
+ * A sidebar component that can be collapsed, resized, and has a flyout feature.
+ * It supports a title, icon, actions, and loading state.
+ * It can be aligned to the start or end of the page.
+ *
+ * @example
+ * ```jsx
+ * <Aside
+ *   title="Sidebar Title"
+ *   icon=icon-[mdi--menu]
+ *   rtlFlip={true}
+ *   className="custom-aside"
+ *   bodyClassName="custom-aside-body"
+ *   headerClassName="custom-aside-header"
+ *   resizeable={true}
+ *   flyout={true}
+ *   onFlyout={() => console.log("Flyout triggered")}
+ *   collapsed={false}
+ *   collapsable={true}
+ *   onCollapse={() => console.log("Collapsed toggled")}
+ *   actions={<button>Action</button>}
+ *   loading={false}
+ *   align="start"
+ *   width="20rem"
+ *   minWidth="2rem"
+ *   maxWidth="30vw"
+ *   data-testid="aside-test"
+ *   data-test-value="aside-value"
+ * >
+ *   <Content>This is the content of the aside.</Content>
+ * </Aside>
+ * ```
  */
-var Aside = function Aside(_ref) {
+function Aside(_ref) {
   var children = _ref.children,
     title = _ref.title,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
+    id = _ref.id,
+    margin = _ref.margin,
+    hideCollapseHandle = _ref.hideCollapseHandle,
     className = _ref.className,
-    bodyClassName = _ref.bodyClassName,
-    headerClassName = _ref.headerClassName,
+    classNames = _ref.classNames,
     resizeable = _ref.resizeable,
-    flyout = _ref.flyout,
+    enableFlyout = _ref.enableFlyout,
     onFlyout = _ref.onFlyout,
-    collapsed = _ref.collapsed,
+    onResize = _ref.onResize,
+    _collapsed = _ref.collapsed,
     collapsable = _ref.collapsable,
     onCollapse = _ref.onCollapse,
     actions = _ref.actions,
@@ -48,44 +80,53 @@ var Aside = function Aside(_ref) {
     testId = _ref["data-testid"],
     testValue = _ref["data-test-value"];
   var elementRef = useRef(null);
-  var _useState = useState(wd),
+  var _usePropState = usePropState(wd),
+    _usePropState2 = _slicedToArray(_usePropState, 2),
+    width = _usePropState2[0],
+    setWidth = _usePropState2[1];
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    width = _useState2[0],
-    setWidth = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    peek = _useState4[0],
-    setPeek = _useState4[1];
-  var _usePropToggle = usePropToggle(collapsed, onCollapse),
+    peek = _useState2[0],
+    setPeek = _useState2[1];
+  var _useGlobals = useGlobals(),
+    registerArea = _useGlobals.registerArea,
+    unregisterArea = _useGlobals.unregisterArea;
+  var _usePropToggle = usePropToggle(_collapsed, onCollapse),
     _usePropToggle2 = _slicedToArray(_usePropToggle, 2),
-    isCollapsed = _usePropToggle2[0],
-    toggleCollapse = _usePropToggle2[1];
-  useEffect(function () {
-    setWidth(wd);
-  }, [wd]);
-  var handleResize = useRef(function (_ref2) {
+    collapsed = _usePropToggle2[0],
+    onToggle = _usePropToggle2[1];
+  var handleResizeRef = useRef(function (_ref2) {
     var x = _ref2.x;
     if (elementRef.current != null) {
-      setWidth(elementRef.current.offsetWidth + x);
+      if (x !== 0) setWidth(elementRef.current.offsetWidth + x);
     }
   });
-  var resizeHandleProps = useResize(handleResize.current, {
-    isReverse: align === "end"
-  });
-  var tryPeek = useCallback(function () {
-    if (isCollapsed) {
-      if (flyout) {
-        setPeek(!peek);
-        !peek && (onFlyout === null || onFlyout === void 0 ? void 0 : onFlyout());
+  var _useResize = useResize(handleResizeRef.current, {
+      isReverse: align === "end",
+      onEnd: function onEnd() {
+        var _ref$current;
+        var width = (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.parentElement) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth;
+        setWidth(width);
+        onResize === null || onResize === void 0 || onResize(width !== null && width !== void 0 ? width : 0);
+      }
+    }),
+    ref = _useResize.ref,
+    isResizing = _useResize.isResizing,
+    onMouseDown = _useResize.onMouseDown;
+  var tryPeek = function tryPeek(force) {
+    if (collapsed) {
+      if (enableFlyout) {
+        setPeek(force !== null && force !== void 0 ? force : !peek);
+        if (force !== null && force !== void 0 ? force : !peek) onFlyout === null || onFlyout === void 0 || onFlyout();
       } else {
-        void toggleCollapse();
+        void onToggle(force);
       }
     }
-  }, [peek, flyout, isCollapsed, onFlyout, toggleCollapse]);
+  };
   useLayoutEffectDebugger(function () {
-    if (peek) {
+    if (!isResizing && peek) {
       var handler = function handler(e) {
-        if (e.target.closest("[data-ref=\"asideBody\"]") == null && e.target.closest("[data-ref=\"asidePlaceholder\"]") == null) {
+        if (e.target.closest("[data-dismiss=\"true\"]") !== null || e.target.closest("[data-ref=\"aside-container\"]") === null && e.target.closest("[data-ref=\"aside-placeholder\"]") === null) {
           setPeek(false);
         }
       };
@@ -94,7 +135,18 @@ var Aside = function Aside(_ref) {
         return document.removeEventListener("mouseup", handler);
       };
     }
-  }, [peek], "Aside peek");
+  }, [peek, isResizing], "Aside peek");
+  useEffect(function () {
+    if (id) {
+      registerArea(id, function (open) {
+        tryPeek(open);
+      });
+      return function () {
+        return unregisterArea(id);
+      };
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [id]);
   var widthStyles = useMemo(function () {
     return {
       width: width,
@@ -103,55 +155,98 @@ var Aside = function Aside(_ref) {
     };
   }, [width, minWidth, maxWidth]);
   return /*#__PURE__*/jsxs("aside", {
-    className: classNames(classes.aside, className, "overflow-hidden grid"),
+    className: cn("fabric-aside", className, "grid relative min-h-0 z-2", collapsed && (enableFlyout ? "w-fit" : "w-0")),
     "data-align": align,
-    "data-flyout": peek,
+    "data-peek": peek,
+    "data-flyout": enableFlyout,
     "data-loading": loading,
-    "data-collapsed": isCollapsed,
-    style: isCollapsed ? undefined : widthStyles,
+    "data-collapsed": collapsed,
     "data-testid": testId,
     "data-test-value": testValue,
-    children: [/*#__PURE__*/jsxs("header", {
-      className: classNames(classes.asideHeader, headerClassName, "grid area-head items-center"),
-      "data-testid": "aside-header",
-      children: [title && /*#__PURE__*/jsx("div", {
-        className: classNames(classes.asideTitle, "truncate py-0.5 px-1 select-none pointer-events-none"),
+    "data-ref": "aside",
+    style: {
+      "--aside-margin": "calc(var(--spacing) * ".concat(margin !== null && margin !== void 0 ? margin : 0, ")")
+    },
+    children: [collapsed && enableFlyout && /*#__PURE__*/jsxs("div", {
+      role: "none",
+      onClick: function onClick() {
+        return tryPeek();
+      },
+      "data-ref": "aside-placeholder",
+      className: cn("fabric-asidePlaceholder", classNames === null || classNames === void 0 ? void 0 : classNames.root, classNames === null || classNames === void 0 ? void 0 : classNames.body, "overflow-hidden"),
+      children: [/*#__PURE__*/jsx(StyleEffect, {}), icon && /*#__PURE__*/jsx(Icon, _objectSpread({
+        className: cn("fabric-asideIcon", classNames === null || classNames === void 0 ? void 0 : classNames.icon, "p-1 text-lg select-none pointer-events-none")
+      }, getIconProps(icon))), /*#__PURE__*/jsx("div", {
+        "data-ref": "aside-title",
+        className: cn("fabric-asideTitle", classNames === null || classNames === void 0 ? void 0 : classNames.title, "truncate py-0.5 px-1 select-none pointer-events-none"),
         children: title
-      }), collapsable && /*#__PURE__*/jsx(Icon, {
-        "aria-label": isCollapsed ? "expand" : "collapse",
-        className: classNames(classes.asideCollapse, "p-2 select-none"),
-        icon: CoreIcons.chevronLeft,
-        rtlFlip: true,
-        onClick: toggleCollapse,
-        "data-ref": "asideToggle"
-      }), icon && /*#__PURE__*/jsx(Icon, {
+      }), /*#__PURE__*/jsx("div", {
+        role: "none",
+        "data-dismiss": "true",
+        className: "area-[pin] p-2 hover:bg-primary-500/10 cursor-pointer flex items-center justify-center",
+        onMouseDown: function onMouseDown(e) {
+          return e.stopPropagation();
+        },
+        onClick: function onClick() {
+          return onToggle();
+        },
+        children: /*#__PURE__*/jsx(Icon, {
+          icon: "icon-[mdi--pin-outline]",
+          className: "rotate-30"
+        })
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      "data-ref": "aside-container",
+      className: cn("fabric-asideContainer", classNames === null || classNames === void 0 ? void 0 : classNames.root, "overflow-hidden grid"),
+      ref: elementRef,
+      style: widthStyles,
+      children: [/*#__PURE__*/jsx(StyleEffect, {}), /*#__PURE__*/jsx(Titlebar, {
+        title: title,
         icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip,
-        className: classNames(classes.asideIcon, "p-1 text-lg select-none pointer-events-none")
-      }), actions && /*#__PURE__*/jsx("div", {
-        className: classes.asideActions,
-        children: actions
+        actions: actions,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.titlebar
+      }), /*#__PURE__*/jsx(Activity, {
+        mode: peek || !collapsed ? "visible" : "hidden",
+        children: /*#__PURE__*/jsx(ErrorBoundary, {
+          children: children
+        })
+      }), enableFlyout && !hideCollapseHandle && /*#__PURE__*/jsx("div", {
+        role: "none",
+        "data-dismiss": "true",
+        className: "area-[pin] p-2 hover:bg-primary-500/10 cursor-pointer flex items-center justify-center bg-tint-500/10",
+        onMouseDown: function onMouseDown(e) {
+          return e.stopPropagation();
+        },
+        onClick: function onClick() {
+          return onToggle();
+        },
+        children: !collapsed ? /*#__PURE__*/jsx(Icon, {
+          icon: "icon-[mdi--pin]"
+        }) : /*#__PURE__*/jsx(Icon, {
+          icon: "icon-[mdi--pin-outline]",
+          className: "rotate-30"
+        })
+      }), /*#__PURE__*/jsx("div", {
+        ref: ref,
+        role: "none",
+        "data-ref": "resize-handle",
+        onMouseDown: onMouseDown,
+        className: cn("fabric-asideResizer", resizeable && "before:absolute before:top-1/2 before:-translate-y-1/2 before:content-['⋮'] before:leading-0", "after:absolute after:transform-[height] after:border-solid after:border-s-2 after:h-0 after:m-auto after:inset-y-0 after:border-s-primary-500", resizeable && "hover:after:duration-500 hover:after:h-full", align === "start" ? "before:-inset-e-px" : "before:-inset-s-px", isResizing && "after:h-full", resizeable ? "w-1 cursor-col-resize bg-tint-50 border-x border-tint-300/50 -mx-px" : "w-0 border-0 pointer-events-none")
       })]
-    }), loading && /*#__PURE__*/jsx(Loading, {}), isCollapsed && /*#__PURE__*/jsx("div", {
+    }), collapsable && !enableFlyout && !hideCollapseHandle && /*#__PURE__*/jsx("div", {
       role: "none",
-      onClick: tryPeek,
-      "data-ref": "asidePlaceholder",
-      className: classes.asidePlaceholder
-    }), /*#__PURE__*/jsx("section", {
-      ref: elementRef,
-      "data-ref": "asideBody",
-      className: classNames(classes.asideBody, bodyClassName, "overflow-hidden grid"),
-      style: isCollapsed ? widthStyles : undefined,
-      "data-testid": "aside-body",
-      children: /*#__PURE__*/jsx(ErrorBoundary, {
-        children: children
+      className: cn("absolute z-1 h-16 w-2 py-6 leading-0 m-auto inset-y-0", "bg-dimmed text-dimmed outline outline-tint-200/50 rounded-sm cursor-pointer pointer-events-auto", align === "start" ? "rounded-s-none -inset-e-2" : "rounded-e-none -inset-s-2", !collapsed && "opacity-70 hover:opacity-100 hover:bg-default hover:outline-default"),
+      onMouseDown: function onMouseDown(e) {
+        return e.stopPropagation();
+      },
+      onClick: function onClick() {
+        return onToggle();
+      },
+      children: /*#__PURE__*/jsx("i", {
+        className: "-ms-1 inline-block rtl:-scale-100 " + (collapsed && align === "start" || !collapsed && align === "end" ? "icon-[mdi--chevron-right]" : "icon-[mdi--chevron-left]")
       })
-    }), resizeable && /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, resizeHandleProps), {}, {
-      className: classNames(classes.asideResizer, "before:absolute before:inset-0 before:w-1 before:top-1/2 before:-translate-y-1/2 before:transition-all")
-    }))]
+    })]
   });
-};
+}
 
 export { Aside };

package/dist/esm/core/boundary/ErrorBoundary.js

@@ -6,16 +6,11 @@ import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
 import _inherits from '@babel/runtime/helpers/inherits';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useLogger } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { Component } from 'react';
+import { Component, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import { usePropToggle } from '../../hooks/usePropToggle.js';
-import classes from './ErrorBoundary.module.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useGlobals } from '../../context/context.js';
 import { ErrorIcon } from './ErrorIcon.js';
-import { useGlobals } from '../../context/Global.js';
 
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -33,17 +28,15 @@ var DefaultError = function DefaultError(_ref) {
   });
 };
 var ErrorMessage = function ErrorMessage(_ref2) {
+  var _ref3;
   var error = _ref2.error,
     errorElement = _ref2.errorElement;
   var _useGlobals = useGlobals(),
     globalError = _useGlobals.errorElement;
-  var EE = useMemoDebugger(function () {
-    var _ref3;
-    return (_ref3 = errorElement !== null && errorElement !== void 0 ? errorElement : globalError) !== null && _ref3 !== void 0 ? _ref3 : DefaultError;
-  }, [], "ErrorBoundary element");
+  var EE = (_ref3 = errorElement !== null && errorElement !== void 0 ? errorElement : globalError) !== null && _ref3 !== void 0 ? _ref3 : DefaultError;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(ErrorIcon, {}), /*#__PURE__*/jsx("div", {
-      className: classNames(classes.boundaryMessage, "p-2"),
+      className: "fabric-boundaryMessage p-2",
       children: /*#__PURE__*/jsx(EE, {
         error: error
       })
@@ -53,24 +46,29 @@ var ErrorMessage = function ErrorMessage(_ref2) {
 var ErrorStack = function ErrorStack(_ref4) {
   var error = _ref4.error,
     stack = _ref4.stack;
-  var _usePropToggle = usePropToggle(false),
-    _usePropToggle2 = _slicedToArray(_usePropToggle, 2),
-    show = _usePropToggle2[0],
-    toggleShow = _usePropToggle2[1];
-  useLogger().error(error, {}, stack);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    show = _useState2[0],
+    setShow = _useState2[1];
+  console.error(error, {}, stack);
   return /*#__PURE__*/jsxs("div", {
-    className: classNames(classes.boundaryDetail, "overflow-hidden grid"),
+    className: "fabric-boundaryDetail overflow-hidden grid",
     children: [/*#__PURE__*/jsx("div", {
-      className: classNames(classes.boundaryLink, "px-2 py-1 text-xs text-end"),
+      className: "fabric-boundaryLink px-2 py-1 text-xs text-end",
       children: /*#__PURE__*/jsx("span", {
         role: "link",
         tabIndex: 0,
         className: "link",
-        onClick: toggleShow,
+        onClick: function onClick() {
+          return setShow(!show);
+        },
+        onKeyDown: function onKeyDown() {
+          return setShow(!show);
+        },
         children: show ? "Hide Detail" : "Show Detail"
       })
     }), show && /*#__PURE__*/jsx("div", {
-      className: classNames(classes.boundaryStack, "overflow-auto p-2 text-xs border-t"),
+      className: "fabric-boundaryStack overflow-auto p-2 text-xs border-t",
       children: /*#__PURE__*/jsx("pre", {
         className: "whitespace-pre-wrap",
         children: stack
@@ -80,7 +78,15 @@ var ErrorStack = function ErrorStack(_ref4) {
 };
 
 /**
- * An error boundary wrapper higher-order component designed to provide consistent error display across the application will trap runtime errors
+ * Catches JavaScript errors in the child tree, logs them, and displays a fallback UI.
+ * It can be used to wrap any component tree to prevent the entire application from crashing due to errors in a specific part of the UI.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary errorElement={CustomErrorComponent}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
  */
 var ErrorBoundary = /*#__PURE__*/function (_Component) {
   function ErrorBoundary(props) {
@@ -109,18 +115,15 @@ var ErrorBoundary = /*#__PURE__*/function (_Component) {
       if (this.state.hasError) {
         var E = this.props.errorElement;
         // You can render any custom fallback UI
-        return /*#__PURE__*/jsx("div", {
-          className: classNames(classes.errorBoundary, "grid grid-rows-1 overflow-hidden p-0.5 rounded-capped"),
-          children: /*#__PURE__*/jsxs("div", {
-            className: classNames(classes.boundaryContent, "overflow-hidden grid rounded-capped"),
-            children: [/*#__PURE__*/jsx(ErrorMessage, {
-              error: this.state.error,
-              errorElement: E
-            }), env === "development" && /*#__PURE__*/jsx(ErrorStack, {
-              error: this.state.error,
-              stack: this.state.stack
-            })]
-          })
+        return /*#__PURE__*/jsxs("div", {
+          className: "fabric-errorBoundary grid overflow-hidden rounded-capped",
+          children: [/*#__PURE__*/jsx(ErrorMessage, {
+            error: this.state.error,
+            errorElement: E
+          }), env === "development" && /*#__PURE__*/jsx(ErrorStack, {
+            error: this.state.error,
+            stack: this.state.stack
+          })]
         });
       }
       return this.props.children;

package/dist/esm/core/boundary/ErrorIcon.js

@@ -1,37 +1,50 @@
 'use client';
 
-import classNames from 'classnames';
-import classes from './ErrorBoundary.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Error icon displayed within the ErrorBoundary fallback UI.
  *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
+ * Renders a circular icon with a red background and a white information
+ * symbol (an "i" inside a rectangle), used to visually indicate an error state.
  *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * @example
+ * ```tsx
+ * import { ErrorIcon } from "@react-fabric/core";
+ *
+ * <ErrorIcon />
+ * ```
  */
-
 var ErrorIcon = function ErrorIcon() {
   return /*#__PURE__*/jsxs("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 64 64",
-    className: classNames(classes.boundaryIcon, "size-6 m-2"),
+    className: "fabric-boundaryIcon size-6 m-2",
     children: [/*#__PURE__*/jsx("path", {
       fill: "#808080",
       d: "M64 32c0 17.673-14.327 32-32 32s-32-14.327-32-32 14.327-32 32-32 32 14.327 32 32z"

package/dist/esm/core/content/Content.js

@@ -1,47 +1,36 @@
 'use client';
 
-import classNames from 'classnames';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { cn } from '@react-fabric/utilities';
 import { useImperativeHandle } from 'react';
 import { useDebounce } from '../../hooks/useDebounce.js';
 import { useResizeObserver } from '../../hooks/useResizeObserver.js';
 import { ErrorBoundary } from '../boundary/ErrorBoundary.js';
-import classes from './Content.module.css';
 import { jsx } from 'react/jsx-runtime';
 
-/*
- * 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 _excluded = ["ref", "children", "className", "onScroll", "onResize"];
+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; }
 /**
- * Scrollable content element
+ * Content component that wraps children in a section element.
+ * It uses a resize observer to handle resizing and a debounced scroll handler.
+ * It also includes an error boundary to catch any errors in the children.
+ *
+ * @example
+ * ```tsx
+ * <Content onScroll={handleScroll} onResize={handleResize}>
+ *   <div>Child content</div>
+ * </Content>
+ * ```
  */
-var Content = function Content(_ref) {
+function Content(_ref) {
   var ref = _ref.ref,
     children = _ref.children,
     className = _ref.className,
     onScroll = _ref.onScroll,
     onResize = _ref.onResize,
-    testId = _ref["data-testid"],
-    testValue = _ref["data-test-value"];
+    props = _objectWithoutProperties(_ref, _excluded);
   var resizeHandle = useResizeObserver(onResize);
   var scrollHandler = useDebounce(function (e) {
     var el = e.target;
@@ -56,18 +45,18 @@ var Content = function Content(_ref) {
   }, [onScroll]);
   useImperativeHandle(ref, function () {
     return resizeHandle.current;
-  }, []);
-  return /*#__PURE__*/jsx("section", {
-    "data-ref": "content",
-    "data-testid": testId,
-    "data-test-value": testValue,
+  });
+  return /*#__PURE__*/jsx("section", _objectSpread(_objectSpread({
+    "data-ref": "content"
+  }, props), {}, {
+    "aria-roledescription": "content-pane",
     ref: resizeHandle,
     onScroll: scrollHandler,
-    className: classNames(classes.content, "area-content", className),
+    className: cn("fabric-content", className, "area-content @container scrollbar-gutter-stable"),
     children: /*#__PURE__*/jsx(ErrorBoundary, {
       children: children
     })
-  });
-};
+  }));
+}
 
 export { Content };