@react-fabric/core 1.0.0-beta.0

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

@@ -0,0 +1,152 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var classNames = require('classnames');
+var react = require('react');
+var Animations = require('../../components/animations/Animations.js');
+var Icon = require('../../components/icon/Icon.js');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var usePropToggle = require('../../hooks/usePropToggle.js');
+var useResize = require('../../hooks/useResize.js');
+var icons = require('../../types/icons.js');
+var ErrorBoundary = require('../boundary/ErrorBoundary.js');
+var Aside_module = require('./Aside.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Side panel
+ */
+var Aside = function Aside(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    rtlFlip = _ref.rtlFlip,
+    headerClassName = _ref.headerClassName,
+    resizeable = _ref.resizeable,
+    flyout = _ref.flyout,
+    onFlyout = _ref.onFlyout,
+    collapsed = _ref.collapsed,
+    collapsable = _ref.collapsable,
+    onCollapse = _ref.onCollapse,
+    actions = _ref.actions,
+    loading = _ref.loading,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "start" : _ref$align,
+    _ref$width = _ref.width,
+    wd = _ref$width === void 0 ? "20rem" : _ref$width,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? "2rem" : _ref$minWidth,
+    _ref$maxWidth = _ref.maxWidth,
+    maxWidth = _ref$maxWidth === void 0 ? "30vw" : _ref$maxWidth,
+    testId = _ref["data-testid"],
+    testValue = _ref["data-test-value"];
+  var elementRef = react.useRef(null);
+  var _useState = react.useState(wd),
+    _useState2 = _slicedToArray(_useState, 2),
+    width = _useState2[0],
+    setWidth = _useState2[1];
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    peek = _useState4[0],
+    setPeek = _useState4[1];
+  var _usePropToggle = usePropToggle.usePropToggle(collapsed, onCollapse),
+    _usePropToggle2 = _slicedToArray(_usePropToggle, 2),
+    isCollapsed = _usePropToggle2[0],
+    toggleCollapse = _usePropToggle2[1];
+  react.useEffect(function () {
+    setWidth(wd);
+  }, [wd]);
+  var handleResize = react.useRef(function (_ref2) {
+    var x = _ref2.x;
+    if (elementRef.current != null) {
+      setWidth(elementRef.current.offsetWidth + x);
+    }
+  });
+  var resizeHandleProps = useResize.useResize(handleResize.current, {
+    isReverse: align === "end"
+  });
+  var tryPeek = react.useCallback(function () {
+    if (isCollapsed) {
+      if (flyout) {
+        setPeek(!peek);
+        !peek && (onFlyout === null || onFlyout === void 0 ? void 0 : onFlyout());
+      } else {
+        void toggleCollapse();
+      }
+    }
+  }, [peek, flyout, isCollapsed, onFlyout, toggleCollapse]);
+  useEffectDebugger.useLayoutEffectDebugger(function () {
+    if (peek) {
+      var handler = function handler(e) {
+        if (e.target.closest("[data-ref=\"asideBody\"]") == null && e.target.closest("[data-ref=\"asidePlaceholder\"]") == null) {
+          setPeek(false);
+        }
+      };
+      document.addEventListener("mouseup", handler);
+      return function () {
+        return document.removeEventListener("mouseup", handler);
+      };
+    }
+  }, [peek], "Aside peek");
+  var widthStyles = react.useMemo(function () {
+    return {
+      width: width,
+      minWidth: minWidth,
+      maxWidth: maxWidth
+    };
+  }, [width, minWidth, maxWidth]);
+  return /*#__PURE__*/jsxRuntime.jsxs("aside", {
+    className: classNames(Aside_module.aside, "overflow-hidden grid"),
+    "data-align": align,
+    "data-flyout": peek,
+    "data-collapsed": isCollapsed,
+    style: isCollapsed ? undefined : widthStyles,
+    "data-testid": testId,
+    "data-test-value": testValue,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("header", {
+      className: classNames(Aside_module.asideHeader, headerClassName, "grid area-head items-center"),
+      children: [title && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames(Aside_module.asideTitle, "truncate py-0.5 px-1 select-none pointer-events-none"),
+        children: title
+      }), collapsable && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        "aria-label": isCollapsed ? "expand" : "collapse",
+        className: classNames(Aside_module.asideCollapse, "p-2 select-none"),
+        icon: icons.CoreIcons.chevronLeft,
+        rtlFlip: true,
+        onClick: toggleCollapse,
+        "data-ref": "asideToggle"
+      }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        icon: icon,
+        bg: iconBg,
+        color: iconColor,
+        rtlFlip: rtlFlip,
+        className: classNames(Aside_module.asideIcon, "p-1 text-lg select-none pointer-events-none")
+      }), actions && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: Aside_module.asideActions,
+        children: actions
+      })]
+    }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), isCollapsed && /*#__PURE__*/jsxRuntime.jsx("div", {
+      role: "none",
+      onClick: tryPeek,
+      "data-ref": "asidePlaceholder",
+      className: Aside_module.asidePlaceholder
+    }), /*#__PURE__*/jsxRuntime.jsx("section", {
+      ref: elementRef,
+      "data-ref": "asideBody",
+      className: classNames(Aside_module.asideBody, "overflow-hidden grid"),
+      style: isCollapsed ? widthStyles : undefined,
+      children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
+        children: children
+      })
+    }), resizeable && /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, resizeHandleProps), {}, {
+      className: classNames(Aside_module.asideResizer, "before:absolute before:inset-0 before:w-1 before:top-1/2 before:-translate-y-1/2 before:transition-all")
+    }))]
+  });
+};
+
+exports.Aside = Aside;

