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

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

@@ -1,48 +1,59 @@
 '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 utilities = require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["className", "children", "height", "justify", "colorScheme"];
+var _excluded = ["className", "children", "title", "height", "justify"];
 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) {
+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; }
+var JUSTIFY_MAP = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end"
+};
+
+/**
+ * A cover component for cards that can contain media and content.
+ * It allows for flexible layout options and supports different color schemes.
+ * It can be used to create visually appealing card layouts with media content.
+ *
+ * @example
+ * ```jsx
+ * <CardCover
+ *   height={200}
+ *   colorScheme="light"
+ *   justify="center"
+ *   className="my-custom-class"
+ *   aria-label="Card Cover"
+ * >
+ *   <Image src="image.jpg" alt="Card Image" />
+ *   <div>Card Content</div>
+ * </CardCover>
+ * // Renders a card cover with a height of 200px, light color scheme, centered content, and a custom class name.
+ * ```
+ */
+function CardCover(_ref) {
   var className = _ref.className,
     children = _ref.children,
+    title = _ref.title,
     _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];
+    props = _objectWithoutProperties(_ref, _excluded);
   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
+    className: "fabric-cardCover relative area-header z-0"
+  }, props), {}, {
+    children: [children, /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: utilities.cn("fabric-cardCoverContent", "relative pointer-events-none z-1 flex flex-col flex-nowrap p-4 h-full", JUSTIFY_MAP[justify], className),
+      children: title
     })]
   }));
-};
+}
 
 exports.CardCover = CardCover;

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

@@ -0,0 +1,47 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/**
+ * A component that flips between front and back content using a ref-based API.
+ * The first child renders as the front face, the second child as the back face.
+ * Use the `flipCard` ref method to programmatically toggle between faces.
+ *
+ * @example
+ * ```jsx
+ * <FlipContent ref={flipRef}>
+ *    <div className="front">Front Content</div>
+ *    <div className="back">Back Content</div>
+ * </FlipContent>
+ * ```
+ */
+function FlipContent(_ref) {
+  var ref = _ref.ref,
+    children = _ref.children;
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showBack = _useState2[0],
+    setShowBack = _useState2[1];
+  react.useImperativeHandle(ref, function () {
+    return {
+      flipCard: function flipCard() {
+        return setShowBack(function (b) {
+          return !b;
+        });
+      }
+    };
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "fabric-flipCard relative area-content",
+    "data-card-flip": showBack,
+    children: react.Children.map(children, function (child, idx) {
+      return /*#__PURE__*/react.isValidElement(child) && /*#__PURE__*/react.cloneElement(child, {
+        "data-card-flip-face": idx === 0 ? "front" : "back"
+      });
+    })
+  });
+}
+
+exports.FlipContent = FlipContent;

package/dist/cjs/components/chip/Chip.js

@@ -2,18 +2,17 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var classNames = require('classnames');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var useEffectDebugger = require('../../hooks/useEffectDebugger.js');
+var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
-require('@react-fabric/utilities');
+var getIconProps = require('../../utils/getIconProps.js');
 var Icon = require('../icon/Icon.js');
