@react-fabric/core 1.0.0-beta.0

package/dist/cjs/components/menu/MenuItem.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('@floating-ui/react');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react$1 = require('react');
+var HotKeyLabel = require('../../hotkeys/HotKeyLabel.js');
+require('react-i18next');
+require('../../hooks/useEffectDebugger.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('@babel/runtime/helpers/slicedToArray');
+require('../../hotkeys/HotKeyWrapper.js');
+var Tooltip = require('../../overlays/tooltip/Tooltip.js');
+var Badge = require('../badge/Badge.js');
+var Icon = require('../icon/Icon.js');
+require('../../types/icons.js');
+var Menu_module = require('./Menu.module.css');
+
+var _excluded = ["as", "label", "color", "className", "icon", "iconBg", "iconColor", "appendLabel", "rtlFlip", "altIcon", "id", "active", "disabled", "onClick", "badge", "hotKey", "minimal", "data-open", "ref"],
+  _excluded2 = ["children"];
+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 MenuItem = function MenuItem(_ref) {
+  var as = _ref.as,
+    label = _ref.label,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    className = _ref.className,
+    icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    appendLabel = _ref.appendLabel,
+    rtlFlip = _ref.rtlFlip,
+    altIcon = _ref.altIcon,
+    id = _ref.id,
+    active = _ref.active,
+    disabled = _ref.disabled,
+    _onClick = _ref.onClick,
+    badge = _ref.badge,
+    hotKey = _ref.hotKey,
+    minimal = _ref.minimal,
+    childOpen = _ref["data-open"],
+    ref = _ref.ref,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var tree = react.useFloatingTree();
+  var badgeProps = react$1.useMemo(function () {
+    return Badge.getBadgeProps(badge);
+  }, [badge]);
+  var iconEl = react$1.useMemo(function () {
+    var _path;
+    var path = icon;
+    if (minimal && !path) {
+      path = utilities.iconToken(label);
+    }
+    return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      className: classNames(Menu_module.menuIcon, minimal && Menu_module.minimal),
+      icon: (_path = path) !== null && _path !== void 0 ? _path : "",
+      bg: iconBg,
+      color: iconColor,
+      rtlFlip: rtlFlip
+    });
+  }, [icon, iconBg, iconColor, rtlFlip, minimal, label]);
+  var Wrapper = react$1.useCallback(function (_ref2) {
+    var children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+    return minimal ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, _objectSpread(_objectSpread({
+      content: label,
+      placement: "right",
+      disabled: childOpen
+    }, rest), {}, {
+      children: children
+    })) : /*#__PURE__*/jsxRuntime.jsx(react$1.Fragment, {
+      children: children
+    });
+  }, [minimal, label, childOpen]);
+  var menuLabel = react$1.useMemo(function () {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-nowrap text-start items-center",
+      children: [iconEl, !minimal && /*#__PURE__*/jsxRuntime.jsx("label", {
+        className: "flex-1 pe-4 py-[0.375em] truncate",
+        children: label
+      }), appendLabel && /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: classNames("font-bold whitespace-nowrap text-center leading-none mx-1", minimal && "absolute inset-x-0 bottom-0 overflow-clip", minimal ? "text-[0.5rem]" : "text-[0.625rem]", active ? "text-white/50" : "text-tint-600/50"),
+        children: appendLabel
+      }), badge && /*#__PURE__*/jsxRuntime.jsx(Badge.Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
+        placement: minimal ? "end" : "",
+        className: classNames("me-1", badgeProps.className)
+      })), hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKeyLabel.HotKeyLabel, {
+        keyCombo: hotKey
+      }), !minimal && altIcon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        className: "text-muted px-1",
+        icon: altIcon,
+        rtlFlip: true
+      })]
+    });
+  }, [iconEl, minimal, appendLabel, label, badge, badgeProps, hotKey, active]);
+  var E = as !== null && as !== void 0 ? as : "button";
+  return /*#__PURE__*/jsxRuntime.jsx(Wrapper, _objectSpread(_objectSpread({}, aria), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
+      ref: ref,
+      "data-dropdown-dismiss": true,
+      "data-color": color,
+      className: classNames(Menu_module.menuItem, className, active && Menu_module.active, minimal && Menu_module.minimal, disabled && Menu_module.disabled, "rounded-capped relative max-w-[50vw] my-0.5"),
+      "data-active": active,
+      "data-open": childOpen,
+      disabled: disabled,
+      "data-id": id,
+      onClick: function onClick(e) {
+        (_onClick === null || _onClick === void 0 ? void 0 : _onClick(e)) !== false && (tree === null || tree === void 0 ? void 0 : tree.events.emit("click"));
+      }
+    }, minimal ? {} : aria), {}, {
+      children: menuLabel
+    }))
+  }));
+};
+
+exports.MenuItem = MenuItem;