package/dist/cjs/core/aside/Aside.module.css

@@ -0,0 +1 @@
+@layer comp{.aside{--aside-bg:color-mix(in lab,var(--fabric-bg) 95%,var(--tint));--aside-border:color-mix(in lab,var(--fabric-bg) 75%,var(--tint));background-color:var(--aside-bg);&[data-align=start]{border-inline-end:1px solid var(--aside-border);grid-area:side-s;grid-template:"head resizer" auto "loader resizer" auto "content resizer" 1fr/1fr auto;& .asideHeader{grid-template-areas:"icon title actions collapse";grid-template-columns:auto 1fr auto auto}}&[data-align=end]{border-inline-start:1px solid var(--aside-border);grid-area:side-e;grid-template:"resizer head" auto "resizer loader" auto "resizer content" 1fr/auto 1fr;& .asideHeader{grid-template-areas:"collapse icon title actions";grid-template-columns:auto auto 1fr auto}& .asideCollapse{transform:scaleX(-1)}}& .asideBody{grid-area:content;grid-template:"head" auto "content" 1fr "foot" auto/1fr;&>[data-ref=content]{background-color:transparent}}& .asideHeader{color:theme(colors.primary.600);font-weight:500;&:not(:empty){border-bottom:1px solid var(--aside-border)}}& .asideTitle{grid-area:title}& .asideIcon{grid-area:icon}.asideActions{grid-area:actions}& .asideCollapse{grid-area:collapse;&:hover{background-color:color-mix(in lab,var(--fabric-text) 10%,#0000)}}& .asidePlaceholder{background-color:var(--aside-bg);grid-area:content;z-index:4}& .asideResizer{cursor:col-resize;grid-area:resizer;position:relative;width:.25rem;&:before{border:1px solid theme(colors.tint.700);border-width:0 1.5px;height:32px}&:active:before,&:hover:before{background-color:theme(colors.primary.600);border-color:theme(backgroundColor.base);border-width:0 1.25px;height:100%}}}}@layer util{.asideBody,.asideHeader{height:unset;margin:unset;width:unset}.asideBody{&>[data-ref=content]{background-color:transparent}}.aside[data-collapsed=true]{overflow:visible;position:relative;width:2rem;& .asideBody{background-color:var(--aside-bg);inset:0;position:absolute;transition:transform .15s cubic-bezier(.4,0,.2,1);z-index:-1}& .asideHeader{position:absolute;width:2rem;z-index:5}& .asideTitle{font-size:1rem;grid-area:unset;position:absolute;top:1rem}.asideIcon{margin-inline:2px}& .asideCollapse+.asideIcon,& .asideResizer{display:none}}[dir=ltr] .aside[data-align=start][data-collapsed=true],[dir=rtl] .aside[data-align=end][data-collapsed=true]{& .asideBody{grid-area:unset;right:unset;transform:translateX(-100%)}& .asideTitle{right:calc(2rem + 2px);transform:rotate(-90deg) translateY(2rem);transform-origin:100% 100%}& .asideCollapse{transform:scaleX(-1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(2rem);z-index:3}}[dir=ltr] .aside[data-align=end][data-collapsed=true],[dir=rtl] .aside[data-align=start][data-collapsed=true]{& .asideBody{grid-area:unset;left:unset;transform:translateX(100%)}& .asideTitle{left:calc(2rem + 2px);transform:rotate(90deg) translateY(2rem);transform-origin:0 100%}& .asideCollapse{transform:scaleX(1)}&[data-flyout=true] .asideBody{box-shadow:0 0 1rem 0 var(--fabric-shadow);transform:translateX(-2rem);z-index:3}}}

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

@@ -0,0 +1,140 @@
+'use strict';
+
+var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
+var _createClass = require('@babel/runtime/helpers/createClass');
+var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
+var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
+var _inherits = require('@babel/runtime/helpers/inherits');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var jsxRuntime = require('react/jsx-runtime');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var usePropToggle = require('../../hooks/usePropToggle.js');
+var ErrorBoundary_module = require('./ErrorBoundary.module.css');
+var ErrorIcon = require('./ErrorIcon.js');
+var Global = require('../../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; })(); }
+var DefaultError = function DefaultError(_ref) {
+  var error = _ref.error;
+  var _useTranslation = reactI18next.useTranslation("core"),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("h6", {
+      children: t("error.title")
+    }), /*#__PURE__*/jsxRuntime.jsx("p", {
+      className: "line-clamp-4",
+      children: error
+    })]
+  });
+};
+var ErrorMessage = function ErrorMessage(_ref2) {
+  var error = _ref2.error,
+    errorElement = _ref2.errorElement;
+  var _useGlobals = Global.useGlobals(),
+    globalError = _useGlobals.errorElement;
+  var EE = useEffectDebugger.useMemoDebugger(function () {
+    var _ref3;
+    return (_ref3 = errorElement !== null && errorElement !== void 0 ? errorElement : globalError) !== null && _ref3 !== void 0 ? _ref3 : DefaultError;
+  }, [], "ErrorBoundary element");
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(ErrorIcon.ErrorIcon, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames(ErrorBoundary_module.boundaryMessage, "p-2"),
+      children: /*#__PURE__*/jsxRuntime.jsx(EE, {
+        error: error
+      })
+    })]
+  });
+};
+var ErrorStack = function ErrorStack(_ref4) {
+  var error = _ref4.error,
+    stack = _ref4.stack;
+  var _usePropToggle = usePropToggle.usePropToggle(false),
+    _usePropToggle2 = _slicedToArray(_usePropToggle, 2),
+    show = _usePropToggle2[0],
+    toggleShow = _usePropToggle2[1];
+  utilities.useLogger().error(error, {}, stack);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames(ErrorBoundary_module.boundaryDetail, "overflow-hidden grid"),
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames(ErrorBoundary_module.boundaryLink, "px-2 py-1 text-xs text-end"),
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        role: "link",
+        tabIndex: 0,
+        className: "link",
+        onClick: toggleShow,
+        children: show ? "Hide Detail" : "Show Detail"
+      })
+    }), show && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames(ErrorBoundary_module.boundaryStack, "overflow-auto p-2 text-xs border-t"),
+      children: /*#__PURE__*/jsxRuntime.jsx("pre", {
+        className: "whitespace-pre-wrap",
+        children: stack
+      })
+    })]
+  });
+};
+
+/**
+ * An error boundary wrapper higher-order component designed to provide consistent error display across the application will trap runtime errors
+ */
+var ErrorBoundary = /*#__PURE__*/function (_Component) {
+  function ErrorBoundary(props) {
+    var _this;
+    _classCallCheck(this, ErrorBoundary);
+    _this = _callSuper(this, ErrorBoundary, [props]);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+  _inherits(ErrorBoundary, _Component);
+  return _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      this.setState({
+        hasError: true,
+        error: error.message,
+        stack: error.stack
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var env = process.env.NODE_ENV;
+      if (this.state.hasError) {
+        var E = this.props.errorElement;
+        // You can render any custom fallback UI
+        return /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: classNames(ErrorBoundary_module.errorBoundary, "grid grid-rows-1 overflow-hidden p-0.5 rounded-capped"),
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: classNames(ErrorBoundary_module.boundaryContent, "overflow-hidden grid rounded-capped"),
+            children: [/*#__PURE__*/jsxRuntime.jsx(ErrorMessage, {
+              error: this.state.error,
+              errorElement: E
+            }), env === "development" && /*#__PURE__*/jsxRuntime.jsx(ErrorStack, {
+              error: this.state.error,
+              stack: this.state.stack
+            })]
+          })
+        });
+      }
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        hasError: true,
+        error: error.message,
+        stack: error.stack
+      };
+    }
+  }]);
+}(react.Component);
+
+exports.ErrorBoundary = ErrorBoundary;

