@react-fabric/core 1.0.0-beta.0

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

@@ -0,0 +1,170 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var HotKey = require('../../hotkeys/HotKey.js');
+var HotKeyLabel = require('../../hotkeys/HotKeyLabel.js');
+var Tooltip = require('../../overlays/tooltip/Tooltip.js');
+var Animations = require('../animations/Animations.js');
+var Badge = require('../badge/Badge.js');
+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"];
+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; }
+/**
+ * Clickable action button
+ */
+var Button = function Button(_ref) {
+  var as = _ref.as,
+    ref = _ref.ref,
+    children = _ref.children,
+    className = _ref.className,
+    active = _ref.active,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    icon = _ref.icon,
+    iconBg = _ref.iconBg,
+    iconColor = _ref.iconColor,
+    _ref$iconAlign = _ref.iconAlign,
+    iconAlign = _ref$iconAlign === void 0 ? "start" : _ref$iconAlign,
+    altIcon = _ref.altIcon,
+    rtlFlip = _ref.rtlFlip,
+    rounded = _ref.rounded,
+    size = _ref.size,
+    disabled = _ref.disabled,
+    loading = _ref.loading,
+    variant = _ref.variant,
+    badge = _ref.badge,
+    fullWidth = _ref.fullWidth,
+    spinOnHover = _ref.spinOnHover,
+    onClick = _ref.onClick,
+    actionMessage = _ref.actionMessage,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "button" : _ref$type,
+    hotKey = _ref.hotKey,
+    showActionDone = _ref.showActionDone,
+    _ref$showActionDoneEv = _ref.showActionDoneEvent,
+    showActionDoneEvent = _ref$showActionDoneEv === void 0 ? "click" : _ref$showActionDoneEv,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+    dataRef = _ref["data-ref"],
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var refEl = react.useRef(null);
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    busy = _useState2[0],
+    setBusy = _useState2[1];
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    actionDone = _useState4[0],
+    setActionDone = _useState4[1];
+  var clickHandler = react.useCallback(function (e) {
+    setBusy(true);
+    // e.stopPropagation();
+    var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    void Promise.resolve(ret).then(function (b) {
+      setBusy(false);
+      if (b !== false && actionMessage && showActionDoneEvent === "click") {
+        setActionDone(true);
+      }
+    });
+  }, [onClick, disabled, actionMessage, showActionDoneEvent]);
+
+  /** ***************** reset done state on timeout *******************/
+  react.useEffect(function () {
+    actionMessage && showActionDone && setActionDone(true);
+  }, [showActionDone, actionMessage]);
+  useEffectDebugger.useEffectDebugger(function () {
+    if (actionDone) {
+      var timer = setTimeout(function () {
+        return setActionDone(false);
+      }, 2000);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [actionDone], "ActionButton done handler");
+  var TooltipWrapper = react.useMemo(function () {
+    return actionMessage ? Tooltip.Tooltip : react.Fragment;
+  }, [actionMessage, actionDone]);
+  var tooltipProps = react.useMemo(function () {
+    if (actionDone && actionMessage) {
+      return {
+        content: actionMessage,
+        placement: "top",
+        color: color,
+        open: true
+      };
+    }
+  }, [actionDone, actionMessage, color]);
+  var badgeProps = react.useMemo(function () {
+    return Badge.getBadgeProps(badge);
+  }, [badge]);
+  var E = as !== null && as !== void 0 ? as : "button";
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classNames(Button_module.buttonWrapper, className, "relative align-text-top select-none focus-within:z-1", fullWidth ? "block w-full" : "inline-block"),
+    "data-ref": dataRef !== null && dataRef !== void 0 ? dataRef : "button",
+    "data-size": size,
+    "data-loading": busy || loading,
+    "data-disabled": disabled,
+    children: [hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKey.HotKey, {
+      keyCombo: hotKey,
+      handler: function handler() {
+        var _refEl$current;
+        return !disabled && ((_refEl$current = refEl.current) === null || _refEl$current === void 0 ? void 0 : _refEl$current.click());
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
+        ref: utilities.mergeRefs(ref, refEl),
+        role: "button",
+        className: classNames(Button_module.button, "pointer-events-auto cursor-pointer select-none flex flex-nowrap w-full h-full items-center border-0 -outline-offset-1 justify-center max-w-72 p-0 font-sans font-medium appearance-none", "focus-visible:ring-2 focus-visible:ring-offset-2 buttonInner", fullWidth && "max-w-full w-full", rounded && "rounded-full", spinOnHover && Button_module.spinOnHover),
+        type: type,
+        disabled: disabled,
+        tabIndex: tabIndex,
+        "data-inner-clickable": true,
+        onClick: clickHandler,
+        "data-color": color,
+        "data-active": active,
+        "data-variant": variant
+      }, aria), {}, {
+        children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          className: Button_module.buttonIcon,
+          icon: icon,
+          bg: iconBg,
+          color: iconColor,
+          rtlFlip: rtlFlip,
+          "data-align": iconAlign
+        }), /*#__PURE__*/react.isValidElement(children) && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: Button_module.buttonChild,
+          children: children
+        }), utilities.isString(children) && /*#__PURE__*/jsxRuntime.jsx("label", {
+          className: classNames(Button_module.buttonLabel, "truncate"),
+          "data-colored-icon": !!iconBg,
+          children: children
+        }), !utilities.isNil(badge) && /*#__PURE__*/jsxRuntime.jsx(Badge.Badge, _objectSpread({}, badgeProps)), hotKey && /*#__PURE__*/jsxRuntime.jsx(HotKeyLabel.HotKeyLabel, {
+          keyCombo: hotKey
+        }), altIcon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          className: Button_module.altIcon,
+          icon: altIcon,
+          rtlFlip: true
+        })]
+      }))
+    })), actionDone && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames("absolute inset-0 overflow-hidden flex justify-center items-center", "bg-".concat(color, "-300"), rounded ? "rounded-full" : "rounded"),
+      children: /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
+        type: "check",
+        color: color
+      })
+    })]
+  });
+};
+
+exports.Button = Button;

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

