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

package/dist/esm/components/effect/MatteEffect.js

@@ -0,0 +1,127 @@
+'use client';
+
+import { useApplicationContext } from '../../context/context.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+function MatteEffect() {
+  var _useApplicationContex = useApplicationContext(),
+    currentColorScheme = _useApplicationContex.currentColorScheme;
+  var isDark = currentColorScheme === "dark";
+
+  // Pattern cell size
+  var cellSize = 1.5;
+  // Pattern opacity for subtle effect
+  var patternOpacity = 0.05;
+
+  // Generate SVG pattern for the matte/dither effect
+  // Creates a checkerboard-like pattern with alternating transparent and semi-transparent cells
+  var patternContent = isDark ? /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("rect", {
+      width: cellSize * 2,
+      height: cellSize * 2,
+      fill: "transparent"
+    }), /*#__PURE__*/jsx("rect", {
+      x: 0,
+      y: 0,
+      width: cellSize,
+      height: cellSize,
+      fill: "rgba(0, 0, 0, ".concat(patternOpacity, ")")
+    }), /*#__PURE__*/jsx("rect", {
+      x: cellSize,
+      y: cellSize,
+      width: cellSize,
+      height: cellSize,
+      fill: "rgba(0, 0, 0, ".concat(patternOpacity, ")")
+    }), /*#__PURE__*/jsx("rect", {
+      x: cellSize,
+      y: 0,
+      width: cellSize,
+      height: cellSize,
+      fill: "rgba(255, 255, 255, ".concat(patternOpacity * 0.3, ")")
+    }), /*#__PURE__*/jsx("rect", {
+      x: 0,
+      y: cellSize,
+      width: cellSize,
+      height: cellSize,
+      fill: "rgba(255, 255, 255, ".concat(patternOpacity * 0.3, ")")
+    })]
+  }) : /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("rect", {
+      width: cellSize * 2,
+      height: cellSize * 2,
+      fill: "transparent"
+    }), /*#__PURE__*/jsx("rect", {
+      x: 0,
+      y: 0,
+      width: cellSize,
+      height: cellSize,
+      fill: "rgba(255, 255, 255, ".concat(patternOpacity, ")")
+    }), /*#__PURE__*/jsx("rect", {
+      x: cellSize,
+      y: cellSize,
+      width: cellSize,
+      height: cellSize,
+      fill: "rgba(255, 255, 255, ".concat(patternOpacity, ")")
+    }), /*#__PURE__*/jsx("rect", {
+      x: cellSize,
+      y: 0,
+      width: cellSize,
+      height: cellSize,
+      fill: "rgba(0, 0, 0, ".concat(patternOpacity * 0.3, ")")
+    }), /*#__PURE__*/jsx("rect", {
+      x: 0,
+      y: cellSize,
+      width: cellSize,
+      height: cellSize,
+      fill: "rgba(0, 0, 0, ".concat(patternOpacity * 0.3, ")")
+    })]
+  });
+  return /*#__PURE__*/jsxs("svg", {
+    className: "fabric-style-effect fabric-matteEffect absolute inset-0 size-full overflow-hidden rounded-[inherit] z-0",
+    "aria-hidden": "true",
+    children: [/*#__PURE__*/jsx("defs", {
+      children: /*#__PURE__*/jsx("pattern", {
+        id: "mattePattern",
+        width: cellSize * 2,
+        height: cellSize * 2,
+        patternUnits: "userSpaceOnUse",
+        patternTransform: "rotate(".concat(isDark ? 45 : -45, ")"),
+        children: patternContent
+      })
+    }), /*#__PURE__*/jsx("rect", {
+      width: "100%",
+      height: "100%",
+      fill: "url(#mattePattern)",
+      style: {
+        mixBlendMode: isDark ? "overlay" : "soft-light"
+      }
+    })]
+  });
+}
+
+export { MatteEffect };

package/dist/esm/components/effect/StyleEffect.js

@@ -0,0 +1,43 @@
+'use client';
+
+import { useGlobals } from '../../context/context.js';
+import { GlassEffect } from './GlassEffect.js';
+import { MatteEffect } from './MatteEffect.js';
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+function StyleEffect(_ref) {
+  var showBorder = _ref.showBorder;
+  var _useGlobals = useGlobals(),
+    styleEffect = _useGlobals.styleEffect;
+  var E = styleEffect === "glass" ? GlassEffect : MatteEffect;
+  return styleEffect ? /*#__PURE__*/jsx(E, {
+    showBorder: showBorder
+  }) : null;
+}
+
+export { StyleEffect };

