@gobolt/genesis 0.4.4 → 0.4.7

package/dist/components/OverflowMenu/OverflowMenu.d.ts

@@ -1,13 +1,17 @@
 import { default as React } from 'react';
+import { OverflowMenuItemProps } from '../OverflowMenuItem';
 export interface OverflowMenuProps {
-    children: React.ReactNode;
+    items?: OverflowMenuItemProps[];
+    children?: React.ReactNode;
     trigger: React.ReactNode;
     isOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     placement?: "bottom" | "top" | "left" | "right";
+    alignment?: "left" | "right";
     offset?: number;
     className?: string;
     style?: React.CSSProperties;
+    onItemClick?: (item: OverflowMenuItemProps) => void;
 }
 declare const OverflowMenu: React.FC<OverflowMenuProps>;
 export default OverflowMenu;

package/dist/components/OverflowMenuItem/OverflowMenuItem.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface OverflowMenuItemProps {
+    id?: string;
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+declare const OverflowMenuItem: ({ children, onClick }: OverflowMenuItemProps) => import("react/jsx-runtime").JSX.Element;
+export default OverflowMenuItem;

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

@@ -0,0 +1,2 @@
+export { default } from './OverflowMenuItem';
+export type { OverflowMenuItemProps } from './OverflowMenuItem';

package/dist/components/OverflowMenuItem/styles.d.ts

@@ -0,0 +1,6 @@
+import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
+interface StyledOverflowMenuItemProperties {
+    theme?: GenesisTheme;
+}
+export declare const OverflowMenuItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledOverflowMenuItemProperties>> & string;
+export {};

package/dist/components/Table/__mocks__/table-mocks.d.ts

@@ -9,6 +9,18 @@ export interface AppointmentWithSimpleAddress {
         address: string;
     };
     job_subtype: "delivery" | "pickup";
+    progress?: {
+        firstBarData: {
+            text: string;
+            status: string;
+            value: number;
+        };
+        secondBarData?: {
+            text: string;
+            status: string;
+            value: number;
+        };
+    };
 }
 export interface MockDataSource {
     appointments: AppointmentWithSimpleAddress[];

package/dist/components/index.d.ts

@@ -41,6 +41,8 @@ export { default as Notification } from './Notification';
 export type { NotificationProps } from './Notification';
 export { default as OverflowMenu } from './OverflowMenu';
 export type { OverflowMenuProps } from './OverflowMenu';
+export { default as OverflowMenuItem } from './OverflowMenuItem';
+export type { OverflowMenuItemProps } from './OverflowMenuItem';
 export { default as Popover } from './Popover';
 export type { PopoverProps } from './Popover';
 export { default as Progress } from './Progress';

package/dist/index.cjs

@@ -80499,15 +80499,34 @@ const OverflowMenuContainer = styled.div`
   contain: layout style paint;
   isolation: isolate;
 `;
+const OverflowMenuItem$1 = styled.div`
+  padding: 8px 12px;
+  cursor: pointer;
+  background-color: ${({ theme }) => theme.colors.surface.default?.backgroundColor || "#ffffff"};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.surface.hover?.backgroundColor || "#F4F4F4"};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.colors.surface.active?.backgroundColor || "#E0E0E0"};
+  }
+`;
+const OverflowMenuItem = ({ children: children2, onClick }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(OverflowMenuItem$1, { onClick, children: children2 });
+};
 const OverflowMenu = ({
+  items,
   children: children2,
   trigger,
   isOpen: controlledIsOpen,
   onOpenChange,
   placement = "bottom",
+  alignment = "left",
   offset: offset2 = 8,
   className,
-  style: style2
+  style: style2,
+  onItemClick
 }) => {
   const [internalIsOpen, setInternalIsOpen] = React.useState(false);
   const [isAnimating, setIsAnimating] = React.useState(false);
@@ -80515,21 +80534,27 @@ const OverflowMenu = ({
   const menuRef = React.useRef(null);
   const { theme } = useGenesis();
   const isOpen = controlledIsOpen === void 0 ? internalIsOpen : controlledIsOpen;
-  const handleOpenChange = (open) => {
-    if (onOpenChange) {
-      onOpenChange(open);
-    } else {
-      setInternalIsOpen(open);
-    }
-  };
+  const handleOpenChange = React.useCallback(
+    (open) => {
+      if (onOpenChange) {
+        onOpenChange(open);
+      } else {
+        setInternalIsOpen(open);
+      }
+    },
+    [onOpenChange]
+  );
   const handleTriggerClick = () => {
     handleOpenChange(!isOpen);
   };
-  const handleClickOutside = (event) => {
-    if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
-      handleOpenChange(false);
-    }
-  };
+  const handleClickOutside = React.useCallback(
+    (event) => {
+      if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
+        handleOpenChange(false);
+      }
+    },
+    [handleOpenChange]
+  );
   React.useEffect(() => {
     if (isOpen) {
       const timer2 = setTimeout(() => {
@@ -80544,8 +80569,8 @@ const OverflowMenu = ({
       setIsAnimating(false);
       document.removeEventListener("mousedown", handleClickOutside);
     }
-  }, [isOpen]);
-  const getMenuStyle = () => {
+  }, [isOpen, handleClickOutside]);
+  const getMenuStyle = React.useMemo(() => {
     const baseStyle = {
       position: "absolute",
       zIndex: 1e3,
@@ -80556,37 +80581,68 @@ const OverflowMenu = ({
         return {
           ...baseStyle,
           top: `calc(100% + ${offset2}px)`,
-          left: 0,
-          right: 0
+          ...alignment === "right" ? { right: 0 } : { left: 0 }
         };
       }
       case "top": {
         return {
           ...baseStyle,
           bottom: `calc(100% + ${offset2}px)`,
-          left: 0,
-          right: 0
+          ...alignment === "right" ? { right: 0 } : { left: 0 }
         };
       }
       case "left": {
         return {
           ...baseStyle,
           top: 0,
-          right: `calc(100% + ${offset2}px)`
+          right: `calc(100% + ${offset2}px)`,
+          ...alignment === "right" ? { bottom: 0 } : {}
         };
       }
       case "right": {
         return {
           ...baseStyle,
           top: 0,
-          left: `calc(100% + ${offset2}px)`
+          left: `calc(100% + ${offset2}px)`,
+          ...alignment === "right" ? { bottom: 0 } : {}
         };
       }
       default: {
         return baseStyle;
       }
     }
-  };
+  }, [placement, alignment, offset2, style2]);
+  const handleItemClick = React.useCallback(
+    (item) => {
+      onItemClick?.(item);
+      handleOpenChange(false);
+    },
+    [onItemClick, handleOpenChange]
+  );
+  if (items && items.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(OverflowMenuWrapper, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
+      isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+        OverflowMenuContainer,
+        {
+          ref: menuRef,
+          theme,
+          className,
+          style: getMenuStyle,
+          $isAnimating: isAnimating,
+          $placement: placement,
+          children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+            OverflowMenuItem,
+            {
+              ...item,
+              onClick: () => handleItemClick(item)
+            },
+            item.id
+          ))
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(OverflowMenuWrapper, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
     isOpen && /* @__PURE__ */ jsxRuntime.jsx(
@@ -80595,7 +80651,7 @@ const OverflowMenu = ({
         ref: menuRef,
         theme,
         className,
-        style: getMenuStyle(),
+        style: getMenuStyle,
         $isAnimating: isAnimating,
         $placement: placement,
         children: children2
@@ -80736,15 +80792,12 @@ const getTextComponent = (firstBarData, secondBarData, stateColor, theme, isText
   );
 };
 const getCombinedPercent = (firstBarData, secondBarData) => {
-  if (secondBarData?.value === 0) {
-    return firstBarData?.value;
-  }
-  if (firstBarData?.value && secondBarData?.value) {
-    const total = firstBarData?.value + secondBarData?.value;
+  if (firstBarData?.value !== void 0 && secondBarData?.value !== void 0) {
+    const total = firstBarData.value + secondBarData.value;
     const dividedBy = total / 2;
-    return dividedBy;
+    return Math.round(dividedBy * 10) / 10;
   }
-  return 0;
+  return firstBarData?.value || 0;
 };
 const Progress = ({
   firstBarData,
@@ -80763,6 +80816,7 @@ const Progress = ({
     strokeColor: theme?.colors?.inputs?.progress?.[secondBarData.status]
   } : null;
   const stateColor = strokeColor;
+  const percentDisplayWidth = 110;
   const gap = 8;
   if (isSingleBarOverallSuccess && secondBarData !== null) {
     const overallPercent = secondBarData.value;
@@ -80778,30 +80832,79 @@ const Progress = ({
           showInfo: false
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", width: 80 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: textColor, variant: "digits3", children: [
-        overallPercent,
-        "%"
-      ] }) })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: percentDisplayWidth
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: textColor, variant: "digits3", children: [
+            overallPercent,
+            "%"
+          ] })
+        }
+      )
     ] });
   }
   if (isProgressCombined) {
     const combinedPercent = getCombinedPercent(firstBarData, secondBarData);
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
+    const adjustedFirstBar = secondBarData?.value === 100 ? 100 : firstBarData?.value || 0;
+    const firstBarStrokeColor = theme?.colors?.inputs?.progress?.[firstBarData?.status || "info"];
+    const secondBarStrokeColor = secondBarData?.value && secondBarData.value > 0 ? theme?.colors?.inputs?.progress?.[secondBarData.status] : null;
+    secondBarData?.value && secondBarData.value > 0 ? {
+      percent: secondBarData.value
+    } : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(Tile, { style: { width, height, alignItems: "center", gap }, isHorizontal: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Progress$1,
+          {
+            "data-testid": "progress",
+            percent: adjustedFirstBar,
+            strokeColor: firstBarStrokeColor,
+            showInfo: false
+          }
+        ),
+        secondBarData?.value && secondBarData.value > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Progress$1,
+              {
+                percent: secondBarData.value,
+                strokeColor: secondBarStrokeColor,
+                showInfo: false,
+                style: { background: "transparent" }
+              }
+            )
+          }
+        ) : null
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
-        Progress$1,
+        "div",
         {
-          "data-testid": "progress",
-          percent,
-          success,
-          strokeColor,
-          showInfo: false
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: percentDisplayWidth
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: textColor, variant: "digits3", children: [
+            combinedPercent,
+            "%"
+          ] })
         }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", width: 80 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { color: textColor, variant: "digits3", children: [