package/dist/cjs/core/boundary/ErrorBoundary.module.css

@@ -0,0 +1 @@
+@layer comp{.errorBoundary{align-self:flex-start;background-color:theme(colors.danger.500);background-image:repeating-linear-gradient(135deg,hsla(0,0%,100%,.5) 0 4px,hsla(0,0%,100%,.2) 4px 8px);grid-area:inherit;margin:1rem;max-height:calc(100% - 2rem);& .boundaryContent{background-color:var(--fabric-bg);grid-template:"icon message" auto "detail detail" auto/auto 1fr}& .boundaryIcon{grid-area:icon}& .boundaryMessage{grid-area:message}& .boundaryDetail{grid-area:detail;grid-template-rows:auto 1fr}}}

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

@@ -0,0 +1,51 @@
+'use strict';
+
+var classNames = require('classnames');
+var ErrorBoundary_module = require('./ErrorBoundary.module.css');
+var jsxRuntime = require('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 ErrorIcon = function ErrorIcon() {
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 64 64",
+    className: classNames(ErrorBoundary_module.boundaryIcon, "size-6 m-2"),
+    children: [/*#__PURE__*/jsxRuntime.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"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      fill: "#fff",
+      d: "M63.5 32c0 17.397-14.103 31.5-31.5 31.5s-31.5-14.103-31.5-31.5 14.103-31.5 31.5-31.5 31.5 14.103 31.5 31.5z"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      fill: "#f44336",
+      d: "M60 32c0 15.464-12.536 28-28 28s-28-12.536-28-28c0-15.464 12.536-28 28-28s28 12.536 28 28z"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      fill: "#fff",
+      d: "M50.667 35.733h-37.333c-1.031 0-1.867-0.835-1.867-1.867v-3.733c0-1.031 0.835-1.867 1.867-1.867h37.333c1.031 0 1.867 0.835 1.867 1.867v3.733c0 1.031-0.835 1.867-1.867 1.867z"
+    })]
+  });
+};
+
+exports.ErrorIcon = ErrorIcon;

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

