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

package/dist/cjs/{core/section/Section.js → utils/getBadgeProps.js}

@@ -1,9 +1,7 @@
 'use strict';
 
-var classNames = require('classnames');
-var ErrorBoundary = require('../boundary/ErrorBoundary.js');
-var Section_module = require('./Section.module.css');
-var jsxRuntime = require('react/jsx-runtime');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
 
 /*
  * React Fabric
@@ -11,7 +9,7 @@ var jsxRuntime = require('react/jsx-runtime');
  *
  *
  * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * Copyright (c) 2026 Adarsh Pastakia
  *
  * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
  * and associated documentation files (the "Software"), to deal in the Software without restriction,
@@ -28,20 +26,26 @@ var jsxRuntime = require('react/jsx-runtime');
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var Section = function Section(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    dir = _ref.dir,
-    ref = _ref.ref;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    "data-ref": "section",
-    dir: dir,
-    ref: ref,
-    className: classNames(Section_module.section, className, "grid area-content overflow-hidden"),
-    children: /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary.ErrorBoundary, {
-      children: children
-    })
-  });
-};
+/**
+ * Utility function to get badge properties from a badge value or object.
+ * It checks if the badge is an object and returns its properties,
+ *
+ * @param {string | number | BadgeType} badge - The badge value or object.
+ * @returns {BadgeType} An object containing badge properties.
+ */
+function getBadgeProps(badge) {
+  if (utilities.isObject(badge) && ! /*#__PURE__*/react.isValidElement(badge)) {
+    return Object.assign({
+      forButton: true,
+      placement: ""
+    }, badge);
+  } else {
+    return {
+      value: badge,
+      forButton: true,
+      placement: ""
+    };
+  }
+}
 
-exports.Section = Section;
+exports.getBadgeProps = getBadgeProps;

package/dist/cjs/utils/getColor.js

@@ -2,51 +2,57 @@
 
 var utilities = require('@react-fabric/utilities');
 
-/*
+/**
  * React Fabric
- * @version: 1.0.0
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
  *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
  *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+
+/**
+ * Resolves a color value to a CSS color string.
+ *
+ * If the input is a valid CSS color (e.g., `"#ff0000"`, `"rgb(255,0,0)"`), it is returned as-is.
+ * Otherwise, it is treated as a design token name and resolved to a CSS custom property
+ * (e.g., `"primary-500"` → `"var(--color-primary-500)"`).
  *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
+ * @param {ColorUnion} color - The color value to resolve. Accepts CSS color strings or design token names.
+ * @returns The resolved CSS color string, or `undefined` if color is falsy.
  *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ * @example
+ * ```ts
+ * getColor("primary-500");    // "var(--color-primary-500)"
+ * getColor("#ff0000");       // "#ff0000"
+ * getColor("red");           // "var(--color-red)"
+ * getColor(undefined);       // undefined
+ * ```
  */
-
-var getColor = function getColor(color) {
+function getColor(color) {
+  if (!color) return undefined;
   if (color && utilities.isColor(color)) {
     return color;
   }
-};
-var getBgClass = function getBgClass(bg) {
-  if (bg && !utilities.isColor(bg)) {
-    return "bg-".concat(bg);
-  }
-};
-var getColorClass = function getColorClass(color) {
-  if (color && !utilities.isColor(color)) {
-    return "text-".concat(color);
-  }
-};
-var getBorderClass = function getBorderClass(color) {
-  if (color && !utilities.isColor(color)) {
-    return "border-".concat(color);
-  }
-};
+  if (color.startsWith("--")) return "var(".concat(color, ")");
+  return "var(--color-".concat(color, ")");
+}
 
-exports.getBgClass = getBgClass;
-exports.getBorderClass = getBorderClass;
 exports.getColor = getColor;
-exports.getColorClass = getColorClass;

package/dist/cjs/utils/getIconProps.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var react = require('react');
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Normalizes an `IconProps` value into a `BaseIconProps` object.
+ *
+ * If the input is a string or a React element, wraps it in an `{ icon }` object.
+ * If it's already a `BaseIconProps` object, returns it as-is.
+ *
+ * @param {IconProps} props - An icon specification: a string (CSS class or SVG path), a React element, or a `BaseIconProps` object.
+ * @returns A `BaseIconProps` object suitable for spreading onto the `Icon` component.
+ *
+ * @example
+ * ```tsx
+ * getIconProps("icon-[mdi--home]");
+ * // { icon: "icon-[mdi--home]" }
+ * getIconProps(<MyIcon />);
+ * // { icon: <MyIcon /> }
+ * getIconProps({ icon: "M10 20v-6h4v6" });
+ * // { icon: "M10 20v-6h4v6" }
+ * ```
+ */
+function getIconProps(props) {
+  if (typeof props === "string") {
+    return {
+      icon: props
+    };
+  }
+  if (/*#__PURE__*/react.isValidElement(props)) {
+    return {
+      icon: props
+    };
+  }
+  return props;
+}
+
+exports.getIconProps = getIconProps;

