@react-fabric/core 1.0.0-beta.8 → 1.0.1

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

@@ -2,16 +2,67 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import classNames from 'classnames';
-import { Children, cloneElement } from 'react';
-import classes from './Button.module.css';
+import { cn } from '@react-fabric/utilities';
+import { isValidElement, cloneElement } from 'react';
+import { cloneChildren } from '../../utils/cloneElement.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["vertical", "className", "children", "variant", "rounded", "disabled", "fullWidth", "color", "size"];
+var _excluded = ["ref", "vertical", "className", "children", "variant", "rounded", "disabled", "fullWidth", "color", "size", "onClick"];
 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,
+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 container component that renders a group of related buttons with shared styling and behavior.
+ *
+ * ButtonGroup propagates common button properties (variant, color, size, rounded, disabled)
+ * to all direct child `<Button>` elements, ensuring visual consistency across the group.
+ * It also coordinates click handling by intercepting each child's `onClick` and invoking
+ * the group-level `onClick` callback with the clicked button's `value` prop — making it
+ * ideal for toggle groups, radio-style selections, and multi-select toolbars.
+ *
+ * @template T - The type of the `value` prop expected by child buttons (defaults to `string`).
+ *
+ * @example
+ * ```tsx
+ * // Single-select toggle group
+ * const [mode, setMode] = useState<"day" | "week" | "month">("day");
+ *
+ * <ButtonGroup
+ *   value={mode}
+ *   onClick={(v) => setMode(v ?? "day")}
+ *   variant="outlined"
+ *   color="primary"
+ *   size="sm"
+ * >
+ *    <Button value="day">Day</Button>
+ *    <Button value="week">Week</Button>
+ *    <Button value="month">Month</Button>
+ * </ButtonGroup>
+ *
+ * @example
+ * ```tsx
+ * // Multi-select with vertical layout
+ * const [tags, setTags] = useState<string[]>([]);
+ *
+ * <ButtonGroup
+ *   vertical
+ *   variant="soft"
+ *   color="info"
+ *   onClick={(tag) =>
+ *     setTags((prev) =>
+ *       prev.includes(tag!) ? prev.filter((t) => t !== tag) : [...prev, tag!]
+ *       )
+ *     }
+ * >
+ *    <Button value="react">React</Button>
+ *    <Button value="typescript">TypeScript</Button>
+ *    <Button value="tailwind">Tailwind</Button>
+ * </ButtonGroup>
+ * ```
+ */
+function ButtonGroup(_ref) {
+  var _cloneChildren;
+  var ref = _ref.ref,
+    vertical = _ref.vertical,
     className = _ref.className,
     children = _ref.children,
     variant = _ref.variant,
@@ -20,22 +71,36 @@ var ButtonGroup = function ButtonGroup(_ref) {
     fullWidth = _ref.fullWidth,
     color = _ref.color,
     size = _ref.size,
-    aria = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-    "data-ref": "buttonGroup",
-    className: classNames(classes.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle rounded", vertical && classes.vertical, vertical && "flex-col items-stretch")
-  }, aria), {}, {
-    children: Children.map(children, function (child) {
-      return /*#__PURE__*/cloneElement(child, _objectSpread({
-        color: color,
-        size: size,
-        variant: variant,
-        disabled: disabled,
-        rounded: rounded,
-        fullWidth: fullWidth
-      }, child.props));
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Create a click handler that invokes both the group-level onClick and the child's own onClick
+  var clickHandler = function clickHandler(childValue, cb) {
+    return function (e) {
+      onClick === null || onClick === void 0 || onClick(childValue, e);
+      cb === null || cb === void 0 || cb(e);
+    };
+  };
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    className: cn("fabric-buttonGroup", className, "flex-nowrap align-middle is-vertical:flex-col", fullWidth ? "flex" : "inline-flex"),
+    "data-vertical": vertical,
+    children: (_cloneChildren = cloneChildren(children)) === null || _cloneChildren === void 0 ? void 0 : _cloneChildren.map(function (child) {
+      if (/*#__PURE__*/isValidElement(child)) {
+        // Cast to expected shape and clone with propagated group-level props
+        var childEl = child;
+        return /*#__PURE__*/cloneElement(childEl, _objectSpread(_objectSpread({
+          color: color,
+          size: size,
+          variant: variant,
+          disabled: disabled,
+          rounded: rounded
+        }, childEl.props), {}, {
+          onClick: clickHandler(childEl.props.value, childEl.props.onClick)
+        }));
+      }
+      return child;
     })
   }));
-};
+}
 
 export { ButtonGroup };

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

@@ -4,35 +4,48 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, autoUpdate, shift, flip, offset, arrow, useClick, useDismiss, useInteractions, FloatingPortal, FloatingFocusManager, FloatingArrow } from '@floating-ui/react';
-import { mergeRefs } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useRef, useState, useCallback, useEffect, useMemo, Fragment } from 'react';
+import { mergeRefs, cn } from '@react-fabric/utilities';
+import { useRef, useState, useEffect, useMemo, Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button } from './Button.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from '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 = useTranslation("core"),
     t = _useTranslation.t;
   var arrowRef = useRef(null);
@@ -48,18 +61,18 @@ var ConfirmButton = function ConfirmButton(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     actionDone = _useState6[0],
     setActionDone = _useState6[1];
-  var clickHandler = 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]);
+  };
   useEffect(function () {
     if (actionDone) {
       var timer = setTimeout(function () {
@@ -97,46 +110,46 @@ var ConfirmButton = function ConfirmButton(_ref) {
   var _useInteractions = useInteractions([dismiss, click]),
     getReferenceProps = _useInteractions.getReferenceProps,
     getFloatingProps = _useInteractions.getFloatingProps;
-  var ButtonWrapper = useCallback(function (_ref2) {
-    var ref = _ref2.ref,
-      props = _objectWithoutProperties(_ref2, _excluded2);
-    return /*#__PURE__*/jsx(Button, _objectSpread({
-      ref: ref
-    }, props));
-  }, []);
   var innerRef = useMemo(function () {
-    return mergeRefs(ref, refs.setReference);
-  }, [ref, refs.setReference]);
+    return mergeRefs(ref, refs.reference);
+  }, [ref, refs.reference]);
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(ButtonWrapper, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
+    children: [/*#__PURE__*/jsx(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__*/jsx(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__*/jsx(FloatingFocusManager, {
-        modal: true,
         context: context,
         children: /*#__PURE__*/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: 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__*/jsxs("div", {
             className: "font-medium ",
             children: [/*#__PURE__*/jsx("p", {
               className: "py-2 px-4",
+              "data-ref": "confirmMessage",
               children: message
             }), /*#__PURE__*/jsxs("div", {
               className: "flex justify-end py-2 px-4 gap-2",
               children: [/*#__PURE__*/jsx(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/esm/components/button/ToggleButtonGroup.js

@@ -3,17 +3,58 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useMemo, useCallback, Children, cloneElement } from 'react';
+import { isArray, cn, EMPTY_ARRAY } from '@react-fabric/utilities';
+import { isValidElement, cloneElement } from 'react';
 import { useControlledValue } from '../../hooks/useControlledValue.js';
-import classes from './Button.module.css';
+import { cloneChildren } from '../../utils/cloneElement.js';
 import { jsx } from '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 = useMemo(function () {
-    return isArray(value);
-  }, [value]);
-  var _useControlledValue = useControlledValue(value, isArray(value) ? EMPTY_ARRAY : ""),
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Determine selection mode: array value = multi-select, scalar = single-select
+  var isMultiple = isArray(value);
+  // Controlled value with empty array / null as defaults for multi / single mode
+  var _useControlledValue = useControlledValue(value, isMultiple ? EMPTY_ARRAY : undefined),
     currentValue = _useControlledValue.currentValue,
     updateValue = _useControlledValue.updateValue;
-  var clickHandler = 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 (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__*/jsx("div", _objectSpread(_objectSpread({
-    className: classNames(classes.buttonGroup, className, fullWidth ? "flex" : "inline-flex", "flex-nowrap align-middle", vertical && classes.vertical, vertical && "flex-col")
-  }, aria), {}, {
-    children: Children.map(children, function (child) {
-      return /*#__PURE__*/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__*/jsx("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: cn("fabric-buttonGroup", "flex-nowrap align-middle is-vertical:flex-col", className, fullWidth ? "flex" : "inline-flex"),
+    "data-vertical": vertical,
+    children: (_cloneChildren = cloneChildren(children)) === null || _cloneChildren === void 0 ? void 0 : _cloneChildren.map(function (child) {
+      if (/*#__PURE__*/isValidElement(child)) {
+        var childEl = child;
+        return /*#__PURE__*/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: isArray(currentValue) ? currentValue === null || currentValue === void 0 ? void 0 : currentValue.includes(childEl.props.value) : currentValue === childEl.props.value
+        }));
+      }
+      return child;
     })
   }));
-};
+}
 
 export { ToggleButtonGroup };

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

@@ -2,54 +2,85 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import classNames from 'classnames';
-import { CoreIcons } from '../../types/icons.js';
-import { getBgClass, getColorClass, getBorderClass } from '../../utils/getColor.js';
-import '@react-fabric/utilities';
-import { Icon } from '../icon/Icon.js';
+import { cn } from '@react-fabric/utilities';
+import 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { getIconProps } from '../../utils/getIconProps.js';
+import { Icon } from '../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__*/jsxs("fieldset", _objectSpread(_objectSpread({
-    className: classNames(className, "block rounded-capped border max-w-full relative overflow-hidden mb-4", getBgClass(color + "-50"), getColorClass(color + "-700"), getBorderClass(color + "-300"), border === "dashed" && "border-dashed", border === "dotted" && "border-dotted")
-  }, aria), {}, {
+    className: 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__*/jsx("legend", {
-      className: "px-2 mx-4 font-medium",
+      className: cn("fabric-calloutLegend px-2 mx-4 font-medium", classNames === null || classNames === void 0 ? void 0 : classNames.legend),
+      "data-ref": "calloutLegend",
       children: legend
     }), /*#__PURE__*/jsxs("div", {
-      className: classNames("break-words whitespace-break-spaces p-2"),
+      className: cn("fabric-calloutContent break-words whitespace-break-spaces p-2"),
       children: [/*#__PURE__*/jsxs("div", {
         className: "flex flex-nowrap items-center text-xl pe-4 gap-2 mb-4 empty:mb-0",
-        children: [icon && /*#__PURE__*/jsx(Icon, {
-          icon: icon
-        }), title && /*#__PURE__*/jsx("p", {
+        children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({}, getIconProps(icon)), {}, {
+          "data-ref": "calloutIcon"
+        })), title && /*#__PURE__*/jsx("p", {
           className: "flex-1",
+          "data-ref": "calloutTitle",
           children: title
         })]
       }), /*#__PURE__*/jsx("div", {
-        className: "pe-4",
+        className: "fabric-calloutMessage pe-4",
         children: children
       })]
-    }), onClose && /*#__PURE__*/jsx(Icon, {
-      size: "md",
-      className: classNames("absolute end-2", legend ? "top-0" : "top-2"),
-      icon: CoreIcons.close,
-      onClick: onClose
+    }), onClose && /*#__PURE__*/jsx("div", {
+      role: "none",
+      className: 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__*/jsx(Icon, {
+        size: "md",
+        icon: "icon-[mdi--close]"
+      })
     })]
   }));
-};
+}
 
 export { Callout };