@@ -0,0 +1,70 @@
+'use strict';
+
+var classNames = require('classnames');
+var react = require('react');
+var useDebounce = require('../../hooks/useDebounce.js');
+var useResizeObserver = require('../../hooks/useResizeObserver.js');
+var ErrorBoundary = require('../boundary/ErrorBoundary.js');
+var Content_module = require('./Content.module.css');
+var jsxRuntime = require('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.
+ */
+
+/**
+ * Scrollable content element
+ */
+var Content = 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"];
+  var resizeHandle = useResizeObserver.useResizeObserver(onResize);
+  var scrollHandler = useDebounce.useDebounce(function (e) {
+    onScroll === null || onScroll === void 0 || onScroll({
+      // @ts-expect-error ignore
+      left: e.target.scrollLeft,
+      // @ts-expect-error ignore
+      top: e.target.scrollTop
+    });
+  }, [onScroll]);
+  react.useImperativeHandle(ref, function () {
+    return resizeHandle.current;
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx("section", {
+    "data-ref": "content",
+    "data-testid": testId,
+    "data-test-value": testValue,
+    ref: resizeHandle,
+    onScroll: scrollHandler,
+    className: classNames(Content_module.content, "area-content", className),
+    children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
+      children: children
+    })
+  });
+};
+
+exports.Content = Content;