@@ -0,0 +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}}}}

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

@@ -0,0 +1,41 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var react = require('react');
+var Button_module = require('./Button.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["vertical", "className", "children", "variant", "rounded", "disabled", "fullWidth", "color", "size"];
+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 ButtonGroup = function ButtonGroup(_ref) {
+  var vertical = _ref.vertical,
+    className = _ref.className,
+    children = _ref.children,
+    variant = _ref.variant,
+    rounded = _ref.rounded,
+    disabled = _ref.disabled,
+    fullWidth = _ref.fullWidth,
+    color = _ref.color,
+    size = _ref.size,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    "data-ref": "buttonGroup",
+    className: classNames(Button_module.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle rounded", vertical && Button_module.vertical, vertical && "flex-col items-stretch")
+  }, aria), {}, {
+    children: react.Children.map(children, function (child) {
+      return /*#__PURE__*/react.cloneElement(child, _objectSpread({
+        color: color,
+        size: size,
+        variant: variant,
+        disabled: disabled,
+        rounded: rounded,
+        fullWidth: fullWidth
+      }, child.props));
+    })
+  }));
+};
+
+exports.ButtonGroup = ButtonGroup;

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

@@ -0,0 +1,166 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var react$1 = require('@floating-ui/react');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var reactI18next = require('react-i18next');
+var Button = require('./Button.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["ref", "message", "color", "okLabel", "cancelLabel", "onClick", "loading", "actionMessage", "showActionDone", "showActionDoneEvent"],
+  _excluded2 = ["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; }
+/**
+ * Button with confirmation dropdown
+ */
+var ConfirmButton = function ConfirmButton(_ref) {
+  var ref = _ref.ref,
+    message = _ref.message,
+    color = _ref.color,
+    okLabel = _ref.okLabel,
+    cancelLabel = _ref.cancelLabel,
+    onClick = _ref.onClick,
+    loading = _ref.loading,
+    actionMessage = _ref.actionMessage,
+    showActionDone = _ref.showActionDone,
+    _ref$showActionDoneEv = _ref.showActionDoneEvent,
+    showActionDoneEvent = _ref$showActionDoneEv === void 0 ? "click" : _ref$showActionDoneEv,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = reactI18next.useTranslation("core"),
+    t = _useTranslation.t;
+  var arrowRef = react.useRef(null);
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    busy = _useState4[0],
+    setBusy = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    actionDone = _useState6[0],
+    setActionDone = _useState6[1];
+  var clickHandler = react.useCallback(function (e) {
+    setBusy(e);
+    var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    if (e) {
+      void Promise.resolve(ret).then(function (b) {
+        setBusy(false);
+        if (b !== false && actionMessage && showActionDoneEvent === "click") {
+          setActionDone(true);
+        }
+      });
+    }
+  }, [onClick, actionMessage, showActionDoneEvent]);
+  react.useEffect(function () {
+    if (actionDone) {
+      var timer = setTimeout(function () {
+        return setActionDone(false);
+      }, 2000);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+  }, [actionDone]);
+  var _useFloating = react$1.useFloating({
+      open: isOpen,
+      onOpenChange: function onOpenChange(nextOpen, _, reason) {
+        setIsOpen(nextOpen);
+        if (reason === "escape-key") {
+          clickHandler(false);
+        }
+      },
+      strategy: "fixed",
+      placement: "bottom",
+      whileElementsMounted: react$1.autoUpdate,
+      middleware: [react$1.shift({
+        padding: 8
+      }), react$1.flip(), react$1.offset(9), react$1.arrow({
+        element: arrowRef
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var click = react$1.useClick(context, {
+    enabled: !props.disabled
+  });
+  var dismiss = react$1.useDismiss(context);
+  var _useInteractions = react$1.useInteractions([dismiss, click]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
+  var ButtonWrapper = react.useCallback(function (_ref2) {
+    var ref = _ref2.ref,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+    return /*#__PURE__*/jsxRuntime.jsx(Button.Button, _objectSpread({
+      ref: ref
+    }, props));
+  }, []);
+  var innerRef = react.useMemo(function () {
+    return utilities.mergeRefs(ref, refs.setReference);
+  }, [ref, refs.setReference]);
+  return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(ButtonWrapper, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
+      color: color,
+      loading: busy || loading,
+      showActionDone: actionDone || showActionDone,
+      showActionDoneEvent: "manual",
+      actionMessage: actionMessage,
+      ref: innerRef
+    }, getReferenceProps()), {}, {
+      "data-dropdown-open": isOpen
+    })), isOpen && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
+        modal: true,
+        context: context,
+        children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+          "data-color": color,
+          className: classNames("select-none not-italic rounded-capped shadow-lg outline outline-muted bg-base"),
+          ref: refs.setFloating,
+          style: floatingStyles
+        }, getFloatingProps()), {}, {
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "font-medium ",
+            children: [/*#__PURE__*/jsxRuntime.jsx("p", {
+              className: "py-2 px-4",
+              children: message
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: "flex justify-end py-2 px-4 gap-2",
+              children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+                size: "sm",
+                variant: "link",
+                color: color,
+                onClick: function onClick() {
+                  return [clickHandler(false), setIsOpen(false)];
+                },
+                children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : t("action.cancel")
+              }), /*#__PURE__*/jsxRuntime.jsx(Button.Button, {
+                size: "sm",
+                variant: "solid",
+                color: color,
+                autoFocus: true,
+                onClick: function onClick() {
+                  return [clickHandler(true), setIsOpen(false)];
+                },
+                children: okLabel !== null && okLabel !== void 0 ? okLabel : t("action.ok")
+              })]
+            })]
+          }), /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingArrow, {
+            ref: arrowRef,
+            context: context,
+            strokeWidth: 0.5,
+            className: "fill-base stroke-muted"
+          })]
+        }))
+      })
+    })]
+  });
+};
+
+exports.ConfirmButton = ConfirmButton;

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

