@algorithm-shift/design-system 1.2.67 → 1.2.69

package/dist/index.d.mts

@@ -3,6 +3,18 @@ import React$1 from 'react';
 import { ToasterProps } from 'sonner';
 import { ClassValue } from 'clsx';
 
+interface ModalProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    title: string;
+    children: React$1.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    showCloseButton?: boolean;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+declare function Modal({ isOpen, onClose, title, children, size, showCloseButton, className, style }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
 interface ElementProps {
   children?: React.ReactNode;
   className?: string;
@@ -144,12 +156,6 @@ interface BarChartProps extends ElementProps {
   loading?: boolean;
 }
 
-interface ModalProps extends ElementProps {
-  label?: string;
-  showModal: boolean;
-  onModalClose?: (show: boolean) => void;
-}
-
 interface EmailComposerProps extends ElementProps {
   to?: string;
   setTo?: (to: string) => void;
@@ -211,8 +217,6 @@ interface TabGroupProps extends ElementProps {
   onTabChange?: (tabId: string) => void;
 }
 
-declare const Modal: ({ children, className, style, showModal, onModalClose, label }: ModalProps) => react_jsx_runtime.JSX.Element | null;
-
 declare const Flex: ({ children, className, style, ...props }: ElementProps) => react_jsx_runtime.JSX.Element;
 
 declare const Grid: ({ children, className, style, ...props }: ElementProps) => react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -3,6 +3,18 @@ import React$1 from 'react';
 import { ToasterProps } from 'sonner';
 import { ClassValue } from 'clsx';
 
+interface ModalProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    title: string;
+    children: React$1.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    showCloseButton?: boolean;
+    className?: string;
+    style?: React$1.CSSProperties;
+}
+declare function Modal({ isOpen, onClose, title, children, size, showCloseButton, className, style }: ModalProps): react_jsx_runtime.JSX.Element | null;
+
 interface ElementProps {
   children?: React.ReactNode;
   className?: string;
@@ -144,12 +156,6 @@ interface BarChartProps extends ElementProps {
   loading?: boolean;
 }
 
-interface ModalProps extends ElementProps {
-  label?: string;
-  showModal: boolean;
-  onModalClose?: (show: boolean) => void;
-}
-
 interface EmailComposerProps extends ElementProps {
   to?: string;
   setTo?: (to: string) => void;
@@ -211,8 +217,6 @@ interface TabGroupProps extends ElementProps {
   onTabChange?: (tabId: string) => void;
 }
 
-declare const Modal: ({ children, className, style, showModal, onModalClose, label }: ModalProps) => react_jsx_runtime.JSX.Element | null;
-
 declare const Flex: ({ children, className, style, ...props }: ElementProps) => react_jsx_runtime.JSX.Element;
 
 declare const Grid: ({ children, className, style, ...props }: ElementProps) => react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -49,7 +49,7 @@ __export(src_exports, {
   GridLayout: () => Grid_default,
   Icon: () => Icon_default,
   Image: () => Image_default,
-  Modal: () => Modal_default,
+  Modal: () => Modal,
   MultiCheckbox: () => MultiCheckbox_default,
   Navbar: () => Navbar,
   NumberInput: () => NumberInput_default,
@@ -83,45 +83,88 @@ module.exports = __toCommonJS(src_exports);
 
 // src/components/Layout/Modal.tsx
 var import_react = require("react");
+var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
+var import_react_fontawesome = require("@fortawesome/react-fontawesome");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+function getInitials(name) {
+  const words = name.split(" ");
+  if (words.length === 0) {
+    return "";
+  }
+  if (words.length === 1) {
+    return words[0].charAt(0);
+  }
+  return words[0].charAt(0) + words[1].charAt(0);
+}
+
+// src/components/Layout/Modal.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var Modal = ({
+function Modal({
+  isOpen,
+  onClose,
+  title,
   children,
-  className,
-  style,
-  showModal,
-  onModalClose,
-  label
-}) => {
+  size = "md",
+  showCloseButton = true,
+  className = "",
+  style = {}
+}) {
   (0, import_react.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-h-80", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-between items-center p-4 border-b border-gray-300 bg-gray-100", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "text-[#000]", children: label || "Modal Title" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "span",
-        {
-          className: "cursor-pointer text-[#000]",
-          role: "presentation",
-          onClick: () => onModalClose && onModalClose(false),
-          children: "X"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between p-4 py-3 border-b border-gray-200 dark:border-gray-700", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }),
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(import_react_fontawesome.FontAwesomeIcon, { icon: import_free_solid_svg_icons.faTimes, className: "w-5 h-5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "p-4 py-3 overflow-y-auto max-h-[calc(90vh-140px)] min-h-[90px]", children })
+      ]
+    }
+  ) });
+}
 
 // src/components/Layout/Flex.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -243,11 +286,13 @@ function TabGroupComponent({
   activeTab,
   onTabChange
 }) {
+  const [mounted, setMounted] = (0, import_react3.useState)(false);
   (0, import_react3.useEffect)(() => {
-    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 = (0, import_react3.useMemo)(
     () => Array.isArray(list) ? [...list].sort((a, b) => (a.orderNumber ?? 0) - (b.orderNumber ?? 0)) : [],
     [list]
@@ -270,25 +315,6 @@ function TabGroupComponent({
 // src/components/ui/button.tsx
 var import_react_slot = require("@radix-ui/react-slot");
 var import_class_variance_authority = require("class-variance-authority");
-
-// src/lib/utils.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function cn(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-function getInitials(name) {
-  const words = name.split(" ");
-  if (words.length === 0) {
-    return "";
-  }
-  if (words.length === 1) {
-    return words[0].charAt(0);
-  }
-  return words[0].charAt(0) + words[1].charAt(0);
-}
-
-// src/components/ui/button.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
@@ -26889,7 +26915,7 @@ function SplitButton({ style, textContent, className, list = [] }) {
 
 // src/components/Basic/Icon/Icon.tsx
 var faSolid = __toESM(require("@fortawesome/free-solid-svg-icons"));
-var import_react_fontawesome = require("@fortawesome/react-fontawesome");
+var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Icon2 = ({ iconType = "fontawesome", name = "Envelope", className, fontSize = 10, style }) => {
   let content = null;
@@ -26900,7 +26926,7 @@ var Icon2 = ({ iconType = "fontawesome", name = "Envelope", className, fontSize
       return null;
     }
     content = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      import_react_fontawesome.FontAwesomeIcon,
+      import_react_fontawesome2.FontAwesomeIcon,
       {
         icon: faIcon,
         className: cn("inline-block"),
@@ -28006,7 +28032,7 @@ var import_react24 = __toESM(require("react"));
 var import_date_fns = require("date-fns");
 
 // src/components/ui/calendar.tsx
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var import_react_day_picker = require("react-day-picker");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function Calendar2({
@@ -28161,8 +28187,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = (0, import_react_day_picker.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__ */ (0, import_jsx_runtime42.jsx)(
@@ -28338,9 +28364,9 @@ var TextInputGroup = ({ className, style, prepend, append, ...props }) => {
 var TextInputGroup_default = TextInputGroup;
 
 // src/components/ui/data-table.tsx
-var React6 = __toESM(require("react"));
-var import_free_solid_svg_icons = require("@fortawesome/free-solid-svg-icons");
-var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
+var React7 = __toESM(require("react"));
+var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
+var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
 var import_react_table = require("@tanstack/react-table");
 
 // src/components/ui/table.tsx
@@ -28445,10 +28471,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 = (0, import_react_table.useReactTable)({
     data,
     columns,
@@ -28602,7 +28628,7 @@ function DataTable({
                 role: "presentation",
                 className: "pl-5 cursor-pointer",
                 onClick: (e) => e.stopPropagation(),
-                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_fontawesome2.FontAwesomeIcon, { icon: import_free_solid_svg_icons.faEllipsisH, className: "w-5 h-5 text-gray-500" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faEllipsisH, className: "w-5 h-5 text-gray-500" })
               }
             ) }),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
@@ -29082,10 +29108,10 @@ var import_jsx_runtime55 = require("react/jsx-runtime");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 
 // src/components/ui/avatar.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
 var import_jsx_runtime57 = require("react/jsx-runtime");
-var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -29097,7 +29123,7 @@ var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -29106,7 +29132,7 @@ var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,