package/dist/cjs/core/content/Content.module.css

@@ -0,0 +1 @@
+@layer comp{.content{--fabric-content:color-mix(in lab,var(--fabric-bg) 97%,var(--tint));background-color:var(--fabric-content);overflow:auto;padding:1rem}}@layer util{.content{height:unset;margin:unset;width:unset}}

package/dist/cjs/core/headfoot/HeadFoot.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var getColor = require('../../utils/getColor.js');
+require('@react-fabric/utilities');
+var HeadFoot_module = require('./HeadFoot.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["as", "children", "className", "bg", "color", "flex", "area", "dir", "align", "justify"];
+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 HeadFoot = function HeadFoot(_ref) {
+  var E = _ref.as,
+    children = _ref.children,
+    className = _ref.className,
+    bg = _ref.bg,
+    color = _ref.color,
+    flex = _ref.flex,
+    area = _ref.area,
+    dir = _ref.dir,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "center" : _ref$align,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? "start" : _ref$justify,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  /** ***************** style map *******************/
+  var styles = useEffectDebugger.useMemoDebugger(function () {
+    var s = {};
+    if (bg) {
+      s.backgroundColor = getColor.getColor(bg);
+    }
+    if (color) {
+      s.color = getColor.getColor(color);
+    }
+    return s;
+  }, [bg], "HeadFoot styles");
+  return /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
+    dir: dir,
+    className: classNames(HeadFoot_module.headfoot, className, bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), area === "head" ? "area-head" : "area-foot", "leading-none", flex && "flex flex-nowrap gap-px", align && "items-".concat(align), justify && "justify-".concat(justify)),
+    style: styles
+  }, aria), {}, {
+    children: children
+  }));
+};
+var Header = function Header(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(HeadFoot, _objectSpread({
+    as: "header",
+    area: "head"
+  }, props));
+};
+var Footer = function Footer(props) {
+  return /*#__PURE__*/jsxRuntime.jsx(HeadFoot, _objectSpread({
+    as: "footer",
+    area: "foot"
+  }, props));
+};
+
+exports.Footer = Footer;
+exports.Header = Header;

package/dist/cjs/core/headfoot/HeadFoot.module.css

@@ -0,0 +1 @@
+@layer comp{.headfoot{.buttonWrapper+.buttonWrapper{margin-inline-start:.25rem}}}@layer util{.headfoot{height:unset;margin:unset;width:unset}}

package/dist/cjs/core/page/Page.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var classNames = require('classnames');
+var Animations = require('../../components/animations/Animations.js');
+var Icon = require('../../components/icon/Icon.js');
+var Page_module = require('./Page.module.css');
+var jsxRuntime = require('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.
+ */
+
+/**
+ * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
+ */
+var Page = function Page(_ref) {
+  var children = _ref.children,
+    paper = _ref.paper,
+    title = _ref.title,
+    titleClassName = _ref.titleClassName,
+    icon = _ref.icon,
+    rtlFlip = _ref.rtlFlip,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    loading = _ref.loading,
+    testId = _ref["data-testid"],
+    testValue = _ref["data-test-value"];
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    "data-testid": testId,
+    "data-test-value": testValue,
+    className: classNames(Page_module.page, "overflow-hidden grid area-content", paper && "shadow-paper m-[6px] rounded-capped"),
+    children: [title && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "data-ref": "pageTitle",
+      className: classNames(Page_module.pageTitle, "select-none flex gap-1 items-center justify-center px-1 py-0.5 font-medium text-center", titleClassName),
+      children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        icon: icon,
+        size: "1.25em",
+        rtlFlip: rtlFlip,
+        bg: iconBg,
+        color: iconColor
+      }), title]
+    }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), children]
+  });
+};
+
+exports.Page = Page;

