@farmzone/fz-react-ui 0.0.1 → 0.0.3

package/dist/index.cjs

@@ -309,6 +309,7 @@ function Button(props) {
           position: tooltipPosition,
           className: tooltipClassName,
           contentClassName: tooltipContentClassName,
+          asChild: true,
           children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block", children: buttonElement })
         }
       );
@@ -3161,7 +3162,6 @@ function Empty(props) {
   const useFullScreen = Boolean(defaultUI && fullScreen);
   const layout = useFullScreen ? "page" : "panel";
   const iconVariant = iconVariantProp ?? (icon ? "boxed" : "plain");
-  console.log("Asdf");
   const content = defaultUI ? /* @__PURE__ */ jsxRuntime.jsx(
     EmptyContent,
     {
@@ -5479,15 +5479,15 @@ function normalizeExtension(ext) {
   const lower = ext.replace(/^\./, "").toLowerCase();
   if (lower === "jpeg") return "jpg";
   if (lower === "svg+xml") return "svg";
-  return lower.split("+")[0];
+  return lower.split("+")[0] || "";
 }
 function getExtensionFromPathname(pathname) {
   const segments = pathname.split("/");
   for (let i = segments.length - 1; i >= 0; i -= 1) {
     const segment = segments[i];
-    const dotIndex = segment.lastIndexOf(".");
+    const dotIndex = segment?.lastIndexOf(".") ?? -1;
     if (dotIndex <= 0) continue;
-    return segment.slice(dotIndex + 1).toLowerCase();
+    return segment?.slice(dotIndex + 1).toLowerCase() ?? "";
   }
   return null;
 }
@@ -5496,7 +5496,7 @@ function getExtensionFromSrc(src) {
     if (!pattern.test(src)) continue;
     if (type === "image") {
       const dataUrlMatch = src.match(/^data:image\/([a-zA-Z0-9+.-]+)/i);
-      return dataUrlMatch ? normalizeExtension(dataUrlMatch[1]) : "jpg";
+      return dataUrlMatch ? normalizeExtension(dataUrlMatch[1] ?? "") : "jpg";
     }
     if (type === "pdf") return "pdf";
   }
@@ -8422,6 +8422,231 @@ function FileUploader(props) {
     /* @__PURE__ */ jsxRuntime.jsx(FilePreviewViewer, { ...viewer.viewerProps, fileTypes, fileNames: files.map((f) => f.name) })
   ] });
 }
