@react-fabric/core 1.0.0-beta.49 → 1.0.0-beta.51

package/css/components/_card.css

@@ -153,4 +153,22 @@
       }
     }
   }
+
+  [data-card-flip-face="front"] {
+    backface-visibility: hidden;
+  }
+
+  [data-card-flip-face="back"] {
+    transform: rotateY(180deg);
+    backface-visibility: hidden;
+  }
+
+  [data-card-flip] {
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+  }
+
+  [data-card-flip="true"] {
+    transform: rotateY(180deg);
+  }
 }

package/css/core/_aside.css

@@ -141,6 +141,20 @@
     }
   }
 
+  [dir="rtl"] .fabric-aside[data-align="start"],
+  [dir="ltr"] .fabric-aside[data-align="end"] {
+    & .fabric-asideCollapse {
+      transform: scaleX(-1);
+    }
+  }
+
+  [dir="ltr"] .fabric-aside[data-align="start"],
+  [dir="rtl"] .fabric-aside[data-align="end"] {
+    & .fabric-asideCollapse {
+      transform: scaleX(1);
+    }
+  }
+
   .fabric-aside[data-collapsed="true"] {
     position: relative;
     overflow: visible;

package/css/reset/_reset.css

@@ -170,7 +170,7 @@
       transform: scaleY(0.5);
 
       height: auto;
-      margin: 1rem 0;
+      margin: 0.25rem 0;
 
       background: none;
       border: 0;

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

@@ -0,0 +1,35 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var classNames = require('classnames');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var 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(!showBack);
+      }
+    };
+  }, [showBack]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "relative flex-1",
+    "data-card-flip": showBack,
+    children: react.Children.map(children, function (child, idx) {
+      var _child$props$classNam, _child$props;
+      return /*#__PURE__*/react.isValidElement(child) && /*#__PURE__*/react.cloneElement(child, {
+        className: classNames((_child$props$classNam = (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className) !== null && _child$props$classNam !== void 0 ? _child$props$classNam : "", idx === 0 ? "bg-base relative" : "bg-base absolute inset-0"),
+        "data-card-flip-face": idx === 0 ? "front" : "back"
+      });
+    })
+  });
+};
+
+exports.FlipContent = FlipContent;

package/dist/cjs/components/progress/ProgressBar.js

@@ -30,11 +30,11 @@ var ProgressBar = function ProgressBar(_ref) {
     animate = _ref.animate;
   /** ***************** make sure value is between 0 and 100 *******************/
   var actualValue = useEffectDebugger.useMemoDebugger(function () {
-    return Math.min(Math.max(value, 0), 100);
+    return Math.min(Math.max(value, 0), 1);
   }, [value], "ProgressBar value");
   var progressVar = useEffectDebugger.useMemoDebugger(function () {
     return {
-      "--progress": actualValue
+      "--progress": actualValue * 100
     };
   }, [actualValue], "ProgressBar cssVar");
 
@@ -50,12 +50,12 @@ var ProgressBar = function ProgressBar(_ref) {
     "aria-hidden": "true",
     children: [!["xxs", "xs", "sm"].includes(size !== null && size !== void 0 ? size : "") && /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "absolute inset-0 text-center z-0 align-top",
-      children: [label, " ", utilities.Format.percent(actualValue / 100)]
+      children: [label, " ", utilities.Format.percent(actualValue)]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames("fabric-progressTrack", animate && "fabric-progressAnimate", "h-full overflow-clip bg-current relative z-0")
     }), !["xxs", "xs", "sm"].includes(size !== null && size !== void 0 ? size : "") && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames("h-full absolute inset-0 overflow-hidden z-1"),
-      "data-label": "".concat(label, " ").concat(utilities.Format.percent(actualValue / 100))
+      "data-label": "".concat(label, " ").concat(utilities.Format.percent(actualValue))
     })]
   });
 };

package/dist/cjs/components/progress/ProgressCircle.js