package/dist/cjs/core/page/Page.module.css

@@ -0,0 +1 @@
+@layer comp{.page{--fabric-page:color-mix(in lab,var(--fabric-bg) 94%,var(--tint));--fabric-page-title:color-mix(in lab,var(--fabric-bg) 90%,var(--tint));background-color:var(--fabric-page);grid-template:"title title title" auto "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto;.pageTitle{background-color:var(--fabric-page-title);color:theme(colors.primary.600);grid-area:title}}}@layer util{.pageTitle{height:unset;margin:unset;width:unset}}

package/dist/cjs/core/responsive/Responsive.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var Responsive_module = require('./Responsive.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["children", "fullWidth", "className", "gutter"],
+  _excluded2 = ["children", "gutter", "noWrap", "orient", "align", "justify", "className"],
+  _excluded3 = ["children", "flex", "align", "className", "stretchContent"];
+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; }
+/**
+ * Responsive layout container
+ */
+var Container = function Container(_ref) {
+  var children = _ref.children,
+    fullWidth = _ref.fullWidth,
+    className = _ref.className,
+    gutter = _ref.gutter,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    className: classNames(Responsive_module.container, className, !fullWidth && "container mx-auto"),
+    "data-gutter": gutter
+  }, aria), {}, {
+    children: children
+  }));
+};
+var Row = function Row(_ref2) {
+  var children = _ref2.children,
+    gutter = _ref2.gutter,
+    noWrap = _ref2.noWrap,
+    orient = _ref2.orient,
+    _ref2$align = _ref2.align,
+    align = _ref2$align === void 0 ? "stretch" : _ref2$align,
+    _ref2$justify = _ref2.justify,
+    justify = _ref2$justify === void 0 ? "start" : _ref2$justify,
+    className = _ref2.className,
+    aria = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    className: classNames(Responsive_module.row, className, "flex", orient === "row" && "flex-row", orient === "col" && "flex-col", orient === "row-reverse" && "flex-row-reverse", orient === "col-reverse" && "flex-col-reverse", noWrap ? "flex-nowrap" : "flex-wrap", "justify-".concat(justify), "items-".concat(align)),
+    "data-gutter": gutter
+  }, aria), {}, {
+    children: children
+  }));
+};
+var Col = function Col(_ref3) {
+  var children = _ref3.children,
+    flex = _ref3.flex,
+    align = _ref3.align,
+    className = _ref3.className,
+    stretchContent = _ref3.stretchContent,
+    aria = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    className: classNames(Responsive_module.col, className, stretchContent && Responsive_module.stretchContent, flex === "auto" && "flex-content", flex === "fill" && "flex-1", flex === "full" && "flex-full", align && "self-".concat(align))
+  }, aria), {}, {
+    children: children
+  }));
+};
+
+exports.Col = Col;
+exports.Container = Container;
+exports.Row = Row;

package/dist/cjs/core/responsive/Responsive.module.css

@@ -0,0 +1 @@
+@layer comp{.row{margin:calc(var(--gutter)*-.5);&+.row{margin-top:calc(var(--gutter)*.5)}}.col{flex:0 0 auto;margin:calc(var(--gutter)*.5);max-width:calc(100% - var(--gutter, 0px));&.stretchContent>*{min-height:100%;min-width:100%}}[data-gutter="0"]{&.container,&.row{--gutter:0px}}[data-gutter=xs]{&.container,&.row{--gutter:2px}}[data-gutter=sm]{&.container,&.row{--gutter:0.25rem}}[data-gutter=md]{&.container,&.row{--gutter:0.75rem}}[data-gutter=lg]{&.container,&.row{--gutter:1rem}}[data-gutter=xl]{&.container,&.row{--gutter:1.5rem}}}