package/dist/cjs/utils/getTooltipProps.js

@@ -0,0 +1,66 @@
+'use strict';
+
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * Normalizes a tooltip specification into `TooltipType` props.
+ *
+ * If the input is a string or React element, returns a basic tooltip config
+ * with `placement: "top"` and the content set. If it's an object, merges
+ * it with the base config (adding `ref` and `placement`).
+ *
+ * @param {TooltipType} tooltip - A tooltip string, React element, or full `TooltipType` config.
+ * @param {RefObject<HTMLElement>} innerRef - Optional ref to attach to the tooltip's trigger element.
+ * @returns A `TooltipType` config with `ref` and `placement` set, or `undefined` if tooltip is falsy.
+ *
+ * @example
+ * ```tsx
+ * getTooltipProps("Hello world");
+ * // { ref, placement: "top", content: "Hello world" }
+ * getTooltipProps({ content: "Tip", placement: "bottom" });
+ * // { ref, placement: "bottom", content: "Tip" }
+ * ```
+ */
+function getTooltipProps(tooltip, innerRef) {
+  if (utilities.isString(tooltip) || /*#__PURE__*/react.isValidElement(tooltip)) {
+    return {
+      ref: innerRef,
+      placement: "top",
+      content: tooltip
+    };
+  }
+  if (utilities.isObject(tooltip)) {
+    return Object.assign({
+      ref: innerRef,
+      placement: "top"
+    }, tooltip);
+  }
+}
+
+exports.getTooltipProps = getTooltipProps;

package/dist/cjs/utils/nodeCheck.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var utilities = require('@react-fabric/utilities');
+var react = require('react');
 
 /*
  * React Fabric
@@ -25,11 +25,11 @@ var utilities = require('@react-fabric/utilities');
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-var nodeCheck = function nodeCheck(node) {
+function nodeCheck(node) {
   for (var _len = arguments.length, types = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     types[_key - 1] = arguments[_key];
   }
-  return utilities.isObject(node) && "type" in node && types.includes(node.type);
-};
+  return /*#__PURE__*/react.isValidElement(node) && types.includes(node.type);
+}
 
 exports.nodeCheck = nodeCheck;

package/dist/esm/components/actionLabel/ActionLabel.js

@@ -2,29 +2,41 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import classNames from 'classnames';
+import { cn } from '@react-fabric/utilities';
 import { useCallback } from 'react';
 import { ButtonGroup } from '../button/ButtonGroup.js';
-import classes from './ActionLabel.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["children", "className", "align", "actions", "disabled"];
 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; }
 /**
- * A simple label component with additional actions (like a button or icon) that becomes visible only when the user hovers over the label,
- * useful in interfaces where space is limited or where it's important to keep the UI clean and focused
+ * A label with action buttons that can be aligned to the start or end.
+ * This component is useful for displaying a label with associated actions, such as buttons, that can be aligned based on the design requirements.
+ * It automatically calculates the width of the action buttons to ensure that the label text does not overflow the container.
+ * It uses CSS variables to manage the width of the label text dynamically based on the action buttons' width.
+ * This component is designed to be flexible and can be used in various contexts where a label with actions is needed.
+ * It supports custom alignment, disabled states, and can be easily styled with additional CSS classes.
+ *
+ * @example
+ * ```jsx
+ * <ActionLabel
+ *   actions={[<Button>Action 1</Button>, <Button>Action 2</Button>]}
+ *   align="end"
+ * >
+ *   Label Text
+ * </ActionLabel>
+ * ```
  */
-var ActionLabel = function ActionLabel(_ref) {
+function ActionLabel(_ref) {
   var children = _ref.children,
     className = _ref.className,
     align = _ref.align,
     actions = _ref.actions,
     disabled = _ref.disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
-  /**
-   * calculate the width of the action box, width will be used for a delayed transition on hover
-   */
+  // Calculate the width of the action buttons to set a CSS variable
+  // This is used to ensure the label text does not overflow the container
   var calculateBasis = useCallback(function (el) {
     if (el) {
       var clone = el.cloneNode(true);
@@ -39,18 +51,19 @@ var ActionLabel = function ActionLabel(_ref) {
     }
   }, []);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(className, classes.actionLabel, "flex overflow-hidden gap-1 items-center cursor-default select-none"),
+    className: cn(className, "fabric-actionLabel", "flex overflow-hidden gap-1 items-center cursor-default select-none"),
     "data-disabled": disabled
   }, rest), {}, {
     children: [/*#__PURE__*/jsx(ButtonGroup, {
       ref: calculateBasis,
-      className: classNames(classes.actions, "overflow-hidden flex-content", align === "end" && "order-2"),
+      "data-inner-clickable": true,
+      className: cn("fabric-actions", "overflow-hidden flex-content", align === "end" && "order-2"),
       children: actions
     }), /*#__PURE__*/jsx("div", {
       className: "flex-initial truncate",
       children: children
     })]
   }));