package/dist/esm/components/empty/EmptyContent.js

@@ -2,81 +2,69 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isString } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { isValidElement } from 'react';
-import { Icon } from '../icon/Icon.js';
+import { cn } from '@react-fabric/utilities';
+import 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
+import { Icon } from '../icon/Icon.js';
 
-var _excluded = ["children", "title", "message", "icon", "className", "size"];
+var _excluded = ["children", "title", "message", "icon", "className", "size", "iconColor"];
 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; }
 var SizeMap = {
   "": "1rem",
   sm: "0.875rem",
   md: "1.125rem"
 };
-var DefaultIcon = function DefaultIcon() {
-  return /*#__PURE__*/jsxs("svg", {
-    version: "1.1",
-    viewBox: "0 0 512 512",
-    width: "1em",
-    height: "1em",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/jsx("path", {
-      opacity: "0.5",
-      fill: "currentColor",
-      d: "M106.1,296.01c-0.46,0-0.92-0.05-1.37-0.14c-0.45-0.09-0.89-0.22-1.31-0.4c-0.42-0.17-0.83-0.39-1.21-0.64c-0.38-0.26-0.74-0.55-1.06-0.87c-0.33-0.33-0.62-0.68-0.87-1.07c-0.26-0.38-0.47-0.78-0.65-1.21c-0.17-0.42-0.31-0.86-0.4-1.31c-0.09-0.45-0.13-0.91-0.13-1.36c0-0.46,0.04-0.92,0.13-1.37s0.23-0.89,0.4-1.31c0.18-0.42,0.39-0.83,0.65-1.21c0.25-0.38,0.54-0.74,0.87-1.06c0.32-0.33,0.68-0.62,1.06-0.87s0.79-0.47,1.21-0.65c0.42-0.17,0.86-0.31,1.31-0.4c0.9-0.18,1.83-0.18,2.73,0c0.45,0.09,0.89,0.23,1.31,0.4c0.43,0.18,0.83,0.4,1.21,0.65s0.74,0.54,1.07,0.87c0.32,0.32,0.61,0.68,0.87,1.06c0.25,0.38,0.47,0.79,0.64,1.21s0.31,0.86,0.4,1.31s0.14,0.91,0.14,1.37c0,0.45-0.05,0.91-0.14,1.36c-0.09,0.45-0.23,0.89-0.4,1.31c-0.17,0.43-0.39,0.83-0.64,1.21c-0.26,0.39-0.55,0.74-0.87,1.07c-0.33,0.32-0.69,0.61-1.07,0.87c-0.38,0.25-0.78,0.47-1.21,0.64c-0.42,0.18-0.86,0.31-1.31,0.4S106.55,296.01,106.1,296.01z"
-    }), /*#__PURE__*/jsx("path", {
-      opacity: "0.5",
-      fill: "currentColor",
-      d: "M475.5,458.25H36.5c-8.78,0-16.58-4.58-20.86-12.24c-4.28-7.67-4.09-16.71,0.51-24.19l70.18-114.04c2.03-3.29,6.34-4.32,9.63-2.29c3.29,2.03,4.32,6.34,2.29,9.63L28.07,429.16c-1.91,3.1-1.99,6.84-0.21,10.02s5.01,5.07,8.64,5.07H475.5c3.64,0,6.87-1.9,8.64-5.07s1.7-6.92-0.21-10.02l-219.5-356.7c-1.84-3-4.92-4.71-8.43-4.71s-6.59,1.72-8.43,4.71L124.24,272.88c-2.03,3.29-6.34,4.32-9.63,2.29c-3.29-2.03-4.32-6.34-2.29-9.63L235.64,65.13C240.03,58,247.64,53.75,256,53.75s15.97,4.25,20.36,11.38l219.5,356.7c4.6,7.48,4.79,16.52,0.51,24.19C492.08,453.67,484.28,458.25,475.5,458.25z"
-    }), /*#__PURE__*/jsx("path", {
-      opacity: "0.5",
-      fill: "currentColor",
-      d: "M354.79,279.28c-1.85,0-3.65-0.75-4.95-2.05c-0.33-0.32-0.62-0.68-0.87-1.07c-0.26-0.37-0.47-0.78-0.65-1.2c-0.17-0.43-0.31-0.87-0.4-1.31c-0.09-0.45-0.13-0.91-0.13-1.37c0-0.46,0.04-0.92,0.13-1.37c0.09-0.44,0.23-0.89,0.4-1.31c0.18-0.42,0.39-0.83,0.65-1.21c0.25-0.38,0.54-0.74,0.87-1.06c1.62-1.63,4.04-2.37,6.31-1.91c0.45,0.09,0.89,0.22,1.31,0.4c0.43,0.17,0.83,0.39,1.21,0.64c0.39,0.25,0.74,0.55,1.06,0.87c0.33,0.32,0.62,0.68,0.88,1.06c0.25,0.38,0.46,0.79,0.64,1.21c0.18,0.42,0.31,0.87,0.4,1.31c0.09,0.45,0.14,0.91,0.14,1.37c0,0.46-0.05,0.92-0.14,1.37c-0.09,0.44-0.22,0.88-0.4,1.31c-0.18,0.42-0.39,0.83-0.64,1.2c-0.26,0.39-0.55,0.75-0.88,1.07c-0.32,0.32-0.67,0.61-1.06,0.87c-0.38,0.25-0.78,0.47-1.21,0.64c-0.42,0.18-0.86,0.31-1.31,0.4C355.7,279.23,355.24,279.28,354.79,279.28z"
-    }), /*#__PURE__*/jsx("path", {
-      opacity: "0.5",
-      fill: "currentColor",
-      d: "M403.86,423.48H108.14c-10.56,0-20.31-5.72-25.46-14.94c-5.15-9.21-4.91-20.52,0.62-29.51l147.86-240.29c5.35-8.69,14.63-13.88,24.84-13.88s19.49,5.19,24.84,13.88l68.87,111.91c2.03,3.29,1,7.6-2.29,9.63c-3.29,2.02-7.6,1-9.63-2.29l-68.87-111.91c-2.78-4.52-7.61-7.22-12.91-7.22s-10.13,2.7-12.91,7.22L95.22,386.37c-2.88,4.67-3,10.55-0.32,15.34c2.68,4.79,7.75,7.77,13.24,7.77h295.72c5.49,0,10.56-2.98,13.24-7.77c2.68-4.79,2.55-10.67-0.32-15.34l-54.14-87.97c-2.03-3.29-1-7.6,2.29-9.63c3.29-2.02,7.61-1,9.63,2.29l54.14,87.97c5.53,8.99,5.77,20.3,0.62,29.51C424.17,417.76,414.42,423.48,403.86,423.48z"
-    }), /*#__PURE__*/jsx("path", {
-      fill: "currentColor",
-      d: "M270.12,335.13h-28.24c-6.17,0-11.22-4.83-11.5-10.99l-0.5-11.01c-0.18-3.86,2.81-7.14,6.67-7.31 c3.85-0.21,7.14,2.81,7.31,6.67l0.4,8.64h23.49l5.23-114.15h-33.96l3.79,82.55c0.18,3.86-2.81,7.14-6.67,7.31 c-0.11,0.01-0.22,0.01-0.33,0.01c-3.72,0-6.81-2.93-6.99-6.68l-3.91-85.15c-0.14-3.13,1.01-6.22,3.17-8.48 c2.16-2.26,5.2-3.56,8.33-3.56h39.17c3.13,0,6.16,1.3,8.33,3.56c2.16,2.26,3.32,5.35,3.17,8.48l-5.46,119.12 C281.34,330.3,276.29,335.13,270.12,335.13z"
-    }), /*#__PURE__*/jsx("path", {
-      fill: "currentColor",
-      d: "M268.47,394.55h-24.94c-4.83,0-9.39-2.12-12.5-5.81s-4.44-8.54-3.63-13.3l2.69-15.79 c1.34-7.89,8.13-13.61,16.13-13.61h19.56c8,0,14.78,5.73,16.13,13.61l2.69,15.79c0.81,4.76-0.51,9.61-3.63,13.3 S273.3,394.55,268.47,394.55z M246.22,360.04c-1.15,0-2.13,0.83-2.33,1.96l-2.69,15.79c-0.16,0.94,0.26,1.61,0.52,1.92 c0.26,0.31,0.85,0.84,1.8,0.84h24.94c0.95,0,1.54-0.53,1.8-0.84c0.26-0.31,0.68-0.98,0.52-1.92L268.11,362 c-0.19-1.14-1.17-1.96-2.33-1.96H246.22z"
-    })]
-  });
-};
-var EmptyContent = function EmptyContent(_ref) {
+
+/**
+ * Displays a message and optional icon to represent an empty state, such as when no data is available.
+ * Supports customizable title, message, icon, size, and action buttons via children.
+ * When no icon is provided, a default alert icon is shown.
+ *
+ * @example
+ * ```tsx
+ * <EmptyContent
+ *   title="No Data Available"
+ *   message="Please check back later."
+ *   iconColor="tint-600"
+ *   size="md"
+ * >
+ *   <Button onClick={() => console.log("Retry")}>Retry</Button>
+ * </EmptyContent>
+ * ```
+ */
+function EmptyContent(_ref) {
   var children = _ref.children,
     title = _ref.title,
     message = _ref.message,
     icon = _ref.icon,
     className = _ref.className,
     size = _ref.size,
+    iconColor = _ref.iconColor,
     test = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames("p-6 flex flex-col items-center area-content", className),
+    className: cn("p-6 flex flex-col items-center area-content", className),
     style: size && {
       fontSize: SizeMap[size]
     }
   }, test), {}, {
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "leading-none",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "leading-none opacity-80",
       style: {
-        fontSize: "4em"
+        fontSize: "2em",
+        color: getColor(iconColor !== null && iconColor !== void 0 ? iconColor : "tint")
       },
-      children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
-        icon: icon
-      }), /*#__PURE__*/isValidElement(icon) && icon, !icon && /*#__PURE__*/jsx(DefaultIcon, {})]
-    }), title && /*#__PURE__*/jsx("p", {
+      children: /*#__PURE__*/jsx(Icon, {
+        icon: icon !== null && icon !== void 0 ? icon : "icon-[mdi-light--alert]"
+      })
+    }), title && /*#__PURE__*/jsx("div", {
       className: "font-medium text-center text-dimmed",
       style: {
-        fontSize: "1.5em"
+        fontSize: "1.25em"
       },
       children: title
-    }), /*#__PURE__*/jsx("p", {
+    }), /*#__PURE__*/jsx("div", {
       className: "font-medium text-center text-muted",
       style: {
         fontSize: "0.875em"
@@ -87,6 +75,6 @@ var EmptyContent = function EmptyContent(_ref) {
       children: children
     })]
   }));