-var Chip_module = require('./Chip.module.css');
-var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "children", "className", "size", "color", "variant", "icon", "iconBg", "iconColor", "rtlFlip", "disabled", "onClick", "onIconClick", "onRemove", "rounded", "stopPropagation", "as"];
+var _excluded = ["ref", "children", "className", "classNames", "size", "color", "variant", "icon", "value", "disabled", "onClick", "onRemove", "rounded", "preventDefault", "stopPropagation", "as", "draggable", "dragKey", "dragData", "onDragStart"];
 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; }
 var SizeMap = {
   xs: "0.625rem",
   sm: "0.875rem",
@@ -21,74 +20,118 @@ var SizeMap = {
   lg: "1.5rem",
   xl: "2rem"
 };
-var Chip = function Chip(_ref) {
+
+/**
+ * A compact, interactive chip used to represent tags, filters, selections, or status indicators.
+ *
+ * Renders a horizontally-flowing container with optional left-to-right slots:
+ * value badge → icon → label → remove (×) button.
+ *
+ * Supports four visual variants (`default`, `soft`, `solid`, `outlined`), five predefined sizes,
+ * and full color customization via the design system palette. The chip is keyboard-accessible,
+ * respects `disabled` and `data-clickable` states, and provides hooks for click and remove actions.
+ *
+ * @example
+ * ```tsx
+ * <Chip color="primary" size="md">
+ *   React
+ * </Chip>
+ *
+ * <Chip color="secondary" variant="outlined" icon="star" onRemove={() => console.log('removed')}>
+ *   Filter
+ * </Chip>
+ * ```
+ */
+function Chip(_ref) {
   var ref = _ref.ref,
     children = _ref.children,
     className = _ref.className,
+    classNames = _ref.classNames,
     size = _ref.size,
     color = _ref.color,
     variant = _ref.variant,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
+    value = _ref.value,
     disabled = _ref.disabled,
     onClick = _ref.onClick,
-    onIconClick = _ref.onIconClick,
     onRemove = _ref.onRemove,
     rounded = _ref.rounded,
+    preventDefault = _ref.preventDefault,
     stopPropagation = _ref.stopPropagation,
     as = _ref.as,
-    aria = _objectWithoutProperties(_ref, _excluded);
-  /** ***************** style map *******************/
+    draggable = _ref.draggable,
+    dragKey = _ref.dragKey,
+    dragData = _ref.dragData,
+    onDragStart = _ref.onDragStart,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Compute inline styles from props (memoized to prevent re-renders)
   var styles = useEffectDebugger.useMemoDebugger(function () {
     var s = {};
     if (color) {
-      s.color = getColor.getColor(color);
-    }
-    if (size && !(size in SizeMap)) {
-      s.fontSize = size;
+      s["--color"] = getColor.getColor(color);
     }
     if (size && size in SizeMap) {
       s.fontSize = SizeMap[size];
+    } else if (size) {
+      // Treat as a custom font-size value when not in the predefined map.
+      s.fontSize = size;
     }
     return s;
   }, [color, size], "Chip styles");
-  var clickHandler = react.useCallback(function (e) {
+  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 clickHandler = function clickHandler(e) {
+    if (preventDefault) e.preventDefault();
     if (stopPropagation) e.stopPropagation();
     onClick === null || onClick === void 0 || onClick(e);
-  }, [onClick, stopPropagation]);
-  var removeHandler = react.useCallback(function (e) {
-    if (stopPropagation) e.stopPropagation();
+  };
+  var removeHandler = function removeHandler(e) {
+    e.stopPropagation();
     onRemove === null || onRemove === void 0 || onRemove(e);
-  }, [onRemove, stopPropagation]);
+  };
+
+  // Resolve the polymorphic element: falls back to `<div>`.
   var E = as !== null && as !== void 0 ? as : "div";
   return /*#__PURE__*/jsxRuntime.jsxs(E, _objectSpread(_objectSpread({
     ref: ref,
     role: "term",
-    className: classNames(Chip_module.chip, className, color && getColor.getColorClass(color), "select-none inline-flex flex-nowrap items-center max-w-72 text-sm rounded", rounded && "rounded-full", !!onClick && Chip_module.clickable, disabled && Chip_module.disabled),
+    "data-ref": "chip",
+    className: utilities.cn("fabric-chip", "select-none inline-flex flex-nowrap items-center max-w-72 overflow-hidden rounded", "is-disabled:pointer-events-none is-rounded:rounded-full", "is-clickable:cursor-pointer is-clickable:bg-(image:--click-gradient) is-clickable:is-disabled:pointer-events-none is-clickable:is-disabled:opacity-50", className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
     style: styles,
     "data-variant": variant,
-    "data-inner-clickable": !!onClick,
-    onClick: clickHandler
-  }, aria), {}, {
-    children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-      className: classNames(Chip_module.chipIcon, "m-1"),
-      icon: icon,
-      bg: iconBg,
-      onClick: onIconClick,
-      color: iconColor,
-      rtlFlip: rtlFlip
-    }), children && /*#__PURE__*/jsxRuntime.jsx("label", {
-      className: classNames(Chip_module.chipLabel, "truncate"),
+    "data-disabled": disabled,
+    "data-rounded": rounded,
+    "data-clickable": !!onClick,
+    draggable: draggable,
+    onDragStart: !draggable ? undefined : handleDragStart,
+    onClick: disabled ? undefined : clickHandler
+  }, props), {}, {
+    children: [value && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: utilities.cn("fabric-chipValue inline-flex items-center px-[0.25em]", classNames === null || classNames === void 0 ? void 0 : classNames.value),
+      children: /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: value
+      })
+    }), icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, _objectSpread({
+      "data-ref": "chipIcon",
+      className: "fabric-chipIcon m-1 flex-content"
+    }, getIconProps.getIconProps(icon))), children && /*#__PURE__*/jsxRuntime.jsx("label", {
+      "data-ref": "chipLabel",
+      className: "fabric-chipLabel truncate flex-1 px-[0.5em]",
       children: children
     }), onRemove && /*#__PURE__*/jsxRuntime.jsx("span", {
       role: "none",
-      className: classNames(Chip_module.chipRemove, "cursor-pointer pe-1 opacity-65 hover:opacity-90"),
+      "data-ref": "chipRemove",
+      "data-inner-clickable": true,
+      className: utilities.cn("fabric-chipRemove", "cursor-pointer pe-1 pb-0.5 opacity-65 leading-none align-middle text-default hover:opacity-90"),
       onClick: removeHandler,
       children: "\xD7"
     })]
   }));
