@farmzone/fz-react-ui 1.0.14 → 1.0.16

package/dist/index.cjs

@@ -1096,43 +1096,50 @@ function Radio(props) {
     "--radio-checked": checkColor,
     "--radio-unchecked": unCheckColor
   };
-  const control = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1.5", wrapperClassName), style: colorVars, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      RadioGroupPrimitive__namespace.Item,
-      {
-        value,
-        disabled,
-        id: inputId,
-        className: cn(
-          "group relative size-4 shrink-0 rounded-full border box-border transition-colors duration-200 outline-none",
-          "border-(--radio-unchecked) data-[state=checked]:border-(--radio-checked)",
-          "data-[state=unchecked]:hover:opacity-80",
-          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "relative flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-          lucideReact.CircleIcon,
+  const control = /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      htmlFor: inputId,
+      className: cn("flex items-center gap-1.5", disabled ? "cursor-not-allowed" : "cursor-pointer", wrapperClassName),
+      style: colorVars,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          RadioGroupPrimitive__namespace.Item,
           {
+            value,
+            disabled,
+            id: inputId,
             className: cn(
-              "absolute top-1/2 left-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 fill-(--radio-checked) text-(--radio-checked) transition-opacity duration-200",
-              indicatorClassName
-            )
+              "group relative size-4 shrink-0 rounded-full border box-border transition-colors duration-200 outline-none",
+              "border-(--radio-unchecked) data-[state=checked]:border-(--radio-checked)",
+              "data-[state=unchecked]:hover:opacity-80",
+              disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Indicator, { className: "relative flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.CircleIcon,
+              {
+                className: cn(
+                  "absolute top-1/2 left-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 fill-(--radio-checked) text-(--radio-checked) transition-opacity duration-200",
+                  indicatorClassName
+                )
+              }
+            ) })
           }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "label",