-};
+}
 
 export { EmptyContent };

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

@@ -0,0 +1,170 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
+import { cn } from '@react-fabric/utilities';
+import { useId, use, useEffect, Activity } from 'react';
+import { LoadingLine } from '../animations/LoadingLine.js';
+import { Icon } from '../icon/Icon.js';
+import { ModalContext } from '../../context/context.js';
+import { Titlebar } from '../titlebar/Titlebar.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var _excluded = ["icon", "className", "classNames", "closeOnEscape", "title", "actions", "closeOnClick", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "height", "minHeight", "root", "hideMask", "align"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var AlignmentClasses = {
+  start: "inset-s-0 inset-y-0",
+  end: "inset-e-0 inset-y-0",
+  top: "top-0 inset-x-0",
+  bottom: "bottom-0 inset-x-0"
+};
+function Flyout(_ref) {
+  var icon = _ref.icon,
+    className = _ref.className,
+    classNames = _ref.classNames,
+    closeOnEscape = _ref.closeOnEscape,
+    title = _ref.title,
+    actions = _ref.actions,
+    closeOnClick = _ref.closeOnClick,
+    onClose = _ref.onClose,
+    onBeforeClose = _ref.onBeforeClose,
+    children = _ref.children,
+    loading = _ref.loading,
+    size = _ref.size,
+    width = _ref.width,
+    minWidth = _ref.minWidth,
+    height = _ref.height,
+    minHeight = _ref.minHeight,
+    root = _ref.root,
+    hideMask = _ref.hideMask,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? "start" : _ref$align,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var id = useId();
+  var _use = use(ModalContext),
+    activeModal = _use.activeModal,
+    registerModal = _use.registerModal,
+    removeModal = _use.removeModal;
+  var _useFloating = useFloating({
+      open: true,
+      onOpenChange: function onOpenChange() {
+        handleClose(null);
+      }
+    }),
+    refs = _useFloating.refs,
+    context = _useFloating.context;
+  var dismiss = useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    outsidePress: !hideMask,
+    escapeKey: closeOnEscape
+  });
+  var role = useRole(context);
+
+  // Merge all the interactions into prop getters
+  var _useInteractions = useInteractions([dismiss, role]),
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var handleClose = function handleClose(args) {
+    void Promise.resolve(onBeforeClose === null || onBeforeClose === void 0 ? void 0 : onBeforeClose(args)).then(function (ret) {
+      if (ret !== false) {
+        if (refs.floating.current) refs.floating.current.dataset.show = "false";
+        setTimeout(function () {
+          onClose === null || onClose === void 0 || onClose(args);
+        }, 250);
+      }
+      if (ret === false) setTimeout(function () {
+        var _refs$floating$curren;
+        return (_refs$floating$curren = refs.floating.current) === null || _refs$floating$curren === void 0 || (_refs$floating$curren = _refs$floating$curren.querySelector("[role='dialog']")) === null || _refs$floating$curren === void 0 ? void 0 : _refs$floating$curren.focus();
+      }, 50);
+    });
+  };
+  useEffect(function () {
+    if (activeModal === id) {
+      var tmr = setTimeout(function () {
+        if (refs.floating.current) refs.floating.current.dataset.show = "true";
+      }, 50);
+      return function () {
+        clearTimeout(tmr);
+      };
+    }
+  }, [activeModal, id, refs.floating]);
+  var tryClosing = function tryClosing(e) {
+    if (!!closeOnClick || e.target.closest("[data-flyout-dismiss='true']")) {
+      setTimeout(function () {
+        handleClose(null);
+      }, 100);
+    }
+  };
+  useEffect(function () {
+    registerModal === null || registerModal === void 0 || registerModal(id, function () {
+      return onClose === null || onClose === void 0 ? void 0 : onClose(null);
+    });
+    return function () {
+      removeModal === null || removeModal === void 0 || removeModal(id);
+    };
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [id]);
+  var isVertical = ["top", "bottom"].includes(align);
+  return /*#__PURE__*/jsx(Activity, {
+    mode: id === activeModal ? "visible" : "hidden",
+    children: /*#__PURE__*/jsxs(FloatingPortal, {
+      root: root,
+      children: [!hideMask && /*#__PURE__*/jsx(FloatingOverlay, {
+        lockScroll: true,
+        style: {
+          zIndex: "var(--z-overlay-mask)",
+          overflow: "hidden"
+        },
+        className: "bg-tint-100/10 backdrop-blur-sm transition-all"
+      }), /*#__PURE__*/jsx(FloatingFocusManager, {
+        context: context,
+        modal: true,
+        children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+          "data-align": align,
+          className: cn("fabric-flyout bg-default", isVertical ? "h-32 max-h-[70vh]" : "w-lg max-w-[70vw]", className, classNames === null || classNames === void 0 ? void 0 : classNames.root, "fixed overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", AlignmentClasses[align], size === "sm" && (isVertical ? "h-80" : "w-80"), size === "md" && (isVertical ? "h-160" : "w-160"), size === "lg" && (isVertical ? "h-[60vh]" : "w-[60vw]"), size === "xl" && (isVertical ? "h-[80vh]" : "w-[80vw]")),
+          style: isVertical ? {
+            height: height,
+            minHeight: minHeight
+          } : {
+            width: width,
+            minWidth: minWidth
+          },
+          onMouseUpCapture: tryClosing,
+          ref: function ref(el) {
+            return refs.setFloating(el);
+          }
+        }, getFloatingProps()), props), {}, {
+          children: [/*#__PURE__*/jsx(Titlebar, {
+            title: title,
+            icon: icon,
+            actions: /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx("div", {
+                className: "px-1 leading-none",
+                children: actions
+              }), /*#__PURE__*/jsx("button", {
+                className: "size-fit cursor-pointer leading-none outline-none",
+                onClick: function onClick() {
+                  return handleClose(null);
+                },
+                children: /*#__PURE__*/jsx(Icon, {
+                  "data-ref": "panelClose",
+                  className: cn("fabric-panelAction", "cursor-pointer p-1 text-xl self-center"),
+                  icon: "icon-[mdi--close]"
+                })
+              })]
+            }),
+            className: cn(classNames === null || classNames === void 0 ? void 0 : classNames.titlebar),
+            classNames: classNames
+          }), loading && /*#__PURE__*/jsx(LoadingLine, {}), /*#__PURE__*/jsx("div", {
+            role: "dialog",
+            className: cn("fabric-flyoutBody", classNames === null || classNames === void 0 ? void 0 : classNames.body, "flex-1 grid overflow-hidden"),
+            children: children
+          })]
+        }))
+      })]
+    })
+  });
+}
+
+export { Flyout };

package/dist/esm/components/hotkey/HotKey.js

@@ -0,0 +1,42 @@
+'use client';
+
+import { useHotkeySequence } from '@tanstack/react-hotkeys';
+
+/**
+ * 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.
+ */
+
+function HotKey(_ref) {
+  var keys = _ref.keys,
+    disabled = _ref.disabled,
+    handler = _ref.handler;
+  useHotkeySequence([keys].flat(), function () {
+    void (handler === null || handler === void 0 ? void 0 : handler());
+  }, {
+    enabled: !disabled
+  });
+  return null;
+}
+
+export { HotKey };