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

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

@@ -5,34 +5,47 @@ 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", "placement", "actionMessage", "showActionDone", "showActionDoneEvent"],
-  _excluded2 = ["ref"];
+var _excluded = ["as", "ref", "message", "color", "okLabel", "cancelLabel", "showActionDoneEvent", "onClick", "loading", "placement"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Button with confirmation dropdown
+ * A button that shows a confirmation dialog when clicked, allowing the user to confirm or cancel an action.
+ * It supports custom messages, labels, and loading states.
+ * This component is useful for actions that require user confirmation, such as deleting items or submitting forms.
+ * It uses the Floating UI library to manage the positioning of the confirmation dialog, ensuring it appears correctly relative to the button.
+ * It also supports custom placement of the dialog, and can display an action message when the action is completed.
+ *
+ * @example
+ * ```jsx
+ * <ConfirmButton
+ *   message="Are you sure you want to delete this item?"
+ *   onClick={(confirmed) => {
+ *     if (confirmed) {
+ *       // Perform action
+ *     }
+ *   }}
+ * />
+ * ```
  */
-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,
-    _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
-    actionMessage = _ref.actionMessage,
-    showActionDone = _ref.showActionDone,
-    _ref$showActionDoneEv = _ref.showActionDoneEvent,
-    showActionDoneEvent = _ref$showActionDoneEv === void 0 ? "click" : _ref$showActionDoneEv,
-    props = _objectWithoutProperties(_ref, _excluded);
+var ConfirmButton = function ConfirmButton(props) {
+  var _refs$domReference$cu, _refs$domReference$cu2;
+  var as = props.as,
+    ref = props.ref,
+    message = props.message,
+    color = props.color,
+    okLabel = props.okLabel,
+    cancelLabel = props.cancelLabel,
+    showActionDoneEvent = props.showActionDoneEvent,
+    onClick = props.onClick,
+    loading = props.loading,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? "bottom" : _props$placement,
+    buttonProps = _objectWithoutProperties(props, _excluded);
   var _useTranslation = reactI18next.useTranslation("core"),
     t = _useTranslation.t;
   var arrowRef = react.useRef(null);
@@ -48,18 +61,18 @@ var ConfirmButton = function ConfirmButton(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     actionDone = _useState6[0],
     setActionDone = _useState6[1];
-  var clickHandler = react.useCallback(function (e) {
+  var clickHandler = function clickHandler(e) {
     setBusy(e);
     var ret = onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    if (e) {
+    if (ret) {
       void Promise.resolve(ret).then(function (b) {
         setBusy(false);
-        if (b !== false && actionMessage && showActionDoneEvent === "click") {
+        if (b !== false && showActionDoneEvent === "click") {
           setActionDone(true);
         }
       });
     }
-  }, [onClick, actionMessage, showActionDoneEvent]);
+  };
   react.useEffect(function () {
     if (actionDone) {
       var timer = setTimeout(function () {
@@ -97,46 +110,46 @@ var ConfirmButton = function ConfirmButton(_ref) {
   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 utilities.mergeRefs(ref, refs.reference);
+  }, [ref, refs.reference]);
   return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(ButtonWrapper, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Button.Button, _objectSpread(_objectSpread(_objectSpread({
+      as: as
+    }, buttonProps), {}, {
       color: color,
       loading: busy || loading,
-      showActionDone: actionDone || showActionDone,
+      showActionDone: actionDone,
       showActionDoneEvent: "manual",
-      actionMessage: actionMessage,
       ref: innerRef
     }, getReferenceProps()), {}, {
       "data-dropdown-open": isOpen
     })), isOpen && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      root: (_refs$domReference$cu = (_refs$domReference$cu2 = refs.domReference.current) === null || _refs$domReference$cu2 === void 0 ? void 0 : _refs$domReference$cu2.closest(".theme-base")) !== null && _refs$domReference$cu !== void 0 ? _refs$domReference$cu : undefined,
       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
+          className: utilities.cn("select-none not-italic rounded-capped shadow-lg outline outline-muted bg-default"),
+          ref: function ref(el) {
+            return refs.setFloating(el);
+          },
+          style: _objectSpread({
+            zIndex: "var(--z-popover)"
+          }, floatingStyles)
         }, getFloatingProps()), {}, {
           children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "font-medium ",
             children: [/*#__PURE__*/jsxRuntime.jsx("p", {
               className: "py-2 px-4",
+              "data-ref": "confirmMessage",
               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",
+                "data-ref": "confirmCancel",
                 color: color,
                 onClick: function onClick() {
                   return [clickHandler(false), setIsOpen(false)];
@@ -147,6 +160,7 @@ var ConfirmButton = function ConfirmButton(_ref) {
                 variant: "solid",
                 color: color,
                 autoFocus: true,
+                "data-ref": "confirmOk",
                 onClick: function onClick() {
                   return [clickHandler(true), setIsOpen(false)];
                 },
@@ -157,7 +171,7 @@ var ConfirmButton = function ConfirmButton(_ref) {
             ref: arrowRef,
             context: context,
             strokeWidth: 0.5,
-            className: "fill-base stroke-muted"
+            className: "fill-default stroke-muted"
           })]
         }))
       })

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

@@ -4,16 +4,57 @@ 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 cloneElement = require('../../utils/cloneElement.js');
 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) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * A composite component that renders a group of toggle buttons with shared styling
+ * and selection behavior.
+ *
+ * Automatically switches between single-select (radio-like) and multi-select
+ * (checkbox-like) modes based on the `value` prop: a scalar value enables radio
+ * mode (one active button), while an array enables checkbox mode (multiple active).
+ *
+ * All child buttons receive consistent `color`, `size`, `variant`, `disabled`,
+ * and `rounded` props, while each button's own `value` and `onClick` are preserved
+ * and extended with the group's selection logic.
+ *
+ * @example
+ * ```jsx
+ * // Single-select (radio-like)
+ * <ToggleButtonGroup
+ *   value={selected}
+ *   onChange={(v) => setSelected(v)}
+ *   variant="outlined"
+ *   color="primary"
+ *   size="md"
+ * >
+ *   <Button value="a">A</Button>
+ *   <Button value="b">B</Button>
+ * </ToggleButtonGroup>
+ *
+ * // Multi-select (checkbox-like)
+ * <ToggleButtonGroup
+ *   value={selected}
+ *   onChange={(v) => setSelected(v)}
+ *   variant="outlined"
+ *   color="primary"
+ *   rounded
+ *   fullWidth
+ * >
+ *   <Button value="a">A</Button>
+ *   <Button value="b">B</Button>
+ *   <Button value="c">C</Button>
+ * </ToggleButtonGroup>
+ * ```
+ */
+function ToggleButtonGroup(_ref) {
+  var _cloneChildren;
   var vertical = _ref.vertical,
     className = _ref.className,
     children = _ref.children,
@@ -25,44 +66,55 @@ var ToggleButtonGroup = function ToggleButtonGroup(_ref) {
     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 : ""),
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Determine selection mode: array value = multi-select, scalar = single-select
+  var isMultiple = utilities.isArray(value);
+  // Controlled value with empty array / null as defaults for multi / single mode
+  var _useControlledValue = useControlledValue.useControlledValue(value, isMultiple ? utilities.EMPTY_ARRAY : undefined),
     currentValue = _useControlledValue.currentValue,
     updateValue = _useControlledValue.updateValue;
-  var clickHandler = react.useCallback(function (cb) {
+
+  // Toggle handler: toggles the child's value in/out of the selected set
+  var clickHandler = function clickHandler(childValue, cb) {
     return function (e) {
-      var newValue = "".concat(e.currentTarget.dataset.value);
+      var newValue;
       if (utilities.isArray(currentValue)) {
-        if (currentValue.includes(newValue)) newValue = currentValue.filter(function (v) {
-          return v !== newValue;
-        });else newValue = [].concat(_toConsumableArray(currentValue), [newValue]);
+        // Multi-select: remove if already selected, otherwise add
+        if (currentValue.includes(childValue)) newValue = currentValue.filter(function (v) {
+          return v !== childValue;
+        });else newValue = [].concat(_toConsumableArray(currentValue), [childValue]);
+      } else {
+        // Single-select: toggle to this value (replaces previous)
+        newValue = childValue;
       }
       updateValue(newValue);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
       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
-      }));
+  };
+  return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: utilities.cn("fabric-buttonGroup", "flex-nowrap align-middle is-vertical:flex-col", className, fullWidth ? "flex" : "inline-flex"),
+    "data-vertical": vertical,
+    children: (_cloneChildren = cloneElement.cloneChildren(children)) === null || _cloneChildren === void 0 ? void 0 : _cloneChildren.map(function (child) {
+      if (/*#__PURE__*/react.isValidElement(child)) {
+        var childEl = child;
+        return /*#__PURE__*/react.cloneElement(childEl, _objectSpread(_objectSpread({
+          color: color,
+          size: size,
+          variant: variant,
+          disabled: disabled,
+          rounded: rounded
+        }, childEl.props), {}, {
+          activeClickable: isMultiple,
+          onClick: clickHandler(childEl.props.value, childEl.props.onClick),
+          // Check if this button is currently active based on selection mode
+          active: utilities.isArray(currentValue) ? currentValue === null || currentValue === void 0 ? void 0 : currentValue.includes(childEl.props.value) : currentValue === childEl.props.value
+        }));
+      }
+      return child;
     })
   }));
-};
+}
 
 exports.ToggleButtonGroup = ToggleButtonGroup;

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

@@ -2,54 +2,85 @@
 
 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 utilities = require('@react-fabric/utilities');
+require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var getIconProps = require('../../utils/getIconProps.js');
+var Icon = require('../icon/Icon.js');
 
-var _excluded = ["children", "color", "legend", "title", "icon", "border", "onClose", "className"];
+var _excluded = ["children", "color", "classNames", "legend", "title", "icon", "border", "onClose", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Callout = function Callout(_ref) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * A component that displays a callout box with an optional title, icon, and legend.
+ * It can be used to highlight important information, warnings, or notices.
+ * The callout can be styled with different colors and border styles, and it supports a close action.
+ * This component is useful for drawing attention to specific content within a page or application,
+ * such as alerts, notifications, or important messages.
+ *
+ * @example
+ * ```jsx
+ * <Callout
+ *   color="primary"
+ *   legend="Important Notice"
+ *   title="Attention Required"
+ *   icon="info"
+ *   onClose={() => console.log("Callout closed")}
+ * >
+ *   This is an important message that requires your attention.
+ * </Callout>
+ * // Renders a callout box with a primary color, an icon, a title, and a close button.
+ * ```
+ */
+function Callout(_ref) {
   var children = _ref.children,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "tint" : _ref$color,
+    color = _ref$color === void 0 ? "default" : _ref$color,
+    classNames = _ref.classNames,
     legend = _ref.legend,
     title = _ref.title,
     icon = _ref.icon,
-    border = _ref.border,
+    _ref$border = _ref.border,
+    border = _ref$border === void 0 ? "solid" : _ref$border,
     onClose = _ref.onClose,
     className = _ref.className,
-    aria = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsxs("fieldset", _objectSpread(_objectSpread({
-    className: classNames(className, "block rounded-capped border max-w-full relative overflow-hidden mb-4", getColor.getBgClass(color + "-50"), getColor.getColorClass(color + "-700"), getColor.getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
-  }, aria), {}, {
+    className: utilities.cn("fabric-callout block rounded-capped  max-w-full relative overflow-hidden", className, border === "dashed" && "border-dashed", border === "dotted" && "border-dotted", border != "solid" ? "border-[1.5px]" : "border"),
+    style: {
+      "--color": "var(--color-".concat(color, ")")
+    }
+  }, props), {}, {
     children: [legend && /*#__PURE__*/jsxRuntime.jsx("legend", {
-      className: "px-2 mx-4 font-medium",
+      className: utilities.cn("fabric-calloutLegend px-2 mx-4 font-medium", classNames === null || classNames === void 0 ? void 0 : classNames.legend),
+      "data-ref": "calloutLegend",
       children: legend
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames("break-words whitespace-break-spaces p-2"),
+      className: utilities.cn("fabric-calloutContent 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", {
+        children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread(_objectSpread({}, getIconProps.getIconProps(icon)), {}, {
+          "data-ref": "calloutIcon"
+        })), title && /*#__PURE__*/jsxRuntime.jsx("p", {
           className: "flex-1",
+          "data-ref": "calloutTitle",
           children: title
         })]
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "pe-4",
+        className: "fabric-calloutMessage 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
+    }), onClose && /*#__PURE__*/jsxRuntime.jsx("div", {
+      role: "none",
+      className: utilities.cn("absolute inset-e-2 text-tint-500 hover:text-tint-700 cursor-pointer", legend ? "top-0" : "top-2"),
+      "data-ref": "calloutClose",
+      onClick: onClose,
+      children: /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
+        size: "md",
+        icon: "icon-[mdi--close]"
+      })
     })]
   }));
-};
+}
 
 exports.Callout = Callout;

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

