@react-fabric/core 1.0.0-beta.62 → 1.0.0-beta.63

package/dist/types/core/responsive/Responsive.d.ts

@@ -8,6 +8,10 @@ export interface ContainerProps extends AriaProps, CssProp, ChildrenProp, TestPr
      * gutter size
      */
     gutter?: SizeTypeWithZero;
+    /**
+     * use @container size queries for max-width
+     */
+    useContainer?: boolean;
 }
 export interface RowProps extends AriaProps, CssProp, ChildrenProp, TestProps {
     /**
@@ -65,7 +69,7 @@ export interface ColProps extends AriaProps, CssProp, TestProps, Partial<Childre
  * </Container>
  * ```
  */
-export declare const Container: ({ children, fullWidth, className, gutter, ...aria }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Container: ({ children, fullWidth, className, gutter, useContainer, ...aria }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Row component that allows for flexible layout of columns.
  * It supports various flex properties, alignment, and wrapping.

package/dist/types/hooks/useContextMenu.d.ts

@@ -0,0 +1,10 @@
+import { type Menu } from "../components/menu/Menu";
+/**
+ * A hook that provides a context menu that appears on right-click.
+ * It uses the Floating UI library to manage the positioning and interactions of the menu.
+ * This hook is useful for creating custom context menus that can be triggered by right-clicking on elements.
+ *
+ * @param {ContextMenuProps} props - The properties for the ContextMenu hook.
+ * @returns {[React.ReactElement | null, (e: MouseEvent) => void]} An array containing the rendered ContextMenu component (or null if not open) and the function to handle right-click events.
+ */
+export declare const useContextMenu: (menu: React.ReactElement<typeof Menu>) => [Overlay: React.ReactNode, onContentMenu: (e: React.MouseEvent) => void];

package/dist/types/hotkeys/HotKeyWrapper.d.ts

@@ -1,11 +1,2 @@
 import { type FC, type PropsWithChildren } from "react";
-/** @internal */
-export declare const HotKeysContext: import("react").Context<{
-    addHotKey: (key: string, handler: () => void, global?: boolean) => void;
-    removeHotKey: (key: string) => void;
-}>;
-export declare const useHotKeys: () => {
-    addHotKey: (key: string, handler: () => void, global?: boolean) => void;
-    removeHotKey: (key: string) => void;
-};
 export declare const HotKeyWrapper: FC<PropsWithChildren>;

package/dist/types/hotkeys/context.d.ts

@@ -0,0 +1,9 @@
+/** @internal */
+export declare const HotKeysContext: import("react").Context<{
+    addHotKey: (key: string, handler: () => void, global?: boolean) => void;
+    removeHotKey: (key: string) => void;
+}>;
+export declare const useHotKeys: () => {
+    addHotKey: (key: string, handler: () => void, global?: boolean) => void;
+    removeHotKey: (key: string) => void;
+};

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export { addTranslationBundle } from "./i18n";
 export { Flyout, Modal, Tooltip } from "./overlays";
 export * from "./typography";
 export * from "./hooks/useClientService";
+export * from "./hooks/useContextMenu";
 export * from "./hooks/useDebounce";
 export * from "./hooks/useEffectDebugger";
 export * from "./hooks/useIsDark";
@@ -18,5 +19,6 @@ export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
 export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
 export { type ModalProps } from "./types";
-export { cloneChildren } from "./utils";
-export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService, } from "./context/Global";
+export { cloneChildren, getBadgeProps, getIconProps } from "./utils";
+export { useApplicationContext, useNotificationService } from "./context/context";
+export { ApplicationProvider } from "./context/Global";

package/dist/types/overlays/alert/Alert.d.ts

@@ -23,7 +23,7 @@ export interface AlertProps {
     /**
      * toast text
      */
-    message: string | JSX.Element;
+    message: string | React.ReactElement;
     /**
      * theme color
      */
@@ -31,7 +31,7 @@ export interface AlertProps {
     /**
      * extra action button
      */
-    actions?: Elements<JSX.Element>;
+    actions?: Elements<React.ReactElement>;
     /**
      * ok label
      */

package/dist/types/overlays/flyout/Flyout.d.ts

@@ -21,11 +21,11 @@ export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
     /**
      * modal title
      */
-    title?: JSX.Element | string | false;
+    title?: React.ReactElement | string | false;
     /**
      * header actions
      */
-    actions?: Elements<JSX.Element>;
+    actions?: Elements<React.ReactElement>;
     /**
      * modal size
      */

package/dist/types/overlays/message/Message.d.ts

@@ -19,7 +19,7 @@ export interface MessageProps {
     /**
      * message text
      */
-    message: string | JSX.Element;
+    message: string | React.ReactElement;
     /**
      * theme color
      */
@@ -27,6 +27,6 @@ export interface MessageProps {
     /**
      * extra action button
      */
-    actions?: Elements<JSX.Element>;
+    actions?: Elements<React.ReactElement>;
 }
 export declare const Message: ({ title, message, color, icon, iconSrc, rtlFlip, actions, onClose, }: MessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/modal/Modal.d.ts

@@ -17,11 +17,11 @@ export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
     /**
      * modal title
      */
-    title?: JSX.Element | string | false;
+    title?: React.ReactElement | string | false;
     /**
      * header actions
      */
-    actions?: Elements<JSX.Element>;
+    actions?: Elements<React.ReactElement>;
     /**
      * modal size
      */

package/dist/types/overlays/toast/Toast.d.ts

@@ -23,7 +23,7 @@ export interface ToastProps {
     /**
      * toast text
      */
-    message: string | JSX.Element;
+    message: string | React.ReactElement;
     /**
      * theme color
      */
@@ -31,7 +31,7 @@ export interface ToastProps {
     /**
      * extra action button
      */
-    actions?: Elements<JSX.Element>;
+    actions?: Elements<React.ReactElement>;
     /**
      * ok label
      */

package/dist/types/overlays/tooltip/Tooltip.d.ts

@@ -12,7 +12,4 @@ export interface TooltipProps extends TooltipType, RefProp {
     disabled?: boolean;
     children: ReactElement<KeyValue>;
 }
-export declare const getTooltipProps: (tooltip?: string | TooltipType, innerRef?: AnyObject) => (TooltipType & {
-    ref: AnyObject;
-}) | undefined;
 export declare const Tooltip: ({ ref, children, color, textColor, content, open, copyContent, disabled, placement: _placement, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/index.d.ts

@@ -1,5 +1,5 @@
 import { type Placement } from "@floating-ui/react";
-import { type JSXElementConstructor, type Ref } from "react";
+import { type JSX, type JSXElementConstructor, type Ref } from "react";
 export type ModalProps<P = unknown> = P & {
     onClose: (...args: AnyObject) => void;
 };
@@ -14,7 +14,7 @@ export interface TooltipType {
     /**
      * tooltip content
      */
-    content?: string | JSX.Element;
+    content?: string | React.ReactElement;
     /**
      * tooltip color
      */

package/dist/types/typography/Abbr.d.ts

@@ -9,15 +9,11 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
      *
      * [textPart, tooltip, color (class name or color string)]
      */
-    abbr: Array<[
-        textPart: string,
-        tooltip: string,
-        color?: ColorType | PaletteType | string
-    ]>;
+    abbr: Array<[textPart: string, tooltip: string, color?: ColorType | PaletteType | string]>;
     /**
      * renderer callback
      */
-    renderer?: (part: string[]) => JSX.Element;
+    renderer?: (part: string[]) => React.ReactElement;
 }
 /**
  * A component that renders abbreviated text with tooltips for additional information.
@@ -28,7 +24,7 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
  * while providing additional context through tooltips.
  *
  * @param {AbbrProps} props - The properties for the Abbr component.
- * @returns {JSX.Element} The rendered Abbr component.
+ * @returns {React.ReactElement} The rendered Abbr component.
  *
  * @example
  * ```jsx
@@ -49,4 +45,4 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--abbr} for more details.
  */
-export declare const Abbr: ({ children, abbr, className, renderer, copyContent, }: AbbrProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Abbr: ({ children, abbr, className, renderer, copyContent }: AbbrProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Anchor.d.ts

@@ -27,7 +27,7 @@ export interface AnchorProps extends ChildrenProp, CssProp, RefProp, AriaProps {
  *
  * @param {AnchorProps} props - The properties for the Anchor component.
  * @param {Tag} as - The HTML element type to render as (default is "a").
- * @returns {JSX.Element} - A styled anchor element with the specified properties.
+ * @returns {React.ReactElement} - A styled anchor element with the specified properties.
  *
  * @example
  * ```jsx

package/dist/types/typography/Copy.d.ts

@@ -5,7 +5,7 @@ import { type CssProp, type SizeType } from "../types";
  * The button displays a tooltip feedback when the text is successfully copied.
  *
  * @param {CopyProps} props - The properties for the Copy component.
- * @returns {JSX.Element} The rendered Copy component.
+ * @returns {React.ReactElement} The rendered Copy component.
  *
  * @example
  * ```jsx

package/dist/types/typography/Mark.d.ts

@@ -9,7 +9,7 @@ export interface MarkProps extends ChildProp<string> {
     /**
      * renderer callback
      */
-    renderer?: (part: string[]) => JSX.Element;
+    renderer?: (part: string[]) => React.ReactElement;
 }
 /**
  * A component that highlights specific text parts with a mark element, allowing for custom rendering and color.
@@ -19,7 +19,7 @@ export interface MarkProps extends ChildProp<string> {
  * allowing for greater flexibility in how the text is presented.
  *
  * @param {MarkProps} props - The properties for the Mark component.
- * @returns {JSX.Element} The rendered Mark component.
+ * @returns {React.ReactElement} The rendered Mark component.
  *
  * @example
  * <Mark

package/dist/types/typography/Text.d.ts

@@ -37,7 +37,7 @@ export interface TextProps extends ChildrenProp, CssProp, AriaProps, TestProps {
  * It leverages the ResizeObserver API to detect changes in the text container's size and adjust the line clamping accordingly.
  *
  * @param {TextProps} props - The properties for the Text component.
- * @returns {JSX.Element} The rendered Text component.
+ * @returns {React.ReactElement} The rendered Text component.
  *
  * @example
  * ```jsx

package/dist/types/typography/Title.d.ts

@@ -29,7 +29,7 @@ export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
  * This component is useful for creating headings or titles in a consistent style across an application.
  *
  * @param {TitleProps} props - The properties for the Title component.
- * @returns {JSX.Element} The rendered Title component.
+ * @returns {React.ReactElement} The rendered Title component.
  *
  * @example
  * ```jsx

package/dist/types/utils/getBadgeProps.d.ts

@@ -0,0 +1,9 @@
+import { BadgeType } from "../types";
+/**
+ * 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 {AnyObject} An object containing badge properties.
+ */
+export declare const getBadgeProps: (badge?: string | number | BadgeType) => AnyObject;

package/dist/types/utils/getIconProps.d.ts

@@ -0,0 +1,2 @@
+import { IconProps, Props } from "../components/icon/Icon";
+export declare const getIconProps: (props: IconProps) => Props;

package/dist/types/utils/getTooltipProps.d.ts

@@ -0,0 +1,4 @@
+import { TooltipType } from "../types";
+export declare const getTooltipProps: (tooltip?: string | TooltipType, innerRef?: AnyObject) => (TooltipType & {
+    ref: AnyObject;
+}) | undefined;

package/dist/types/utils/index.d.ts

@@ -1,4 +1,7 @@
 export * from "./calculateDimensions";
 export * from "./cloneElement";
+export * from "./getBadgeProps";
 export * from "./getColor";
+export * from "./getIconProps";
+export * from "./getTooltipProps";
 export * from "./nodeCheck";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.62",
+  "version": "1.0.0-beta.63",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,27 +35,26 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@floating-ui/react": "~0.27.16",
+    "@floating-ui/react": "~0.27.19",
     "@iconify-json/mdi": "~1.2.3",
     "@iconify-json/svg-spinners": "~1.2.4",
-    "@iconify/tailwind4": "~1.2.1",
-    "@react-fabric/utilities": "^1.0.0-beta.62",
-    "@tailwindcss/postcss": "~4.1.16",
-    "boring-avatars": "~1.11.2",
+    "@iconify/tailwind4": "~1.2.3",
+    "@react-fabric/utilities": "^1.0.0-beta.63",
+    "@tailwindcss/postcss": "~4.2.1",
+    "boring-avatars": "~2.0.4",
     "classnames": "~2.5.1",
-    "color": "~5.0.2",
     "resize-observer-polyfill": "~1.5.1",
-    "tailwindcss": "~4.1.16"
+    "tailwindcss": "~4.2.1"
   },
   "peerDependencies": {
-    "i18next": "~25.6.0",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "react-i18next": "~16.2.1"
+    "i18next": "~25.8.18",
+    "react": "~19.2.4",
+    "react-dom": "~19.2.4",
+    "react-i18next": "~16.5.8"
   },
   "engines": {
-    "node": ">=18.12.0",
-    "npm": ">=8.19.0"
+    "node": ">=22.18.0",
+    "npm": ">=10.8.0"
   },
-  "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
+  "gitHead": "6e0652b15c6384fbc316842862572e21299a5466"
 }

package/src/components/actionLabel/ActionLabel.tsx

@@ -59,7 +59,7 @@ export interface ActionLabelProps
  * It supports custom alignment, disabled states, and can be easily styled with additional CSS classes.
  *
  * @param {ActionLabelProps} props - The properties for the ActionLabel component.
- * @returns {JSX.Element} The rendered ActionLabel component.
+ * @returns {React.ReactElement} The rendered ActionLabel component.
  *
  * @example
  * ```jsx

package/src/components/animations/Animations.tsx

@@ -51,7 +51,7 @@ export interface AnimationProps extends CssProp, AriaProps {
  * It also allows customization of the icon color and stroke color.
  *
  * @param {AnimationProps} props - The properties for the AnimationIndicator component.
- * @returns {JSX.Element} The rendered AnimationIndicator component.
+ * @returns {React.ReactElement} The rendered AnimationIndicator component.
  *
  * @example
  * ```jsx
@@ -134,7 +134,7 @@ export const AnimationIndicator = ({
  * @param {number | string} [props.size="2rem"] - The size of the loader icon.
  * @param {string} props.icon - The icon to be displayed as the loader.
  * @param {"sm" | "md" | "lg"} [props.maskBlur] - The blur effect for the background mask.
- * @returns {JSX.Element} The rendered AnimationLoader component.
+ * @returns {React.ReactElement} The rendered AnimationLoader component.
  */
 export const AnimationLoader = ({
   color = "tint-500",
@@ -178,7 +178,7 @@ export const AnimationLoader = ({
  * @param {Object} props - The properties for the LoadingBars component.
  * @param {ColorType | PaletteType | string} [props.color="tint-500"] - The color of the bars.
  * @param {number | string} [props.size="2rem"] - The size of the bars.
- * @returns {JSX.Element} The rendered LoadingBars component.
+ * @returns {React.ReactElement} The rendered LoadingBars component.
  *
  * @example
  * ```jsx
@@ -205,7 +205,7 @@ export const LoadingBars = (props: {
  * @param {Object} props - The properties for the LoadingSpinner component.
  * @param {ColorType | PaletteType | string} [props.color="tint-700"] - The color of the spinner.
  * @param {number | string} [props.size="2rem"] - The size of the spinner.
- * @returns {JSX.Element} The rendered LoadingSpinner component.
+ * @returns {React.ReactElement} The rendered LoadingSpinner component.
  *
  * @example
  * ```jsx
@@ -229,7 +229,7 @@ export const LoadingSpinner = (props: {
  * providing a visual placeholder for content that is being loaded.
  *
  * @param {CssProp} props - The properties for the Skeleton component.
- * @returns {JSX.Element} The rendered Skeleton component.
+ * @returns {React.ReactElement} The rendered Skeleton component.
  *
  * @example
  * ```jsx
@@ -266,7 +266,7 @@ export const Skeleton = ({ className, ...rest }: CssProp) => {
  * A component that displays a loading animation with a top border.
  * It is typically used to indicate that content is being loaded in pages and page sections.
  *
- * @returns {JSX.Element} The rendered Loading component.
+ * @returns {React.ReactElement} The rendered Loading component.
  */
 export const LoadingLine = () => {
   return (

package/src/components/avatar/Avatar.tsx

@@ -99,7 +99,7 @@ const SizeMap: KeyValue<string> = {
  * It uses the Boring Avatars library for generating fallback avatars based on the user's name.
  *
  * @param {AvatarProps} props - The properties for the Avatar component.
- * @returns {JSX.Element} The rendered Avatar component.
+ * @returns {React.ReactElement} The rendered Avatar component.
  *
  * @example
  * ```jsx

package/src/components/avatar/AvatarGroup.tsx

@@ -68,7 +68,7 @@ const SizeMap: KeyValue<string> = {
  * It automatically calculates the number of additional avatars based on the `totalCount` prop and the number of children provided.
  *
  * @param {AvatarGroupProps} props - The properties for the AvatarGroup component.
- * @returns {JSX.Element} The rendered AvatarGroup component.
+ * @returns {React.ReactElement} The rendered AvatarGroup component.
  *
  * @example
  * ```jsx

package/src/components/badge/Badge.tsx

@@ -21,16 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { isNil, isNumber, isObject, mergeRefs } from "@react-fabric/utilities";
+import { isNil, isNumber, mergeRefs } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { cloneElement, isValidElement, useMemo } from "react";
-import {
-  type BadgeType,
-  type ChildProp,
-  type CssProp,
-  type RefProp,
-} from "../../types";
-import { getIconProps, Icon, type IconProps } from "../icon/Icon";
+import { type ChildProp, type CssProp, type RefProp } from "../../types";
+import { getIconProps } from "../../utils";
+import { Icon, type IconProps } from "../icon/Icon";
 
 export interface BadgeProps extends CssProp, RefProp, Partial<ChildProp> {
   /**
@@ -60,38 +56,9 @@ export interface BadgeProps extends CssProp, RefProp, Partial<ChildProp> {
   /**
    * badge placement
    */
-  placement?:
-    | "top-start"
-    | "top-end"
-    | "bottom-start"
-    | "bottom-end"
-    | "top"
-    | "bottom"
-    | "start"
-    | "end";
+  placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top" | "bottom" | "start" | "end";
 }
 
-/**
- * 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 {AnyObject} An object containing badge properties.
- */
-export const getBadgeProps = (
-  badge?: string | number | BadgeType,
-): AnyObject => {
-  if (isObject(badge) && !isValidElement(badge)) {
-    return Object.assign({ forButton: true, placement: "" }, badge);
-  } else {
-    return {
-      value: badge,
-      forButton: true,
-      placement: "",
-    };
-  }
-};
-
 /**
  * A component that displays a badge with a value, icon, and optional ping animation.
  * It can be used to indicate notifications, messages, or other important information.
@@ -99,7 +66,7 @@ export const getBadgeProps = (
  * It can also wrap children elements, allowing for flexible usage in buttons or other components.
  *
  * @param {BadgeProps} props - The properties for the Badge component.
- * @returns {JSX.Element} The rendered Badge component.
+ * @returns {React.ReactElement} The rendered Badge component.
  *
  * @example
  * ```jsx
@@ -137,10 +104,7 @@ export const Badge = ({
     }
   }, [value, max]);
 
-  const innerRef = useMemo(
-    () => mergeRefs(ref, (children as AnyObject)?.props.ref),
-    [ref, (children as AnyObject)?.props.ref],
-  );
+  const innerRef = useMemo(() => mergeRefs(ref, (children as AnyObject)?.props.ref), [ref, (children as AnyObject)?.props.ref]);
 
   /**
    * wrap children in a relative div to float badge, wrapper allows for floating a badge on elements with overflow hidden
@@ -166,9 +130,7 @@ export const Badge = ({
             "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 flex-content"
-              : "absolute",
+            (forButton && !placement) || inline ? "relative flex-content" : "absolute",
           )}
         >
           {label && <span className="p-1">{label}</span>}

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -52,7 +52,7 @@ export interface BreadcrumbProps
  * It automatically manages the display of overflow items when there are too many links to fit in the available space, providing a dropdown for additional links.
  *
  * @param {BreadcrumbProps} props - The properties for the Breadcrumbs component.
- * @returns {JSX.Element} The rendered Breadcrumbs component.
+ * @returns {React.ReactElement} The rendered Breadcrumbs component.
  *
  * @example
  * ```jsx