package/dist/cjs/components/meter/Meter.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var Meter_module = require('./Meter.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["value", "hideLabel", "className"];
+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 Meter = function Meter(_ref) {
+  var value = _ref.value,
+    hideLabel = _ref.hideLabel,
+    className = _ref.className,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  /** ***************** calculate active meter dots *******************/
+  var activeCount = useEffectDebugger.useMemoDebugger(function () {
+    return value / 16.67;
+  }, [value], "Meter activeCount");
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    className: classNames(Meter_module.meter, className, "flex flex-nowrap items-center gap-[2px]")
+  }, aria), {}, {
+    children: [[0, 1, 2, 3, 4, 5].map(function (step) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames(Meter_module.meterBar, "first-of-type:rounded-s last-of-type:rounded-e bg-tint-100 relative outline -outline-offset-1 outline-muted overflow-hidden after:absolute after:inset-0"),
+        "data-active": activeCount >= step,
+        style: {
+          "--width": "".concat(Math.min((activeCount - step) * 100, 100), "%")
+        }
+      }, step);
+    }), !hideLabel && /*#__PURE__*/jsxRuntime.jsx("label", {
+      className: "text-muted",
+      children: utilities.Format.percent(value / 100)
+    })]
+  }));
+};
+
+exports.Meter = Meter;

package/dist/cjs/components/meter/Meter.module.css

@@ -0,0 +1 @@
+@layer comp{.meter{& .meterBar{flex:1 1 1rem;height:.5em;line-height:1;max-width:12rem;min-width:1rem;&:after{width:var(--width)}}&>label{font-size:max(.75rem,.5em);line-height:1}& .meterBar[data-active=true]{&:first-child,&:nth-child(2),&:nth-child(3),&:nth-child(4),&:nth-child(5),&:nth-child(6){&:after{background-color:currentColor;opacity:.85}}&:first-child{color:#eb5e28}&:nth-child(2){color:#f9a03f}&:nth-child(3){color:#f3c053}&:nth-child(4){color:#a1c349}&:nth-child(5){color:#87a330}&:nth-child(6){color:#6a8532}}&[class*=text-accent] .meterBar[data-active=true],&[class*=text-danger] .meterBar[data-active=true],&[class*=text-info] .meterBar[data-active=true],&[class*=text-primary] .meterBar[data-active=true],&[class*=text-success] .meterBar[data-active=true],&[class*=text-warning] .meterBar[data-active=true]{color:currentColor;&:first-child:after{opacity:.2}&:nth-child(2):after{opacity:.35}&:nth-child(3):after{opacity:.5}&:nth-child(4):after{opacity:.65}&:nth-child(5):after{opacity:.8}&:nth-child(6):after{opacity:.95}}}}

package/dist/cjs/components/navigator/Navigator.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var HotKey = require('../../hotkeys/HotKey.js');
+var icons = require('../../types/icons.js');
+var Icon = require('../icon/Icon.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["className", "onNavigate", "color"];
+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 Navigator = function Navigator(_ref) {
+  var className = _ref.className,
+    onNavigate = _ref.onNavigate,
+    color = _ref.color,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    className: classNames(className, "inline-block leading-none")
+  }, aria), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+      keyCombo: "left",
+      handler: function handler() {
+        return onNavigate(-1);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+      keyCombo: "right",
+      handler: function handler() {
+        return onNavigate(1);
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      rtlFlip: true,
+      color: color,
+      className: "text-[1em] p-1",
+      "aria-label": "previous",
+      icon: icons.CoreIcons.chevronLeft,
+      onClick: function onClick(e) {
+        return [e.stopPropagation(), onNavigate(-1)];
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      rtlFlip: true,
+      className: "text-[1em] p-1",
+      color: color,
+      "aria-label": "next",
+      icon: icons.CoreIcons.chevronRight,
+      onClick: function onClick(e) {
+        return [e.stopPropagation(), onNavigate(1)];
+      }
+    })]
+  }));
+};
+
+exports.Navigator = Navigator;