-      {
-        htmlFor: inputId,
-        className: cn(
-          "text-sm font-medium cursor-pointer text-black select-none",
-          disabled && "cursor-not-allowed text-gray-400 opacity-50",
-          labelClassName
         ),
-        children: label
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "text-sm font-medium text-black select-none",
+              disabled && "text-gray-400 opacity-50",
+              labelClassName
+            ),
+            children: label
+          }
+        )
+      ]
+    }
+  );
   const withTooltip = (node) => {
     if (!disabled || !disabledMessage) return node;
     return /* @__PURE__ */ jsxRuntime.jsx(Tooltip2, { content: disabledMessage, position: "bottom", asChild: true, sideOffset: 4, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex", children: node }) });
@@ -1179,11 +1186,7 @@ function RadioGroup(props) {
       value,
       onValueChange: (newValue) => onChange(newValue),
       disabled,
-      className: cn(
-        "flex flex-wrap gap-3",
-        direction === "horizontal" ? "flex-row" : "flex-col",
-        containerClassName
-      ),
+      className: cn("flex flex-wrap gap-3", direction === "horizontal" ? "flex-row" : "flex-col", containerClassName),
       children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
         Radio,
         {
@@ -1428,7 +1431,8 @@ function getVisiblePageRange(currentPage, totalPages) {
   return { start, end };
 }
 function Pagination(props) {
-  const { page = 0, totalPages = 50, onPageChange } = props;
+  const { page = 0, totalPages: rawTotalPages = 0, onPageChange } = props;
+  const totalPages = Math.max(1, rawTotalPages);
   const [displayPage, setDisplayPage] = React6.useState(page);
   React6.useEffect(() => {
     setDisplayPage(page);
@@ -1440,6 +1444,7 @@ function Pagination(props) {
     },
     [onPageChange]
   );
+  const isEmpty = rawTotalPages === 0;
   const pageButtons = React6.useMemo(() => {
     const { start, end } = getVisiblePageRange(displayPage, totalPages);
     const buttons = [];
@@ -1451,9 +1456,10 @@ function Pagination(props) {
           "button",
           {
             type: "button",
+            disabled: isEmpty,
             className: cn(
-              "min-w-7 min-h-7 rounded-[4px] text-[14px] px-[5px] font-medium cursor-pointer",
-              isActive ? "bg-[#2675e2] text-white font-bold" : "bg-white text-[#000000] font-normal hover:bg-gray-50"
+              "min-w-7 min-h-7 rounded-[4px] text-[14px] px-[5px] font-medium",
+              isEmpty ? "bg-[#2675e2] text-white font-bold cursor-default" : isActive ? "bg-[#2675e2] text-white font-bold cursor-pointer" : "bg-white text-[#000000] font-normal hover:bg-gray-50 cursor-pointer"
             ),
             onClick: () => handlePageChange(pageIndex),
             children: displayPageNumber
@@ -1463,7 +1469,7 @@ function Pagination(props) {
       );
     }
     return buttons;
-  }, [displayPage, totalPages, handlePageChange]);
+  }, [displayPage, totalPages, handlePageChange, isEmpty]);
   const isFirstDisabled = displayPage <= 0;
   const isPreviousDisabled = displayPage <= 0;
   const isNextDisabled = displayPage >= totalPages - 1;
@@ -1483,9 +1489,6 @@ function Pagination(props) {
       children
     }
   );
-  if (!totalPages || totalPages === 0) {
-    return null;
-  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-1.5", children: [
     renderNavButton(
       () => handlePageChange(0),
@@ -2825,7 +2828,7 @@ function DatePickerSingle(props) {
         "div",
         {
           role: "button",
-          tabIndex: disabled ? -1 : 0,
+          tabIndex: -1,
           "aria-hidden": disabled,
           onClick: () => {
             if (!disabled) toggleCalendar(inputValue);
@@ -5259,7 +5262,7 @@ function Table(props) {
         ] })
       }
     ),
-    !showEmpty && !showSkeleton && (paginationInfo || renderFooter?.renderLeft || renderFooter?.renderRight) && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: footerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+    !showSkeleton && (paginationInfo || renderFooter?.renderLeft || renderFooter?.renderRight) && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: footerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
       TableFooter,
       {
         paginationInfo,
@@ -9242,6 +9245,9 @@ function Sidebar(props) {
   const [overflowVisible, setOverflowVisible] = React6.useState(true);
   const [expandedItems, setExpandedItems] = React6.useState(/* @__PURE__ */ new Set());
   const [expandedSubItems, setExpandedSubItems] = React6.useState(/* @__PURE__ */ new Set());
+  const toggleCollapse = () => setIsCollapsed((prev) => !prev);
+  const isHeaderRenderProp = typeof header === "function";
+  const headerContent = isHeaderRenderProp ? header({ isCollapsed, toggleCollapse }) : header;
   React6.useEffect(() => {
     if (isCollapsed) {
       setOverflowVisible(false);
@@ -9316,21 +9322,22 @@ function Sidebar(props) {
           ${className ?? ""}
         `,
       children: [
-        showCollapseButton && /* @__PURE__ */ jsxRuntime.jsx(
+        showCollapseButton && !isHeaderRenderProp && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: () => setIsCollapsed((prev) => !prev),
+            onClick: toggleCollapse,
             className: `absolute top-4 z-20 w-6.5 h-6.5 rounded-full flex items-center justify-center transition-colors cursor-pointer ${s.collapseBtn} ${collapseButtonPlacement === "left" ? "left-2" : "right-2"}`,
             children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRightClose, { size: 18, color: primaryColor ?? s.collapseIcon }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 18, color: primaryColor ?? s.collapseIcon })
           }
         ),
+        isHeaderRenderProp && headerContent,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 min-h-0 hide-scrollbar ${overflowVisible ? "overflow-y-auto" : "overflow-hidden"}`, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: `transition-opacity duration-200 ease-in-out ${isCollapsed ? "opacity-0 pointer-events-none select-none" : "opacity-100"} ${variant === "system-dark" || variant === "system-light" ? "pb-6" : "px-4 pb-6"}`,
             style: { transitionDelay: isCollapsed ? "0ms" : "150ms" },
             children: [
-              header && header,
+              !isHeaderRenderProp && headerContent,
               /* @__PURE__ */ jsxRuntime.jsx("nav", { className: `space-y-6 ${variant === "system-dark" || variant === "system-light" ? "px-1" : ""}`, children: menuSections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 section.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.sectionTitle, children: section.title }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-0.5", children: section.items.map((item) => {
@@ -9810,7 +9817,16 @@ function DetailModalFrame(props) {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(ModalFooter, { className: "flex justify-end", children: isEditMode ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: handleCancelEdit, disabled: controller.isSaving, children: "\uCDE8\uC18C" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", form: controller.formId, variant: "save", disabled: controller.isSaving, children: "\uC800\uC7A5" })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          type: "submit",
+          form: controller.formId,
+          variant: "save",
+          disabled: controller.isSaving || !controller.isDirty,
+          children: "\uC800\uC7A5"
+        }
+      )
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       canEdit && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: handleEdit, children: "\uC218\uC815" }),
       renderFooterExtra,