@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.61

package/src/components/panel/Panel.tsx

@@ -26,25 +26,22 @@ import { useMemo } from "react";
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
 import { usePropToggle } from "../../hooks/usePropToggle";
+import { HotKey } from "../../hotkeys/HotKey";
 import {
   type AriaProps,
   type ChildrenProp,
   type CollapseProps,
   type CssProp,
   type ExpandProps,
-  type IconProps,
   type TestProps,
 } from "../../types";
-import { CoreIcons } from "../../types/icons";
-import { Loading } from "../animations/Animations";
-import { Icon } from "../icon/Icon";
-import classes from "./Panel.module.css";
+import { LoadingLine } from "../animations/Animations";
+import { getIconProps, Icon, type IconProps } from "../icon/Icon";
 
 export interface PanelProps
   extends CssProp,
     AriaProps,
     TestProps,
-    IconProps,
     ExpandProps,
     CollapseProps,
     ChildrenProp<HeadFootProps | ContentProps> {
@@ -68,6 +65,10 @@ export interface PanelProps
    * title css classname(s)
    */
   titleClassName?: string;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * loading state
    */
@@ -102,6 +103,41 @@ export interface PanelProps
   onClose?: () => void;
 }
 
+/**
+ * A component that represents a panel with a header, body, and optional actions.
+ * It supports expandable and collapsible functionality, loading state, and customizable styles.
+ * The panel can be resized and has a fixed position when expanded.
+ * It can be customized with different colors, icons, and behaviors.
+ * This component is useful for displaying content in a structured way, allowing users to interact with it through actions and toggles.
+ * It can be used in various applications where panels are needed, such as dashboards, settings pages, or content management systems.
+ *
+ * @param {PanelProps} props - The properties for the Panel component.
+ * @returns {JSX.Element} The rendered Panel component.
+ *
+ * @example
+ * ```jsx
+ * <Panel
+ *   title="Panel Title"
+ *   icon="icon-[mdi--info]"
+ *   actions={<button>Action</button>}
+ *   expandable
+ *   collapsable
+ *   onExpand={() => console.log("Expanded")}
+ *   onCollapse={() => console.log("Collapsed")}
+ *   onClose={() => console.log("Closed")}
+ *   height="400px"
+ *   width="300px"
+ *   minHeight="200px"
+ *   minWidth="200px"
+ *   maxHeight="600px"
+ *   maxWidth="600px"
+ * >
+ *   <p>This is the content of the panel.</p>
+ * </Panel>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-panel--docs} for more details.
+ */
 export const Panel = ({
   children,
   className,
@@ -110,9 +146,6 @@ export const Panel = ({
   title,
   actions,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   panelId,
   height,
   width,
@@ -146,7 +179,7 @@ export const Panel = ({
   return (
     <div
       className={classNames(
-        classes.panel,
+        "fabric-panel",
         className,
         "rounded-capped overflow-hidden outline grid",
         expanded ? "fixed inset-4 z-50" : "relative",
@@ -169,31 +202,30 @@ export const Panel = ({
       }
       {...aria}
     >
+      {expanded && <HotKey keyCombo="esc" handler={toggleExpand} />}
       <header
         role="none"
         className={classNames(
-          classes.panelHeader,
+          "fabric-panelHeader",
           headerClassName,
           "flex flex-nowrap items-center area-head",
         )}
-        data-testid="panel-header"
+        data-ref="panelHeader"
         onClick={collapsable ? toggleCollapse : undefined}
       >
         {onBack && (
           <Icon
+            rtlFlip
             data-ref="panelBack"
-            className={classNames(classes.panelAction, "cursor-pointer")}
-            icon={CoreIcons.chevronLeft}
+            className={classNames("fabric-panelAction", "cursor-pointer")}
+            icon="icon-[mdi--chevron-left]"
             onClick={onBack}
           />
         )}
         {icon && (
           <Icon
-            icon={icon}
-            bg={iconBg}
-            color={iconColor}
-            rtlFlip={rtlFlip}
             className="p-2 text-md select-none pointer-events-none"
+            {...getIconProps(icon)}
           />
         )}
         <div
@@ -205,7 +237,7 @@ export const Panel = ({
         >
           {title}
         </div>
-        <div className="px-1">{actions}</div>
+        <div className="px-1 leading-none">{actions}</div>
         {hasTools && (
           <div
             role="none"
@@ -215,24 +247,30 @@ export const Panel = ({
             {expandable && (
               <Icon
                 data-ref="panelExpand"
-                className={classNames(classes.panelAction, "cursor-pointer")}
-                icon={expanded ? CoreIcons.minimize : CoreIcons.maximize}
+                className={classNames("fabric-panelAction", "cursor-pointer")}
+                icon={
+                  expanded
+                    ? "icon-[mdi--fullscreen-exit]"
+                    : "icon-[mdi--fullscreen]"
+                }
                 onClick={toggleExpand}
               />
             )}
             {!expanded && collapsable && (
               <Icon
                 data-ref="panelCollapse"
-                className={classNames(classes.panelAction, "cursor-pointer")}
-                icon={collapsed ? CoreIcons.expand : CoreIcons.collapse}
+                className={classNames("fabric-panelAction", "cursor-pointer")}
+                icon={
+                  collapsed ? "icon-[mdi--plus-box]" : "icon-[mdi--minus-box]"
+                }
                 onClick={toggleCollapse}
               />
             )}
             {!expanded && onClose && (
               <Icon
                 data-ref="panelClose"
-                className={classNames(classes.panelAction, "cursor-pointer")}
-                icon={CoreIcons.close}
+                className={classNames("fabric-panelAction", "cursor-pointer")}
+                icon="icon-[mdi--close]"
                 onClick={onClose}
               />
             )}
@@ -241,13 +279,13 @@ export const Panel = ({
       </header>
       {(!collapsed || expanded) && (
         <div
-          data-testid="panel-body"
+          data-ref="panelBody"
           className={classNames(
-            classes.panelBody,
+            "fabric-panelBody",
             "area-content grid overflow-hidden",
           )}
         >
-          {loading && <Loading />}
+          {loading && <LoadingLine />}
           {children}
         </div>
       )}

package/src/components/panel/PanelGroup.tsx

@@ -28,7 +28,6 @@ import {
   useMemoDebugger,
 } from "../../hooks/useEffectDebugger";
 import { type ChildrenProp } from "../../types";
-import classes from "./Panel.module.css";
 
 export interface PanelGroupProps extends ChildrenProp {
   /**
@@ -41,6 +40,30 @@ export interface PanelGroupProps extends ChildrenProp {
   onActiveChange?: (panelId: string) => void;
 }
 
+/**
+ * A component that groups multiple panels together, allowing for one panel to be expanded at a time.
+ * This component allows you to manage a group of panels where only one can be expanded at a time.
+ * It accepts an `activePanel` prop to control which panel is currently expanded,
+ * and an `onActiveChange` callback that is triggered when the active panel changes.
+ * It uses the `Panel` component to render each individual panel within the group.
+ *
+ * @param {PanelGroupProps} props - The properties for the PanelGroup component.
+ * @returns {JSX.Element} The rendered PanelGroup component.
+ *
+ * @example
+ * ```jsx
+ * <PanelGroup
+ *   activePanel="panel1"
+ *   onActiveChange={(panelId) => console.log(`Active panel changed to: ${panelId}`)}
+ * >
+ *   <Panel panelId="panel1" title="Panel 1">Content for Panel 1</Panel>
+ *   <Panel panelId="panel2" title="Panel 2">Content for Panel 2</Panel>
+ *   <Panel panelId="panel3" title="Panel 3">Content for Panel 3</Panel>
+ * </PanelGroup>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-panel--docs} for more details.
+ */
 export const PanelGroup = ({
   children,
   activePanel,
@@ -81,7 +104,7 @@ export const PanelGroup = ({
     <div
       data-ref="panelGroup"
       className={classNames(
-        classes.panelGroup,
+        "fabric-panelGroup",
         "flex flex-col overflow-auto area-content p-px",
       )}
     >

package/src/components/panel/PanelStack.tsx

@@ -49,6 +49,37 @@ export interface PanelStackProps extends CssProp, ChildrenProp {
   onBack?: (panelId: string, nextPanelId: string) => boolean | undefined;
 }
 
+/**
+ * A component that manages a stack of panels, allowing navigation between them.
+ * This component allows you to manage a stack of panels where you can navigate between them.
+ * It accepts an `active` prop to control which panel is currently active,
+ * an `onPanelChange` callback that is triggered when the active panel changes,
+ * and an `onBack` callback to handle navigation to the previous panel in the history.
+ * It uses the `Panel` component to render each individual panel within the stack.
+ * The component maintains a history of panels to allow back navigation,
+ * and it updates the active panel based on user interactions.
+ *
+ * @param {PanelStackProps} props - The properties for the PanelStack component.
+ * @returns {JSX.Element} The rendered PanelStack component.
+ *
+ * @example
+ * ```jsx
+ * <PanelStack
+ *   active="panel1"
+ *   onPanelChange={(panelId) => console.log(`Active panel changed to: ${panelId}`)}
+ *   onBack={(currentPanel, nextPanel) => {
+ *     console.log(`Navigating back from ${currentPanel} to ${nextPanel}`);
+ *     return true; // return false to prevent navigation
+ *   }}
+ * >
+ *   <Panel panelId="panel1" title="Panel 1">Content for Panel 1</Panel>
+ *   <Panel panelId="panel2" title="Panel 2">Content for Panel 2</Panel>
+ *   <Panel panelId="panel3" title="Panel 3">Content for Panel 3</Panel>
+ * </PanelStack>
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-panelstack--docs} for more details.
+ */
 export const PanelStack = ({
   active,
   children,
@@ -82,7 +113,7 @@ export const PanelStack = ({
   }, [onPanelChange, history]);
 
   const goBack = useCallback(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
+     
     if (onBack?.(history[0], history[1] ?? "root") !== false) {
       setHistory(history.slice(1));
     }
@@ -100,7 +131,7 @@ export const PanelStack = ({
         if (panelKey === "back") {
           goBack();
         } else if (panelKey === "root") {
-          // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
+           
           if (onBack?.(history[0], "root") !== false) {
             setHistory([]);
           }

package/src/components/progress/ProgressBar.tsx

@@ -24,13 +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 classes from "./Progress.module.css";
+import { type PaletteType, type ColorType } from "../../types";
+import { getColor } from "../../utils";
 
 export interface ProgressProps {
   /**
-   * progress value (0-100)
+   * progress value (0-1)
    */
   value: number;
   /**
@@ -40,7 +39,7 @@ export interface ProgressProps {
   /**
    * color
    */
-  color?: ColorType;
+  color?: ColorType | PaletteType;
   /**
    * animate
    */
@@ -61,23 +60,43 @@ const SizeMap: KeyValue = {
   xl: "2rem",
 };
 
+/**
+ * A component that displays a progress bar indicating the completion percentage of a task or operation.
+ * The progress bar is styled with a background color and a track that fills based on the value provided.
+ * It can also display a label showing the percentage value.
+ * The label can be customized or hidden based on the props provided.
+ *
+ * @param {ProgressProps} props - The properties for the ProgressBar component.
+ * @returns {JSX.Element} The rendered ProgressBar component.
+ *
+ * @example
+ * ```jsx
+ * <ProgressBar value={0.75} size="md" color="primary-500" label="Loading" animate />
+ * // Renders a progress bar with 75% completion, medium size, primary color, and a label "Loading"
+ *
+ * <ProgressBar value={0.5} size="lg" color="success-500" />
+ * // Renders a progress bar with 50% completion, large size, and success color without a label
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/core-components-progress--docs} for more details.
+ */
 export const ProgressBar = ({
   value = 0,
   size,
-  color = "primary",
+  color = "primary-500",
   label = "",
   animate,
 }: 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",
@@ -87,12 +106,12 @@ export const ProgressBar = ({
   return (
     <div
       className={classNames(
-        classes.progressbar,
-        getColorClass(color),
+        "fabric-progressbar",
         "block bg-dimmed relative rounded font-bold overflow-hidden whitespace-nowrap",
       )}
       style={{
         ...progressVar,
+        color: getColor(color),
         minHeight: SizeMap[size ?? ""],
         fontSize: SizeMap[size ?? ""],
       }}
@@ -101,20 +120,20 @@ 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
         className={classNames(
-          classes.progressTrack,
-          animate && classes.progressAnimate,
+          "fabric-progressTrack",
+          animate && "fabric-progressAnimate",
           "h-full overflow-clip bg-current relative z-0",
         )}
       />
       {!["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

@@ -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

@@ -30,9 +30,8 @@ import {
   type BadgeType,
   type CallbackReturn,
   type ChildrenProp,
-  type ColorType,
+  type ColorState,
   type CssProp,
-  type IconProps,
   type PolymorphicProps,
   type RefProp,
   type TestProps,
@@ -40,8 +39,7 @@ import {
 } from "../../types";
 import { Badge, getBadgeProps } from "../badge/Badge";
 import { DropdownTool } from "../dropdown/DropdownTool";
-import { Icon } from "../icon/Icon";
-import classes from "./TabPanel.module.css";
+import { getIconProps, Icon, type IconProps } from "../icon/Icon";
 
 export interface TabProps
   extends Partial<ChildrenProp>,
@@ -49,7 +47,6 @@ export interface TabProps
     RefProp,
     AriaProps,
     TestProps,
-    IconProps,
     TooltipProp {
   /**
    * tab id
@@ -62,7 +59,11 @@ export interface TabProps
   /**
    * tab color
    */
-  color?: ColorType;
+  color?: ColorState;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * tab badge
    */
@@ -93,6 +94,35 @@ 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"
+ *   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,
@@ -100,16 +130,11 @@ export const Tab = <Tag extends React.ElementType = "button">({
   className,
   label,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   badge,
   disabled,
   onClose,
   // @ts-expect-error ignore
   active,
-  // @ts-expect-error ignore
-  minimal,
   onClick,
   tabFlex,
   color,
@@ -122,6 +147,8 @@ 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 };
 
@@ -136,28 +163,22 @@ export const Tab = <Tag extends React.ElementType = "button">({
         data-id={id}
         disabled={disabled}
         data-color={color}
+        data-inner-clickable
         className={classNames(
-          classes.tabButton,
+          "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 min-w-24",
-          "flex items-center justify-center px-1 rounded overflow-hidden",
+          tabFlex ? "flex-1" : "flex-initial max-w-36",
+          minimal ? "min-w-6 rounded" : "rounded-capped",
+          "flex items-center justify-center 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"
-          />
-        )}
+        {icon && <Icon className="flex-content p-2" {...getIconProps(icon)} />}
         {!minimal && (
           <label className="flex-initial truncate text-center px-1 py-1">
             {label}
@@ -171,7 +192,9 @@ export const Tab = <Tag extends React.ElementType = "button">({
           />
         )}
         {actions && active && (
-          <DropdownTool className="bg-base/20 me-1 z-5">{actions}</DropdownTool>
+          <DropdownTool className="bg-tint-50/20 me-1 z-5">
+            {actions}
+          </DropdownTool>
         )}
         {onClose && (
           <span