-};
+}
 
 exports.Chip = Chip;

package/dist/cjs/components/collapsable/Collapsable.js

@@ -4,37 +4,57 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toArray = require('@babel/runtime/helpers/toArray');
 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 icons = require('../../types/icons.js');
+var usePropState = require('../../hooks/usePropState.js');
 var Icon = require('../icon/Icon.js');
-var Collapsable_module = require('./Collapsable.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "disabled", "className", "bodyClassName", "headerClassName", "children", "iconAlign", "stickyHeader", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
+var _excluded = ["ref", "disabled", "className", "classNames", "children", "iconAlign", "stickyHeader", "iconClosed", "iconOpen", "open", "onClose", "onOpen"];
 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 Collapsable = function Collapsable(_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 _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * A component that can be expanded or collapsed to show or hide content.
+ * It is useful for organizing content in a way that allows users to focus on the information they are interested in.
+ * It supports custom icons for open and closed states, alignment options, and can be made sticky.
+ * This component is ideal for creating accordions, expandable panels, or sections that can be toggled by the user.
+ *
+ * @example
+ * ```jsx
+ * <Collapsable
+ *   iconAlign="start"
+ *   iconOpen="icon-[mdi--chevron-down]"
+ *   iconClosed="icon-[mdi--chevron-right]"
+ *   open={true}
+ *   onOpen={() => console.log("Opened")}
+ *   onClose={() => console.log("Closed")}
+ * >
+ *   <div>Header Content</div>
+ *   <div>Body Content</div>
+ * </Collapsable>
+ * ```
+ */
+function Collapsable(_ref) {
   var ref = _ref.ref,
     disabled = _ref.disabled,
     className = _ref.className,
-    bodyClassName = _ref.bodyClassName,
-    headerClassName = _ref.headerClassName,
+    classNames = _ref.classNames,
     children = _ref.children,
     iconAlign = _ref.iconAlign,
     stickyHeader = _ref.stickyHeader,
     _ref$iconClosed = _ref.iconClosed,
-    iconClosed = _ref$iconClosed === void 0 ? icons.CoreIcons.chevronRight : _ref$iconClosed,
+    iconClosed = _ref$iconClosed === void 0 ? "icon-[mdi--chevron-right]" : _ref$iconClosed,
     _ref$iconOpen = _ref.iconOpen,
-    iconOpen = _ref$iconOpen === void 0 ? icons.CoreIcons.chevronDown : _ref$iconOpen,
-    open = _ref.open;
-    _ref.onClose;
-    _ref.onOpen;
-    var aria = _objectWithoutProperties(_ref, _excluded);
-  var _useState = react.useState(open),
-    _useState2 = _slicedToArray(_useState, 2),
-    openState = _useState2[0],
-    setOpenState = _useState2[1];
+    iconOpen = _ref$iconOpen === void 0 ? "icon-[mdi--chevron-down]" : _ref$iconOpen,
+    open = _ref.open,
+    onClose = _ref.onClose,
+    onOpen = _ref.onOpen,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _usePropState = usePropState.usePropState(open),
+    _usePropState2 = _slicedToArray(_usePropState, 2),
+    openState = _usePropState2[0],
+    setOpenState = _usePropState2[1];
   var headRef = react.useRef(null);
   var bodyRef = react.useRef(null);
   react.useImperativeHandle(ref, function () {
@@ -44,43 +64,54 @@ var Collapsable = function Collapsable(_ref) {
       open: !!openState
     };
   }, [openState]);
+  var toggleHandler = react.useEffectEvent(function () {
+    if (openState) {
+      onOpen === null || onOpen === void 0 || onOpen();
+    } else {
+      onClose === null || onClose === void 0 || onClose();
+    }
+  });
   react.useEffect(function () {
-    setOpenState(open);
-  }, [open]);
+    toggleHandler();
+  }, [openState]);
   var _useMemo = react.useMemo(function () {
+      // eslint-disable-next-line @eslint-react/no-children-to-array
       var _Children$toArray = react.Children.toArray(children),
         _Children$toArray2 = _toArray(_Children$toArray),
         h = _Children$toArray2[0],
-        b = _Children$toArray2.slice(1);
+        b = _arrayLikeToArray(_Children$toArray2).slice(1);
       return [h, b];
     }, [children]),
     _useMemo2 = _slicedToArray(_useMemo, 2),
     head = _useMemo2[0],
     body = _useMemo2[1];
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-    className: classNames(Collapsable_module.collapsable, className)
-  }, aria), {}, {
+    className: utilities.cn("fabric-collapsable", className, classNames === null || classNames === void 0 ? void 0 : classNames.root)
+  }, props), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
       ref: headRef,