-        combinedPercent,
-        "%"
-      ] }) })
+      )
     ] });
   }
   if (isTextBeforeBar) {
@@ -84511,6 +84614,20 @@ const mockColumns = [
         state: colorStateMap[jobSubtype]
       });
     }
+  },
+  {
+    title: "Progress",
+    dataIndex: "progress",
+    render: (progress) => {
+      if (!progress) return null;
+      return React.createElement(Progress, {
+        firstBarData: progress.firstBarData,
+        secondBarData: progress.secondBarData,
+        width: 150,
+        height: 20,
+        isProgressCombined: true
+      });
+    }
   }
 ];
 mockColumns.map((column2) => ({
@@ -84527,7 +84644,19 @@ const mockDataSource = {
         nickname: "Home",
         address: "123 Main St"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Loading",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Processing",
+          status: "success",
+          value: 25
+        }
+      }
     },
     {
       id: "2",
@@ -84538,7 +84667,19 @@ const mockDataSource = {
         nickname: "Work",
         address: "456 Elm St"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Preparing",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Final Check",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "3",
@@ -84549,7 +84690,19 @@ const mockDataSource = {
         nickname: "Store",
         address: "789 Oak St"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Pending",
+          status: "info",
+          value: 0
+        },
+        secondBarData: {
+          text: "Awaiting",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "4",
@@ -84560,7 +84713,19 @@ const mockDataSource = {
         nickname: "Office",
         address: "321 Pine St"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "In Progress",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Validation",
+          status: "success",
+          value: 30
+        }
+      }
     },
     {
       id: "5",
@@ -84571,7 +84736,19 @@ const mockDataSource = {
         nickname: "Library",
         address: "555 Book Lane"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Completed",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Verified",
+          status: "success",
+          value: 100
+        }
+      }
     },
     {
       id: "6",
@@ -84582,7 +84759,19 @@ const mockDataSource = {
         nickname: "Gym",
         address: "777 Fitness Ave"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Phase 1",
+          status: "info",
+          value: 75
+        },
+        secondBarData: {
+          text: "Phase 2",
+          status: "success",
+          value: 50
+        }
+      }
     },
     {
       id: "7",
@@ -84593,7 +84782,19 @@ const mockDataSource = {
         nickname: "Mall",
         address: "888 Shopping Center"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Queued",
+          status: "info",
+          value: 0
+        },
+        secondBarData: {
+          text: "Waiting",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "8",
@@ -84604,7 +84805,19 @@ const mockDataSource = {
         nickname: "School",
         address: "999 Education Rd"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Delivered",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Confirmed",
+          status: "success",
+          value: 100
+        }
+      }
     },
     {
       id: "9",
@@ -84615,7 +84828,19 @@ const mockDataSource = {
         nickname: "Restaurant",
         address: "111 Food Court"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Preparing",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Quality Check",
+          status: "success",
+          value: 15
+        }
+      }
     },
     {
       id: "10",
@@ -84626,7 +84851,19 @@ const mockDataSource = {
         nickname: "Park",
         address: "222 Green Ave"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Processing",
+          status: "info",
+          value: 80
+        },
+        secondBarData: {
+          text: "Review",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "11",
@@ -85075,6 +85312,7 @@ exports.LineChart = LineChart;
 exports.Message = Message;
 exports.Notification = Notification;
 exports.OverflowMenu = OverflowMenu;
+exports.OverflowMenuItem = OverflowMenuItem;
 exports.Popover = Popover;
 exports.Progress = Progress;
 exports.RadioGroup = RadioGroup;

package/dist/index.js

@@ -80481,15 +80481,34 @@ const OverflowMenuContainer = styled.div`
   contain: layout style paint;
   isolation: isolate;
 `;
+const OverflowMenuItem$1 = styled.div`
+  padding: 8px 12px;
+  cursor: pointer;
+  background-color: ${({ theme }) => theme.colors.surface.default?.backgroundColor || "#ffffff"};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.surface.hover?.backgroundColor || "#F4F4F4"};
+  }
+
+  &:active {
+    background-color: ${({ theme }) => theme.colors.surface.active?.backgroundColor || "#E0E0E0"};
+  }
+`;
+const OverflowMenuItem = ({ children: children2, onClick }) => {
+  return /* @__PURE__ */ jsx(OverflowMenuItem$1, { onClick, children: children2 });
+};
 const OverflowMenu = ({
+  items,
   children: children2,
   trigger,
   isOpen: controlledIsOpen,
   onOpenChange,
   placement = "bottom",
+  alignment = "left",
   offset: offset2 = 8,
   className,
-  style: style2
+  style: style2,
+  onItemClick
 }) => {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
@@ -80497,21 +80516,27 @@ const OverflowMenu = ({
   const menuRef = useRef(null);
   const { theme } = useGenesis();
   const isOpen = controlledIsOpen === void 0 ? internalIsOpen : controlledIsOpen;
-  const handleOpenChange = (open) => {
-    if (onOpenChange) {
-      onOpenChange(open);
-    } else {
-      setInternalIsOpen(open);
-    }
-  };
+  const handleOpenChange = useCallback(
+    (open) => {
+      if (onOpenChange) {
+        onOpenChange(open);
+      } else {
+        setInternalIsOpen(open);
+      }
+    },
+    [onOpenChange]
+  );
   const handleTriggerClick = () => {
     handleOpenChange(!isOpen);
   };
-  const handleClickOutside = (event) => {
-    if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
-      handleOpenChange(false);
-    }
-  };
+  const handleClickOutside = useCallback(
+    (event) => {
+      if (triggerRef.current && menuRef.current && !triggerRef.current.contains(event.target) && !menuRef.current.contains(event.target)) {
+        handleOpenChange(false);
+      }
+    },
+    [handleOpenChange]
+  );
   useEffect(() => {
     if (isOpen) {
       const timer2 = setTimeout(() => {
@@ -80526,8 +80551,8 @@ const OverflowMenu = ({
       setIsAnimating(false);
       document.removeEventListener("mousedown", handleClickOutside);
     }
-  }, [isOpen]);
-  const getMenuStyle = () => {
+  }, [isOpen, handleClickOutside]);
+  const getMenuStyle = useMemo$1(() => {
     const baseStyle = {
       position: "absolute",
       zIndex: 1e3,
@@ -80538,37 +80563,68 @@ const OverflowMenu = ({
         return {
           ...baseStyle,
           top: `calc(100% + ${offset2}px)`,
-          left: 0,
-          right: 0
+          ...alignment === "right" ? { right: 0 } : { left: 0 }
         };
       }
       case "top": {
         return {
           ...baseStyle,
           bottom: `calc(100% + ${offset2}px)`,
-          left: 0,
-          right: 0
+          ...alignment === "right" ? { right: 0 } : { left: 0 }
         };
       }
       case "left": {
         return {
           ...baseStyle,
           top: 0,
-          right: `calc(100% + ${offset2}px)`
+          right: `calc(100% + ${offset2}px)`,
+          ...alignment === "right" ? { bottom: 0 } : {}
         };
       }
       case "right": {
         return {
           ...baseStyle,
           top: 0,
-          left: `calc(100% + ${offset2}px)`
+          left: `calc(100% + ${offset2}px)`,
+          ...alignment === "right" ? { bottom: 0 } : {}
         };
       }
       default: {
         return baseStyle;
       }
     }
-  };
+  }, [placement, alignment, offset2, style2]);
+  const handleItemClick = useCallback(
+    (item) => {
+      onItemClick?.(item);
+      handleOpenChange(false);
+    },
+    [onItemClick, handleOpenChange]
+  );
+  if (items && items.length > 0) {
+    return /* @__PURE__ */ jsxs(OverflowMenuWrapper, { children: [
+      /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
+      isOpen && /* @__PURE__ */ jsx(
+        OverflowMenuContainer,
+        {
+          ref: menuRef,
+          theme,
+          className,
+          style: getMenuStyle,
+          $isAnimating: isAnimating,
+          $placement: placement,
+          children: items.map((item) => /* @__PURE__ */ jsx(
+            OverflowMenuItem,
+            {
+              ...item,
+              onClick: () => handleItemClick(item)
+            },
+            item.id
+          ))
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsxs(OverflowMenuWrapper, { children: [
     /* @__PURE__ */ jsx("div", { ref: triggerRef, onClick: handleTriggerClick, children: trigger }),
     isOpen && /* @__PURE__ */ jsx(
@@ -80577,7 +80633,7 @@ const OverflowMenu = ({
         ref: menuRef,
         theme,
         className,
-        style: getMenuStyle(),
+        style: getMenuStyle,
         $isAnimating: isAnimating,
         $placement: placement,
         children: children2
@@ -80718,15 +80774,12 @@ const getTextComponent = (firstBarData, secondBarData, stateColor, theme, isText
   );
 };
 const getCombinedPercent = (firstBarData, secondBarData) => {
-  if (secondBarData?.value === 0) {
-    return firstBarData?.value;
-  }
-  if (firstBarData?.value && secondBarData?.value) {
-    const total = firstBarData?.value + secondBarData?.value;
+  if (firstBarData?.value !== void 0 && secondBarData?.value !== void 0) {
+    const total = firstBarData.value + secondBarData.value;
     const dividedBy = total / 2;
-    return dividedBy;
+    return Math.round(dividedBy * 10) / 10;
   }
-  return 0;
+  return firstBarData?.value || 0;
 };
 const Progress = ({
   firstBarData,
@@ -80745,6 +80798,7 @@ const Progress = ({
     strokeColor: theme?.colors?.inputs?.progress?.[secondBarData.status]
   } : null;
   const stateColor = strokeColor;
+  const percentDisplayWidth = 110;
   const gap = 8;
   if (isSingleBarOverallSuccess && secondBarData !== null) {
     const overallPercent = secondBarData.value;
@@ -80760,30 +80814,79 @@ const Progress = ({
           showInfo: false
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", width: 80 }, children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
-        overallPercent,
-        "%"
-      ] }) })
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: percentDisplayWidth
+          },
+          children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
+            overallPercent,
+            "%"
+          ] })
+        }
+      )
     ] });
   }
   if (isProgressCombined) {
     const combinedPercent = getCombinedPercent(firstBarData, secondBarData);
     const textColor = Number(combinedPercent) === 100 ? "green" : "black";
+    const adjustedFirstBar = secondBarData?.value === 100 ? 100 : firstBarData?.value || 0;
+    const firstBarStrokeColor = theme?.colors?.inputs?.progress?.[firstBarData?.status || "info"];
+    const secondBarStrokeColor = secondBarData?.value && secondBarData.value > 0 ? theme?.colors?.inputs?.progress?.[secondBarData.status] : null;
+    secondBarData?.value && secondBarData.value > 0 ? {
+      percent: secondBarData.value
+    } : null;
     return /* @__PURE__ */ jsxs(Tile, { style: { width, height, alignItems: "center", gap }, isHorizontal: true, children: [
+      /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
+        /* @__PURE__ */ jsx(
+          Progress$1,
+          {
+            "data-testid": "progress",
+            percent: adjustedFirstBar,
+            strokeColor: firstBarStrokeColor,
+            showInfo: false
+          }
+        ),
+        secondBarData?.value && secondBarData.value > 0 ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */ jsx(
+              Progress$1,
+              {
+                percent: secondBarData.value,
+                strokeColor: secondBarStrokeColor,
+                showInfo: false,
+                style: { background: "transparent" }
+              }
+            )
+          }
+        ) : null
+      ] }),
       /* @__PURE__ */ jsx(
-        Progress$1,
+        "div",
         {
-          "data-testid": "progress",
-          percent,
-          success,
-          strokeColor,
-          showInfo: false
+          style: {
+            display: "flex",
+            alignItems: "center",
+            width: percentDisplayWidth
+          },
+          children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
+            combinedPercent,
+            "%"
+          ] })
         }
-      ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", width: 80 }, children: /* @__PURE__ */ jsxs(Typography, { color: textColor, variant: "digits3", children: [
-        combinedPercent,
-        "%"
-      ] }) })
+      )
     ] });
   }
   if (isTextBeforeBar) {
@@ -84493,6 +84596,20 @@ const mockColumns = [
         state: colorStateMap[jobSubtype]
       });
     }
