@algorithm-shift/design-system 1.2.67 → 1.2.69

package/dist/index.mjs

@@ -7,45 +7,69 @@ import {
 
 // src/components/Layout/Modal.tsx
 import { useEffect } from "react";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Modal = ({
+function Modal({
+  isOpen,
+  onClose,
+  title,
   children,
-  className,
-  style,
-  showModal,
-  onModalClose,
-  label
-}) => {
+  size = "md",
+  showCloseButton = true,
+  className = "",
+  style = {}
+}) {
   useEffect(() => {
-    if (showModal) {
-      const wrapper = document.getElementById("canvas-wrapper") || document.getElementById("canvas-preview");
-      if (!wrapper) return;
-      const overlay = document.createElement("div");
-      overlay.className = "absolute flex inset-0 bg-black opacity-50 z-10 w-full h-full";
-      wrapper.appendChild(overlay);
-      return () => {
-        if (wrapper.contains(overlay)) wrapper.removeChild(overlay);
-      };
-    }
-  }, [showModal]);
-  if (!showModal) return null;
-  return /* @__PURE__ */ jsx("div", { className: `${className} top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 shadow-lg rounded-md z-90 bg-[#fff] `, style: { position: "fixed", ...style }, children: /* @__PURE__ */ jsxs("div", { className: "min-h-80", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-4 border-b border-gray-300 bg-gray-100", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-[#000]", children: label || "Modal Title" }),
-      /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: "cursor-pointer text-[#000]",
-          role: "presentation",
-          onClick: () => onModalClose && onModalClose(false),
-          children: "X"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "h-90 overflow-y-auto p-4 custom-scroll", children })
-  ] }) });
-};
-var Modal_default = Modal;
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        onClose?.();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const sizeClasses = {
+    sm: "w-md",
+    md: "w-lg",
+    lg: "w-2xl",
+    xl: "w-4xl"
+  };
+  return /* @__PURE__ */ jsx("div", { className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 shadow-lg rounded-md z-90", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-h-[90vh] overflow-hidden",
+        `bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full ${sizeClasses[size]} max-h-[90vh] overflow-hidden`,
+        className,
+        `${sizeClasses[size]}`
+      ),
+      style,
+      children: [
+        (title || showCloseButton) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 py-3 border-b border-gray-200 dark:border-gray-700", children: [
+          title && /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
+          showCloseButton && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onClose,
+              className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors cursor-pointer",
+              "aria-label": "Close modal",
+              children: /* @__PURE__ */ jsx(FontAwesomeIcon, { icon: faTimes, className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-4 py-3 overflow-y-auto max-h-[calc(90vh-140px)] min-h-[90px]", children })
+      ]
+    }
+  ) });
+}
 
 // src/components/Layout/Flex.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -157,7 +181,7 @@ function TabList({
 }
 
 // src/components/Layout/TabGroup.tsx