-      className: classNames(Collapsable_module.collapsableHead, "flex gap-1 flex-nowrap py-2 font-medium cursor-pointer items-center select-none hover:opacity-70", headerClassName, stickyHeader && "bg-base sticky top-0 px-2 py-1 z-10", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
+      className: utilities.cn("fabric-collapsableHead", stickyHeader && "bg-default sticky top-0 py-1 z-10", classNames === null || classNames === void 0 ? void 0 : classNames.header, "flex gap-1 flex-nowrap py-2 cursor-pointer items-center select-none hover:opacity-70", iconAlign === "end" ? "flex-row-reverse" : "flex-row"),
       onClick: function onClick() {
         return !disabled && setOpenState(!openState);
       },
       children: [/*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
-        size: "1.125em",
+        size: "1em",
         icon: openState ? iconOpen : iconClosed,
         rtlFlip: true
       }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-1 px-2",
+        className: "flex-1",
         children: head
       })]
-    }), openState && /*#__PURE__*/jsxRuntime.jsx("div", {
-      ref: bodyRef,
-      className: classNames(Collapsable_module.collapsableBody, bodyClassName),
-      children: body
+    }), /*#__PURE__*/jsxRuntime.jsx(react.Activity, {
+      mode: openState ? "visible" : "hidden",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        ref: bodyRef,
+        className: utilities.cn("fabric-collapsableBody", classNames === null || classNames === void 0 ? void 0 : classNames.body),
+        children: body
+      })
     })]
   }));
-};
+}
 
 exports.Collapsable = Collapsable;

package/dist/cjs/components/divider/Divider.js

@@ -1,10 +1,9 @@
 'use strict';
 