+  },
+  {
+    title: "Progress",
+    dataIndex: "progress",
+    render: (progress) => {
+      if (!progress) return null;
+      return React__default.createElement(Progress, {
+        firstBarData: progress.firstBarData,
+        secondBarData: progress.secondBarData,
+        width: 150,
+        height: 20,
+        isProgressCombined: true
+      });
+    }
   }
 ];
 mockColumns.map((column2) => ({
@@ -84509,7 +84626,19 @@ const mockDataSource = {
         nickname: "Home",
         address: "123 Main St"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Loading",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Processing",
+          status: "success",
+          value: 25
+        }
+      }
     },
     {
       id: "2",
@@ -84520,7 +84649,19 @@ const mockDataSource = {
         nickname: "Work",
         address: "456 Elm St"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Preparing",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Final Check",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "3",
@@ -84531,7 +84672,19 @@ const mockDataSource = {
         nickname: "Store",
         address: "789 Oak St"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Pending",
+          status: "info",
+          value: 0
+        },
+        secondBarData: {
+          text: "Awaiting",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "4",
@@ -84542,7 +84695,19 @@ const mockDataSource = {
         nickname: "Office",
         address: "321 Pine St"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "In Progress",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Validation",
+          status: "success",
+          value: 30
+        }
+      }
     },
     {
       id: "5",
@@ -84553,7 +84718,19 @@ const mockDataSource = {
         nickname: "Library",
         address: "555 Book Lane"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Completed",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Verified",
+          status: "success",
+          value: 100
+        }
+      }
     },
     {
       id: "6",
@@ -84564,7 +84741,19 @@ const mockDataSource = {
         nickname: "Gym",
         address: "777 Fitness Ave"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Phase 1",
+          status: "info",
+          value: 75
+        },
+        secondBarData: {
+          text: "Phase 2",
+          status: "success",
+          value: 50
+        }
+      }
     },
     {
       id: "7",
@@ -84575,7 +84764,19 @@ const mockDataSource = {
         nickname: "Mall",
         address: "888 Shopping Center"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Queued",
+          status: "info",
+          value: 0
+        },
+        secondBarData: {
+          text: "Waiting",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "8",
@@ -84586,7 +84787,19 @@ const mockDataSource = {
         nickname: "School",
         address: "999 Education Rd"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Delivered",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Confirmed",
+          status: "success",
+          value: 100
+        }
+      }
     },
     {
       id: "9",
@@ -84597,7 +84810,19 @@ const mockDataSource = {
         nickname: "Restaurant",
         address: "111 Food Court"
       },
-      job_subtype: "delivery"
+      job_subtype: "delivery",
+      progress: {
+        firstBarData: {
+          text: "Preparing",
+          status: "info",
+          value: 100
+        },
+        secondBarData: {
+          text: "Quality Check",
+          status: "success",
+          value: 15
+        }
+      }
     },
     {
       id: "10",
@@ -84608,7 +84833,19 @@ const mockDataSource = {
         nickname: "Park",
         address: "222 Green Ave"
       },
-      job_subtype: "pickup"
+      job_subtype: "pickup",
+      progress: {
+        firstBarData: {
+          text: "Processing",
+          status: "info",
+          value: 80
+        },
+        secondBarData: {
+          text: "Review",
+          status: "success",
+          value: 0
+        }
+      }
     },
     {
       id: "11",
@@ -85058,6 +85295,7 @@ export {
   Message,
   Notification,
   OverflowMenu,
+  OverflowMenuItem,
   Popover,
   Progress,
   RadioGroup,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gobolt/genesis",
-  "version": "0.4.4",
+  "version": "0.4.7",
   "description": "genesis design system",
   "author": "gobolt",
   "license": "MIT",