@@ -1,64 +1,112 @@
 '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 utilities = require('@react-fabric/utilities');
 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 StyleEffect = require('../effect/StyleEffect.js');
+var Titlebar = require('../titlebar/Titlebar.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "className", "bodyClassName", "selected", "selectedRibbon", "onClick", "flex", "draggable", "dragKey", "dragData", "ref"];
+var _excluded = ["children", "className", "classNames", "selected", "selectedRibbon", "onClick", "onDragStart", "hideEffect", "draggable", "dragKey", "dragData", "ref", "as", "height", "width", "minHeight", "minWidth", "maxHeight", "maxWidth", "title", "icon", "actions"];
 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) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * A component that displays a card with a header, body, and footer. It can be used to display content in a structured format.
+ * It supports various features such as click handling, drag-and-drop functionality, and customizable styles.
+ * The Card component is designed to be flexible and can be used in various contexts, such as displaying user profiles, product information, or any other content that benefits from a card layout.
+ * The component accepts children that can include a Header, body content, and a Footer.
+ * It also supports additional properties for styling, accessibility, and interaction.
+ * It can be styled with custom CSS classes and supports features like selection indication and drag-and-drop functionality.
+ *
+ * @example
+ * ```jsx
+ * <Card
+ *   className="my-custom-class"
+ *   classNames={{ body: "my-body-class" }}
+ *   selected={true}
+ *   selectedRibbon={true}
+ *   onClick={() => console.log("Card clicked")}
+ *   onDragStart={(event, key, data) => console.log("Drag started", key, data)}
+ *   draggable={true}
+ *   dragKey="my-drag-key"
+ *   dragData={{ id: 1, name: "Card Data" }}
+ *   aria-label="My Card"
+ * >
+ *   <Header>Card Header</Header>
+ *   <div>Card Body Content</div>
+ *   <Footer>Card Footer</Footer>
+ * </Card>
+ * ```
+ */
+function Card(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    bodyClassName = _ref.bodyClassName,
+    classNames = _ref.classNames,
     selected = _ref.selected,
     selectedRibbon = _ref.selectedRibbon,
     onClick = _ref.onClick,
-    flex = _ref.flex,
+    onDragStart = _ref.onDragStart,
+    hideEffect = _ref.hideEffect,
     draggable = _ref.draggable,
     dragKey = _ref.dragKey,
     dragData = _ref.dragData,
     ref = _ref.ref,
-    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)));
-        },
-        ref: ref
-      }, aria), {}, {
-        children: [header, /*#__PURE__*/jsxRuntime.jsx("div", {
-          role: "none",
-          className: classNames(Card_module.cardBody, bodyClassName, "flex-1"),
-          onClick: onClick,
-          children: body
-        }), footer]
+    as = _ref.as,
+    height = _ref.height,
+    width = _ref.width,
+    minHeight = _ref.minHeight,
+    minWidth = _ref.minWidth,
+    maxHeight = _ref.maxHeight,
+    maxWidth = _ref.maxWidth,
+    title = _ref.title,
+    icon = _ref.icon,
+    actions = _ref.actions,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var handleDragStart = react.useCallback(function (event) {
+    if (dragKey) {
+      var _event$dataTransfer;
+      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 || _event$dataTransfer.setData(dragKey, JSON.stringify(dragData));
+      onDragStart === null || onDragStart === void 0 || onDragStart(event, dragKey, dragData);
+    }
+  }, [dragKey, dragData, onDragStart]);
+  var E = as !== null && as !== void 0 ? as : "div";
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: utilities.cn("fabric-card", className, classNames === null || classNames === void 0 ? void 0 : classNames.root, "rounded-capped relative scroll-thin", selectedRibbon && "selected-ribbon", !selectedRibbon && "is-selected:ring-[1.5px] is-selected:ring-accent-500 is-selected:ring-offset-2"),
+    "data-clickable": !!onClick || "to" in props || "href" in props,
+    "data-selected": selected,
+    draggable: draggable,
+    onDragStart: !draggable ? undefined : handleDragStart,
+    ref: ref,
+    children: [!hideEffect && /*#__PURE__*/jsxRuntime.jsx(StyleEffect.StyleEffect, {}), /*#__PURE__*/jsxRuntime.jsx(Titlebar.Titlebar, {
+      title: title,
+      icon: icon,
+      actions: actions,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.titlebar,
+      classNames: classNames
+    }), /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
+      children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
+        role: "none",
+        onClick: onClick
+      }, props), {}, {
+        className: "contents",
+        children: children && /*#__PURE__*/jsxRuntime.jsx("object", {
+          type: "none",
+          className: utilities.cn("fabric-cardBody", classNames === null || classNames === void 0 ? void 0 : classNames.body, "grid overflow-hidden min-w-0 z-1"),
+          style: {
+            height: height,
+            width: width,
+            minHeight: minHeight,
+            minWidth: minWidth,
+            maxHeight: maxHeight,
+            maxWidth: maxWidth
+          },
+          children: children
+        })
       }))
-    })
+    })]
   });
-};
+}
 
 exports.Card = Card;