@@ -46,13 +46,13 @@ var ProgressCircle = function ProgressCircle(_ref) {
     color = _ref$color === void 0 ? "primary-500" : _ref$color;
   /** ***************** make sure value is between 0 and 100 *******************/
   var actualValue = useEffectDebugger.useMemoDebugger(function () {
-    return Math.min(Math.max(value, 0), 100);
+    return Math.min(Math.max(value, 0), 1);
   }, [value], "ProgressCirle value");
 
   /** ***************** calculate stroke offset by actual value *******************/
   var strokeDashoffset = useEffectDebugger.useMemoDebugger(function () {
     var circumfrence = Math.PI * 2 * 44;
-    return circumfrence * (1 - actualValue / 100);
+    return circumfrence * (1 - actualValue);
   }, [actualValue], "ProgressCirle dashOffset");
 
   /** ***************** component *******************/
@@ -90,7 +90,7 @@ var ProgressCircle = function ProgressCircle(_ref) {
       })]
     }), /*#__PURE__*/jsxRuntime.jsx("span", {
       className: "flex w-full h-full items-center justify-center select-none font-bold text-[0.625em]",
-      children: utilities.Format.percent(actualValue / 100)
+      children: utilities.Format.percent(actualValue)
     })]
   });
 };

package/dist/cjs/context/NotificationCenter.js