package/dist/cjs/components/panel/Panel.js

@@ -0,0 +1,125 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var react = require('react');
+var usePropToggle = require('../../hooks/usePropToggle.js');
+var icons = require('../../types/icons.js');
+var Animations = require('../animations/Animations.js');
+var Icon = require('../icon/Icon.js');
+var Panel_module = require('./Panel.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["children", "className", "titleClassName", "headerClassName", "title", "actions", "icon", "iconBg", "iconColor", "rtlFlip", "panelId", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "loading", "expandable", "expanded", "onExpand", "collapsable", "collapsed", "onCollapse", "onClose", "onBack"];
+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 Panel = function Panel(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    titleClassName = _ref.titleClassName,
+    headerClassName = _ref.headerClassName,
+    title = _ref.title,
+    actions = _ref.actions,
+    icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    rtlFlip = _ref.rtlFlip,
+    panelId = _ref.panelId,
+    height = _ref.height,
+    width = _ref.width,
+    minHeight = _ref.minHeight,
+    minWidth = _ref.minWidth,
+    maxHeight = _ref.maxHeight,
+    maxWidth = _ref.maxWidth,
+    loading = _ref.loading,
+    expandable = _ref.expandable,
+    _expanded = _ref.expanded,
+    onExpand = _ref.onExpand,
+    collapsable = _ref.collapsable,
+    _collapsed = _ref.collapsed,
+    onCollapse = _ref.onCollapse,
+    onClose = _ref.onClose,
+    onBack = _ref.onBack,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _usePropToggle = usePropToggle.usePropToggle(_collapsed, onCollapse, panelId),
+    _usePropToggle2 = _slicedToArray(_usePropToggle, 2),
+    collapsed = _usePropToggle2[0],
+    toggleCollapse = _usePropToggle2[1];
+  var _usePropToggle3 = usePropToggle.usePropToggle(_expanded, onExpand, panelId),
+    _usePropToggle4 = _slicedToArray(_usePropToggle3, 2),
+    expanded = _usePropToggle4[0],
+    toggleExpand = _usePropToggle4[1];
+  var hasTools = react.useMemo(function () {
+    return !!expandable || !!collapsable || !!onClose;
+  }, [expandable, collapsable, onClose]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    className: classNames(Panel_module.panel, className, "rounded-capped overflow-hidden outline grid", expanded ? "fixed inset-4 z-50" : "relative"),
+    "data-ref": "panel",
+    "data-collapsed": collapsed,
+    style: expanded ? {} : collapsed ? {
+      width: width,
+      minWidth: minWidth,
+      maxWidth: maxWidth
+    } : {
+      height: height,
+      width: width,
+      minWidth: minWidth,
+      minHeight: minHeight,
+      maxWidth: maxWidth,
+      maxHeight: maxHeight
+    }
+  }, aria), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs("header", {
+      role: "none",
+      className: classNames(Panel_module.panelHeader, headerClassName, "flex flex-nowrap items-center area-head"),
+      onClick: collapsable ? toggleCollapse : undefined,
+      children: [onBack && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        "data-ref": "panelBack",
+        className: classNames(Panel_module.panelAction, "cursor-pointer"),
+        icon: icons.CoreIcons.chevronLeft,
+        onClick: onBack
+      }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        icon: icon,
+        bg: iconBg,
+        color: iconColor,
+        rtlFlip: rtlFlip,
+        className: "p-2 text-md select-none pointer-events-none"
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classNames(titleClassName, "flex-1 select-none truncate", title && "py-1 first:px-2"),
+        children: title
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "px-1",
+        children: actions
+      }), hasTools && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        role: "none",
+        className: "px-1 gap-px flex",
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        },
+        children: [expandable && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          "data-ref": "panelExpand",
+          className: classNames(Panel_module.panelAction, "cursor-pointer"),
+          icon: expanded ? icons.CoreIcons.minimize : icons.CoreIcons.maximize,
+          onClick: toggleExpand
+        }), !expanded && collapsable && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          "data-ref": "panelCollapse",
+          className: classNames(Panel_module.panelAction, "cursor-pointer"),
+          icon: collapsed ? icons.CoreIcons.expand : icons.CoreIcons.collapse,
+          onClick: toggleCollapse
+        }), !expanded && onClose && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          "data-ref": "panelClose",
+          className: classNames(Panel_module.panelAction, "cursor-pointer"),
+          icon: icons.CoreIcons.close,
+          onClick: onClose
+        })]
+      })]
+    }), (!collapsed || expanded) && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classNames(Panel_module.panelBody, "area-content grid overflow-hidden"),
+      children: [loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), children]
+    })]
+  }));
+};
+
+exports.Panel = Panel;