@@ -0,0 +1,68 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var useControlledValue = require('../../hooks/useControlledValue.js');
+var Button_module = require('./Button.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["vertical", "className", "children", "variant", "rounded", "disabled", "fullWidth", "color", "size", "value", "onChange"];
+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 ToggleButtonGroup = function ToggleButtonGroup(_ref) {
+  var vertical = _ref.vertical,
+    className = _ref.className,
+    children = _ref.children,
+    variant = _ref.variant,
+    rounded = _ref.rounded,
+    disabled = _ref.disabled,
+    fullWidth = _ref.fullWidth,
+    color = _ref.color,
+    size = _ref.size,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var isMultiple = react.useMemo(function () {
+    return utilities.isArray(value);
+  }, [value]);
+  var _useControlledValue = useControlledValue.useControlledValue(value, utilities.isArray(value) ? utilities.EMPTY_ARRAY : ""),
+    currentValue = _useControlledValue.currentValue,
+    updateValue = _useControlledValue.updateValue;
+  var clickHandler = react.useCallback(function (cb) {
+    return function (e) {
+      var newValue = "".concat(e.currentTarget.dataset.value);
+      if (utilities.isArray(currentValue)) {
+        if (currentValue.includes(newValue)) newValue = currentValue.filter(function (v) {
+          return v !== newValue;
+        });else newValue = [].concat(_toConsumableArray(currentValue), [newValue]);
+      }
+      updateValue(newValue);
+      onChange === null || onChange === void 0 || onChange(newValue);
+      cb === null || cb === void 0 || cb(e);
+    };
+  }, [currentValue, onChange]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
+    className: classNames(Button_module.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle", vertical && Button_module.vertical, vertical && "flex-col")
+  }, aria), {}, {
+    children: react.Children.map(children, function (child) {
+      return /*#__PURE__*/react.cloneElement(child, _objectSpread(_objectSpread({
+        color: color,
+        size: size,
+        variant: variant,
+        disabled: disabled,
+        rounded: rounded,
+        fullWidth: fullWidth
+      }, child.props), {}, {
+        onClick: clickHandler(child.props.onClick),
+        "data-value": child.props.value,
+        "data-checked": isMultiple ? currentValue.includes(child.props.value) : currentValue === child.props.value
+      }));
+    })
+  }));
+};
+
+exports.ToggleButtonGroup = ToggleButtonGroup;

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