@@ -221,7 +221,7 @@ var NotificationManager = function NotificationManager(_ref) {
       style: {
         zIndex: "var(--z-overlay)"
       },
-      className: "ruf-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent",
+      className: "fabric-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent",
       children: Object.values(alerts).map(function (_ref7) {
         var _ref8 = _slicedToArray(_ref7, 1),
           el = _ref8[0];
@@ -231,7 +231,7 @@ var NotificationManager = function NotificationManager(_ref) {
       style: {
         zIndex: "var(--z-notifications)"
       },
-      className: "ruf-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end",
+      className: "fabric-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end",
       children: Object.values(messages).map(function (_ref9) {
         var _ref10 = _slicedToArray(_ref9, 1),
           el = _ref10[0];
@@ -241,7 +241,7 @@ var NotificationManager = function NotificationManager(_ref) {
       style: {
         zIndex: "var(--z-notifications)"
       },
-      className: "ruf-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide",
+      className: "fabric-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide",
       children: Object.values(toasts).map(function (_ref11) {
         var _ref12 = _slicedToArray(_ref11, 1),
           el = _ref12[0];

package/dist/cjs/hooks/useDebounce.js

@@ -27,7 +27,7 @@ var react = require('react');
 
 var useDebounce = function useDebounce(callback, deps) {
   var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
-  var timerRef = react.useRef();
+  var timerRef = react.useRef(null);
   var cb = react.useMemo(function () {
     if (typeof window !== "undefined") {
       window.clearTimeout(timerRef.current);

package/dist/cjs/index.js

@@ -13,6 +13,7 @@ var ToggleButtonGroup = require('./components/button/ToggleButtonGroup.js');
 var Callout = require('./components/callout/Callout.js');
 var Card = require('./components/card/Card.js');
 var CardCover = require('./components/card/CardCover.js');
+var FlipContent = require('./components/card/FlipContent.js');
 var Chip = require('./components/chip/Chip.js');
 var Collapsable = require('./components/collapsable/Collapsable.js');
 var Divider = require('./components/divider/Divider.js');
@@ -97,6 +98,7 @@ exports.ToggleButtonGroup = ToggleButtonGroup.ToggleButtonGroup;
 exports.Callout = Callout.Callout;
 exports.Card = Card.Card;
 exports.CardCover = CardCover.CardCover;
+exports.FlipContent = FlipContent.FlipContent;
 exports.Chip = Chip.Chip;
 exports.Collapsable = Collapsable.Collapsable;
 exports.Divider = Divider.Divider;

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

@@ -130,7 +130,7 @@ var Alert = function Alert(_ref) {
               "--tw-ring-color": getColor.getColor("".concat(color, "-500"))
             },
             ref: function ref(e) {
-              return e != null && setTimeout(function () {
+              e != null && setTimeout(function () {
                 return e.focus();
               }, 100);
             },

package/dist/cjs/utils/cloneElement.js

@@ -37,6 +37,9 @@ var cloneChildren = function cloneChildren(children, callback) {
       }
       return c;
     }
+    if (c instanceof Promise) {
+      return undefined;
+    }
     return c;
   })) === null || _Children$map === void 0 ? void 0 : _Children$map.flat().filter(Boolean).map(callback);
 };

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

@@ -0,0 +1,35 @@
+'use client';
+
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import classNames from 'classnames';
+import { useState, useImperativeHandle, Children, isValidElement, cloneElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var FlipContent = function FlipContent(_ref) {
+  var ref = _ref.ref,
+    children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showBack = _useState2[0],
+    setShowBack = _useState2[1];
+  useImperativeHandle(ref, function () {
+    return {
+      flipCard: function flipCard() {
+        return setShowBack(!showBack);
+      }
+    };
+  }, [showBack]);
+  return /*#__PURE__*/jsx("div", {
+    className: "relative flex-1",
+    "data-card-flip": showBack,
+    children: Children.map(children, function (child, idx) {
+      var _child$props$classNam, _child$props;
+      return /*#__PURE__*/isValidElement(child) && /*#__PURE__*/cloneElement(child, {
+        className: classNames((_child$props$classNam = (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.className) !== null && _child$props$classNam !== void 0 ? _child$props$classNam : "", idx === 0 ? "bg-base relative" : "bg-base absolute inset-0"),
+        "data-card-flip-face": idx === 0 ? "front" : "back"
+      });
+    })
+  });
+};
+
+export { FlipContent };

package/dist/esm/components/progress/ProgressBar.js

@@ -30,11 +30,11 @@ var ProgressBar = function ProgressBar(_ref) {
     animate = _ref.animate;
   /** ***************** make sure value is between 0 and 100 *******************/
   var actualValue = useMemoDebugger(function () {
-    return Math.min(Math.max(value, 0), 100);
+    return Math.min(Math.max(value, 0), 1);
   }, [value], "ProgressBar value");
   var progressVar = useMemoDebugger(function () {
     return {
-      "--progress": actualValue
+      "--progress": actualValue * 100
     };
   }, [actualValue], "ProgressBar cssVar");
 
@@ -50,12 +50,12 @@ var ProgressBar = function ProgressBar(_ref) {
     "aria-hidden": "true",
     children: [!["xxs", "xs", "sm"].includes(size !== null && size !== void 0 ? size : "") && /*#__PURE__*/jsxs("div", {
       className: "absolute inset-0 text-center z-0 align-top",
-      children: [label, " ", Format.percent(actualValue / 100)]
+      children: [label, " ", Format.percent(actualValue)]
     }), /*#__PURE__*/jsx("div", {
       className: classNames("fabric-progressTrack", animate && "fabric-progressAnimate", "h-full overflow-clip bg-current relative z-0")
     }), !["xxs", "xs", "sm"].includes(size !== null && size !== void 0 ? size : "") && /*#__PURE__*/jsx("div", {
       className: classNames("h-full absolute inset-0 overflow-hidden z-1"),
-      "data-label": "".concat(label, " ").concat(Format.percent(actualValue / 100))
+      "data-label": "".concat(label, " ").concat(Format.percent(actualValue))
     })]
   });
 };

package/dist/esm/components/progress/ProgressCircle.js

@@ -46,13 +46,13 @@ var ProgressCircle = function ProgressCircle(_ref) {
     color = _ref$color === void 0 ? "primary-500" : _ref$color;
   /** ***************** make sure value is between 0 and 100 *******************/
   var actualValue = useMemoDebugger(function () {
-    return Math.min(Math.max(value, 0), 100);
+    return Math.min(Math.max(value, 0), 1);
   }, [value], "ProgressCirle value");
 
   /** ***************** calculate stroke offset by actual value *******************/
   var strokeDashoffset = useMemoDebugger(function () {
     var circumfrence = Math.PI * 2 * 44;
-    return circumfrence * (1 - actualValue / 100);
+    return circumfrence * (1 - actualValue);
   }, [actualValue], "ProgressCirle dashOffset");
 
   /** ***************** component *******************/
@@ -90,7 +90,7 @@ var ProgressCircle = function ProgressCircle(_ref) {
       })]
     }), /*#__PURE__*/jsx("span", {
       className: "flex w-full h-full items-center justify-center select-none font-bold text-[0.625em]",
-      children: Format.percent(actualValue / 100)
+      children: Format.percent(actualValue)
     })]
   });
 };

package/dist/esm/context/NotificationCenter.js

@@ -221,7 +221,7 @@ var NotificationManager = function NotificationManager(_ref) {
       style: {
         zIndex: "var(--z-overlay)"
       },
-      className: "ruf-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent",
+      className: "fabric-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent",
       children: Object.values(alerts).map(function (_ref7) {
         var _ref8 = _slicedToArray(_ref7, 1),
           el = _ref8[0];
@@ -231,7 +231,7 @@ var NotificationManager = function NotificationManager(_ref) {
       style: {
         zIndex: "var(--z-notifications)"
       },
-      className: "ruf-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end",
+      className: "fabric-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end",
       children: Object.values(messages).map(function (_ref9) {
         var _ref10 = _slicedToArray(_ref9, 1),
           el = _ref10[0];
@@ -241,7 +241,7 @@ var NotificationManager = function NotificationManager(_ref) {
       style: {
         zIndex: "var(--z-notifications)"
       },
-      className: "ruf-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide",
+      className: "fabric-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide",
       children: Object.values(toasts).map(function (_ref11) {
         var _ref12 = _slicedToArray(_ref11, 1),
           el = _ref12[0];

package/dist/esm/hooks/useDebounce.js

@@ -27,7 +27,7 @@ import { useRef, useMemo } from 'react';
 
 var useDebounce = function useDebounce(callback, deps) {
   var delay = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 100;
-  var timerRef = useRef();
+  var timerRef = useRef(null);
   var cb = useMemo(function () {
     if (typeof window !== "undefined") {
       window.clearTimeout(timerRef.current);

package/dist/esm/index.js

@@ -13,6 +13,7 @@ export { ToggleButtonGroup } from './components/button/ToggleButtonGroup.js';
 export { Callout } from './components/callout/Callout.js';
 export { Card } from './components/card/Card.js';
 export { CardCover } from './components/card/CardCover.js';
+export { FlipContent } from './components/card/FlipContent.js';
 export { Chip } from './components/chip/Chip.js';
 export { Collapsable } from './components/collapsable/Collapsable.js';
 export { Divider } from './components/divider/Divider.js';

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

@@ -130,7 +130,7 @@ var Alert = function Alert(_ref) {
               "--tw-ring-color": getColor("".concat(color, "-500"))
             },
             ref: function ref(e) {
-              return e != null && setTimeout(function () {
+              e != null && setTimeout(function () {
                 return e.focus();
               }, 100);
             },

package/dist/esm/utils/cloneElement.js

@@ -37,6 +37,9 @@ var cloneChildren = function cloneChildren(children, callback) {
       }
       return c;
     }
+    if (c instanceof Promise) {
+      return undefined;
+    }
     return c;
   })) === null || _Children$map === void 0 ? void 0 : _Children$map.flat().filter(Boolean).map(callback);
 };

package/dist/types/components/collapsable/Collapsable.d.ts

@@ -1,8 +1,8 @@
 import { type RefObject } from "react";
 import { type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
 interface CollapsableRef {
-    button: RefObject<HTMLElement>;
-    body: RefObject<HTMLElement>;
+    button: RefObject<HTMLElement | null>;
+    body: RefObject<HTMLElement | null>;
     open: boolean;
 }
 export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp<CollapsableRef>, ChildrenProp {

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

@@ -1,5 +1,5 @@
 export { ActionLabel } from "./actionLabel/ActionLabel";
-export { AnimationBars, AnimationIndicator, AnimationSpinner, Skeleton, Loading, } from "./animations/Animations";
+export { AnimationBars, AnimationIndicator, AnimationSpinner, Loading, Skeleton, } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";
 export { Badge, getBadgeProps } from "./badge/Badge";
@@ -11,6 +11,7 @@ export { ToggleButtonGroup } from "./button/ToggleButtonGroup";
 export { Callout } from "./callout/Callout";
 export { Card } from "./card/Card";
 export { CardCover } from "./card/CardCover";
+export { FlipContent, type FlipContentRef } from "./card/FlipContent";
 export { Chip } from "./chip/Chip";
 export { Collapsable } from "./collapsable/Collapsable";
 export { Divider } from "./divider/Divider";

package/dist/types/components/panel/Panel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
 import { type AriaProps, type ChildrenProp, type CollapseProps, type CssProp, type ExpandProps, type IconProps, type TestProps } from "../../types";

package/dist/types/components/progress/ProgressBar.d.ts

@@ -1,7 +1,7 @@
 import { type PaletteType, type ColorType } from "../../types";
 export interface ProgressProps {
     /**
-     * progress value (0-100)
+     * progress value (0-1)
      */
     value: number;
     /**

package/dist/types/components/progress/ProgressCircle.d.ts

@@ -1,7 +1,7 @@
 import { type PaletteType, type ColorType } from "../../types";
 export interface ProgressProps {
     /**
-     * progress value (0-100)
+     * progress value (0-1)
      */
     value: number;
     /**

package/dist/types/core/boundary/ErrorBoundary.d.ts

@@ -22,5 +22,5 @@ export declare class ErrorBoundary extends Component<{
     };
     constructor(props: AnyObject);
     componentDidCatch(error: Error): void;
-    render(): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }

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

@@ -21,7 +21,7 @@ export declare const useResize: <T extends HTMLElement = HTMLDivElement>(onResiz
     x: number;
     y: number;
 }) => void, { isReverse, isVertical, onStart, onEnd }: Options) => {
-    ref: RefObject<T>;
+    ref: RefObject<T | null>;
     onMouseDown: React.MouseEventHandler;
 };
 export {};

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

@@ -1,3 +1,3 @@
 import { type RefObject } from "react";
 import { type SizeObject } from "../types";
-export declare const useResizeObserver: <T extends HTMLElement = HTMLDivElement>(onResize?: (size: SizeObject) => void) => RefObject<T>;
+export declare const useResizeObserver: <T extends HTMLElement = HTMLDivElement>(onResize?: (size: SizeObject) => void) => RefObject<T | null>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ColorState, type Elements, type IconProps } from "../../types";
 export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ColorState, type Elements, type IconProps } from "../../types";
 export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ColorState, type Elements, type IconProps } from "../../types";
 export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**

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

@@ -10,7 +10,7 @@ export interface TooltipProps extends TooltipType, RefProp {
      */
     copyContent?: boolean | string;
     disabled?: boolean;
-    children: ReactElement;
+    children: ReactElement<KeyValue>;
 }
 export declare const getTooltipProps: (tooltip?: string | TooltipType, innerRef?: AnyObject) => (TooltipType & {
     ref: AnyObject;

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

@@ -51,6 +51,10 @@ export interface CssProp {
      * css classname(s)
      */
     className?: string;
+    /**
+     * direction
+     */
+    dir?: "ltr" | "rtl";
 }
 export interface TestProps {
     /**
@@ -150,3 +154,7 @@ export interface ScrollObject extends PositionObject, SizeObject {
     scrollWidth?: number;
     scrollHeight: number;
 }
+export type ArrayType<T extends readonly any[] | ArrayLike<any> | undefined> = T extends readonly any[] ? T[number] : T extends ArrayLike<any> ? T[number] : undefined;
+export type Complete<T> = {
+    [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>> ? T[P] : T[P] | undefined;
+};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ChildProp, type ColorType, type CssProp, type PaletteType } from "../types";
 export interface AbbrProps extends ChildProp<string>, CssProp {
     /**

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ChildProp, type ColorType, type PaletteType } from "../types";
 export interface MarkProps extends ChildProp<string> {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/core",
-  "version": "1.0.0-beta.49",
+  "version": "1.0.0-beta.51",
   "description": "RUF: Core package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,24 +35,24 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.9",
-    "@react-fabric/utilities": "^1.0.0-beta.49",
-    "@tailwindcss/postcss": "~4.0.14",
+    "@floating-ui/react": "^0.27.12",
+    "@react-fabric/utilities": "^1.0.0-beta.50",
+    "@tailwindcss/postcss": "~4.1.8",
     "boring-avatars": "^1.11.2",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "resize-observer-polyfill": "^1.5.1",
-    "tailwindcss": "^4.0.14"
+    "tailwindcss": "^4.1.8"
   },
   "peerDependencies": {
-    "i18next": "^23.15.1",
+    "i18next": "^25.2.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-i18next": "^15.0.2"
+    "react-i18next": "^15.5.2"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "29b3ed65e9f9687d738dd7c6facdb9fedafb4219"
+  "gitHead": "a1b04de4663045f82992bff2aef8db26608eac74"
 }

package/src/components/collapsable/Collapsable.tsx

@@ -42,8 +42,8 @@ import { CoreIcons } from "../../types/icons";
 import { Icon } from "../icon/Icon";
 
 interface CollapsableRef {
-  button: RefObject<HTMLElement>;
-  body: RefObject<HTMLElement>;
+  button: RefObject<HTMLElement | null>;
+  body: RefObject<HTMLElement | null>;
   open: boolean;
 }
 

package/src/components/index.ts

@@ -26,8 +26,8 @@ export {
   AnimationBars,
   AnimationIndicator,
   AnimationSpinner,
-  Skeleton,
   Loading,
+  Skeleton,
 } from "./animations/Animations";
 export { Avatar } from "./avatar/Avatar";
 export { AvatarGroup } from "./avatar/AvatarGroup";
@@ -40,6 +40,7 @@ export { ToggleButtonGroup } from "./button/ToggleButtonGroup";
 export { Callout } from "./callout/Callout";
 export { Card } from "./card/Card";
 export { CardCover } from "./card/CardCover";
+export { FlipContent, type FlipContentRef } from "./card/FlipContent";
 export { Chip } from "./chip/Chip";
 export { Collapsable } from "./collapsable/Collapsable";
 export { Divider } from "./divider/Divider";

package/src/components/progress/ProgressBar.tsx

@@ -29,7 +29,7 @@ import { getColor } from "../../utils";
 
 export interface ProgressProps {
   /**
-   * progress value (0-100)
+   * progress value (0-1)
    */
   value: number;
   /**
@@ -69,14 +69,14 @@ export const ProgressBar = ({
 }: ProgressProps) => {
   /** ***************** make sure value is between 0 and 100 *******************/
   const actualValue = useMemoDebugger(
-    () => Math.min(Math.max(value, 0), 100),
+    () => Math.min(Math.max(value, 0), 1),
     [value],
     "ProgressBar value",
   );
 
   const progressVar = useMemoDebugger<KeyValue>(
     () => ({
-      "--progress": actualValue,
+      "--progress": actualValue * 100,
     }),
     [actualValue],
     "ProgressBar cssVar",
@@ -100,7 +100,7 @@ export const ProgressBar = ({
     >
       {!["xxs", "xs", "sm"].includes(size ?? "") && (
         <div className="absolute inset-0 text-center z-0 align-top">
-          {label} {Format.percent(actualValue / 100)}
+          {label} {Format.percent(actualValue)}
         </div>
       )}
       <div
@@ -113,7 +113,7 @@ export const ProgressBar = ({
       {!["xxs", "xs", "sm"].includes(size ?? "") && (
         <div
           className={classNames("h-full absolute inset-0 overflow-hidden z-1")}
-          data-label={`${label} ${Format.percent(actualValue / 100)}`}
+          data-label={`${label} ${Format.percent(actualValue)}`}
         />
       )}
     </div>

package/src/components/progress/ProgressCircle.tsx

@@ -29,7 +29,7 @@ import { getColor } from "../../utils";
 
 export interface ProgressProps {
   /**
-   * progress value (0-100)
+   * progress value (0-1)
    */
   value: number;
   /**
@@ -57,7 +57,7 @@ export const ProgressCircle = ({
 }: ProgressProps) => {
   /** ***************** make sure value is between 0 and 100 *******************/
   const actualValue = useMemoDebugger(
-    () => Math.min(Math.max(value, 0), 100),
+    () => Math.min(Math.max(value, 0), 1),
     [value],
     "ProgressCirle value",
   );
@@ -66,7 +66,7 @@ export const ProgressCircle = ({
   const strokeDashoffset = useMemoDebugger(
     () => {
       const circumfrence = Math.PI * 2 * 44;
-      return circumfrence * (1 - actualValue / 100);
+      return circumfrence * (1 - actualValue);
     },
     [actualValue],
     "ProgressCirle dashOffset",
@@ -108,7 +108,7 @@ export const ProgressCircle = ({
         />
       </svg>
       <span className="flex w-full h-full items-center justify-center select-none font-bold text-[0.625em]">
-        {Format.percent(actualValue / 100)}
+        {Format.percent(actualValue)}
       </span>
     </div>
   );

package/src/context/NotificationCenter.tsx

@@ -194,7 +194,7 @@ export const NotificationManager = ({ onLoad }: KeyValue) => {
       {createPortal(
         <div
           style={{ zIndex: "var(--z-overlay)" }}
-          className="ruf-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent"
+          className="fabric-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent"
         >
           {Object.values(alerts).map(([el]: AnyObject) => el)}
         </div>,
@@ -203,7 +203,7 @@ export const NotificationManager = ({ onLoad }: KeyValue) => {
       {createPortal(
         <div
           style={{ zIndex: "var(--z-notifications)" }}
-          className="ruf-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end"
+          className="fabric-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end"
         >
           {Object.values(messages).map(([el]: AnyObject) => el)}
         </div>,
@@ -212,7 +212,7 @@ export const NotificationManager = ({ onLoad }: KeyValue) => {
       {createPortal(
         <div
           style={{ zIndex: "var(--z-notifications)" }}
-          className="ruf-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide"
+          className="fabric-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide"
         >
           {Object.values(toasts).map(([el]: AnyObject) => el)}
         </div>,

package/src/hooks/useDebounce.ts

@@ -28,7 +28,7 @@ export const useDebounce = (
   deps: AnyObject[],
   delay: number = 100,
 ) => {
-  const timerRef = useRef<AnyObject>();
+  const timerRef = useRef<AnyObject>(null);
 
   const cb = useMemo(() => {
     if (typeof window !== "undefined") {

package/src/hooks/useResize.ts

@@ -46,7 +46,7 @@ interface Options {
 export const useResize = <T extends HTMLElement = HTMLDivElement>(
   onResize: (diff: { x: number; y: number }) => void,
   { isReverse = false, isVertical = false, onStart, onEnd }: Options,
-): { ref: RefObject<T>; onMouseDown: React.MouseEventHandler } => {
+): { ref: RefObject<T | null>; onMouseDown: React.MouseEventHandler } => {
   const refEl = useRef<T>(null);
   const isRtl = useIsRtl();
 

package/src/hooks/useResizeObserver.ts

@@ -28,7 +28,7 @@ import { useDebounce } from "./useDebounce";
 
 export const useResizeObserver = <T extends HTMLElement = HTMLDivElement>(
   onResize?: (size: SizeObject) => void,
-): RefObject<T> => {
+): RefObject<T | null> => {
   const ref = useRef<T>(null);
   const [, startTransition] = useTransition();
 

package/src/overlays/alert/Alert.tsx

@@ -193,7 +193,9 @@ export const Alert = ({
                     "--tw-ring-color": getColor(`${color}-500`),
                   } as AnyObject
                 }
-                ref={(e) => e != null && setTimeout(() => e.focus(), 100)}
+                ref={(e) => {
+                  e != null && setTimeout(() => e.focus(), 100);
+                }}
                 onBlur={(e) => e.target.focus()}
                 onChange={(e) => setValue(e.target.value)}
                 onKeyDown={(e) => e.key === "Enter" && handleClose(value)}

package/src/overlays/tooltip/Tooltip.tsx

@@ -64,7 +64,7 @@ export interface TooltipProps extends TooltipType, RefProp {
    */
   copyContent?: boolean | string;
   disabled?: boolean;
-  children: ReactElement;
+  children: ReactElement<KeyValue>;
 }
 
 export const getTooltipProps = (

package/src/types/index.ts

@@ -336,6 +336,10 @@ export interface CssProp {
    * css classname(s)
    */
   className?: string;
+  /**
+   * direction
+   */
+  dir?: "ltr" | "rtl";
 }
 
 export interface TestProps {
@@ -463,3 +467,16 @@ export interface ScrollObject extends PositionObject, SizeObject {
   scrollWidth?: number;
   scrollHeight: number;
 }
+
+export type ArrayType<T extends readonly any[] | ArrayLike<any> | undefined> =
+  T extends readonly any[]
+    ? T[number]
+    : T extends ArrayLike<any>
+      ? T[number]
+      : undefined;
+
+export type Complete<T> = {
+  [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>>
+    ? T[P]
+    : T[P] | undefined;
+};

package/src/utils/cloneElement.ts

@@ -32,11 +32,14 @@ export const cloneChildren = (
     if (isValidElement(c)) {
       if (c.type === Fragment) {
         // just compare to `Fragment`
-        return cloneChildren(c.props?.children, callback);
+        return cloneChildren((c.props as AnyObject)?.children, callback);
       }
       return c;
     }
-    return c;
+    if (c instanceof Promise) {
+      return undefined;
+    }
+    return c as AnyObject;
   })
     ?.flat()
     .filter(Boolean)