@react-fabric/core 1.0.0-beta.5 → 1.0.0-beta.52

package/src/components/progress/ProgressCircle.tsx

@@ -24,12 +24,12 @@
 import { Format } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
-import { type ColorType } from "../../types";
-import { getColorClass } from "../../utils";
+import { type PaletteType, type ColorType } from "../../types";
+import { getColor } from "../../utils";
 
 export interface ProgressProps {
   /**
-   * progress value (0-100)
+   * progress value (0-1)
    */
   value: number;
   /**
@@ -39,7 +39,7 @@ export interface ProgressProps {
   /**
    * color
    */
-  color?: ColorType;
+  color?: ColorType | PaletteType;
 }
 
 const SizeMap: KeyValue = {
@@ -50,14 +50,33 @@ const SizeMap: KeyValue = {
   xl: "2rem",
 };
 
+/**
+ * A circular progress indicator that visually represents a percentage of completion.
+ * It displays a circular track with a stroke that fills based on the `value` prop.
+ * The component is customizable with size and color props.
+ *
+ * @param {ProgressProps} props - The properties for the ProgressCircle component.
+ * @returns {JSX.Element} - A circular progress indicator.
+ *
+ * @example
+ * ```jsx
+ * <ProgressCircle value={0.75} size="md" color="primary-500" />
+ * // Renders a circular progress indicator with 75% completion, medium size, and primary color.
+ *
+ * <ProgressCircle value={0.5} size="lg" color="secondary-500" />
+ * // Renders a circular progress indicator with 50% completion, large size, and secondary color.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-progress--docs} for more details.
+ */
 export const ProgressCircle = ({
   value = 0,
   size = "sm",
-  color = "primary",
+  color = "primary-500",
 }: 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 +85,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",
@@ -75,12 +94,9 @@ export const ProgressCircle = ({
   /** ***************** component *******************/
   return (
     <div
-      className={classNames(
-        "inline-block w-[4em] h-[4em] text-lg relative",
-        getColorClass(color),
-      )}
+      className={classNames("inline-block w-[4em] h-[4em] text-lg relative")}
       aria-hidden="true"
-      style={{ fontSize: SizeMap[size] }}
+      style={{ fontSize: SizeMap[size], color: getColor(color) }}
     >
       <svg
         viewBox="0 0 100 100"
@@ -111,7 +127,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/components/tabpanel/Tab.tsx

@@ -21,24 +21,26 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { type ReactElement, useMemo } from "react";
+import { Fragment, type ReactElement, useMemo } from "react";
+import { Tooltip } from "../../overlays";
 import {
   type AriaProps,
   type BadgeType,
   type CallbackReturn,
   type ChildrenProp,
-  type ColorType,
+  type ColorState,
   type CssProp,
   type IconProps,
   type PolymorphicProps,
   type RefProp,
   type TestProps,
+  type TooltipProp,
 } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { DropdownTool } from "../dropdown/DropdownTool";
 import { Icon } from "../icon/Icon";
-import classes from "./TabPanel.module.css";
 
 export interface TabProps
   extends Partial<ChildrenProp>,
@@ -46,7 +48,8 @@ export interface TabProps
     RefProp,
     AriaProps,
     TestProps,
-    IconProps {
+    IconProps,
+    TooltipProp {
   /**
    * tab id
    */
@@ -58,11 +61,11 @@ export interface TabProps
   /**
    * tab color
    */
-  color?: ColorType;
+  color?: ColorState;
   /**
    * tab badge
    */
-  badge?: BadgeType;
+  badge?: string | number | BadgeType;
   /**
    * disabled
    */
@@ -89,6 +92,37 @@ export interface TabProps
   onClick?: (id: string) => CallbackReturn;
 }
 
+/**
+ * A component that represents a tab in a tabbed interface. It can display an icon, label, badge, and actions.
+ * It supports polymorphic rendering, allowing it to be rendered as different HTML elements.
+ * It also supports tooltips, active states, and click handling.
+ *
+ * @param {TabProps} props - The properties for the Tab component.
+ * @returns {JSX.Element} The rendered Tab component.
+ *
+ * @example
+ * ```jsx
+ * <Tab
+ *   id="tab1"
+ *   label="Tab 1"
+ *   icon="home"
+ *   iconBg="bg-blue-500"
+ *   iconColor="text-white"
+ *   badge="New"
+ *   onClick={(id) => console.log(`Tab clicked: ${id}`)}
+ *   onClose={() => console.log("Tab closed")}
+ *   active={true}
+ *   actions={<button>Action</button>}
+ *   color="primary"
+ *   tooltip="This is a tab"
+ *   activeClassName="bg-blue-100"
+ * />
+ * // Renders a tab with label "Tab 1", home icon, blue background, white text, badge "New",
+ * // and an action button. The tab is active and has a tooltip.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-tabpanel--docs} for more details.
+ */
 export const Tab = <Tag extends React.ElementType = "button">({
   ref,
   as,
@@ -104,12 +138,11 @@ export const Tab = <Tag extends React.ElementType = "button">({
   onClose,
   // @ts-expect-error ignore
   active,
-  // @ts-expect-error ignore
-  minimal,
   onClick,
   tabFlex,
   color,
   actions,
+  tooltip,
   activeClassName,
   ...aria
 }: TabProps & PolymorphicProps<Tag>) => {
@@ -117,63 +150,78 @@ export const Tab = <Tag extends React.ElementType = "button">({
     return getBadgeProps(badge);
   }, [badge]);
 
+  const minimal = useMemo(() => !label, [label]);
+
+  const tooltipProps = useMemo(() => {
+    if (isString(tooltip)) return { content: tooltip };
+
+    return tooltip ?? {};
+  }, [tooltip]);
+
   const E = as ?? "button";
+  const W = tooltip ? Tooltip : Fragment;
   return (
-    <E
-      data-id={id}
-      disabled={disabled}
-      data-color={color}
-      className={classNames(
-        classes.tabButton,
-        className,
-        active && "active pointer-events-none",
-        active && activeClassName,
-        disabled && "text-tint-500 pointer-events-none",
-        tabFlex ? "flex-1" : "flex-initial max-w-36 min-w-24",
-        "flex items-center justify-center px-1 rounded overflow-hidden",
-      )}
-      onClick={() => !active && onClick?.(id)}
-      ref={ref as AnyObject}
-      {...aria}
-    >
-      {icon && (
-        <Icon
-          icon={icon}
-          bg={iconBg}
-          color={iconColor}
-          rtlFlip={rtlFlip}
-          className="flex-content"
-        />
-      )}
-      {!minimal && (
-        <label className="flex-initial truncate text-center px-1 py-1">
-          {label}
-        </label>
-      )}
-      {badge && (
-        <Badge
-          {...badgeProps}
-          placement={minimal ? "end" : ""}
-          className={classNames("me-1", badgeProps.className)}
-        />
-      )}
-      {actions && active && (
-        <DropdownTool className="bg-base/20 me-1 z-5">{actions}</DropdownTool>
-      )}
-      {onClose && (
-        <span
-          role="none"
-          className={classNames(
-            "cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto",
-          )}
-          onClick={(e) => {
-            onClose?.();
-            e.stopPropagation();
-          }}
-        >
-          &times;
-        </span>
-      )}
-    </E>
+    <W {...tooltipProps}>
+      <E
+        data-id={id}
+        disabled={disabled}
+        data-color={color}
+        data-inner-clickable
+        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={() => !active && onClick?.(id)}
+        ref={ref as AnyObject}
+        {...aria}
+      >
+        {icon && (
+          <Icon
+            icon={icon}
+            bg={iconBg}
+            color={iconColor}
+            rtlFlip={rtlFlip}
+            className="flex-content p-2"
+          />
+        )}
+        {!minimal && (
+          <label className="flex-initial truncate text-center px-1 py-1">
+            {label}
+          </label>
+        )}
+        {badge && (
+          <Badge
+            {...badgeProps}
+            placement={minimal ? "end" : ""}
+            className={classNames("me-1", badgeProps.className)}
+          />
+        )}
+        {actions && active && (
+          <DropdownTool className="bg-tint-50/20 me-1 z-5">
+            {actions}
+          </DropdownTool>
+        )}
+        {onClose && (
+          <span
+            role="none"
+            className={classNames(
+              "cursor-pointer me-1 opacity-65 hover:opacity-90 pointer-events-auto",
+            )}
+            onClick={(e) => {
+              onClose?.();
+              e.stopPropagation();
+            }}
+          >
+            &times;
+          </span>
+        )}
+      </E>
+    </W>
   );
 };

package/src/components/tabpanel/TabPanel.tsx

@@ -25,6 +25,7 @@ import classNames from "classnames";
 import {
   Children,
   cloneElement,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -33,7 +34,6 @@ import {
 import { type CallbackReturn, type ChildrenProp } from "../../types";
 import { nodeCheck } from "../../utils";
 import { Tab } from "./Tab";
-import classes from "./TabPanel.module.css";
 
 export interface TabPanelProps extends ChildrenProp<typeof Tab> {
   /**
@@ -64,6 +64,14 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
    * tab list className
    */
   headerClassName?: string;
+  /**
+   * append element
+   */
+  append?: ReactNode;
+  /**
+   * prepend element
+   */
+  prepend?: ReactNode;
   /**
    * change handler
    */
@@ -76,6 +84,39 @@ export interface TabPanelProps extends ChildrenProp<typeof Tab> {
 
 // TODO: implement append/prepend tab-bar items
 
+/**
+ * A component that provides a tabbed interface for displaying content.
+ * It allows users to switch between different tabs, each containing its own content.
+ * It supports various orientations, justify options, and variants for the tab header.
+ * It also provides hooks for handling tab changes before and after they occur.
+ * This component is useful for organizing content into separate sections that can be easily navigated by the user.
+ * It can be customized with different styles and behaviors to fit the needs of the application.
+ *
+ * @param {TabPanelProps} props - The properties for the TabPanel component.
+ * @returns {JSX.Element} The rendered TabPanel component.
+ *
+ * @example
+ * ```jsx
+ * <TabPanel
+ *   orientation="top"
+ *   activeTab="tab1"
+ *   justify="start"
+ *   variant="solid"
+ *   tabFlex={true}
+ *   onBeforeChange={(nextTab, currentTab) => {
+ *     console.log(`Switching from ${currentTab} to ${nextTab}`);
+ *     return true; // or false to prevent change
+ *   }}
+ *   onChange={(id) => console.log(`Active tab changed to: ${id}`)}
+ * >
+ *   <Tab id="tab1" label="Tab 1">Content for Tab 1</Tab>
+ *   <Tab id="tab2" label="Tab 2">Content for Tab 2</Tab>
+ *   <Tab id="tab3" label="Tab 3">Content for Tab 3</Tab>
+ * </TabPanel>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-tabpanel--docs} for more details.
+ */
 export const TabPanel = ({
   children,
   headerClassName,
@@ -84,6 +125,8 @@ export const TabPanel = ({
   justify,
   variant,
   tabFlex,
+  append,
+  prepend,
   gap,
   onBeforeChange,
   onChange,
@@ -124,7 +167,7 @@ export const TabPanel = ({
   return (
     <div
       className={classNames(
-        classes.tabPanel,
+        "fabric-tabPanel",
         "area-content grid bg-base overflow-hidden",
       )}
       data-orientation={orientation}
@@ -132,21 +175,33 @@ export const TabPanel = ({
     >
       <div
         className={classNames(
-          classes.tabList,
+          "fabric-tabHeader",
           headerClassName,
           justify && `justify-${justify}`,
           ["start", "end"].includes(orientation) && "flex-col",
-          "flex flex-nowrap overflow-auto scroll-thin",
+          "flex flex-nowrap overflow-hidden items-center",
         )}
-        style={{ gap }}
       >
-        {tabs.map((node: AnyObject) =>
-          cloneElement(node, {
-            tabFlex: node.props.tabFlex ?? tabFlex,
-            onClick: handleClick,
-            active: node.props.id === active,
-          }),
-        )}
+        {prepend}
+        <div
+          className={classNames(
+            "fabric-tabList",
+            justify && `justify-${justify}`,
+            ["start", "end"].includes(orientation) && "flex-col",
+            ["bottom", "end"].includes(orientation) ? "self-start" : "self-end",
+            "flex flex-1 flex-nowrap overflow-auto scroll-thin",
+          )}
+          style={{ gap }}
+        >
+          {tabs.map((node: AnyObject) =>
+            cloneElement(node, {
+              tabFlex: node.props.tabFlex ?? tabFlex,
+              onClick: handleClick,
+              active: node.props.id === active,
+            }),
+          )}
+        </div>
+        {append}
       </div>
       {rest}
       {activeTabPanel}

package/src/context/Global.tsx

@@ -146,6 +146,10 @@ export const ApplicationProvider: FC<GlobalProps> = ({
     defaultLocale ?? systemLocale(),
   );
 
+  useEffect(() => {
+    defaultColorScheme && setColorScheme(defaultColorScheme);
+  }, [defaultColorScheme]);
+
   /** ***************** set initial theme and locale dir  *******************/
   useEffect(() => {
     document.documentElement.lang = locale;
@@ -228,13 +232,36 @@ export const ApplicationProvider: FC<GlobalProps> = ({
 export const useGlobals = () => useContext(GlobalContext);
 
 /**
- * global application context
+ * Hook to access the global application context.
+ * This hook provides access to the global context values, including the current locale, calendar, and color scheme.
+ *
+ * @returns {GlobalContextType} The global context values excluding the error element.
+ *
+ * @example
+ * ```jsx
+ * const { changeLocale, currentLocale, toggleColorScheme } = useApplicationContext();
+ * ```
  */
 export const useApplicationContext = () => {
   const { errorElement, ...rest } = useContext(GlobalContext);
   return rest;
 };
 
+/**
+ * Hook to access the notification manager from the global context.
+ * This hook provides methods to show alerts, errors, messages, and toasts.
+ * It returns a reference to the notification manager, which can be used to display notifications in the application.
+ *
+ * @returns {NotificationManagerRef} The notification manager reference.
+ *
+ * @example
+ * ```jsx
+ * const notificationService = useNotificationService();
+ * notificationService.showMessage("Hello World");
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-notifications--notifications} for more details on available methods.
+ */
 export const useNotificationService = () => {
   const { notificationManager } = useContext(GlobalContext);
   return notificationManager ?? {};

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/core/aside/Aside.tsx

@@ -45,7 +45,6 @@ import {
 } from "../../types";
 import { CoreIcons } from "../../types/icons";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
-import classes from "./Aside.module.css";
 
 export interface AsideProps
   extends IconProps,
@@ -106,7 +105,44 @@ export interface AsideProps
 }
 
 /**
- * Side panel
+ * A sidebar component that can be collapsed, resized, and has a flyout feature.
+ * It supports a title, icon, actions, and loading state.
+ * It can be aligned to the start or end of the page.
+ *
+ * @param {AsideProps} props - The properties for the Aside component.
+ * @returns {JSX.Element} The rendered Aside component.
+ *
+ * @example
+ * ```jsx
+ * <Aside
+ *   title="Sidebar Title"
+ *   icon={CoreIcons.menu}
+ *   iconBg="bg-gray-200"
+ *   iconColor="text-gray-800"
+ *   rtlFlip={true}
+ *   className="custom-aside"
+ *   bodyClassName="custom-aside-body"
+ *   headerClassName="custom-aside-header"
+ *   resizeable={true}
+ *   flyout={true}
+ *   onFlyout={() => console.log("Flyout triggered")}
+ *   collapsed={false}
+ *   collapsable={true}
+ *   onCollapse={() => console.log("Collapsed toggled")}
+ *   actions={<button>Action</button>}
+ *   loading={false}
+ *   align="start"
+ *   width="20rem"
+ *   minWidth="2rem"
+ *   maxWidth="30vw"
+ *   data-testid="aside-test"
+ *   data-test-value="aside-value"
+ * >
+ *   <Content>This is the content of the aside.</Content>
+ * </Aside>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-application--aside} for more details.
  */
 export const Aside = ({
   children,
@@ -197,9 +233,10 @@ export const Aside = ({
 
   return (
     <aside
-      className={classNames(classes.aside, className, "overflow-hidden grid")}
+      className={classNames("fabric-aside", className, "overflow-hidden grid")}
       data-align={align}
       data-flyout={peek}
+      data-loading={loading}
       data-collapsed={isCollapsed}
       style={isCollapsed ? undefined : widthStyles}
       data-testid={testId}
@@ -207,15 +244,16 @@ export const Aside = ({
     >
       <header
         className={classNames(
-          classes.asideHeader,
+          "fabric-asideHeader",
           headerClassName,
           "grid area-head items-center",
         )}
+        data-ref="asideHeader"
       >
         {title && (
           <div
             className={classNames(
-              classes.asideTitle,
+              "fabric-asideTitle",
               "truncate py-0.5 px-1 select-none pointer-events-none",
             )}
           >
@@ -225,7 +263,7 @@ export const Aside = ({
         {collapsable && (
           <Icon
             aria-label={isCollapsed ? "expand" : "collapse"}
-            className={classNames(classes.asideCollapse, "p-2 select-none")}
+            className={classNames("fabric-asideCollapse", "p-2 select-none")}
             icon={CoreIcons.chevronLeft}
             rtlFlip
             onClick={toggleCollapse}
@@ -239,12 +277,12 @@ export const Aside = ({
             color={iconColor}
             rtlFlip={rtlFlip}
             className={classNames(
-              classes.asideIcon,
+              "fabric-asideIcon",
               "p-1 text-lg select-none pointer-events-none",
             )}
           />
         )}
-        {actions && <div className={classes.asideActions}>{actions}</div>}
+        {actions && <div className={"fabric-asideActions"}>{actions}</div>}
       </header>
       {loading && <Loading />}
       {isCollapsed && (
@@ -252,14 +290,14 @@ export const Aside = ({
           role="none"
           onClick={tryPeek}
           data-ref="asidePlaceholder"
-          className={classes.asidePlaceholder}
+          className={"fabric-asidePlaceholder"}
         />
       )}
       <section
         ref={elementRef}
         data-ref="asideBody"
         className={classNames(
-          classes.asideBody,
+          "fabric-asideBody",
           bodyClassName,
           "overflow-hidden grid",
         )}
@@ -271,8 +309,8 @@ export const Aside = ({
         <div
           {...resizeHandleProps}
           className={classNames(
-            classes.asideResizer,
-            "before:absolute before:inset-0 before:w-1 before:top-1/2 before:-translate-y-1/2 before:transition-all",
+            "fabric-asideResizer",
+            "before:absolute before:inset-0 before:w-1 before:top-1/2 before:-translate-y-1/2 before:transition-all before:delay-150",
           )}
         />
       )}