@react-fabric/core 1.0.0-beta.3 → 1.0.0-beta.5

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/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/chip/Chip.js

@@ -66,7 +66,7 @@ var Chip = function Chip(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
     ref: ref,
     role: "term",
-    className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm leading-none rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
+    className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
     style: styles,
     "data-variant": variant,
     "data-inner-clickable": !!onClick,
@@ -80,7 +80,7 @@ var Chip = function Chip(_ref) {
       color: iconColor,
       rtlFlip: rtlFlip
     }), children && /*#__PURE__*/jsxRuntime.jsx("label", {
-      className: classNames(Chip_module.chipLabel, "leading-none truncate"),
+      className: classNames(Chip_module.chipLabel, "truncate"),
       children: children
     }), onRemove && /*#__PURE__*/jsxRuntime.jsx("span", {
       role: "none",

package/dist/cjs/components/chip/Chip.module.css

@@ -1 +1 @@
-@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:.25em .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
+@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}

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/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,6 +119,24 @@ var Alert = function Alert(_ref) {
           }), /*#__PURE__*/jsxRuntime.jsx("p", {
             className: "area-[message] py-4",
             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/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/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/chip/Chip.js

@@ -66,7 +66,7 @@ var Chip = function Chip(_ref) {
   return /*#__PURE__*/jsxs(E, _objectSpread(_objectSpread({
     ref: ref,
     role: "term",
-    className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm leading-none rounded", rounded && "rounded-full", !!onClick && classes.clickable, disabled && classes.disabled),
+    className: classNames(classes.chip, className, color && getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded", rounded && "rounded-full", !!onClick && classes.clickable, disabled && classes.disabled),
     style: styles,
     "data-variant": variant,
     "data-inner-clickable": !!onClick,
@@ -80,7 +80,7 @@ var Chip = function Chip(_ref) {
       color: iconColor,
       rtlFlip: rtlFlip
     }), children && /*#__PURE__*/jsx("label", {
-      className: classNames(classes.chipLabel, "leading-none truncate"),
+      className: classNames(classes.chipLabel, "truncate"),
       children: children
     }), onRemove && /*#__PURE__*/jsx("span", {
       role: "none",

package/dist/esm/components/chip/Chip.module.css

@@ -1 +1 @@
-@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:.25em .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}
+@layer comp{.chip{--blank-gradient:linear-gradient(180deg,#00000005 0%,#0000 10%);background-image:var(--blank-gradient);color:theme(colors.tint.500);outline:1px solid color-mix(in lab,currentcolor 20%,var(--fabric-bg));outline-offset:-1px;&>.chipLabel{padding:0 .5em}&>.chipIcon{&+.chipLabel{margin-inline-start:-.5em}}&.clickable{background-image:var(--click-gradient);cursor:pointer;&.disabled{opacity:.5;pointer-events:none}}}}@layer var{.chip{background-color:color-mix(in lab,currentcolor 10%,var(--fabric-bg));height:unset;padding:unset;&[data-variant=outline]{box-shadow:0 0 2px color-mix(in lab,currentcolor 50%,var(--tint)) inset;outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg))}>*{color:color-mix(in lab,currentcolor 50%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 20%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 15%,var(--fabric-bg));background-image:var(--active-gradient)}&[data-dropdown-open=true]{pointer-events:none}}&[data-variant=solid]{background-color:color-mix(in lab,currentcolor 35%,var(--fabric-bg));outline-color:color-mix(in lab,currentcolor 50%,var(--fabric-bg));&>*{color:color-mix(in lab,currentcolor 5%,var(--fabric-text))}&.clickable{&:hover{background-color:color-mix(in lab,currentcolor 45%,var(--fabric-bg))}&:active,&[data-dropdown-open=true]{background-color:color-mix(in lab,currentcolor 30%,var(--fabric-bg))}}}}}

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/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';

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

@@ -1,9 +1,10 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
 import classNames from 'classnames';
-import { useMemo, useCallback, useLayoutEffect } from 'react';
+import { useState, useMemo, useCallback, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AnimationIndicator } from '../../components/animations/Animations.js';
 import { Button } from '../../components/button/Button.js';
@@ -28,9 +29,15 @@ 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 = useTranslation("core"),
     t = _useTranslation.t;
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var _useFloating = useFloating({
       open: true,
       onOpenChange: function onOpenChange() {
@@ -112,6 +119,24 @@ var Alert = function Alert(_ref) {
           }), /*#__PURE__*/jsx("p", {
             className: "area-[message] py-4",
             children: message
+          }), type === "prompt" && /*#__PURE__*/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__*/jsxs("div", {
             className: "flex gap-1 justify-center flex-nowrap pt-2 area-[actions]",
             children: [/*#__PURE__*/jsx("div", {

package/dist/esm/types/icons.js

@@ -52,6 +52,8 @@ var CoreIcons;
   _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/types/core/aside/Aside.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
-import { type ChildrenProp, type CollapseProps, type Elements, type IconProps, type TestProps } from "../../types";
-export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, TestProps {
+import { type ChildrenProp, type CollapseProps, type CssProp, type Elements, type IconProps, type TestProps } from "../../types";
+export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, CssProp, TestProps {
     /**
      * page title
      */
@@ -17,6 +17,10 @@ export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, Test
      * header class
      */
     headerClassName?: string;
+    /**
+     * header class
+     */
+    bodyClassName?: string;
     /**
      * show loading indicator
      */
@@ -49,4 +53,4 @@ export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, Test
 /**
  * Side panel
  */
-export declare const Aside: ({ children, title, icon, iconBg, iconColor, rtlFlip, headerClassName, resizeable, flyout, onFlyout, collapsed, collapsable, onCollapse, actions, loading, align, width: wd, minWidth, maxWidth, "data-testid": testId, "data-test-value": testValue, }: AsideProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Aside: ({ children, title, icon, iconBg, iconColor, rtlFlip, className, bodyClassName, headerClassName, resizeable, flyout, onFlyout, collapsed, collapsable, onCollapse, actions, loading, align, width: wd, minWidth, maxWidth, "data-testid": testId, "data-test-value": testValue, }: AsideProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/alert/Alert.d.ts

@@ -29,5 +29,13 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
      * cancel label
      */
     cancelLabel?: string;
+    /**
+     * placeholder for prompt
+     */
+    placeholder?: string;
+    /**
+     * default value for prompt
+     */
+    defaultValue?: string;
 }
-export declare const Alert: ({ title, message, color, icon, rtlFlip, actions, onClose, type, okLabel, cancelLabel, }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ title, message, color, icon, rtlFlip, actions, onClose, type, okLabel, cancelLabel, placeholder, defaultValue, }: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/modal/Modal.d.ts

@@ -44,7 +44,7 @@ export interface ModalProps extends AriaProps, TestProps, IconProps, ChildrenPro
     /**
      * close handler
      */
-    onClose: (...args: AnyObject) => void;
+    onClose?: (...args: AnyObject) => void;
     /**
      * before close handler, return false to prevent close
      */

package/dist/types/types/icons.d.ts

@@ -34,6 +34,8 @@ export declare namespace CoreIcons {
     const caretUp = "M7,15L12,10L17,15H7Z";
     const 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";
     const 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";
+    const 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";
+    const 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";
     const 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";
     const 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";
     const 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.5",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.1",
+    "@react-fabric/utilities": "^1.0.0-beta.5",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.13",
@@ -56,5 +56,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "2ce2a968f48d6ffc338f5da3a0cf67232d0c6864"
+  "gitHead": "7d4a7ed1ea9890652826bef58d01c31280d761c8"
 }

package/src/components/animations/Animations.tsx

@@ -104,7 +104,7 @@ export const AnimationIndicator = ({
 };
 
 export const AnimationBars = ({
-  color = "tint-700",
+  color = "tint",
   size = "2rem",
 }: {
   color?: ColorType | string;

package/src/components/button/Button.module.css

@@ -245,7 +245,7 @@
         background-size: 1em 1em;
 
         & :global {
-          animation: progress 750ms linear infinite;
+          animation: bgprogress 750ms linear infinite;
         }
       }
 

package/src/components/chip/Chip.module.css

@@ -31,7 +31,7 @@
     outline-offset: -1px;
 
     & > .chipLabel {
-      padding: 0.25em 0.5em;
+      padding: 0 0.5em;
     }
 
     & > .chipIcon {

package/src/components/chip/Chip.tsx

@@ -156,7 +156,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
         classes.chip,
         className,
         color && getColorClass(color),
-        "select-none inline-flex flex-nowrap items-center max-w-72 text-sm leading-none rounded",
+        "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded",
         rounded && "rounded-full",
         !!onClick && classes.clickable,
         disabled && classes.disabled,
@@ -178,9 +178,7 @@ export const Chip = <Tag extends React.ElementType = "div">({
         />
       )}
       {children && (
-        <label
-          className={classNames(classes.chipLabel, "leading-none truncate")}
-        >
+        <label className={classNames(classes.chipLabel, "truncate")}>
           {children}
         </label>
       )}

package/src/core/aside/Aside.tsx

@@ -23,12 +23,12 @@
 
 import classNames from "classnames";
 import {
-  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
+  type ReactNode,
 } from "react";
 import { Loading } from "../../components/animations/Animations";
 import { Icon } from "../../components/icon/Icon";
@@ -38,6 +38,7 @@ import { useResize } from "../../hooks/useResize";
 import {
   type ChildrenProp,
   type CollapseProps,
+  type CssProp,
   type Elements,
   type IconProps,
   type TestProps,
@@ -50,6 +51,7 @@ export interface AsideProps
   extends IconProps,
     ChildrenProp,
     CollapseProps,
+    CssProp,
     TestProps {
   /**
    * page title
@@ -67,6 +69,10 @@ export interface AsideProps
    * header class
    */
   headerClassName?: string;
+  /**
+   * header class
+   */
+  bodyClassName?: string;
 
   /**
    * show loading indicator
@@ -109,6 +115,8 @@ export const Aside = ({
   iconBg,
   iconColor,
   rtlFlip,
+  className,
+  bodyClassName,
   headerClassName,
   resizeable,
   flyout,
@@ -189,7 +197,7 @@ export const Aside = ({
 
   return (
     <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}
@@ -250,7 +258,11 @@ export const Aside = ({
       <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}
       >
         <ErrorBoundary>{children}</ErrorBoundary>

package/src/overlays/alert/Alert.tsx

@@ -31,7 +31,7 @@ import {
   useRole,
 } from "@floating-ui/react";
 import classNames from "classnames";
-import { useCallback, useLayoutEffect, useMemo } from "react";
+import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AnimationIndicator } from "../../components/animations/Animations";
 import { Button } from "../../components/button/Button";
@@ -71,6 +71,14 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
    * cancel label
    */
   cancelLabel?: string;
+  /**
+   * placeholder for prompt
+   */
+  placeholder?: string;
+  /**
+   * default value for prompt
+   */
+  defaultValue?: string;
 }
 
 export const Alert = ({
@@ -85,8 +93,11 @@ export const Alert = ({
   type,
   okLabel,
   cancelLabel,
+  placeholder,
+  defaultValue,
 }: AlertProps) => {
   const { t } = useTranslation("core");
+  const [value, setValue] = useState(defaultValue);
   const { refs, context } = useFloating({
     open: true,
     onOpenChange: () => {
@@ -181,6 +192,19 @@ export const Alert = ({
 
             <Title className="font-medium area-[title]">{title}</Title>
             <p className="area-[message] py-4">{message}</p>
+            {type === "prompt" && (
+              <input
+                value={value}
+                placeholder={placeholder}
+                className={classNames(
+                  "border rounded focus:border-primary-500",
+                )}
+                ref={(e) => e != null && setTimeout(() => e.focus(), 100)}
+                onBlur={(e) => e.target.focus()}
+                onChange={(e) => setValue(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && handleClose(value)}
+              />
+            )}
             <div className="flex gap-1 justify-center flex-nowrap pt-2 area-[actions]">
               <div
                 className="contents"

package/src/overlays/modal/Modal.tsx

@@ -95,7 +95,7 @@ export interface ModalProps
   /**
    * close handler
    */
-  onClose: (...args: AnyObject) => void;
+  onClose?: (...args: AnyObject) => void;
   /**
    * before close handler, return false to prevent close
    */

package/src/types/icons.ts

@@ -90,6 +90,11 @@ export module CoreIcons {
   export const 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";
 
+  export const 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";
+  export const 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";
+
   export const 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";
   export const colapseAll =