-var classNames = require('classnames');
-var react = require('react');
-var getColor = require('../../utils/getColor.js');
-require('@react-fabric/utilities');
+var utilities = require('@react-fabric/utilities');
+require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
 
 /*
  * React Fabric
@@ -29,37 +28,72 @@ 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 Divider = function Divider(_ref) {
-  var children = _ref.children,
+var Rule = function Rule(_ref) {
+  var flex = _ref.flex,
+    className = _ref.className,
     color = _ref.color,
     vertical = _ref.vertical,
-    fill = _ref.fill,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? "start" : _ref$align,
-    className = _ref.className;
-  var Rule = react.useCallback(function (_ref2) {
-    var flex = _ref2.flex,
-      className = _ref2.className;
-    return /*#__PURE__*/jsxRuntime.jsx("hr", {
-      style: {
-        flex: flex
-      },
-      className: classNames(className, vertical && "vertical", !flex && "self-stretch", vertical ? "mx-1" : "my-1", color && getColor.getBorderClass(color + "-200"))
-    });
-  }, [color, vertical]);
+    style = _ref.style;
+  return /*#__PURE__*/jsxRuntime.jsx("hr", {
+    style: {
+      flex: flex,
+      borderColor: getColor.getColor(color),
+      borderStyle: style
+    },
+    className: utilities.cn(className, vertical && "vertical", !flex && "self-stretch", vertical ? "fabric-divider--vertical" : "fabric-divider--horizontal")
+  });
+};
+
+/**
+ * A component that represents a visual divider between content.
+ * It can be used to separate sections of content, with optional text labels.
+ * It supports both horizontal and vertical orientations, customizable colors,
+ * styles, and alignment options.
+ *
+ * @example
+ * ```jsx
+ * <Divider color="primary" align="center" style="dashed">
+ *   Divider Text
+ * </Divider>
+ * // Renders a horizontal divider with primary color, centered text, and dashed style.
+ * ```
+ */
+function Divider(_ref2) {
+  var children = _ref2.children,
+    color = _ref2.color,
+    vertical = _ref2.vertical,
+    style = _ref2.style,
+    _ref2$align = _ref2.align,
+    align = _ref2$align === void 0 ? "start" : _ref2$align,
+    className = _ref2.className,
+    classNames = _ref2.classNames;
   return children ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames("flex flex-nowrap items-center", vertical && "flex-col", className),
+    className: utilities.cn("flex flex-nowrap items-center fabric-divider", vertical && "flex-col"),
     children: [/*#__PURE__*/jsxRuntime.jsx(Rule, {
+      className: utilities.cn(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+      style: style,
+      color: color,
+      vertical: vertical,
       flex: align === "start" ? "0 0 1rem" : "1 1 1em"
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("px-2 whitespace-nowrap", vertical ? "mx-1" : "my-1", fill && getColor.getBgClass((color !== null && color !== void 0 ? color : "tint") + "-200"), !fill && getColor.getColorClass((color !== null && color !== void 0 ? color : "tint") + "-600"), "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      className: utilities.cn("px-2 whitespace-nowrap text-dimmed", vertical ? "fabric-divider-label--vertical" : "fabric-divider-label--horizontal", classNames === null || classNames === void 0 ? void 0 : classNames.label, "rounded-full text-[0.75em]", vertical && "origin-center -rotate-90 z-1"),
+      style: {
+        color: getColor.getColor(color)
+      },
       children: children
     }), /*#__PURE__*/jsxRuntime.jsx(Rule, {
+      className: utilities.cn(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+      style: style,
+      color: color,
+      vertical: vertical,
       flex: align === "end" ? "0 0 1rem" : "1 1 1em"
     })]
   }) : /*#__PURE__*/jsxRuntime.jsx(Rule, {
-    className: className
+    style: style,
+    color: color,
+    vertical: vertical,
+    className: utilities.cn(className, classNames === null || classNames === void 0 ? void 0 : classNames.root)
   });
-};
+}
 
 exports.Divider = Divider;