@@ -0,0 +1,54 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var icons = require('../../types/icons.js');
+var getColor = require('../../utils/getColor.js');
+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"];
+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) {
+  var children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "tint" : _ref$color,
+    legend = _ref.legend,
+    title = _ref.title,
+    icon = _ref.icon,
+    border = _ref.border,
+    onClose = _ref.onClose,
+    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")
+  }, aria), {}, {
+    children: [legend && /*#__PURE__*/jsxRuntime.jsx("legend", {
+      className: "px-2 mx-4 font-medium",
+      children: legend
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classNames("break-words whitespace-break-spaces p-2"),
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-nowrap items-center text-xl pe-4 gap-2 mb-4 empty:mb-0",
+        children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+          icon: icon
+        }), title && /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "flex-1",
+          children: title
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "pe-4",
+        children: children
+      })]
+    }), onClose && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+      size: "md",
+      className: classNames("absolute end-2", legend ? "top-0" : "top-2"),
+      icon: icons.CoreIcons.close,
+      onClick: onClose
+    })]
+  }));
+};
+
+exports.Callout = Callout;

package/dist/cjs/components/card/Card.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var react = require('react');
+var ErrorBoundary = require('../../core/boundary/ErrorBoundary.js');
+var HeadFoot = require('../../core/headfoot/HeadFoot.js');
+require('@react-fabric/utilities');
+var nodeCheck = require('../../utils/nodeCheck.js');
+var Card_module = require('./Card.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "flex", "draggable", "dragKey", "dragData"];
+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 Card = function Card(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    bodyClassName = _ref.bodyClassName,
+    selected = _ref.selected,
+    selectedRibbon = _ref.selectedRibbon,
+    onClick = _ref.onClick,
+    flex = _ref.flex,
+    draggable = _ref.draggable,
+    dragKey = _ref.dragKey,
+    dragData = _ref.dragData,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useMemo = react.useMemo(function () {
+      return react.Children.toArray(children).reduce(function (ret, node) {
+        nodeCheck.nodeCheck(node, HeadFoot.Header) ? ret[0].push(node) : nodeCheck.nodeCheck(node, HeadFoot.Footer) ? ret[2].push(node) : ret[1].push(node);
+        return ret;
+      }, [[], [], []]);
+    }, [children]),
+    _useMemo2 = _slicedToArray(_useMemo, 3),
+    header = _useMemo2[0],
+    body = _useMemo2[1],
+    footer = _useMemo2[2];
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classNames(Card_module.cardWrapper, "rounded-capped relative grid", flex && "flex-1", selected && selectedRibbon && Card_module.selected, selected && "outline outline-2 outline-accent-500 outline-offset-2"),
+    children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+        className: classNames(Card_module.card, className, "rounded-capped flex flex-col flex-nowrap overflow-hidden", onClick && Card_module.clickable),
+        draggable: draggable,
+        onDragStart: !draggable ? undefined : function (e) {
+          var _e$dataTransfer;
+          return dragKey && ((_e$dataTransfer = e.dataTransfer) === null || _e$dataTransfer === void 0 ? void 0 : _e$dataTransfer.setData(dragKey, JSON.stringify(dragData)));
+        }
+      }, aria), {}, {
+        children: [header, /*#__PURE__*/jsxRuntime.jsx("div", {
+          role: "none",
+          className: classNames(Card_module.cardBody, bodyClassName, "flex-1"),
+          onClick: onClick,
+          children: body
+        }), footer]
+      }))
+    })
+  });
+};
+
+exports.Card = Card;