package/dist/cjs/components/panel/Panel.module.css

@@ -0,0 +1 @@
+@layer comp{.panel{background-color:theme(colors.bg);grid-template:"head" auto "content" 1fr/1fr;&>*{background-color:transparent}&:global(.fixed){box-shadow:0 0 18px theme(boxShadowColor.base)}& .panelHeader{background-color:theme(backgroundColor.dimmed)}& .panelAction{padding:.25rem}& .panelBody{grid-template:"head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto/auto 1fr auto}}}@layer util{.panelGroup{&>.panel{&[data-collapsed=true]{flex:0 0 auto}&[data-collapsed=false]{flex:1 1 auto;min-height:15rem;[data-ref=panelCollapse]{color:var(--tint);opacity:.25;pointer-events:none}}}&>.panel:not(:first-child){border-start-end-radius:0;border-start-start-radius:0}&>.panel:not(:last-child){border-bottom:1px solid theme(backgroundColor.base);border-end-end-radius:0;border-end-start-radius:0}}[data-ref=asideBody]>.panelGroup>.panel{border-radius:0;outline:0}}

package/dist/cjs/components/panel/PanelGroup.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var classNames = require('classnames');
+var react = require('react');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var Panel_module = require('./Panel.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var PanelGroup = function PanelGroup(_ref) {
+  var children = _ref.children,
+    activePanel = _ref.activePanel,
+    onActiveChange = _ref.onActiveChange;
+  var _useState = react.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedPanel = _useState2[0],
+    setExpandedPanel = _useState2[1];
+  var panels = useEffectDebugger.useMemoDebugger(function () {
+    return react.Children.toArray(children).map(function (child, index) {
+      return child.props.panelId || index;
+    });
+  }, [children], "PanelGroup children");
+  useEffectDebugger.useEffectDebugger(function () {
+    setExpandedPanel(activePanel !== null && activePanel !== void 0 ? activePanel : panels[0]);
+  }, [activePanel, panels], "PanelGroup setActive");
+  var changeExpanded = react.useCallback(function (collapsed, id, handler) {
+    if (!collapsed) {
+      setExpandedPanel(id);
+      onActiveChange === null || onActiveChange === void 0 || onActiveChange(id);
+    }
+    handler === null || handler === void 0 || handler(collapsed);
+    return id !== expandedPanel;
+  }, [onActiveChange, expandedPanel]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    "data-ref": "panelGroup",
+    className: classNames(Panel_module.panelGroup, "flex flex-col overflow-auto area-content p-px"),
+    children: react.Children.toArray(children).map(function (child, index) {
+      return /*#__PURE__*/react.cloneElement(child, {
+        panelId: child.props.panelId || index,
+        collapsable: true,
+        onCollapse: function onCollapse(b, id) {
+          return changeExpanded(b, id, child.props.onCollapse);
+        },
+        collapsed: expandedPanel !== (child.props.panelId || index)
+      });
+    })
+  });
+};
+
+exports.PanelGroup = PanelGroup;

package/dist/cjs/components/panel/PanelStack.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["active", "children", "className", "onPanelChange", "onBack"];
+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 PanelStack = function PanelStack(_ref) {
+  _ref.active;
+    var children = _ref.children,
+    className = _ref.className,
+    onPanelChange = _ref.onPanelChange,
+    onBack = _ref.onBack,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var stackRef = react.useRef(null);
+  var _useState = react.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    history = _useState2[0],
+    setHistory = _useState2[1];
+  var _useTransition = react.useTransition(),
+    _useTransition2 = _slicedToArray(_useTransition, 2),
+    startTransition = _useTransition2[1];
+  var panels = react.useMemo(function () {
+    return new Map(react.Children.toArray(children).map(function (child) {
+      var _child$props$panelId;
+      return child.props && [(_child$props$panelId = child.props.panelId) !== null && _child$props$panelId !== void 0 ? _child$props$panelId : "root", child];
+    }));
+  }, [children]);
+  react.useEffect(function () {
+    startTransition(function () {
+      var _history$, _stackRef$current;
+      onPanelChange === null || onPanelChange === void 0 || onPanelChange((_history$ = history[0]) !== null && _history$ !== void 0 ? _history$ : "root");
+      (_stackRef$current = stackRef.current) === null || _stackRef$current === void 0 || _stackRef$current.dispatchEvent(new Event("updatePopper", {
+        bubbles: true
+      }));
+    });
+  }, [onPanelChange, history]);
+  var goBack = react.useCallback(function () {
+    var _history$2;
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
+    if ((onBack === null || onBack === void 0 ? void 0 : onBack(history[0], (_history$2 = history[1]) !== null && _history$2 !== void 0 ? _history$2 : "root")) !== false) {
+      setHistory(history.slice(1));
+    }
+  }, [history, onBack]);
+  var currentPanel = react.useMemo(function () {
+    var _panels$get;
+    return (_panels$get = panels.get(history[0])) !== null && _panels$get !== void 0 ? _panels$get : panels.values().next().value;
+  }, [history, panels]);
+  var checkMenuClick = react.useCallback(function (e) {
+    var _e$target;
+    var panelKey = (_e$target = e.target) === null || _e$target === void 0 || (_e$target = _e$target.dataset) === null || _e$target === void 0 ? void 0 : _e$target.panel;
+    if (panelKey) {
+      if (panelKey === "back") {
+        goBack();
+      } else if (panelKey === "root") {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
+        if ((onBack === null || onBack === void 0 ? void 0 : onBack(history[0], "root")) !== false) {
+          setHistory([]);
+        }
+      } else if (panels.has(panelKey)) {
+        setHistory([panelKey].concat(_toConsumableArray(history)));
+      }
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    }
+    return true;
+  }, [goBack, history, panels, onBack]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
+    role: "none",
+    ref: stackRef,
+    className: className,
+    onClickCapture: checkMenuClick,
+    children: currentPanel && /*#__PURE__*/react.cloneElement(currentPanel, {
+      onBack: history.length > 0 ? goBack : undefined
+    })
+  }));
+};
+
+exports.PanelStack = PanelStack;

