@algorithm-shift/design-system 1.2.985 → 1.2.987

package/dist/index.d.mts

@@ -8,6 +8,7 @@ import { ClassValue } from 'clsx';
 interface ModalProps {
     isOpen: boolean | string;
     onModalClose?: () => void;
+    onModalOpen?: () => void;
     title: string;
     children: React$1.ReactNode;
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -15,7 +16,7 @@ interface ModalProps {
     className?: string;
     style?: React$1.CSSProperties;
 }
-declare function Modal({ isOpen, onModalClose, title, children, size, showCloseButton, className, style }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onModalClose, onModalOpen, title, children, size, showCloseButton, className, style }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
 interface ElementProps {
   children?: React.ReactNode;
@@ -244,6 +245,8 @@ interface BreadcrumbProps extends ElementProps {
 interface ButtonGroupProps extends ElementProps {
   textContent?: string;
   list?: Record<string, any>;
+  onGroupItemClick?: (data: { item: Record<string, any>}) => void;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 interface AccordionProps extends ElementProps {
   name?: string;
@@ -312,7 +315,7 @@ declare const Typography: ({ className, style, tagName, textContent, }: Typograp
 
 declare const Breadcrumb: ({ list, className, style }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
 
-declare function SplitButton({ style, textContent, className, list }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare function ButtonGroup({ style, textContent, className, list, onGroupItemClick, onClick }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
 type IconSet = 'fa-css' | 'fa' | 'fontawesome' | 'lucide';
 type FAPrefix = 'fas' | 'far' | 'fab' | string;
@@ -475,4 +478,4 @@ declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Ele
 declare function cn(...inputs: ClassValue[]): string;
 declare function getInitials(name: string): string;
 
-export { Accordion, AccordionGroup, _default$1 as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DateTimePicker as DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, HistoryTimeline, Icon, ImageControl as Image, Modal, MultiCheckbox, LazyMultiSelectDropdown as MultiSelect, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, _default as PieChart, RadioInput as RadioGroup, _default$2 as Repeater, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };
+export { Accordion, AccordionGroup, _default$1 as BarChart, Breadcrumb, ButtonWrapper as Button, ButtonGroup, CheckboxInput as Checkbox, Container, DateTimePicker as DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, HistoryTimeline, Icon, ImageControl as Image, Modal, MultiCheckbox, LazyMultiSelectDropdown as MultiSelect, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, _default as PieChart, RadioInput as RadioGroup, _default$2 as Repeater, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import { ClassValue } from 'clsx';
 interface ModalProps {
     isOpen: boolean | string;
     onModalClose?: () => void;
+    onModalOpen?: () => void;
     title: string;
     children: React$1.ReactNode;
     size?: 'sm' | 'md' | 'lg' | 'xl';
@@ -15,7 +16,7 @@ interface ModalProps {
     className?: string;
     style?: React$1.CSSProperties;
 }
-declare function Modal({ isOpen, onModalClose, title, children, size, showCloseButton, className, style }: ModalProps): react_jsx_runtime.JSX.Element | null;
+declare function Modal({ isOpen, onModalClose, onModalOpen, title, children, size, showCloseButton, className, style }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
 interface ElementProps {
   children?: React.ReactNode;
@@ -244,6 +245,8 @@ interface BreadcrumbProps extends ElementProps {
 interface ButtonGroupProps extends ElementProps {
   textContent?: string;
   list?: Record<string, any>;
+  onGroupItemClick?: (data: { item: Record<string, any>}) => void;
+  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 interface AccordionProps extends ElementProps {
   name?: string;
@@ -312,7 +315,7 @@ declare const Typography: ({ className, style, tagName, textContent, }: Typograp
 
 declare const Breadcrumb: ({ list, className, style }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
 
-declare function SplitButton({ style, textContent, className, list }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
+declare function ButtonGroup({ style, textContent, className, list, onGroupItemClick, onClick }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
 type IconSet = 'fa-css' | 'fa' | 'fontawesome' | 'lucide';
 type FAPrefix = 'fas' | 'far' | 'fab' | string;
@@ -475,4 +478,4 @@ declare const Toaster: ({ ...props }: ToasterProps) => react_jsx_runtime.JSX.Ele
 declare function cn(...inputs: ClassValue[]): string;
 declare function getInitials(name: string): string;
 
-export { Accordion, AccordionGroup, _default$1 as BarChart, Breadcrumb, ButtonWrapper as Button, SplitButton as ButtonGroup, CheckboxInput as Checkbox, Container, DateTimePicker as DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, HistoryTimeline, Icon, ImageControl as Image, Modal, MultiCheckbox, LazyMultiSelectDropdown as MultiSelect, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, _default as PieChart, RadioInput as RadioGroup, _default$2 as Repeater, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };
+export { Accordion, AccordionGroup, _default$1 as BarChart, Breadcrumb, ButtonWrapper as Button, ButtonGroup, CheckboxInput as Checkbox, Container, DateTimePicker as DatePicker, DateRange, Dropdown, EmailInput as Email, EmailComposer, FileInput, Flex as FlexLayout, Grid as GridLayout, HistoryTimeline, Icon, ImageControl as Image, Modal, MultiCheckbox, LazyMultiSelectDropdown as MultiSelect, Navbar, NumberInput, CustomPagination as Pagination, PasswordInput as Password, PhoneInput as Phone, _default as PieChart, RadioInput as RadioGroup, _default$2 as Repeater, RichText, SearchInput as Search, Shape, Slot, Spacer, StagesComponent as Stages, SwitchToggle, TabGroupComponent as TabGroup, TabList, Table, Tabs, TextInput as Text, TextInputGroup, Textarea, Toaster, Typography, UrlInput as URL, cn, getInitials, showSonnerToast };

package/dist/index.js

@@ -36,7 +36,7 @@ __export(src_exports, {
   BarChart: () => BarChart_default,
   Breadcrumb: () => Breadcrumb_default,
   Button: () => Button_default,
-  ButtonGroup: () => SplitButton,
+  ButtonGroup: () => ButtonGroup,
   Checkbox: () => Checkbox_default,
   Container: () => Container_default,
   DatePicker: () => DateTimePicker,
@@ -119,6 +119,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function Modal({
   isOpen,
   onModalClose,
+  onModalOpen,
   title,
   children,
   size = "md",
@@ -126,6 +127,11 @@ function Modal({
   className = "",
   style = {}
 }) {
+  (0, import_react.useEffect)(() => {
+    if (isOpen && onModalOpen) {
+      onModalOpen();
+    }
+  }, [isOpen]);
   (0, import_react.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -647,6 +653,7 @@ var Breadcrumb_default = Breadcrumb;
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
 var import_lucide_react3 = require("lucide-react");
+var import_link2 = __toESM(require("next/link"));
 
 // src/components/ui/dropdown-menu.tsx
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
@@ -765,9 +772,9 @@ function DropdownMenuSubContent({
 }
 
 // src/components/Basic/ButtonGroup/ButtonGroup.tsx
-var import_link2 = __toESM(require("next/link"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
-function SplitButton({ style, textContent, className, list = [] }) {
+function ButtonGroup({ style, textContent, className, list = [], onGroupItemClick, onClick }) {
+  const data = Array.isArray(list) ? list : [];
   const bgColor = style?.backgroundColor || "";
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "inline-flex rounded-md overflow-hidden border border-teal-200 bg-teal-700 items-center focus:ring-0", style: { backgroundColor: bgColor }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -775,6 +782,7 @@ function SplitButton({ style, textContent, className, list = [] }) {
       {
         className: `rounded-none border-r px-4 py-2 text-whit focus:ring-0 ${className || ""}`,
         style: { backgroundColor: bgColor },
+        onClick: (e) => onClick?.(e),
         children: textContent || "Button"
       }
     ),
@@ -788,7 +796,24 @@ function SplitButton({ style, textContent, className, list = [] }) {
           children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react3.ChevronDown, { className: "w-4 h-4" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuContent, { align: "end", className: "bg-white min-w-[120px]", children: list.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DropdownMenuItem, { className: "text-black", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_link2.default, { href: item.url || "#", children: item.header }) }, item.id)) })
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        DropdownMenuContent,
+        {
+          align: "end",
+          className: "bg-white min-w-[120px]",
+          children: data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            DropdownMenuItem,
+            {
+              className: "text-black",
+              onSelect: () => onGroupItemClick?.({
+                item
+              }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_link2.default, { href: item.url || "#", children: item.header })
+            },
+            item.id
+          ))
+        }
+      )
     ] })
   ] });
 }
@@ -1565,6 +1590,7 @@ function MultiCheckbox({
               {
                 id: props.name ? `${props.name}-${opt.value}` : opt.value,
                 className: cn(hasError && "text-red-600"),
+                htmlFor: props.name ? `${props.name}-${opt.value}` : opt.value,
                 children: opt.label
               }
             )
@@ -2180,7 +2206,8 @@ function LazySelectDropdown({
         onFocus: handleFocus,
         onChange: handleSearchChange,
         readOnly: !isOpen || readOnly,
-        disabled
+        disabled,
+        autoComplete: "off"
       }
     ),
     selectedOption && !disabled && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
@@ -3368,7 +3395,8 @@ function LazyMultiSelectDropdown({
               value: isOpen ? searchTerm : "",
               onChange: handleSearch,
               readOnly,
-              disabled
+              disabled,
+              autoComplete: "off"
             }
           )
         ]
@@ -3936,13 +3964,13 @@ function DataTable({
     const shouldShowLeftDots = leftSiblingIndex > 2;
     const shouldShowRightDots = rightSiblingIndex < totalPages - 1;
     if (!shouldShowLeftDots && shouldShowRightDots) {
-      return [1, 2, 3, "...", totalPages];
+      return [1, 2, 3, "..."];
     }
     if (shouldShowLeftDots && !shouldShowRightDots) {
       return [1, "...", totalPages - 2, totalPages - 1, totalPages];
     }
     if (shouldShowLeftDots && shouldShowRightDots) {
-      return [1, "...", currentPage - 1, currentPage, currentPage + 1, "...", totalPages];
+      return [1, "...", currentPage - 1, currentPage, currentPage + 1, "..."];
     }
     return [];
   };
@@ -4148,7 +4176,7 @@ function DataTable({
         return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           TableCell,
           {
-            className: `${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2`,
+            className: `break-words whitespace-normal align-top ${meta?.cellClass ?? ""} ${isClickable ? "cursor-pointer hover:bg-gray-100 underline text-blue-500" : ""} relative py-2`,
             style: {
               width: cell.column.getSize(),
               minWidth: cell.column.columnDef.minSize,
@@ -5125,8 +5153,15 @@ var StagesComponent = ({
   triggerOnClick = false,
   canvasMode = "desktop"
 }) => {
-  const [activeStage, setActiveStage] = (0, import_react33.useState)(currentStage || (stages && stages.length > 0 ? stages[0][dataKey] : null));
+  const [activeStage, setActiveStage] = (0, import_react33.useState)("");
   const [isCompleted, setIsCompleted] = (0, import_react33.useState)(false);
+  (0, import_react33.useEffect)(() => {
+    if (currentStage) {
+      setActiveStage(currentStage);
+    } else {
+      setActiveStage(stages && stages.length > 0 ? stages[0][dataKey] : null);
+    }
+  }, [currentStage]);
   const updateStage = (stageKey) => {
     setActiveStage(stageKey);
     onStageChange?.(stageKey);
@@ -5141,7 +5176,7 @@ var StagesComponent = ({
       return;
     }
     if (currentIndex < stages.length - 1) {
-      const nextStageObj = stages[currentIndex + 1];
+      const nextStageObj = stages[currentIndex];
       updateStage(nextStageObj[dataKey]);
       return;
     }