@react-fabric/core 1.0.0-beta.36 → 1.0.0-beta.37

package/dist/cjs/overlays/alert/Alert.js

@@ -14,7 +14,6 @@ var Title = require('../../typography/Title.js');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
-var Alert_module = require('./Alert.module.css');
 
 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; }
@@ -60,28 +59,28 @@ var Alert = function Alert(_ref) {
       icon: icon,
       size: "md",
       rtlFlip: rtlFlip,
-      color: color + "-600"
+      color: "".concat(color, "-600")
     });
     switch (color) {
       case "danger":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "cross",
-          className: getColor.getColorClass(color + "-600")
+          color: "danger-600"
         });
       case "success":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "check",
-          className: getColor.getColorClass(color + "-600")
+          color: "success-600"
         });
       case "warning":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "exclaim",
-          className: getColor.getColorClass(color + "-600")
+          color: "warning-600"
         });
       default:
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: type === "confirm" ? "question" : "info",
-          className: getColor.getColorClass(color + "-600")
+          color: "".concat(color, "-600")
         });
     }
   }, [color, type, icon]);
@@ -107,7 +106,10 @@ var Alert = function Alert(_ref) {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsxs("dialog", _objectSpread(_objectSpread({
           role: "alertdialog",
-          className: classNames(Alert_module.alert, getColor.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"),
+          className: classNames("fabric-alert", "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"),
+          style: {
+            borderColor: getColor.getColor("".concat(color, "-300"))
+          },
           ref: refs.setFloating
         }, getFloatingProps()), {}, {
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -122,7 +124,11 @@ var Alert = function Alert(_ref) {
           }), type === "prompt" && /*#__PURE__*/jsxRuntime.jsx("input", {
             value: value,
             placeholder: placeholder,
-            className: classNames("area-[input] appearance-none outline-0 ring-".concat(color, "-500 border rounded border-").concat(color, "-200 w-full px-2 py-1")),
+            className: classNames("area-[input] appearance-none outline-0 border rounded w-full px-2 py-1"),
+            style: {
+              borderColor: getColor.getColor("".concat(color, "-200")),
+              "--tw-ring-color": getColor.getColor("".concat(color, "-500"))
+            },
             ref: function ref(e) {
               return e != null && setTimeout(function () {
                 return e.focus();

package/dist/cjs/overlays/flyout/Flyout.js

@@ -11,7 +11,6 @@ var Icon = require('../../components/icon/Icon.js');
 var HeadFoot = require('../../core/headfoot/HeadFoot.js');
 var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
 var icons = require('../../types/icons.js');
-var Flyout_module = require('./Flyout.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "closeOnClick", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "minWidth", "hideMask", "align"];
@@ -105,7 +104,7 @@ var Flyout = function Flyout(_ref) {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({
           "data-align": align,
-          className: classNames(Flyout_module.flyout, "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
+          className: classNames("fabric-flyout", "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl", align === "start" ? "start-0" : "end-0", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]"),
           style: {
             width: width,
             minWidth: minWidth
@@ -116,7 +115,7 @@ var Flyout = function Flyout(_ref) {
           children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
             children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
               flex: true,
-              className: classNames(Flyout_module.flyoutHeader, headerClassName),
+              className: classNames("fabric-flyoutHeader", headerClassName),
               children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
                 icon: icon,
                 bg: iconBg,
@@ -128,7 +127,7 @@ var Flyout = function Flyout(_ref) {
                 children: title
               }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
                 "data-ref": "panelClose",
-                className: classNames(Flyout_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
                 icon: icons.CoreIcons.close,
                 onClick: function onClick() {
                   return handleClose(false);
@@ -136,7 +135,7 @@ var Flyout = function Flyout(_ref) {
               })]
             }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
               role: "dialog",
-              className: classNames(Flyout_module.flyoutBody, "flex-1 grid overflow-hidden"),
+              className: classNames("fabric-flyoutBody", "flex-1 grid overflow-hidden"),
               tabIndex: 0,
               children: children
             })]

package/dist/cjs/overlays/message/Message.js

@@ -6,7 +6,6 @@ var Icon = require('../../components/icon/Icon.js');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
-var Message_module = require('./Message.module.css');
 
 /*
  * React Fabric
@@ -52,7 +51,11 @@ var Message = function Message(_ref) {
     }, 100);
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames(Message_module.message, color ? getColor.getBgClass(color + "-300") : "bg-invert", color ? getColor.getColorClass(color + "-900") : "text-invert", "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none"),
+    className: classNames("fabric-message", "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none"),
+    style: {
+      backgroundColor: color ? getColor.getColor(color + "-300") : "var(--bg-color-invert)",
+      color: color ? getColor.getColor(color + "-900") : "var(--text-color-invert)"
+    },
     ref: elRef,
     children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
       icon: icon,

package/dist/cjs/overlays/modal/Modal.js

@@ -11,7 +11,6 @@ var Icon = require('../../components/icon/Icon.js');
 var HeadFoot = require('../../core/headfoot/HeadFoot.js');
 var HotKeyWrapper = require('../../hotkeys/HotKeyWrapper.js');
 var icons = require('../../types/icons.js');
-var Modal_module = require('./Modal.module.css');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["icon", "iconBg", "iconColor", "iconClassName", "rtlFlip", "title", "actions", "headerClassName", "onClose", "onBeforeClose", "children", "loading", "size", "width", "height", "minHeight", "minWidth"];
@@ -85,7 +84,7 @@ var Modal = function Modal(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsx(react.FloatingFocusManager, {
         context: context,
         children: /*#__PURE__*/jsxRuntime.jsx("dialog", _objectSpread(_objectSpread(_objectSpread({
-          className: classNames(Modal_module.modal, "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
+          className: classNames("fabric-modal", "rounded-capped relative overflow-hidden flex flex-col flex-nowrap", "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl", size === "sm" && "w-[20rem]", size === "md" && "w-[40rem]", size === "lg" && "w-[60vw]", size === "xl" && "w-[80vw]", size === "screen" && "w-screen h-screen"),
           style: {
             width: width,
             height: height,
@@ -97,7 +96,7 @@ var Modal = function Modal(_ref) {
           children: /*#__PURE__*/jsxRuntime.jsxs(HotKeyWrapper.HotKeyWrapper, {
             children: [/*#__PURE__*/jsxRuntime.jsxs(HeadFoot.Header, {
               flex: true,
-              className: classNames(Modal_module.modalHeader, headerClassName),
+              className: classNames("fabric-modalHeader", headerClassName),
               children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
                 icon: icon,
                 bg: iconBg,
@@ -109,7 +108,7 @@ var Modal = function Modal(_ref) {
                 children: title
               }), actions, /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
                 "data-ref": "panelClose",
-                className: classNames(Modal_module.panelAction, "cursor-pointer p-1 text-xl self-stretch"),
+                className: classNames("fabric-panelAction", "cursor-pointer p-1 text-xl self-stretch"),
                 icon: icons.CoreIcons.close,
                 onClick: function onClick() {
                   return handleClose(false);
@@ -117,7 +116,7 @@ var Modal = function Modal(_ref) {
               })]
             }), loading && /*#__PURE__*/jsxRuntime.jsx(Animations.Loading, {}), /*#__PURE__*/jsxRuntime.jsx("div", {
               role: "dialog",
-              className: classNames(Modal_module.modalBody, "flex-1 grid overflow-hidden"),
+              className: classNames("fabric-modalBody", "flex-1 grid overflow-hidden"),
               tabIndex: 0,
               children: children
             })]

package/dist/cjs/overlays/toast/Toast.js

@@ -10,7 +10,6 @@ var icons = require('../../types/icons.js');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../../utils/getColor.js');
 require('@react-fabric/utilities');
-var Toast_module = require('./Toast.module.css');
 
 /*
  * React Fabric
@@ -61,22 +60,22 @@ var Toast = function Toast(_ref) {
       case "danger":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "cross",
-          className: getColor.getColorClass(color + "-600")
+          color: "danger-600"
         });
       case "success":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "check",
-          className: getColor.getColorClass(color + "-600")
+          color: "success-600"
         });
       case "warning":
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: "exclaim",
-          className: getColor.getColorClass(color + "-600")
+          color: "warning-600"
         });
       default:
         return /*#__PURE__*/jsxRuntime.jsx(Animations.AnimationIndicator, {
           type: type === "confirm" ? "question" : "info",
-          className: getColor.getColorClass(color + "-600")
+          color: "".concat(color, "-600")
         });
     }
   }, [color, type, icon]);
@@ -94,13 +93,22 @@ var Toast = function Toast(_ref) {
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "alert",
-    className: classNames(Toast_module.toast, getColor.getBorderClass(color + "-300"), "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none"),
+    className: classNames("fabric-toast", "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none"),
+    style: {
+      borderColor: getColor.getColor(color + "-300")
+    },
     ref: elRef,
     children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("flex-initial p-2", getColor.getBgClass(color + "-100")),
+      className: classNames("flex-initial p-2"),
+      style: {
+        backgroundColor: getColor.getColor(color + "-300")
+      },
       children: iconType
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames(getColor.getBgClass(color + "-50/50"), "flex flex-col flex-1 flex-nowrap overflow-hidden p-2"),
+      className: classNames("flex flex-col flex-1 flex-nowrap overflow-hidden p-2"),
+      style: {
+        backgroundColor: getColor.getColor(color + "-50")
+      },
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex flex-nowrap gap-2 items-start",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/overlays/tooltip/Tooltip.js

@@ -10,10 +10,10 @@ var react = require('react');
 var Icon = require('../../components/icon/Icon.js');
 var useIsRtl = require('../../hooks/useIsRtl.js');
 var icons = require('../../types/icons.js');
-var Tooltip_module = require('./Tooltip.module.css');
 var jsxRuntime = require('react/jsx-runtime');
+var getColor = require('../../utils/getColor.js');
 
-var _excluded = ["ref", "children", "color", "content", "open", "copyContent", "disabled", "placement"];
+var _excluded = ["ref", "children", "color", "textColor", "content", "open", "copyContent", "disabled", "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; }
 var getTooltipProps = function getTooltipProps(tooltip, innerRef) {
@@ -35,6 +35,7 @@ var Tooltip = function Tooltip(_ref) {
   var ref = _ref.ref,
     children = _ref.children,
     color = _ref.color,
+    textColor = _ref.textColor,
     content = _ref.content,
     open = _ref.open,
     copyContent = _ref.copyContent,
@@ -112,17 +113,28 @@ var Tooltip = function Tooltip(_ref) {
     }, open ? {} : getReferenceProps(rest))), isOpen && content && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
       children: /*#__PURE__*/jsxRuntime.jsxs("dfn", _objectSpread(_objectSpread({
         "data-ref": "tooltip",
-        "data-color": color,
-        className: classNames(Tooltip_module.tooltip, "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-current"),
+        className: classNames("fabric-tooltip z-(--z-tooltip)", "select-none text-sm not-italic flex py-1 px-2 !max-w-lg rounded shadow-md bg-muted"),
         ref: refs.setFloating,
-        style: floatingStyles
+        style: _objectSpread({
+          color: textColor ? getColor.getColor(textColor) : undefined,
+          backgroundColor: color ? getColor.getColor(color) : undefined
+        }, floatingStyles)
       }, getFloatingProps()), {}, {
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-          className: classNames("font-medium text-dimmed flex-1 break-all", utilities.isString(content) && "whitespace-pre-wrap mixed-lang"),
+          className: classNames("font-medium flex-1 break-all", !textColor && "contrast", utilities.isString(content) && "whitespace-pre-wrap mixed-lang"),
+          style: {
+            color: textColor ? undefined : color ? getColor.getColor(color) : "var(--bg-color-muted)"
+          },
           children: content
         }), copyEl, /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingArrow, {
           ref: arrowRef,
-          context: context
+          context: context,
+          strokeWidth: 0.5,
+          className: "fill-muted stroke-dimmed",
+          style: {
+            stroke: color ? getColor.getColor(color) : undefined,
+            fill: color ? getColor.getColor(color) : undefined
+          }
         })]
       }))
     })]

package/dist/cjs/typography/Abbr.js

@@ -9,7 +9,6 @@ var useEffectDebugger = require('../hooks/useEffectDebugger.js');
 var Tooltip = require('../overlays/tooltip/Tooltip.js');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
-var Typography_module = require('./Typography.module.css');
 
 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; }
@@ -28,7 +27,7 @@ var AbbrText = function AbbrText(_ref) {
   }, [tooltip, content]);
   return /*#__PURE__*/jsxRuntime.jsx(TooltipWrapper, _objectSpread(_objectSpread({}, tooltipProps), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("abbr", {
-      className: classNames(Typography_module.abbr, "whitespace-nowrap", color && getColor.getColorClass(color)),
+      className: classNames("fabric-abbr", "whitespace-nowrap"),
       style: color ? {
         "--abbr-color": getColor.getColor(color)
       } : undefined,

package/dist/cjs/typography/Anchor.js

@@ -45,7 +45,7 @@ var Anchor = function Anchor(_ref) {
   }, [bg, color, size, family], "Link styles");
   var E = as !== null && as !== void 0 ? as : "a";
   return /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
-    className: classNames("link", className, family && "font-".concat(family), bg && getColor.getBgClass(bg), color && getColor.getColorClass(color)),
+    className: classNames("link", className, family && "font-".concat(family)),
     style: styles,
     ref: ref
   }, aria), {}, {

package/dist/cjs/typography/Mark.js

@@ -8,7 +8,6 @@ var react = require('react');
 var useEffectDebugger = require('../hooks/useEffectDebugger.js');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
-var Typography_module = require('./Typography.module.css');
 
 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; }
@@ -16,7 +15,7 @@ var MarkText = function MarkText(_ref) {
   var color = _ref.color,
     children = _ref.children;
   return /*#__PURE__*/jsxRuntime.jsx("mark", {
-    className: classNames(Typography_module.mark, "whitespace-nowrap", color && getColor.getBgClass(color)),
+    className: classNames("fabric-mark", "whitespace-nowrap"),
     style: color ? {
       "--mark-color": getColor.getColor(color)
     } : undefined,

package/dist/cjs/typography/Text.js

@@ -12,7 +12,6 @@ var usePropToggle = require('../hooks/usePropToggle.js');
 var calculateDimensions = require('../utils/calculateDimensions.js');
 var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
-var Typography_module = require('./Typography.module.css');
 var types = require('./types.js');
 
 var _excluded = ["children", "className", "inline", "bg", "color", "family", "size", "clamp", "align"];
@@ -98,13 +97,13 @@ var Text = function Text(_ref) {
         "--text-clamp": showMore ? "unset" : clamp !== null && clamp !== void 0 ? clamp : "unset"
       },
       children: /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
-        className: classNames(Typography_module.text, "mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), bg && getColor.getBgClass(bg), color && getColor.getColorClass(color), clamp && "line-clamp-1"),
+        className: classNames("fabric-text", "mixed-lang px-[2px] whitespace-pre-wrap", family && "font-".concat(family), clamp && "line-clamp-1"),
         style: styles
       }, aria), {}, {
         children: children
       }))
     }), clipped && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: Typography_module.moreLink,
+      className: "fabric-moreLink",
       children: /*#__PURE__*/jsxRuntime.jsxs("span", {
         role: "link",
         tabIndex: 0,

package/dist/cjs/typography/Title.js

@@ -9,7 +9,6 @@ var jsxRuntime = require('react/jsx-runtime');
 var getColor = require('../utils/getColor.js');
 require('@react-fabric/utilities');
 var types = require('./types.js');
-var Typography_module = require('./Typography.module.css');
 
 var _excluded = ["children", "className", "as", "bg", "color", "size", "align", "family"];
 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; }
@@ -49,7 +48,7 @@ var Title = function Title(_ref) {
   }, [bg, color, size, align], "Title styles");
   var E = as !== null && as !== void 0 ? as : "p";
   return /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({
-    className: classNames(Typography_module.title, className, family && "font-".concat(family), !as && "text-lg", bg && getColor.getBgClass(bg), color && getColor.getColorClass(color)),
+    className: classNames("fabric-title", className, family && "font-".concat(family), !as && "text-lg"),
     style: styles
   }, aria), {}, {
     children: children

package/dist/cjs/utils/getColor.js

@@ -29,24 +29,7 @@ var getColor = function getColor(color) {
   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);
-  }
+  return "var(--color-".concat(color, ")");
 };
 
-exports.getBgClass = getBgClass;
-exports.getBorderClass = getBorderClass;
 exports.getColor = getColor;
-exports.getColorClass = getColorClass;

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

@@ -5,7 +5,6 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 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"];
@@ -39,13 +38,13 @@ 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: classNames(className, "fabric-actionLabel", "flex overflow-hidden gap-1 items-center cursor-default select-none"),
     "data-disabled": disabled
   }, rest), {}, {
     children: [/*#__PURE__*/jsx(ButtonGroup, {
       ref: calculateBasis,
       "data-inner-clickable": true,
-      className: classNames(classes.actions, "overflow-hidden flex-content", align === "end" && "order-2"),
+      className: classNames("fabric-actions", "overflow-hidden flex-content", align === "end" && "order-2"),
       children: actions
     }), /*#__PURE__*/jsx("div", {
       className: "flex-initial truncate",

package/dist/esm/components/animations/Animations.js

@@ -6,9 +6,8 @@ import classNames from 'classnames';
 import { useMemo } from 'react';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { getColor, getColorClass } from '../../utils/getColor.js';
+import { getColor } from '../../utils/getColor.js';
 import '@react-fabric/utilities';
-import classes from './Animations.module.css';
 
 var _excluded = ["className", "color", "strokeColor", "type"],
   _excluded2 = ["className"];
@@ -40,26 +39,29 @@ var AnimationIndicator = function AnimationIndicator(_ref) {
   /** ***************** component *******************/
   return /*#__PURE__*/jsxs("svg", _objectSpread(_objectSpread({
     "data-ref": "animated-indicator",
-    className: classNames(classes.checkAnimation, className, "inline-block rounded-full", color && getColorClass(color)),
+    className: classNames("fabric-checkAnimation", className, "inline-block rounded-full"),
     style: styles,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 52 52",
     "aria-hidden": "true"
   }, aria), {}, {
     children: [/*#__PURE__*/jsx("circle", {
-      className: classes.circlePart,
+      className: "fabric-circlePart",
       cx: "26",
       cy: "26",
       r: "25"
     }), /*#__PURE__*/jsx("path", {
-      className: classNames(classes.iconPart, getColorClass(strokeColor !== null && strokeColor !== void 0 ? strokeColor : "invert")),
+      className: classNames("fabric-iconPart"),
+      style: {
+        color: strokeColor ? getColor(strokeColor) : "var(--text-color-invert)"
+      },
       d: path
     })]
   }));
 };
 var AnimationBars = function AnimationBars(_ref2) {
   var _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? "tint" : _ref2$color,
+    color = _ref2$color === void 0 ? "tint-500" : _ref2$color,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? "2rem" : _ref2$size;
   return /*#__PURE__*/jsx("div", {
@@ -67,9 +69,10 @@ var AnimationBars = function AnimationBars(_ref2) {
     children: /*#__PURE__*/jsx("div", {
       className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
       children: /*#__PURE__*/jsx("div", {
-        className: classNames(classes.bars, getColorClass(color + "-500/50")),
+        className: classNames("fabric-bars"),
         style: {
-          width: size
+          width: size,
+          color: getColor(color)
         }
       })
     })
@@ -86,9 +89,10 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
     children: /*#__PURE__*/jsx("div", {
       className: classNames("outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"),
       children: /*#__PURE__*/jsx("div", {
-        className: classNames(classes.spinner, getColorClass(color)),
+        className: classNames("fabric-spinner"),
         style: {
-          width: size
+          width: size,
+          color: getColor(color)
         }
       })
     })
@@ -96,7 +100,7 @@ var AnimationSpinner = function AnimationSpinner(_ref3) {
 };
 var Loading = function Loading() {
   return /*#__PURE__*/jsx("div", {
-    className: classNames(classes.loader, "area-[loader] relative overflow-x-clip"),
+    className: classNames("fabric-loader", "area-[loader] relative overflow-x-clip"),
     "data-ref": "loading",
     children: /*#__PURE__*/jsx("div", {
       className: "absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500"

package/dist/esm/components/avatar/Avatar.js

@@ -8,8 +8,7 @@ import BoringAvatar from 'boring-avatars';
 import classNames from 'classnames';
 import { useState, useMemo } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { getColor, getBgClass, getColorClass } from '../../utils/getColor.js';
-import classes from './Avatar.module.css';
+import { getColor } from '../../utils/getColor.js';
 
 var _excluded = ["ref", "name", "avatar", "fallbackIcon", "bg", "color", "size", "rounded", "variant", "className", "viewBox", "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; }
@@ -71,7 +70,7 @@ var Avatar = function Avatar(_ref) {
     return avatar && /*#__PURE__*/jsxs("div", {
       className: "contents",
       children: [/*#__PURE__*/jsx("div", {
-        className: classNames(classes.imgPlaceholder, "absolute inset-0 bg-gray animate-pulse")
+        className: classNames("fabric-imgPlaceholder", "absolute inset-0 bg-gray animate-pulse")
       }), /*#__PURE__*/jsx("img", {
         src: avatar,
         alt: avatar,
@@ -129,7 +128,7 @@ var Avatar = function Avatar(_ref) {
   }, [name, variant, fallbackIcon]);
   return /*#__PURE__*/jsxs("dfn", _objectSpread(_objectSpread({
     role: "presentation",
-    className: classNames(classes.avatar, className, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", bg && getBgClass(bg), color && getColorClass(color), !rounded && "rounded", rounded && "rounded-full"),
+    className: classNames("fabric-avatar", className, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", !rounded && "rounded", rounded && "rounded-full"),
     onClick: onClick,
     style: styles,
     "data-clickable": !!onClick,

package/dist/esm/components/avatar/AvatarGroup.js

@@ -5,7 +5,6 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useMemo, Children } from 'react';
 import { useMemoDebugger } from '../../hooks/useEffectDebugger.js';
-import classes from './Avatar.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "children", "className", "totalCount", "rounded", "size"];
@@ -49,11 +48,11 @@ var AvatarGroup = function AvatarGroup(_ref) {
   }, [avatars, totalCount]);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, aria), {}, {
     ref: ref,
-    className: classNames(classes.avatarGroup, className, "inline-flex flex-nowrap", !rounded && "rounded", rounded && "rounded-full"),
+    className: classNames("fabric-avatarGroup", className, "inline-flex flex-nowrap", !rounded && "rounded", rounded && "rounded-full"),
     style: styles,
     children: [avatars, !!diff && /*#__PURE__*/jsx("dfn", {
       "data-ref": "avatarCount",
-      className: classNames(classes.avatar, "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", classes.extra),
+      className: classNames("fabric-avatar", "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center", "fabric-avatarGroup--extra"),
       children: /*#__PURE__*/jsx("svg", {
         children: /*#__PURE__*/jsx("text", {
           x: "50%",

package/dist/esm/components/badge/Badge.js

@@ -6,7 +6,6 @@ import { isObject, isNil, isNumber, mergeRefs } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, cloneElement } from 'react';
 import { Icon } from '../icon/Icon.js';
-import classes from './Badge.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "className", "value", "max", "ping", "block", "inline", "placement", "children", "forButton", "icon", "iconBg", "iconColor", "rtlFlip"];
@@ -60,14 +59,14 @@ var Badge = function Badge(_ref) {
    * wrap children in a relative div to float badge, wrapper allows for floating a badge on elements with overflow hidden
    */
   return /*#__PURE__*/jsxs("div", {
-    className: classNames(forButton || inline ? "contents" : "relative", block ? "block" : "inline-block"),
+    className: classNames(forButton || inline ? "contents" : block ? "block" : "inline-block", forButton || inline ? "" : "relative"),
     children: [children && /*#__PURE__*/cloneElement(children, _objectSpread(_objectSpread({}, rest), {}, {
       ref: innerRef
     })), (!!ping || (label !== null && label !== void 0 ? label : icon)) && /*#__PURE__*/jsxs("div", {
       "data-ref": "badge",
       "data-ping": ping,
       "data-placement": placement,
-      className: classNames(classes.badge, className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
+      className: classNames("fabric-badge", className, "inline-block p-px min-w-2 min-h-2 text-center select-none rounded-full leading-none z-2 pointer-events-none", forButton && !placement || inline ? "relative" : "absolute"),
       children: [label && /*#__PURE__*/jsx("span", {
         className: "p-1",
         children: label