package/dist/cjs/components/progress/Progress.module.css

@@ -0,0 +1 @@
+@layer comp{.progressbar{box-shadow:inset 0 0 4px 0 theme(boxShadowColor.dimmed);height:1em;&>div:last-child{width:calc(var(--progress)*1%);&:after{color:var(--white);content:attr(data-label);font-size:.5em;inset-block:0;inset-inline-start:0;line-height:.5em;padding:.75em;position:absolute;text-align:center;vertical-align:middle;width:calc((100/var(--progress))*100%)}}.progressTrack{transition:width .5s;width:calc(var(--progress)*1%)}&>div:first-child{font-size:.5em;line-height:.5em;padding:.75em}}.progressAnimate{background-image:var(--progress-gradient);background-size:1rem 1rem;& :global{animation:progress .75s linear infinite}}}

package/dist/cjs/components/progress/ProgressBar.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var getColor = require('../../utils/getColor.js');
+var Progress_module = require('./Progress.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; }
+var SizeMap = {
+  "": "0.875rem",
+  xxs: "3px",
+  xs: "0.375rem",
+  sm: "0.625rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem"
+};
+var ProgressBar = function ProgressBar(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    size = _ref.size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "" : _ref$label,
+    animate = _ref.animate;
+  /** ***************** make sure value is between 0 and 100 *******************/
+  var actualValue = useEffectDebugger.useMemoDebugger(function () {
+    return Math.min(Math.max(value, 0), 100);
+  }, [value], "ProgressBar value");
+  var progressVar = useEffectDebugger.useMemoDebugger(function () {
+    return {
+      "--progress": actualValue
+    };
+  }, [actualValue], "ProgressBar cssVar");
+
+  /** ***************** component *******************/
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames(Progress_module.progressbar, getColor.getColorClass(color), "block bg-dimmed relative rounded font-bold overflow-hidden whitespace-nowrap"),
+    style: _objectSpread(_objectSpread({}, progressVar), {}, {
+      minHeight: SizeMap[size !== null && size !== void 0 ? size : ""],
+      fontSize: SizeMap[size !== null && size !== void 0 ? size : ""]
+    }),
+    "data-animate": animate,
+    "aria-hidden": "true",
+    children: [!["xxs", "xs", "sm"].includes(size !== null && size !== void 0 ? size : "") && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "absolute inset-0 text-center z-0 align-top",
+      children: [label, " ", utilities.Format.percent(actualValue / 100)]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames(Progress_module.progressTrack, animate && Progress_module.progressAnimate, "h-full overflow-clip bg-current relative z-0")
+    }), !["xxs", "xs", "sm"].includes(size !== null && size !== void 0 ? size : "") && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames("h-full absolute inset-0 overflow-hidden z-1"),
+      "data-label": "".concat(label, " ").concat(utilities.Format.percent(actualValue / 100))
+    })]
+  });
+};
+
+exports.ProgressBar = ProgressBar;