-};
+}
 
 export { ActionLabel };

package/dist/esm/{overlays → components}/alert/Alert.js

@@ -3,22 +3,19 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingOverlay, FloatingFocusManager } from '@floating-ui/react';
-import classNames from 'classnames';
-import { useState, useMemo, useCallback, useLayoutEffect } from 'react';
+import { cn } from '@react-fabric/utilities';
+import { useState, useMemo, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { AnimationIndicator } from '../../components/animations/Animations.js';
-import { Button } from '../../components/button/Button.js';
-import { Icon } from '../../components/icon/Icon.js';
-import { CoreIcons } from '../../types/icons.js';
+import { AnimationIndicator } from '../animations/Indicator.js';
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
 import { Title } from '../../typography/Title.js';
-import { getColorClass, getBorderClass } from '../../utils/getColor.js';
-import '@react-fabric/utilities';
-import classes from './Alert.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { getColor } from '../../utils/getColor.js';
 
 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 Alert = function Alert(_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; }
+function Alert(_ref) {
   var title = _ref.title,
     message = _ref.message,
     _ref$color = _ref.color,
@@ -27,14 +24,18 @@ var Alert = function Alert(_ref) {
     rtlFlip = _ref.rtlFlip,
     actions = _ref.actions,
     onClose = _ref.onClose,
-    type = _ref.type,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "alert" : _ref$type,
+    multiline = _ref.multiline,
     okLabel = _ref.okLabel,
     cancelLabel = _ref.cancelLabel,
     placeholder = _ref.placeholder,
     defaultValue = _ref.defaultValue;
   var _useTranslation = useTranslation("core"),
     t = _useTranslation.t;
-  var _useState = useState(defaultValue),
+  var _useState = useState(function () {
+      return defaultValue;
+    }),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
     setValue = _useState2[1];
@@ -60,71 +61,93 @@ var Alert = function Alert(_ref) {
       icon: icon,
       size: "md",
       rtlFlip: rtlFlip,
-      color: color + "-600"
+      color: "".concat(color, "-600")
     });
     switch (color) {
       case "danger":
         return /*#__PURE__*/jsx(AnimationIndicator, {
           type: "cross",
-          className: getColorClass(color + "-600")
+          className: "text-danger-600"
         });
       case "success":
         return /*#__PURE__*/jsx(AnimationIndicator, {
           type: "check",
-          className: getColorClass(color + "-600")
+          className: "text-success-600"
         });
       case "warning":
         return /*#__PURE__*/jsx(AnimationIndicator, {
           type: "exclaim",
-          className: getColorClass(color + "-600")
+          className: "text-warning-600"
         });
       default:
         return /*#__PURE__*/jsx(AnimationIndicator, {
           type: type === "confirm" ? "question" : "info",
-          className: getColorClass(color + "-600")
+          className: "text-".concat(color, "-600")
         });
     }
-  }, [color, type, icon]);
-  var handleClose = useCallback(function (ret) {
-    refs.floating.current && (refs.floating.current.dataset.show = "false");
+  }, [color, type, icon, rtlFlip]);
+  var handleClose = function handleClose(ret) {
+    if (refs.floating.current) refs.floating.current.dataset.show = "false";
     setTimeout(function () {
-      onClose(ret);
+      onClose === null || onClose === void 0 || onClose(ret);
     }, 250);
-  }, [onClose]);
+  };
   useLayoutEffect(function () {
-    setTimeout(function () {
+    var tmr = setTimeout(function () {
       return refs.floating.current && (refs.floating.current.dataset.show = "true");
     }, 100);
-  }, []);
+    return function () {
+      clearTimeout(tmr);
+      try {
+        // call on close to kill the promise if unloaded without using close actions
+        onClose === null || onClose === void 0 || onClose(false);
+      } catch (_unused) {
+        //
+      }
+    };
+  }, [refs.floating, onClose]);
+  var E = multiline ? "textarea" : "input";
   return /*#__PURE__*/jsx(FloatingPortal, {
     children: /*#__PURE__*/jsx(FloatingOverlay, {
       lockScroll: true,
       style: {
         zIndex: "var(--z-overlay-mask)"
       },
-      className: "bg-base/50 backdrop-blur-sm grid place-items-center",
+      className: "bg-tint-100/50 backdrop-blur-sm grid place-items-center",
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
+        modal: true,
         children: /*#__PURE__*/jsxs("dialog", _objectSpread(_objectSpread({
           role: "alertdialog",
-          className: classNames(classes.alert, getBorderClass(color + "-300"), "grid bg-base border-2 pointer-events-auto overflow-hidden rounded-capped select-none", "min-w-72 max-w-sm p-6 relative outline-0 shadow-lg"),
-          ref: refs.setFloating
+          className: cn("fabric-alert", "grid bg-default border-2 pointer-events-auto overflow-hidden rounded-capped select-none", "min-w-72 max-w-sm py-2 px-6 relative outline-0 shadow-lg"),
+          style: {
+            borderColor: getColor("".concat(color, "-300"))
+          },
+          ref: function ref(el) {
+            return refs.setFloating(el);
+          }
         }, getFloatingProps()), {}, {
           children: [/*#__PURE__*/jsx("div", {
-            className: classNames("area-[icon] text-lg py-2"),
+            className: cn("area-[icon] self-start text-2xl"),
             children: iconType
-          }), /*#__PURE__*/jsx(Title, {
-            className: "font-medium area-[title]",
-            children: title
-          }), /*#__PURE__*/jsx("p", {
-            className: "area-[message] py-4",
-            children: message
-          }), type === "prompt" && /*#__PURE__*/jsx("input", {
+          }), /*#__PURE__*/jsxs("div", {
+            className: "area-[message]",
+            children: [title && /*#__PURE__*/jsx(Title, {
+              className: "font-medium",
+              children: title
+            }), /*#__PURE__*/jsx("div", {
+              children: message
+            })]
+          }), type === "prompt" && /*#__PURE__*/jsx(E, {
             value: value,
             placeholder: placeholder,
-            className: classNames("border rounded focus:border-primary-500"),
+            className: cn("area-[input] appearance-none outline-0 border rounded w-full px-2 py-1"),
+            style: {
+              borderColor: getColor("".concat(color, "-200")),
+              "--tw-ring-color": getColor("".concat(color, "-500"))
+            },
             ref: function ref(e) {
-              return e != null && setTimeout(function () {
+              if (e !== null) setTimeout(function () {
                 return e.focus();
               }, 100);
             },
@@ -135,17 +158,11 @@ var Alert = function Alert(_ref) {
               return setValue(e.target.value);
             },
             onKeyDown: function onKeyDown(e) {
-              return e.key === "Enter" && handleClose(value);
+              return !e.shiftKey && e.key === "Enter" && handleClose(value);
             }
           }), /*#__PURE__*/jsxs("div", {
             className: "flex gap-1 justify-center flex-nowrap pt-2 area-[actions]",
-            children: [/*#__PURE__*/jsx("div", {
-              className: "contents",
-              onClickCapture: function onClickCapture(e) {
-                return handleClose(e.target.value);
-              },
-              children: actions
-            }), type === "confirm" && /*#__PURE__*/jsx(Button, {
+            children: [type === "confirm" && /*#__PURE__*/jsx(Button, {
               size: "sm",
               variant: "link",
               color: color,
@@ -153,17 +170,23 @@ var Alert = function Alert(_ref) {
                 return handleClose(false);
               },
               children: cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : t("action.cancel", "Cancel")
+            }), /*#__PURE__*/jsx("div", {
+              className: "contents",
+              onClickCapture: function onClickCapture(e) {
+                return handleClose(e.target.dataset.value);
+              },
+              children: actions
             }), /*#__PURE__*/jsx(Button, {
               size: "sm",
               variant: "solid",
               color: color,
               onClick: function onClick() {
-                return handleClose(true);
+                return handleClose(type === "prompt" ? value : true);
               },
               children: okLabel !== null && okLabel !== void 0 ? okLabel : t("action.ok", "OK")
             })]
           }), /*#__PURE__*/jsx("div", {
-            className: "absolute top-2 end-2",
+            className: "absolute top-2 inset-e-0",
             children: /*#__PURE__*/jsx(Button, {
               size: "sm",
               variant: "link",
@@ -172,7 +195,7 @@ var Alert = function Alert(_ref) {
               onClick: function onClick() {
                 return handleClose(false);
               },
-              icon: CoreIcons.close,
+              icon: "icon-[mdi--close]",
               "aria-label": "close"
             })
           })]
@@ -180,6 +203,6 @@ var Alert = function Alert(_ref) {
       })
     })
   });
-};
+}
 
 export { Alert };