package/dist/cjs/components/card/Card.module.css

@@ -0,0 +1 @@
+@layer comp{.cardWrapper.selected{&:before{border-bottom:1rem solid transparent;border-inline-end:1rem solid transparent;border-inline-start:1rem solid theme(colors.accent.500);border-start-start-radius:var(--rounding-cap);border-top:1rem solid theme(colors.accent.500);content:""}&:after,&:before{inset-inline-start:-4px;position:absolute;top:-4px;z-index:5}&:after{color:theme(colors.white);content:"✓";line-height:1;padding:4px}}.card{background-color:var(--fabric-bg);box-shadow:0 0 0 1px theme(borderColor.muted);&>*{background-color:transparent}& .cardCover{&.dark>.cardCoverContent,&.inheritScheme:has([data-colorset=dark])>.cardCoverContent{background-image:linear-gradient(180deg,#0000 0,#0006);color:var(--white);text-shadow:0 0 2px var(--black)}&.inheritScheme:has([data-colorset=light])>.cardCoverContent,&.light>.cardCoverContent{background-image:linear-gradient(180deg,#fff0 0,#fff6);color:var(--black);text-shadow:0 0 2px var(--white)}}& .cardBody{padding:1rem}&.clickable{box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 2px 0 var(--fabric-shadow);transition:box-shadow 0ms;&:has(.cardBody:hover):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed),0 1px 4px 0 var(--fabric-shadow),0 8px 16px 0 color-mix(in lab,var(--fabric-shadow) 35%,#0000);transition-delay:.15s}&:has(.cardBody:active):not(:has([data-inner-clickable=true]:hover)){box-shadow:0 0 0 1px theme(borderColor.dimmed);transform:translateY(1px);transition-delay:0ms}& .cardBody{cursor:pointer;&:after{background-image:linear-gradient(175deg,hsla(0,0%,100%,.05),transparent 18%,transparent 72%,rgb(0 0 0/5%));content:"";inset:0;pointer-events:none;position:absolute;z-index:5}}}}}@layer util{.card{& .cardBody{&>*{background-color:transparent;grid-area:unset}}& .cardCover{&>[data-ref=image],&>[data-ref=video]{inset:0;position:absolute;z-index:0}& .cardCoverContent{&>*{flex:0 0 auto}}}}}

package/dist/cjs/components/card/CardCover.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var react = require('react');
+require('@react-fabric/utilities');
+var nodeCheck = require('../../utils/nodeCheck.js');
+var Media = require('../media/Media.js');
+var Card_module = require('./Card.module.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["className", "children", "height", "justify", "colorScheme"];
+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 CardCover = function CardCover(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 120 : _ref$height,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? "end" : _ref$justify,
+    colorScheme = _ref.colorScheme,
+    aria = _objectWithoutProperties(_ref, _excluded);
+  var _useMemo = react.useMemo(function () {
+      return react.Children.toArray(children).reduce(function (ret, node) {
+        nodeCheck.nodeCheck(node, Media.Image, Media.Video) ? ret[0].push(node) : ret[1].push(node);
+        return ret;
+      }, [[], []]);
+    }, [children]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    media = _useMemo2[0],
+    body = _useMemo2[1];
+  return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
+    style: {
+      height: height
+    },
+    className: classNames(Card_module.cardCover, Card_module[colorScheme !== null && colorScheme !== void 0 ? colorScheme : "inheritScheme"], "relative z-0")
+  }, aria), {}, {
+    children: [media, /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classNames(Card_module.cardCoverContent, "relative pointer-events-none z-1 flex flex-col flex-nowrap p-4 h-full", className, "justify-".concat(justify), className),
+      children: body
+    })]
+  }));
+};
+
+exports.CardCover = CardCover;