package/dist/cjs/components/progress/ProgressCircle.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var getColor = require('../../utils/getColor.js');
+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 SizeMap = {
+  "": "1rem",
+  sm: "0.875rem",
+  md: "1.125rem",
+  lg: "1.5rem",
+  xl: "2rem"
+};
+var ProgressCircle = function ProgressCircle(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? 0 : _ref$value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "sm" : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color;
+  /** ***************** make sure value is between 0 and 100 *******************/
+  var actualValue = useEffectDebugger.useMemoDebugger(function () {
+    return Math.min(Math.max(value, 0), 100);
+  }, [value], "ProgressCirle value");
+
+  /** ***************** calculate stroke offset by actual value *******************/
+  var strokeDashoffset = useEffectDebugger.useMemoDebugger(function () {
+    var circumfrence = Math.PI * 2 * 44;
+    return circumfrence * (1 - actualValue / 100);
+  }, [actualValue], "ProgressCirle dashOffset");
+
+  /** ***************** component *******************/
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames("inline-block w-[4em] h-[4em] text-lg relative", getColor.getColorClass(color)),
+    "aria-hidden": "true",
+    style: {
+      fontSize: SizeMap[size]
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsxs("svg", {
+      viewBox: "0 0 100 100",
+      className: classNames("absolute inset-0 w-full h-full stroke-dimmed"),
+      children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "50",
+        cy: "50",
+        r: "44",
+        strokeWidth: "12",
+        strokeOpacity: "0.25",
+        fillOpacity: "0"
+      }), /*#__PURE__*/jsxRuntime.jsx("circle", {
+        cx: "50",
+        cy: "50",
+        r: "44",
+        stroke: "currentColor",
+        strokeWidth: "12",
+        fillOpacity: "0",
+        style: {
+          transform: "rotate(-90deg)",
+          transformOrigin: "center",
+          strokeDasharray: Math.PI * 2 * 44,
+          strokeDashoffset: strokeDashoffset,
+          transition: "stroke-dashoffset 0.5s"
+        }
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "flex w-full h-full items-center justify-center select-none font-bold text-[0.625em]",
+      children: utilities.Format.percent(actualValue / 100)
+    })]
+  });
+};
+
+exports.ProgressCircle = ProgressCircle;