+function Sidebar(props) {
+  const navigate = reactRouter.useNavigate();
+  const { isOpen: isOpen2, onClose, menuSections, header, className, showCollapseButton = false } = props;
+  const { pathname } = reactRouter.useLocation();
+  const [isCollapsed, setIsCollapsed] = React6.useState(false);
+  const [isContentVisible, setIsContentVisible] = React6.useState(true);
+  const [expandedItems, setExpandedItems] = React6.useState(/* @__PURE__ */ new Set());
+  const [expandedSubItems, setExpandedSubItems] = React6.useState(/* @__PURE__ */ new Set());
+  React6.useEffect(() => {
+    if (isCollapsed) return;
+    const timer = setTimeout(() => setIsContentVisible(true), 300);
+    return () => clearTimeout(timer);
+  }, [isCollapsed]);
+  React6.useEffect(() => {
+    menuSections.forEach((section) => {
+      section.items.forEach((item) => {
+        if (!item.children) return;
+        const allLeafPaths = item.children.flatMap(
+          (child) => child.children ? child.children.map((gc) => gc.path) : child.path ? [child.path] : []
+        );
+        if (!allLeafPaths.includes(pathname)) return;
+        setExpandedItems((prev) => {
+          if (prev.has(item.label)) return prev;
+          const next = new Set(prev);
+          next.add(item.label);
+          return next;
+        });
+        item.children.forEach((child) => {
+          if (!child.children) return;
+          const gcPaths = child.children.map((gc) => gc.path);
+          if (!gcPaths.includes(pathname)) return;
+          const subKey = `${item.label}::${child.label}`;
+          setExpandedSubItems((prev) => {
+            if (prev.has(subKey)) return prev;
+            const next = new Set(prev);
+            next.add(subKey);
+            return next;
+          });
+        });
+      });
+    });
+  }, [pathname, menuSections]);
+  const toggleExpand = (label) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      return next;
+    });
+  };
+  const toggleSubExpand = (subKey) => {
+    setExpandedSubItems((prev) => {
+      const next = new Set(prev);
+      if (next.has(subKey)) next.delete(subKey);
+      else next.add(subKey);
+      return next;
+    });
+  };
+  const handleItemClick = (path) => {
+    if (path.includes("https")) {
+      window.open(path, "_blank", "noopener,noreferrer");
+    } else if (path !== "") {
+      navigate(path);
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    isOpen2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 bg-black/10 bg-opacity-50 z-40 lg:hidden", onClick: onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        className: `
+            ${isCollapsed ? "w-11 min-w-11" : "min-w-60 w-62"}
+            ${isOpen2 ? "translate-x-0" : "-translate-x-full lg:translate-x-0"}
+            hide-scrollbar fixed lg:relative top-0 left-0 h-screen bg-white border-r border-gray-200 z-50 shrink-0 overflow-y-auto
+            transition-transform duration-300 ease-in-out
+            ${className ?? ""}
+          `,
+        children: [
+          showCollapseButton && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => {
+                if (!isCollapsed) setIsContentVisible(false);
+                setIsCollapsed((prev) => !prev);
+              },
+              className: "absolute top-4 right-2 z-20 w-6.5 h-6.5 bg-gray-50 rounded-full flex items-center justify-center hover:bg-gray-50 transition-colors cursor-pointer hover:bg-gray-100",
+              children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRightClose, { size: 18, color: "var(--color-sub-darkgray)" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftClose, { size: 18, color: "var(--color-sub-darkgray)" })
+            }
+          ),
+          isContentVisible && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-6 pl-6 pr-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: onClose,
+                className: "lg:hidden absolute top-4 right-4 p-2 hover:bg-gray-100 rounded-lg transition-colors text-2xl leading-none",
+                "aria-label": "Close menu",
+                children: "x"
+              }
+            ),
+            header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-10 mt-2", children: header }),
+            /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "space-y-6", children: menuSections.map((section, sectionIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              section.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold text-gray-500 tracking-wider mb-3", children: section.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: section.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => {
+                      if (item.children) {
+                        toggleExpand(item.label);
+                      } else if (item.path) {
+                        handleItemClick(item.path);
+                      }
+                    },
+                    className: `
+                            w-full text-left flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors
+                            ${!item.children && pathname === item.path ? "bg-blue-50 text-blue-600" : "text-gray-700 hover:bg-gray-100"}
+                            cursor-pointer
+                          `,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(item.icon, { className: "w-4 h-4 flex-shrink-0" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: item.label }),
+                      item.children && /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: `w-4 h-4 transition-transform ${expandedItems.has(item.label) ? "rotate-90" : ""}`,
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" })
+                        }
+                      ),
+                      item.path?.includes("https") && /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "w-4 h-4 flex-shrink-0 text-gray-400",
+                          fill: "none",
+                          stroke: "currentColor",
+                          viewBox: "0 0 24 24",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "path",
+                            {
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              strokeWidth: 2,
+                              d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ),
+                item.children && expandedItems.has(item.label) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-[25px] mt-1 space-y-1", children: item.children.map((child, childIndex) => {
+                  if (child.children && child.children.length > 0) {
+                    const subKey = `${item.label}::${child.label}`;
+                    const isSubExpanded = expandedSubItems.has(subKey);
+                    const isSubActive = child.children.some((gc) => gc.path === pathname);
+                    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          onClick: () => toggleSubExpand(subKey),
+                          className: `
+                                      w-full text-left flex items-center justify-between px-3 py-1.5 rounded-lg text-sm transition-colors cursor-pointer
+                                      ${isSubActive ? "text-blue-600 font-medium" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"}
+                                    `,
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: child.label }),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "svg",
+                              {
+                                className: `w-3 h-3 transition-transform ${isSubExpanded ? "rotate-90" : ""}`,
+                                fill: "none",
+                                stroke: "currentColor",
+                                viewBox: "0 0 24 24",
+                                children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  "path",
+                                  {
+                                    strokeLinecap: "round",
+                                    strokeLinejoin: "round",
+                                    strokeWidth: 2,
+                                    d: "M9 5l7 7-7 7"
+                                  }
+                                )
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      isSubExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-3 mt-0.5 space-y-0.5 border-l border-gray-200 pl-2", children: child.children.map((grandchild) => /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          onClick: () => handleItemClick(grandchild.path),
+                          className: `
+                                            w-full text-left px-3 py-1 rounded-lg text-sm transition-colors cursor-pointer
+                                            ${pathname === grandchild.path ? "text-blue-600 font-medium" : "text-gray-500 hover:bg-gray-50 hover:text-gray-900"}
+                                          `,
+                          children: grandchild.label
+                        },
+                        grandchild.path
+                      )) })
+                    ] }, child.label);
+                  }
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: () => handleItemClick(child.path ?? ""),
+                      className: `
+                                  w-full text-left px-3 py-1.5 rounded-lg text-sm transition-colors cursor-pointer
+                                  ${pathname === child.path ? "bg-blue-50 text-blue-600 font-medium" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"}
+                                `,
+                      children: child.label
+                    },
+                    childIndex
+                  );
+                }) })
+              ] }, item.label)) })
+            ] }, section.title ?? sectionIndex)) })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 function useDetailController(params = {}) {
   const { mode: controlledMode, onModeChange } = params;
   const [internalMode, setInternalMode] = React6.useState("read");
@@ -9015,6 +9240,7 @@ function useScrollToTop(containerId) {
 }
 
 exports.Badge = Badge;
+exports.BaseUploader = BaseUploader;
 exports.BreadCrumb = BreadCrumb;
 exports.Button = Button;
 exports.Carousel = Carousel_default;
@@ -9067,6 +9293,7 @@ exports.SelectScrollUpButton = SelectScrollUpButton;
 exports.SelectSeparator = SelectSeparator;
 exports.SelectTrigger = SelectTrigger;
 exports.SelectValue = SelectValue;
+exports.Sidebar = Sidebar;
 exports.SimplePopover = SimplePopover;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
@@ -9086,6 +9313,7 @@ exports.cn = cn;
 exports.confirmModal = confirmModal;
 exports.findParentMenuItem = findParentMenuItem;
 exports.findParentMenuName = findParentMenuName;
+exports.getFileLabel = getFileLabel;
 exports.switchTrackSizes = switchTrackSizes;
 exports.textVariants = textVariants;
 exports.toast = toast;
@@ -9093,6 +9321,7 @@ exports.useBlockModalConfirm = useBlockModalConfirm;
 exports.useBreadCrumbItems = useBreadCrumbItems;
 exports.useCustomBlocker = useCustomBlocker;
 exports.useDetailController = useDetailController;
+exports.useFilePreviewViewer = useFilePreviewViewer;
 exports.useModal = useModal;
 exports.useMultiTabStore = useMultiTabStore;
 exports.useScrollToTop = useScrollToTop;