@react-fabric/core 1.0.0-beta.1 → 1.0.0-beta.4

package/css/index.js

@@ -190,7 +190,7 @@ module.exports = plugin(
           cardpulse: {
             "50%": { opacity: 0.5 },
           },
-          progress: {
+          bgprogress: {
             "0%": {
               "background-position-x": 0,
             },
@@ -201,7 +201,7 @@ module.exports = plugin(
         },
         animation: {
           pulse: "cardpulse 2s cubic-bezier(.4,0,.6,1) infinite",
-          progress: "progress 750ms linear infinite",
+          progress: "bgprogress 750ms linear infinite",
         },
         aspectRatio: {
           screen: "4 / 3",

package/dist/cjs/components/animations/Animations.js

@@ -58,7 +58,7 @@ var AnimationIndicator = function AnimationIndicator(_ref) {
 };
 var AnimationBars = function AnimationBars(_ref2) {
   var _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? "tint-700" : _ref2$color,
+    color = _ref2$color === void 0 ? "tint" : _ref2$color,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? "2rem" : _ref2$size;
   return /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/components/badge/Badge.js

@@ -44,10 +44,12 @@ var Badge = function Badge(_ref) {
     rtlFlip = _ref.rtlFlip,
     rest = _objectWithoutProperties(_ref, _excluded);
   var label = react.useMemo(function () {
-    if (utilities.isNumber(value) && max && value > max) {
-      return "".concat(max, "+");
+    if (!utilities.isNil(value)) {
+      if (utilities.isNumber(value) && max && value > max) {
+        return "".concat(max, "+");
+      }
+      return "".concat(value);
     }
-    return "".concat(value);
   }, [value, max]);
   var innerRef = react.useMemo(function () {
     return utilities.mergeRefs(ref, children === null || children === void 0 ? void 0 : children.props.ref);
@@ -60,7 +62,7 @@ var Badge = function Badge(_ref) {
     className: classNames(forButton ? "contents" : "relative", block ? "block" : "inline-block"),
     children: [children && /*#__PURE__*/react.cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
       ref: innerRef
-    })), /*#__PURE__*/jsxRuntime.jsxs("div", {
+    })), (!!ping || label) && /*#__PURE__*/jsxRuntime.jsxs("div", {
       "data-ref": "badge",
       "data-ping": ping,
       "data-placement": placement,

package/dist/cjs/components/button/Button.js

@@ -16,7 +16,7 @@ var Icon = require('../icon/Icon.js');
 var Button_module = require('./Button.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["as", "ref", "children", "className", "active", "color", "icon", "iconBg", "iconColor", "iconAlign", "altIcon", "rtlFlip", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "type", "hotKey", "showActionDone", "showActionDoneEvent", "tabIndex", "data-ref"];
+var _excluded = ["as", "ref", "children", "className", "active", "color", "icon", "iconBg", "iconColor", "iconAlign", "altIcon", "rtlFlip", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "stopPropagation", "type", "hotKey", "showActionDone", "showActionDoneEvent", "tabIndex", "data-ref"];
 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; }
 /**
@@ -47,6 +47,7 @@ var Button = function Button(_ref) {
     spinOnHover = _ref.spinOnHover,
     onClick = _ref.onClick,
     actionMessage = _ref.actionMessage,
+    stopPropagation = _ref.stopPropagation,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "button" : _ref$type,
     hotKey = _ref.hotKey,
@@ -68,7 +69,7 @@ var Button = function Button(_ref) {
     setActionDone = _useState4[1];
   var clickHandler = react.useCallback(function (e) {
     setBusy(true);
-    // e.stopPropagation();
+    stopPropagation && e.stopPropagation();
     var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
     void Promise.resolve(ret).then(function (b) {
       setBusy(false);
@@ -76,7 +77,7 @@ var Button = function Button(_ref) {
         setActionDone(true);
       }
     });
-  }, [onClick, disabled, actionMessage, showActionDoneEvent]);
+  }, [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation]);
 
   /** ***************** reset done state on timeout *******************/
   react.useEffect(function () {

package/dist/cjs/components/button/Button.module.css

@@ -1 +1 @@
-@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:progress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}
+@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:bgprogress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}

package/dist/cjs/components/callout/Callout.js

@@ -9,7 +9,7 @@ require('@react-fabric/utilities');
 var Icon = require('../icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose"];
+var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose", "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 Callout = function Callout(_ref) {
@@ -21,9 +21,10 @@ var Callout = function Callout(_ref) {
     icon = _ref.icon,
     border = _ref.border,
     onClose = _ref.onClose,
+    className = _ref.className,
     aria = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsxs("fieldset", _objectSpread(_objectSpread({
-    className: classNames("block rounded-capped border max-w-full relative overflow-hidden mb-4", getColor.getBgClass(color + "-50"), getColor.getColorClass(color + "-700"), getColor.getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
+    className: classNames(className, "block rounded-capped border max-w-full relative overflow-hidden mb-4", getColor.getBgClass(color + "-50"), getColor.getColorClass(color + "-700"), getColor.getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
   }, aria), {}, {
     children: [legend && /*#__PURE__*/jsxRuntime.jsx("legend", {
       className: "px-2 mx-4 font-medium",

package/dist/cjs/components/collapsable/Collapsable.js

@@ -11,11 +11,12 @@ var Icon = require('../icon/Icon.js');
 var Collapsable_module = require('./Collapsable.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
+var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
 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 Collapsable = function Collapsable(_ref) {
   var ref = _ref.ref,
+    disabled = _ref.disabled,
     className = _ref.className,
     bodyClassName = _ref.bodyClassName,
     headerClassName = _ref.headerClassName,
@@ -63,7 +64,7 @@ var Collapsable = function Collapsable(_ref) {
       ref: headRef,
       className: classNames(Collapsable_module.collapsableHead, "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
-        return setOpenState(!openState);
+        return !disabled && setOpenState(!openState);
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         size: "1.125em",

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

@@ -7,10 +7,10 @@ var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react$1 = require('react');
 var HotKeyLabel = require('../../hotkeys/HotKeyLabel.js');
+require('@babel/runtime/helpers/slicedToArray');
 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');

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

@@ -26,6 +26,8 @@ var Aside = function Aside(_ref) {
     iconBg = _ref.iconBg,
     iconColor = _ref.iconColor,
     rtlFlip = _ref.rtlFlip,
+    className = _ref.className,
+    bodyClassName = _ref.bodyClassName,
     headerClassName = _ref.headerClassName,
     resizeable = _ref.resizeable,
     flyout = _ref.flyout,
@@ -101,7 +103,7 @@ var Aside = function Aside(_ref) {
     };
   }, [width, minWidth, maxWidth]);
   return /*#__PURE__*/jsxRuntime.jsxs("aside", {
-    className: classNames(Aside_module.aside, "overflow-hidden grid"),
+    className: classNames(Aside_module.aside, className, "overflow-hidden grid"),
     "data-align": align,
     "data-flyout": peek,
     "data-collapsed": isCollapsed,
@@ -138,7 +140,7 @@ var Aside = function Aside(_ref) {
     }), /*#__PURE__*/jsxRuntime.jsx("section", {
       ref: elementRef,
       "data-ref": "asideBody",
-      className: classNames(Aside_module.asideBody, "overflow-hidden grid"),
+      className: classNames(Aside_module.asideBody, bodyClassName, "overflow-hidden grid"),
       style: isCollapsed ? widthStyles : undefined,
       children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
         children: children

package/dist/cjs/core/section/Section.js

@@ -30,11 +30,14 @@ var jsxRuntime = require('react/jsx-runtime');
 
 var Section = function Section(_ref) {
   var children = _ref.children,
-    dir = _ref.dir;
+    className = _ref.className,
+    dir = _ref.dir,
+    ref = _ref.ref;
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     "data-ref": "section",
     dir: dir,
-    className: classNames(Section_module.section, "grid area-content overflow-hidden"),
+    ref: ref,
+    className: classNames(Section_module.section, className, "grid area-content overflow-hidden"),
     children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
       children: children
     })

package/dist/cjs/index.js

@@ -44,6 +44,7 @@ var ThemeProvider = require('./core/theme/ThemeProvider.js');
 var Viewport = require('./core/viewport/Viewport.js');
 var index = require('./i18n/index.js');
 require('@babel/runtime/helpers/defineProperty');
+require('@babel/runtime/helpers/slicedToArray');
 require('@floating-ui/react');
 require('classnames');
 require('react');

package/dist/cjs/overlays/alert/Alert.js

@@ -1,9 +1,10 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var react = require('@floating-ui/react');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react$1 = require('@floating-ui/react');
 var classNames = require('classnames');
-var react$1 = require('react');
+var react = require('react');
 var reactI18next = require('react-i18next');
 var Animations = require('../../components/animations/Animations.js');
 var Button = require('../../components/button/Button.js');
@@ -28,10 +29,16 @@ var Alert = function Alert(_ref) {
     onClose = _ref.onClose,
     type = _ref.type,
     okLabel = _ref.okLabel,
-    cancelLabel = _ref.cancelLabel;
+    cancelLabel = _ref.cancelLabel,
+    placeholder = _ref.placeholder,
+    defaultValue = _ref.defaultValue;
   var _useTranslation = reactI18next.useTranslation("core"),
     t = _useTranslation.t;
-  var _useFloating = react.useFloating({
+  var _useState = react.useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useFloating = react$1.useFloating({
       open: true,
       onOpenChange: function onOpenChange() {
         handleClose(false);
@@ -39,16 +46,16 @@ var Alert = function Alert(_ref) {
     }),
     refs = _useFloating.refs,
     context = _useFloating.context;
-  var dismiss = react.useDismiss(context, {
+  var dismiss = react$1.useDismiss(context, {
     outsidePressEvent: "mousedown",
     escapeKey: true
   });
-  var role = react.useRole(context);
+  var role = react$1.useRole(context);
 
   // Merge all the interactions into prop getters
-  var _useInteractions = react.useInteractions([dismiss, role]),
+  var _useInteractions = react$1.useInteractions([dismiss, role]),
     getFloatingProps = _useInteractions.getFloatingProps;
-  var iconType = react$1.useMemo(function () {
+  var iconType = react.useMemo(function () {
     if (icon) return /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon,
       size: "md",
@@ -78,25 +85,25 @@ var Alert = function Alert(_ref) {
         });
     }
   }, [color, type, icon]);
-  var handleClose = react$1.useCallback(function (ret) {
+  var handleClose = react.useCallback(function (ret) {
     refs.floating.current && (refs.floating.current.dataset.show = "false");
     setTimeout(function () {
       onClose(ret);
     }, 250);
   }, [onClose]);
-  react$1.useLayoutEffect(function () {
+  react.useLayoutEffect(function () {
     setTimeout(function () {
       return refs.floating.current && (refs.floating.current.dataset.show = "true");
     }, 100);
   }, []);
-  return /*#__PURE__*/jsxRuntime.jsx(react.FloatingPortal, {
-    children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingOverlay, {
+  return /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingOverlay, {
       lockScroll: true,
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
       className: "bg-base/50 backdrop-blur-sm grid place-items-center",
-      children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
+      children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsxs("dialog", _objectSpread(_objectSpread({
           role: "alertdialog",
@@ -112,9 +119,24 @@ var Alert = function Alert(_ref) {
           }), /*#__PURE__*/jsxRuntime.jsx("p", {
             className: "area-[message] py-4",
             children: message
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "area-[message]",
-            children: message
+          }), type === "prompt" && /*#__PURE__*/jsxRuntime.jsx("input", {
+            value: value,
+            placeholder: placeholder,
+            className: classNames("border rounded focus:border-primary-500"),
+            ref: function ref(e) {
+              return e != null && setTimeout(function () {
+                return e.focus();
+              }, 100);
+            },
+            onBlur: function onBlur(e) {
+              return e.target.focus();
+            },
+            onChange: function onChange(e) {
+              return setValue(e.target.value);
+            },
+            onKeyDown: function onKeyDown(e) {
+              return e.key === "Enter" && handleClose(value);
+            }
           }), /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex gap-1 justify-center flex-nowrap pt-2 area-[actions]",
             children: [/*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/types/icons.js

@@ -52,6 +52,8 @@ exports.CoreIcons = void 0;
   _CoreIcons.caretUp = "M7,15L12,10L17,15H7Z";
   _CoreIcons.expand = "M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h3v3c0 0.552 0.448 1 1 1s1-0.448 1-1v-3h3c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-3c0-0.552-0.448-1-1-1s-1 0.448-1 1v3h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
   _CoreIcons.collapse = "M5 2c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h14c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879zM5 4h14c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-14c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM8 13h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-8c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
+  _CoreIcons.expandActive = "M17,13H13V17H11V13H7V11H11V7H13V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
+  _CoreIcons.collapseActive = "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
   _CoreIcons.expandAll = "M5.293 16.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM18.707 7.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
   _CoreIcons.colapseAll = "M18.707 21.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM5.293 2.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
   _CoreIcons.folderClosed = "M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z";

package/dist/cjs/typography/Abbr.js

@@ -42,6 +42,7 @@ var AbbrText = function AbbrText(_ref) {
 var Abbr = function Abbr(_ref2) {
   var children = _ref2.children,
     abbr = _ref2.abbr,
+    className = _ref2.className,
     renderer = _ref2.renderer,
     _ref2$copyContent = _ref2.copyContent,
     copyContent = _ref2$copyContent === void 0 ? "text" : _ref2$copyContent;
@@ -101,6 +102,7 @@ var Abbr = function Abbr(_ref2) {
 
   /** ***************** component *******************/
   return /*#__PURE__*/jsxRuntime.jsx("span", {
+    className: className,
     children: inner
   });
 };

package/dist/esm/components/animations/Animations.js

@@ -58,7 +58,7 @@ var AnimationIndicator = function AnimationIndicator(_ref) {
 };
 var AnimationBars = function AnimationBars(_ref2) {
   var _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? "tint-700" : _ref2$color,
+    color = _ref2$color === void 0 ? "tint" : _ref2$color,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? "2rem" : _ref2$size;
   return /*#__PURE__*/jsx("div", {

package/dist/esm/components/badge/Badge.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isObject, isNumber, mergeRefs } from '@react-fabric/utilities';
+import { isObject, isNil, isNumber, mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, cloneElement } from 'react';
 import { Icon } from '../icon/Icon.js';
@@ -44,10 +44,12 @@ var Badge = function Badge(_ref) {
     rtlFlip = _ref.rtlFlip,
     rest = _objectWithoutProperties(_ref, _excluded);
   var label = useMemo(function () {
-    if (isNumber(value) && max && value > max) {
-      return "".concat(max, "+");
+    if (!isNil(value)) {
+      if (isNumber(value) && max && value > max) {
+        return "".concat(max, "+");
+      }
+      return "".concat(value);
     }
-    return "".concat(value);
   }, [value, max]);
   var innerRef = useMemo(function () {
     return mergeRefs(ref, children === null || children === void 0 ? void 0 : children.props.ref);
@@ -60,7 +62,7 @@ var Badge = function Badge(_ref) {
     className: classNames(forButton ? "contents" : "relative", block ? "block" : "inline-block"),
     children: [children && /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
       ref: innerRef
-    })), /*#__PURE__*/jsxs("div", {
+    })), (!!ping || label) && /*#__PURE__*/jsxs("div", {
       "data-ref": "badge",
       "data-ping": ping,
       "data-placement": placement,

package/dist/esm/components/button/Button.js

@@ -16,7 +16,7 @@ import { Icon } from '../icon/Icon.js';
 import classes from './Button.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["as", "ref", "children", "className", "active", "color", "icon", "iconBg", "iconColor", "iconAlign", "altIcon", "rtlFlip", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "type", "hotKey", "showActionDone", "showActionDoneEvent", "tabIndex", "data-ref"];
+var _excluded = ["as", "ref", "children", "className", "active", "color", "icon", "iconBg", "iconColor", "iconAlign", "altIcon", "rtlFlip", "rounded", "size", "disabled", "loading", "variant", "badge", "fullWidth", "spinOnHover", "onClick", "actionMessage", "stopPropagation", "type", "hotKey", "showActionDone", "showActionDoneEvent", "tabIndex", "data-ref"];
 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; }
 /**
@@ -47,6 +47,7 @@ var Button = function Button(_ref) {
     spinOnHover = _ref.spinOnHover,
     onClick = _ref.onClick,
     actionMessage = _ref.actionMessage,
+    stopPropagation = _ref.stopPropagation,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? "button" : _ref$type,
     hotKey = _ref.hotKey,
@@ -68,7 +69,7 @@ var Button = function Button(_ref) {
     setActionDone = _useState4[1];
   var clickHandler = useCallback(function (e) {
     setBusy(true);
-    // e.stopPropagation();
+    stopPropagation && e.stopPropagation();
     var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
     void Promise.resolve(ret).then(function (b) {
       setBusy(false);
@@ -76,7 +77,7 @@ var Button = function Button(_ref) {
         setActionDone(true);
       }
     });
-  }, [onClick, disabled, actionMessage, showActionDoneEvent]);
+  }, [onClick, disabled, actionMessage, showActionDoneEvent, stopPropagation]);
 
   /** ***************** reset done state on timeout *******************/
   useEffect(function () {

package/dist/esm/components/button/Button.module.css

@@ -1 +1 @@
-@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:progress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}
+@layer comp{.buttonWrapper{--color:theme(colors.primary.500);border-radius:var(--rounding);font-size:1rem;& .button{background-color:var(--bg);background-image:var(--click-gradient);border-radius:inherit;color:var(--text);outline:1px solid var(--outline);&.spinOnHover:hover .buttonIcon{& :global{animation:spin 2s linear infinite}}&>*{pointer-events:none}&:not(:disabled) input[type=file]{pointer-events:auto;&::-webkit-file-upload-button{cursor:pointer;inset:0;position:absolute}}}& .rounded{border-radius:9999px}& .buttonLabel{line-height:1;order:1;padding:.5em 1em;&+.altIcon{margin-inline-start:-1em}}& .buttonChild{line-height:1;order:1;padding:.5em}& .buttonIcon{font-size:1.125em;padding:.3889em}& :global(.hotkey-label){align-self:center;order:3}& .altIcon{align-self:center;order:4;padding:.125em .5em}& [data-ref=badge]{align-self:center;margin-inline-end:.5em;order:2}}.buttonGroup{&>.buttonWrapper{flex:0 1 1em}&:not(.flex)+&:not(.flex){margin-inline-start:.5rem}}}@layer util{.buttonWrapper{&[data-size=xs]{font-size:.625rem}&[data-size=sm]{font-size:.875rem}&[data-size=md]{font-size:1.125rem}&[data-size=lg]{font-size:1.25rem}&[data-size=xl]{font-size:1.5rem}}.button{--bg:color-mix(in lab,var(--fabric-bg) 99%,var(--tint));--outline:color-mix(in lab,var(--bg) 90%,var(--fabric-text));--text:color-mix(in lab,var(--color) 80%,var(--fabric-text));--bg-hover:color-mix(in lab,var(--color) 18%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 25%,var(--fabric-bg));--bg-active:color-mix(in lab,var(--color) 36%,var(--fabric-bg));&[data-color=accent]{--color:theme(colors.accent.500)}&[data-color=info]{--color:theme(colors.info.500)}&[data-color=danger]{--color:theme(colors.danger.500)}&[data-color=success]{--color:theme(colors.success.500)}&[data-color=warning]{--color:theme(colors.warning.500)}&[data-variant=outline]{--outline:var(--color)}&[data-variant=solid]{--outline:var(--color);--bg:color-mix(in lab,var(--color) 96%,var(--fabric-text));--text:theme(colors.white);--bg-hover:color-mix(in lab,var(--color) 90%,var(--fabric-bg));--bg-click:color-mix(in lab,var(--color) 80%,theme(colors.black));--bg-active:color-mix(in lab,var(--color) 70%,theme(colors.black));& :global(.hotkey-label){background-color:theme(backgroundColor.dark/30%);color:theme(colors.white/70%)}}&[data-variant=link]{--bg:transparent;--outline:transparent;background-image:none;box-shadow:none}&[data-color=invert]{--bg:theme(backgroundColor.invert);--text:color-mix(in lab,var(--color) 90%,theme(textColor.invert));--bg-hover:color-mix(in lab,var(--color) 15%,theme(backgroundColor.invert));--bg-click:color-mix(in lab,var(--color) 35%,theme(backgroundColor.invert))}}.buttonIcon[data-align=start]{order:0;&+.buttonLabel[data-colored-icon=false]{margin-inline-start:-1em}}.buttonIcon[data-align=end]{order:2;&~.buttonLabel[data-colored-icon=false]{margin-inline-end:-1em}}}@layer var{.buttonWrapper{height:unset;padding:unset;&[data-disabled=true]{cursor:not-allowed;& .button{background-image:var(--active-gradient);opacity:.5;pointer-events:none}}&[data-loading=true]{cursor:wait;& .button{background-image:var(--progress-gradient);background-size:1em 1em;pointer-events:none;& :global{animation:bgprogress .75s linear infinite}}& .button:not([data-variant=solid]){background-color:color-mix(in lab,var(--color) 15%,var(--fabric-bg))}}&:global(.btn-dashed)>.button{color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}.button{--tw-ring-color:var(--color);&:hover{background-color:var(--bg-hover)}&:active{background-color:var(--bg-click);background-image:var(--active-gradient);.buttonIcon,.buttonLabel{transform:translateY(1px)}}&[data-active=true],&[data-checked=true],&[data-dropdown-open=true]{background-color:var(--bg-active);background-image:none}&[data-active=true],&[data-dropdown-open=true]{pointer-events:none}}.buttonGroup{&>.buttonWrapper{margin:0;& .button[data-variant=link]{--outline:theme(backgroundColor.base)}}&:not(.vertical){&>:not(:first-child){&:before{border-inline-start:.5px solid theme(borderColor.base);content:"";inset-block:5%;inset-inline-start:-.5px;position:absolute}}&.separator>:not(:first-child){margin-inline-start:2px;&:before{inset-inline-start:-1.5px}}&>:not(:last-child) .button{border-end-end-radius:0;border-start-end-radius:0}&>:not(:first-child) .button{border-end-start-radius:0;border-start-start-radius:0}}&.vertical{&>:not(:first-child){&:before{border-block-start:.5px solid theme(borderColor.base);content:"";inset-block-start:-.5px;inset-inline:5%;position:absolute}}&.separator>:not(:first-child){margin-block-start:1px;&:before{inset-block-start:-1px}}&>:not(:last-child) .button{border-end-end-radius:0;border-end-start-radius:0}&>:not(:first-child) .button{border-start-end-radius:0;border-start-start-radius:0}}}}

package/dist/esm/components/callout/Callout.js

@@ -9,7 +9,7 @@ import '@react-fabric/utilities';
 import { Icon } from '../icon/Icon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose"];
+var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose", "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 Callout = function Callout(_ref) {
@@ -21,9 +21,10 @@ var Callout = function Callout(_ref) {
     icon = _ref.icon,
     border = _ref.border,
     onClose = _ref.onClose,
+    className = _ref.className,
     aria = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs("fieldset", _objectSpread(_objectSpread({
-    className: classNames("block rounded-capped border max-w-full relative overflow-hidden mb-4", getBgClass(color + "-50"), getColorClass(color + "-700"), getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
+    className: classNames(className, "block rounded-capped border max-w-full relative overflow-hidden mb-4", getBgClass(color + "-50"), getColorClass(color + "-700"), getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
   }, aria), {}, {
     children: [legend && /*#__PURE__*/jsx("legend", {
       className: "px-2 mx-4 font-medium",

package/dist/esm/components/collapsable/Collapsable.js

@@ -11,11 +11,12 @@ import { Icon } from '../icon/Icon.js';
 import classes from './Collapsable.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
+var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
 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 Collapsable = function Collapsable(_ref) {
   var ref = _ref.ref,
+    disabled = _ref.disabled,
     className = _ref.className,
     bodyClassName = _ref.bodyClassName,
     headerClassName = _ref.headerClassName,
@@ -63,7 +64,7 @@ var Collapsable = function Collapsable(_ref) {
       ref: headRef,
       className: classNames(classes.collapsableHead, "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
-        return setOpenState(!openState);
+        return !disabled && setOpenState(!openState);
       },
       children: [/*#__PURE__*/jsx(Icon, {
         size: "1.125em",

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

@@ -7,10 +7,10 @@ import { iconToken } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, useCallback, Fragment } from 'react';
 import { HotKeyLabel } from '../../hotkeys/HotKeyLabel.js';
+import '@babel/runtime/helpers/slicedToArray';
 import 'react-i18next';
 import '../../hooks/useEffectDebugger.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import '@babel/runtime/helpers/slicedToArray';
 import '../../hotkeys/HotKeyWrapper.js';
 import { Tooltip } from '../../overlays/tooltip/Tooltip.js';
 import { getBadgeProps, Badge } from '../badge/Badge.js';

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

@@ -26,6 +26,8 @@ var Aside = function Aside(_ref) {
     iconBg = _ref.iconBg,
     iconColor = _ref.iconColor,
     rtlFlip = _ref.rtlFlip,
+    className = _ref.className,
+    bodyClassName = _ref.bodyClassName,
     headerClassName = _ref.headerClassName,
     resizeable = _ref.resizeable,
     flyout = _ref.flyout,
@@ -101,7 +103,7 @@ var Aside = function Aside(_ref) {
     };
   }, [width, minWidth, maxWidth]);
   return /*#__PURE__*/jsxs("aside", {
-    className: classNames(classes.aside, "overflow-hidden grid"),
+    className: classNames(classes.aside, className, "overflow-hidden grid"),
     "data-align": align,
     "data-flyout": peek,
     "data-collapsed": isCollapsed,
@@ -138,7 +140,7 @@ var Aside = function Aside(_ref) {
     }), /*#__PURE__*/jsx("section", {
       ref: elementRef,
       "data-ref": "asideBody",
-      className: classNames(classes.asideBody, "overflow-hidden grid"),
+      className: classNames(classes.asideBody, bodyClassName, "overflow-hidden grid"),
       style: isCollapsed ? widthStyles : undefined,
       children: /*#__PURE__*/jsx(ErrorBoundary, {
         children: children

package/dist/esm/core/section/Section.js

@@ -30,11 +30,14 @@ import { jsx } from 'react/jsx-runtime';
 
 var Section = function Section(_ref) {
   var children = _ref.children,
-    dir = _ref.dir;
+    className = _ref.className,
+    dir = _ref.dir,
+    ref = _ref.ref;
   return /*#__PURE__*/jsx("div", {
     "data-ref": "section",
     dir: dir,
-    className: classNames(classes.section, "grid area-content overflow-hidden"),
+    ref: ref,
+    className: classNames(classes.section, className, "grid area-content overflow-hidden"),
     children: /*#__PURE__*/jsx(ErrorBoundary, {
       children: children
     })

package/dist/esm/index.js

@@ -44,6 +44,7 @@ export { ThemeProvider } from './core/theme/ThemeProvider.js';
 export { Viewport } from './core/viewport/Viewport.js';
 export { addTranslationBundle } from './i18n/index.js';
 import '@babel/runtime/helpers/defineProperty';
+import '@babel/runtime/helpers/slicedToArray';
 import '@floating-ui/react';
 import 'classnames';
 import 'react';