-import { useEffect as useEffect2, useMemo } from "react";
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
 import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 function TabGroupComponent({
   children,
@@ -167,11 +191,13 @@ function TabGroupComponent({
   activeTab,
   onTabChange
 }) {
+  const [mounted, setMounted] = useState2(false);
   useEffect2(() => {
-    if (list && list.length > 0 && !activeTab && onTabChange) {
+    if (list && list.length > 0 && !activeTab && onTabChange && !mounted) {
       onTabChange(list[0]?.tabId);
+      setMounted(true);
     }
-  }, [list, activeTab, onTabChange]);
+  }, [list, activeTab, onTabChange, mounted]);
   const formatedList = useMemo(
     () => Array.isArray(list) ? [...list].sort((a, b) => (a.orderNumber ?? 0) - (b.orderNumber ?? 0)) : [],
     [list]
@@ -301,7 +327,7 @@ var Shape = ({
 var Shape_default = Shape;
 
 // src/components/Basic/Typography/Typography.tsx
-import React2 from "react";
+import React3 from "react";
 var Typography = ({
   className,
   style,
@@ -309,14 +335,14 @@ var Typography = ({
   textContent
 }) => {
   const Tag2 = tagName || "h1";
-  return React2.createElement(
+  return React3.createElement(
     Tag2,
     {
       style,
       className: cn(className, "pointer-events-auto")
     },
     [
-      React2.createElement("span", {
+      React3.createElement("span", {
         key: "html",
         className: "pointer-events-none",
         dangerouslySetInnerHTML: { __html: textContent }
@@ -26794,7 +26820,7 @@ function SplitButton({ style, textContent, className, list = [] }) {
 
 // src/components/Basic/Icon/Icon.tsx
 import * as faSolid from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
 import { jsx as jsx17 } from "react/jsx-runtime";
 var Icon2 = ({ iconType = "fontawesome", name = "Envelope", className, fontSize = 10, style }) => {
   let content = null;
@@ -26805,7 +26831,7 @@ var Icon2 = ({ iconType = "fontawesome", name = "Envelope", className, fontSize
       return null;
     }
     content = /* @__PURE__ */ jsx17(
-      FontAwesomeIcon,
+      FontAwesomeIcon2,
       {
         icon: faIcon,
         className: cn("inline-block"),
@@ -27304,7 +27330,7 @@ var RadioInput = ({
 var RadioInput_default = RadioInput;
 
 // src/components/Inputs/MultiCheckbox/MultiCheckbox.tsx
-import { useCallback, useEffect as useEffect11, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect11, useState as useState3 } from "react";
 import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
 var MultiCheckbox = ({
   className,
@@ -27318,7 +27344,7 @@ var MultiCheckbox = ({
   isDisabled = false
 }) => {
   const list = Array.isArray(data) ? data : [];
-  const [value, setValue] = useState2(propValue);
+  const [value, setValue] = useState3(propValue);
   const options = (list || []).map((item) => ({
     value: item[dataKey || "value"],
     label: item[dataLabel || "label"]
@@ -27907,11 +27933,11 @@ function DatePicker({ className, style, ...props }) {
 }
 
 // src/components/Inputs/DateRange/DateRange.tsx
-import React5, { useEffect as useEffect20 } from "react";
+import React6, { useEffect as useEffect20 } from "react";
 import { addDays, format } from "date-fns";
 
 // src/components/ui/calendar.tsx
-import * as React4 from "react";
+import * as React5 from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
 import { jsx as jsx42 } from "react/jsx-runtime";
 function Calendar2({
@@ -28066,8 +28092,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  const ref = React4.useRef(null);
-  React4.useEffect(() => {
+  const ref = React5.useRef(null);
+  React5.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx42(
@@ -28129,7 +28155,7 @@ function PopoverContent({
 import { Fragment as Fragment15, jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 var DateRange = ({ className, style, ...props }) => {
   const isDateRange = (val) => !!val && val.from instanceof Date;
-  const [date, setDate] = React5.useState(
+  const [date, setDate] = React6.useState(
     isDateRange(props.value) ? props.value : {
       from: /* @__PURE__ */ new Date(),
       to: addDays(/* @__PURE__ */ new Date(), 7)
@@ -28243,9 +28269,9 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/ui/data-table.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { faEllipsisH } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
 import {
   flexRender,
   getCoreRowModel,
@@ -28356,10 +28382,10 @@ function DataTable({
   onGlobalSearch,
   globalSearch
 }) {
-  const [columnFilters, setColumnFilters] = React6.useState([]);
-  const [columnVisibility, setColumnVisibility] = React6.useState({});
-  const [manualSort, setManualSort] = React6.useState(null);
-  const [searchTerm, setSearchTerm] = React6.useState("");
+  const [columnFilters, setColumnFilters] = React7.useState([]);
+  const [columnVisibility, setColumnVisibility] = React7.useState({});
+  const [manualSort, setManualSort] = React7.useState(null);
+  const [searchTerm, setSearchTerm] = React7.useState("");
   const table = useReactTable({
     data,
     columns,
@@ -28513,7 +28539,7 @@ function DataTable({
                 role: "presentation",
                 className: "pl-5 cursor-pointer",
                 onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ jsx47(FontAwesomeIcon2, { icon: faEllipsisH, className: "w-5 h-5 text-gray-500" })
+                children: /* @__PURE__ */ jsx47(FontAwesomeIcon3, { icon: faEllipsisH, className: "w-5 h-5 text-gray-500" })
               }
             ) }),
             /* @__PURE__ */ jsx47(
@@ -28956,12 +28982,12 @@ var Tabs = ({ className, style, tabs, verticalMenu, pathname, canvasMode }) => {
 var Tabs_default = Tabs;
 
 // src/components/Navigation/Stages/Stages.tsx
-import React7 from "react";
+import React8 from "react";
 import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
 var StagesComponent = ({ stages, isShowBtn, buttonText, className, style }) => {
   return /* @__PURE__ */ jsx52("div", { className, style, children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between bg-red p-2 rounded-lg border border-gray-200 w-full", children: [
     /* @__PURE__ */ jsx52("div", { className: "flex items-center", children: /* @__PURE__ */ jsx52("button", { className: "p-2 hover:bg-gray-100 rounded", children: /* @__PURE__ */ jsx52("svg", { className: "w-4 h-4 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx52("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }) }) }),
-    /* @__PURE__ */ jsx52("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs30(React7.Fragment, { children: [
+    /* @__PURE__ */ jsx52("div", { className: "flex items-center flex-1 px-2 flex-wrap gap-2", children: stages?.length > 0 && stages?.map((stage, index) => /* @__PURE__ */ jsxs30(React8.Fragment, { children: [
       /* @__PURE__ */ jsx52(
         "button",
         {
@@ -28993,10 +29019,10 @@ import { jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
 import { jsx as jsx56 } from "react/jsx-runtime";
 
 // src/components/ui/avatar.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { jsx as jsx57 } from "react/jsx-runtime";
-var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
   AvatarPrimitive.Root,
   {
     ref,
@@ -29008,7 +29034,7 @@ var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
   AvatarPrimitive.Image,
   {
     ref,
@@ -29017,7 +29043,7 @@ var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
+var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx57(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -29121,7 +29147,7 @@ function Navbar({
 }
 
 // src/components/Chart/BarChart.tsx
-import React9 from "react";
+import React10 from "react";
 import {
   BarChart,
   Bar,
@@ -29193,10 +29219,10 @@ var ChartComponent = ({ className, style, loading, ...props }) => {
     )
   ] }) }) });
 };
-var BarChart_default = React9.memo(ChartComponent);
+var BarChart_default = React10.memo(ChartComponent);
 
 // src/components/Chart/PieChart.tsx
-import React10, { useMemo as useMemo3 } from "react";
+import React11, { useMemo as useMemo3 } from "react";
 import {
   PieChart,
   Pie,
@@ -29318,7 +29344,7 @@ var DonutChart = ({ className, style, loading, ...props }) => {
     }
   );
 };
-var PieChart_default = React10.memo(DonutChart);
+var PieChart_default = React11.memo(DonutChart);
 
 // src/components/Blocks/EmailComposer.tsx
 import { jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -29477,7 +29503,7 @@ export {
   Grid_default as GridLayout,
   Icon_default as Icon,
   Image_default as Image,
-  Modal_default as Modal,
+  Modal,
   MultiCheckbox_default as MultiCheckbox,
   Navbar,
   NumberInput_default as NumberInput,