@react-fabric/core 1.0.0-beta.44 → 1.0.0-beta.46

package/css/components/_button.css

@@ -134,7 +134,7 @@
     --text: color-mix(in lab, var(--color) 80%, var(--fabric-text));
     --bg-hover: color-mix(in lab, var(--color) 18%, var(--fabric-bg));
     --bg-click: color-mix(in lab, var(--color) 25%, var(--fabric-bg));
-    --bg-active: color-mix(in lab, var(--color) 36%, var(--fabric-bg));
+    --bg-active: color-mix(in lab, var(--color) 24%, var(--fabric-bg));
 
     &[data-color="accent"] {
       --color: var(--color-accent-500);

package/css/components/_menu.css

@@ -56,20 +56,20 @@
     }
 
     &[data-focus="true"] {
-      background-color: color(from var(--color) srgb r g b / 15%);
+      background-color: color-mix(in lab, var(--color) 15%, var(--fabric-bg));
     }
 
     &:active {
-      background-color: color(from var(--color) srgb r g b / 35%);
+      background-color: color-mix(in lab, var(--color) 35%, var(--fabric-bg));
     }
 
     &[data-open="true"] {
-      background-color: color(from var(--color) srgb r g b / 10%);
+      background-color: color-mix(in lab, var(--color) 10%, var(--fabric-bg));
     }
 
     &.active {
       pointer-events: none;
-      background-color: color(from var(--color) srgb r g b / 20%);
+      background-color: color-mix(in lab, var(--color) 20%, var(--fabric-bg));
 
       & > div {
         box-shadow: 4px 0 0 var(--color) inset;

package/css/reset/_theme.css

@@ -21,7 +21,45 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer theme {
+ @layer theme {
+  :root {
+    /* app default primary */
+    --color-primary: var(--color-denim-500);
+    --color-accent: var(--color-jade-500);
+    --color-tint: var(--color-silver-500);
+
+    /* default rounding */
+    --rounding: 0.25rem;
+    --rounding-cap: 0.25rem;
+    --gutter: 0.5rem;
+
+    /* z levels */
+    --z-overlay-mask: 25;
+    --z-overlay: 30;
+    --z-popover-mask: 45;
+    --z-popover: 50;
+    --z-tooltip: 60;
+    --z-notifications: 60;
+  }
+
+  [data-rounding="sm"] {
+    /* default rounding */
+    --rounding: 2px;
+    --rounding-cap: 2px;
+  }
+
+  [data-rounding="md"] {
+    /* default rounding */
+    --rounding: 0.5rem;
+    --rounding-cap: 0.5rem;
+  }
+
+  [data-rounding="full"] {
+    /* default rounding */
+    --rounding: 9999px;
+    --rounding-cap: 0.5rem;
+  }
+
   [data-color-scheme="light"] {
     --fabric-bg: var(--color-white);
     --fabric-text: var(--color-black);
@@ -43,27 +81,7 @@
   }
 }
 
-@layer base {
-  :root {
-    /* app default primary */
-    --color-primary: var(--color-denim-500);
-    --color-accent: var(--color-jade-500);
-    --color-tint: var(--color-silver-500);
-
-    /* default rounding */
-    --rounding: 0.25rem;
-    --rounding-cap: 0.25rem;
-    --gutter: 0.5rem;
-
-    /* z levels */
-    --z-overlay-mask: 25;
-    --z-overlay: 30;
-    --z-popover-mask: 45;
-    --z-popover: 50;
-    --z-tooltip: 60;
-    --z-notifications: 60;
-  }
-
+@layer theme {
   [data-color-scheme] {
     /* primary */
     --color-primary-50: color-mix(in oklab, var(--color-primary) 10%, var(--fabric-bg));
@@ -366,28 +384,6 @@
     --border-color-light: color-mix(in oklab, var(--color-white) 75%, var(--color-tint));
 
     color: color-mix(in lab, var(--fabric-text) 95%, var(--color-tint));
-    background-color: color-mix(
-      in lab,
-      var(--fabric-bg) 92%,
-      var(--color-tint)
-    );
+    background-color: color-mix(in lab, var(--fabric-bg) 92%, var(--color-tint));
   }
-
-  [data-rounding="sm"] {
-    /* default rounding */
-    --rounding: 2px;
-    --rounding-cap: 2px;
-  }
-
-  [data-rounding="md"] {
-    /* default rounding */
-    --rounding: 0.5rem;
-    --rounding-cap: 0.5rem;
-  }
-
-  [data-rounding="full"] {
-    /* default rounding */
-    --rounding: 9999px;
-    --rounding-cap: 0.5rem;
-  }
-}
+}

package/css/theme/_utilities.css

@@ -81,6 +81,10 @@
   unicode-bidi: plaintext;
 }
 
+@utility flex-auto {
+  flex: 0 0 auto;
+}
+
 @utility flex-full {
   flex: 1 1 100%;
 }

package/dist/cjs/components/dropdown/Dropdown.js

@@ -123,11 +123,7 @@ var DropdownElement = function DropdownElement(_ref) {
         context: context,
         modal: true,
         children: /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
-          ref: function ref(el) {
-            var _el$querySelector;
-            refs.setFloating(el);
-            el === null || el === void 0 || (_el$querySelector = el.querySelector("input,textarea,button")) === null || _el$querySelector === void 0 || _el$querySelector.focus();
-          },
+          ref: refs.setFloating,
           style: _objectSpread({
             minWidth: minWidth,
             zIndex: "var(--z-popover)"

package/dist/cjs/components/empty/EmptyContent.js

@@ -73,13 +73,13 @@ var EmptyContent = function EmptyContent(_ref) {
       children: [utilities.isString(icon) && /*#__PURE__*/jsxRuntime.jsx(Icon.Icon, {
         icon: icon
       }), /*#__PURE__*/react.isValidElement(icon) && icon, !icon && /*#__PURE__*/jsxRuntime.jsx(DefaultIcon, {})]
-    }), title && /*#__PURE__*/jsxRuntime.jsx("p", {
+    }), title && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "font-medium text-center text-dimmed",
       style: {
         fontSize: "1.5em"
       },
       children: title
-    }), /*#__PURE__*/jsxRuntime.jsx("p", {
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "font-medium text-center text-muted",
       style: {
         fontSize: "0.875em"

package/dist/cjs/components/tabpanel/Tab.js

@@ -61,7 +61,7 @@ var Tab = function Tab(_ref) {
       disabled: disabled,
       "data-color": color,
       "data-inner-clickable": true,
-      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden"),
+      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer"),
       onClick: function onClick() {
         return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
       },

package/dist/cjs/core/theme/ThemeProvider.js

@@ -3,6 +3,7 @@
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
+var Global = require('../../context/Global.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 /*
@@ -39,6 +40,8 @@ var ThemeProvider = function ThemeProvider(_ref) {
     tintColor = _ref.tintColor,
     colorScheme = _ref.colorScheme,
     rounding = _ref.rounding;
+  var _useApplicationContex = Global.useApplicationContext(),
+    currentColorScheme = _useApplicationContex.currentColorScheme;
   var styles = react.useMemo(function () {
     var ret = {};
     if (primaryColor && utilities.isColor(primaryColor)) {
@@ -63,7 +66,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
   }, [primaryColor, accentColor, tintColor]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     style: styles,
-    "data-color-scheme": colorScheme,
+    "data-color-scheme": colorScheme !== null && colorScheme !== void 0 ? colorScheme : currentColorScheme,
     "data-rounding": rounding,
     className: classNames("fabric-themeProvider", "contents theme-base", branding),
     children: children

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

@@ -92,8 +92,9 @@ var Tooltip = function Tooltip(_ref) {
   var copyEl = react.useMemo(function () {
     if (copyContent) {
       var copyText = utilities.isString(copyContent) ? copyContent : content;
-      var handler = function handler() {
+      var handler = function handler(e) {
         setIsOpen(false);
+        e.stopPropagation();
         void navigator.clipboard.writeText(copyText.toString());
       };
       return /*#__PURE__*/jsxRuntime.jsx("span", {

package/dist/esm/components/dropdown/Dropdown.js

@@ -123,11 +123,7 @@ var DropdownElement = function DropdownElement(_ref) {
         context: context,
         modal: true,
         children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-          ref: function ref(el) {
-            var _el$querySelector;
-            refs.setFloating(el);
-            el === null || el === void 0 || (_el$querySelector = el.querySelector("input,textarea,button")) === null || _el$querySelector === void 0 || _el$querySelector.focus();
-          },
+          ref: refs.setFloating,
           style: _objectSpread({
             minWidth: minWidth,
             zIndex: "var(--z-popover)"

package/dist/esm/components/empty/EmptyContent.js

@@ -73,13 +73,13 @@ var EmptyContent = function EmptyContent(_ref) {
       children: [isString(icon) && /*#__PURE__*/jsx(Icon, {
         icon: icon
       }), /*#__PURE__*/isValidElement(icon) && icon, !icon && /*#__PURE__*/jsx(DefaultIcon, {})]
-    }), title && /*#__PURE__*/jsx("p", {
+    }), title && /*#__PURE__*/jsx("div", {
       className: "font-medium text-center text-dimmed",
       style: {
         fontSize: "1.5em"
       },
       children: title
-    }), /*#__PURE__*/jsx("p", {
+    }), /*#__PURE__*/jsx("div", {
       className: "font-medium text-center text-muted",
       style: {
         fontSize: "0.875em"

package/dist/esm/components/tabpanel/Tab.js

@@ -61,7 +61,7 @@ var Tab = function Tab(_ref) {
       disabled: disabled,
       "data-color": color,
       "data-inner-clickable": true,
-      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden"),
+      className: classNames("fabric-tabButton", className, active && "active pointer-events-none", active && activeClassName, disabled && "text-tint-500 pointer-events-none", tabFlex ? "flex-1" : "flex-initial max-w-36", minimal ? "min-w-6" : "min-w-18", "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer"),
       onClick: function onClick() {
         return !active && (_onClick === null || _onClick === void 0 ? void 0 : _onClick(id));
       },

package/dist/esm/core/theme/ThemeProvider.js

@@ -3,6 +3,7 @@
 import { isColor } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo } from 'react';
+import { useApplicationContext } from '../../context/Global.js';
 import { jsx } from 'react/jsx-runtime';
 
 /*
@@ -39,6 +40,8 @@ var ThemeProvider = function ThemeProvider(_ref) {
     tintColor = _ref.tintColor,
     colorScheme = _ref.colorScheme,
     rounding = _ref.rounding;
+  var _useApplicationContex = useApplicationContext(),
+    currentColorScheme = _useApplicationContex.currentColorScheme;
   var styles = useMemo(function () {
     var ret = {};
     if (primaryColor && isColor(primaryColor)) {
@@ -63,7 +66,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
   }, [primaryColor, accentColor, tintColor]);
   return /*#__PURE__*/jsx("div", {
     style: styles,
-    "data-color-scheme": colorScheme,
+    "data-color-scheme": colorScheme !== null && colorScheme !== void 0 ? colorScheme : currentColorScheme,
     "data-rounding": rounding,
     className: classNames("fabric-themeProvider", "contents theme-base", branding),
     children: children

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

@@ -92,8 +92,9 @@ var Tooltip = function Tooltip(_ref) {
   var copyEl = useMemo(function () {
     if (copyContent) {
       var copyText = isString(copyContent) ? copyContent : content;
-      var handler = function handler() {
+      var handler = function handler(e) {
         setIsOpen(false);
+        e.stopPropagation();
         void navigator.clipboard.writeText(copyText.toString());
       };
       return /*#__PURE__*/jsx("span", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.44",
+  "version": "1.0.0-beta.46",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.24",
-    "@react-fabric/utilities": "^1.0.0-beta.44",
+    "@react-fabric/utilities": "^1.0.0-beta.46",
     "@tailwindcss/postcss": "~4.0.14",
     "boring-avatars": "^1.10.2",
     "classnames": "^2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "5c05c100917811fa40b30c98b94fd396b1f68ea9"
+  "gitHead": "0dfc20b9c84712bb1cb5205c22464e8a1eb2341c"
 }

package/src/components/dropdown/Dropdown.tsx

@@ -237,12 +237,7 @@ const DropdownElement = ({
           <FloatingOverlay />
           <FloatingFocusManager context={context} modal>
             <div
-              ref={(el) => {
-                refs.setFloating(el);
-                el
-                  ?.querySelector<HTMLElement>("input,textarea,button")
-                  ?.focus();
-              }}
+              ref={refs.setFloating}
               style={{
                 minWidth,
                 zIndex: "var(--z-popover)",

package/src/components/empty/EmptyContent.tsx

@@ -137,19 +137,19 @@ export const EmptyContent = ({
         {!icon && <DefaultIcon />}
       </div>
       {title && (
-        <p
+        <div
           className="font-medium text-center text-dimmed"
           style={{ fontSize: "1.5em" }}
         >
           {title}
-        </p>
+        </div>
       )}
-      <p
+      <div
         className="font-medium text-center text-muted"
         style={{ fontSize: "0.875em" }}
       >
         {message}
-      </p>
+      </div>
       <div className="flex gap-1 pt-6">{children}</div>
     </div>
   );

package/src/components/tabpanel/Tab.tsx

@@ -144,7 +144,7 @@ export const Tab = <Tag extends React.ElementType = "button">({
           disabled && "text-tint-500 pointer-events-none",
           tabFlex ? "flex-1" : "flex-initial max-w-36",
           minimal ? "min-w-6" : "min-w-18",
-          "flex items-center justify-center px-1 rounded overflow-hidden",
+          "flex items-center justify-center px-1 rounded overflow-hidden cursor-pointer",
         )}
         onClick={() => !active && onClick?.(id)}
         ref={ref as AnyObject}

package/src/core/theme/ThemeProvider.tsx

@@ -25,6 +25,7 @@ import { isColor } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
 import { type ChildrenProp } from "../../types";
+import { useApplicationContext } from "../../context/Global";
 
 export interface ThemeProps {
   /**
@@ -71,6 +72,7 @@ export const ThemeProvider = ({
   colorScheme,
   rounding,
 }: ThemeProps & ChildrenProp) => {
+  const { currentColorScheme } = useApplicationContext();
   const styles = useMemo(() => {
     const ret: KeyValue = {};
     if (primaryColor && isColor(primaryColor)) {
@@ -97,7 +99,7 @@ export const ThemeProvider = ({
   return (
     <div
       style={styles}
-      data-color-scheme={colorScheme}
+      data-color-scheme={colorScheme ?? currentColorScheme}
       data-rounding={rounding}
       className={classNames(
         "fabric-themeProvider",

package/src/overlays/tooltip/Tooltip.tsx

@@ -45,6 +45,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type MouseEvent,
   type ReactElement,
 } from "react";
 import { Icon } from "../../components/icon/Icon";
@@ -147,8 +148,9 @@ export const Tooltip = ({
   const copyEl = useMemo(() => {
     if (copyContent) {
       const copyText: AnyObject = isString(copyContent) ? copyContent : content;
-      const handler = () => {
+      const handler = (e: MouseEvent) => {
         setIsOpen(false);
+        e.stopPropagation();
         void navigator.clipboard.writeText(copyText.toString());
       };
       return (