@vuer-ai/vuer-uikit 0.0.75 → 0.0.77

package/dist/chunk-SYXRPCBO.cjs

@@ -0,0 +1,220 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/ui/tree-view/hooks.tsx
+function useTreeSearch({
+  data,
+  searchQuery,
+  isCaseSensitive = false,
+  isRegex = false
+}) {
+  const [isRegexValid, setIsRegexValid] = react.useState(true);
+  const { filteredData, matchingIds, searchResultsCount } = react.useMemo(() => {
+    const dataMap = new Map(data.map((item) => [item.id, item]));
+    if (!searchQuery) {
+      return {
+        filteredData: data,
+        matchingIds: /* @__PURE__ */ new Set(),
+        searchResultsCount: 0
+      };
+    }
+    const matchingAndAncestorIds = /* @__PURE__ */ new Set();
+    const directMatchIds = /* @__PURE__ */ new Set();
+    let regex = null;
+    if (isRegex) {
+      try {
+        regex = new RegExp(searchQuery, isCaseSensitive ? "" : "i");
+        if (!isRegexValid) setIsRegexValid(true);
+      } catch {
+        if (isRegexValid) setIsRegexValid(false);
+        return {
+          filteredData: [],
+          matchingIds: /* @__PURE__ */ new Set(),
+          searchResultsCount: 0
+        };
+      }
+    }
+    data.forEach((item) => {
+      let labelMatches = false;
+      if (regex) {
+        labelMatches = regex.test(item.label);
+      } else {
+        const source = isCaseSensitive ? item.label : item.label.toLowerCase();
+        const query = isCaseSensitive ? searchQuery : searchQuery.toLowerCase();
+        labelMatches = source.includes(query);
+      }
+      if (labelMatches) {
+        directMatchIds.add(item.id);
+        matchingAndAncestorIds.add(item.id);
+        let current = item.parentId;
+        while (current) {
+          const parent = dataMap.get(current);
+          if (parent) {
+            matchingAndAncestorIds.add(parent.id);
+            current = parent.parentId;
+          } else {
+            break;
+          }
+        }
+      }
+    });
+    const filtered = data.filter((item) => matchingAndAncestorIds.has(item.id));
+    return {
+      filteredData: filtered,
+      matchingIds: directMatchIds,
+      searchResultsCount: directMatchIds.size
+    };
+  }, [searchQuery, data, isCaseSensitive, isRegex, isRegexValid]);
+  const renderLabel = react.useCallback((label, itemId) => {
+    if (!searchQuery || !isRegexValid || !matchingIds.has(itemId)) {
+      return label;
+    }
+    let regex;
+    try {
+      regex = new RegExp(`(${searchQuery})`, isCaseSensitive ? "g" : "gi");
+    } catch {
+      return label;
+    }
+    const parts = label.split(regex);
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts.map(
+      (part, i) => i % 2 === 1 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-uk-xs bg-accent-warning", children: part }, i) : part
+    ) });
+  }, [searchQuery, isCaseSensitive, isRegexValid, matchingIds]);
+  return {
+    filteredData,
+    searchResultsCount,
+    isRegexValid,
+    renderLabel,
+    hasActiveSearch: !!searchQuery
+  };
+}
+function useTreeState({
+  data,
+  defaultExpanded = true,
+  expandedItems: externalExpandedItems,
+  onToggleItem: externalOnToggleItem
+}) {
+  const [internalExpandedItems, setInternalExpandedItems] = react.useState(() => {
+    const initial = /* @__PURE__ */ new Set();
+    if (defaultExpanded) {
+      data.forEach((item) => {
+        if (item.isCollapsible) initial.add(item.id);
+      });
+    }
+    return initial;
+  });
+  const expandedItems = externalExpandedItems ?? internalExpandedItems;
+  const toggleItem = react.useCallback((id) => {
+    if (externalOnToggleItem) {
+      externalOnToggleItem(id);
+    } else {
+      setInternalExpandedItems((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(id)) {
+          newSet.delete(id);
+        } else {
+          newSet.add(id);
+        }
+        return newSet;
+      });
+    }
+  }, [externalOnToggleItem]);
+  const expandAll = react.useCallback(() => {
+    const allCollapsible = /* @__PURE__ */ new Set();
+    data.forEach((item) => {
+      if (item.isCollapsible) allCollapsible.add(item.id);
+    });
+    if (externalExpandedItems) {
+      allCollapsible.forEach((id) => {
+        if (!expandedItems.has(id) && externalOnToggleItem) {
+          externalOnToggleItem(id);
+        }
+      });
+    } else {
+      setInternalExpandedItems(allCollapsible);
+    }
+  }, [data, expandedItems, externalExpandedItems, externalOnToggleItem]);
+  const collapseAll = react.useCallback(() => {
+    if (externalExpandedItems) {
+      expandedItems.forEach((id) => {
+        if (externalOnToggleItem) {
+          externalOnToggleItem(id);
+        }
+      });
+    } else {
+      setInternalExpandedItems(/* @__PURE__ */ new Set());
+    }
+  }, [expandedItems, externalExpandedItems, externalOnToggleItem]);
+  const childrenMap = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    data.forEach((item) => {
+      if (!map.has(item.parentId)) {
+        map.set(item.parentId, []);
+      }
+      map.get(item.parentId).push(item);
+    });
+    return map;
+  }, [data]);
+  const hasDescendants = react.useCallback((itemId) => {
+    return (childrenMap.get(itemId) || []).length > 0;
+  }, [childrenMap]);
+  const dataWithMeta = react.useMemo(() => {
+    const dataMap = new Map(data.map((item) => [item.id, item]));
+    const getAncestors = (item) => {
+      const ancestors = [];
+      let current = item.parentId;
+      while (current) {
+        const parent = dataMap.get(current);
+        if (parent) {
+          ancestors.unshift(parent);
+          current = parent.parentId;
+        } else {
+          break;
+        }
+      }
+      return ancestors;
+    };
+    const sortedData = [];
+    const visited = /* @__PURE__ */ new Set();
+    const traverseNode = (nodeId) => {
+      const children = childrenMap.get(nodeId) || [];
+      children.forEach((child) => {
+        if (!visited.has(child.id)) {
+          visited.add(child.id);
+          sortedData.push(child);
+          traverseNode(child.id);
+        }
+      });
+    };
+    traverseNode(null);
+    return sortedData.map((item) => {
+      const siblings = childrenMap.get(item.parentId) || [];
+      const isLast = siblings.length > 0 && siblings[siblings.length - 1].id === item.id;
+      const ancestors = getAncestors(item);
+      const indent = ancestors.length;
+      return { ...item, indent, isLast, ancestors };
+    });
+  }, [data, childrenMap]);
+  const visibleData = react.useMemo(() => {
+    const isVisible = (item) => {
+      return item.ancestors.every(
+        (ancestor) => !ancestor.isCollapsible || expandedItems.has(ancestor.id)
+      );
+    };
+    return dataWithMeta.filter(isVisible);
+  }, [dataWithMeta, expandedItems]);
+  return {
+    visibleData,
+    expandedItems,
+    toggleItem,
+    expandAll,
+    collapseAll,
+    hasDescendants,
+    dataWithMeta
+  };
+}
+
+exports.useTreeSearch = useTreeSearch;
+exports.useTreeState = useTreeState;

package/dist/chunk-TE5JNR5C.mjs

@@ -0,0 +1,117 @@
+import { buttonVariants } from './chunk-INHZ5D7P.mjs';
+import { cn } from './chunk-HMN4IKTG.mjs';
+import { useTabsCursor, TabsCursorProvider } from './chunk-XMG3IVGZ.mjs';
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Pagination({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      className: cn("mx-auto flex w-full justify-center", className),
+      ...props
+    }
+  );
+}
+function PaginationContent({ className, ...props }) {
+  const { setCursorTarget } = useTabsCursor();
+  return /* @__PURE__ */ jsx(TabsCursorProvider, { children: /* @__PURE__ */ jsx(
+    "ul",
+    {
+      onMouseLeave: () => setCursorTarget(null),
+      "data-slot": "pagination-content",
+      className: cn("gap-xs flex flex-row items-center", className),
+      style: {
+        marginBottom: "0px"
+      },
+      ...props
+    }
+  ) });
+}
+function PaginationItem({ ...props }) {
+  const { setCursorTarget } = useTabsCursor();
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      onMouseEnter: (e) => setCursorTarget(e.currentTarget),
+      "data-slot": "pagination-item",
+      className: "rounded-uk-sm",
+      style: {
+        marginBottom: "0px"
+      },
+      ...props
+    }
+  );
+}
+function PaginationLink({ className, isActive, size = "md", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": isActive,
+      className: cn(
+        buttonVariants({
+          variant: isActive ? "secondary" : "ghost",
+          size
+        }),
+        "hover:bg-transparent",
+        "hover:text-text-primary",
+        "min-w-[32px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PaginationPrevious({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "Go to previous page",
+      className: cn("gap-xs px-lg sm:pl-lg", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Previous" })
+      ]
+    }
+  );
+}
+function PaginationNext({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    {
+      "aria-label": "Go to next page",
+      className: cn("gap-xs px-lg sm:pr-lg", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      ]
+    }
+  );
+}
+function PaginationEllipsis({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "pagination-ellipsis",
+      className: cn(
+        "text-text-primary flex size-9 size-[32px] items-center justify-center",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+}
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/chunk-UHDBWDHS.cjs

@@ -0,0 +1,190 @@
+'use strict';
+
+var chunkOHIB3TEN_cjs = require('./chunk-OHIB3TEN.cjs');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function TreeView({
+  data,
+  getIcon,
+  expandedItems,
+  onToggleItem,
+  onItemHover,
+  hoveredId,
+  isSelectable = false,
+  selectedItemId,
+  onSelectChange,
+  alwaysShowExpand = false,
+  hasDescendants = () => false,
+  renderLabel = (label) => label,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkOHIB3TEN_cjs.cn("flex-1 overflow-y-auto", className), children: data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+    TreeEntryItem,
+    {
+      item,
+      hoveredId,
+      onItemHover,
+      isSelectable,
+      selectedItemId,
+      onSelectChange,
+      expandedItems,
+      toggleItem: onToggleItem,
+      alwaysShowExpand,
+      hasDescendants,
+      getIcon,
+      renderLabel,
+      dataWithMeta: data
+    },
+    item.id
+  )) });
+}
+function TreeEntryItem({
+  item,
+  hoveredId,
+  onItemHover,
+  isSelectable,
+  selectedItemId,
+  onSelectChange,
+  expandedItems,
+  toggleItem,
+  alwaysShowExpand,
+  hasDescendants,
+  getIcon,
+  renderLabel,
+  dataWithMeta
+}) {
+  const handleItemSelect = () => {
+    if (!item.disable && isSelectable && onSelectChange) {
+      onSelectChange(selectedItemId === item.id ? null : item.id);
+    }
+  };
+  const ancestors = item.ancestors || [];
+  const indent = item.indent || 0;
+  const isLast = item.isLast !== void 0 ? item.isLast : false;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: chunkOHIB3TEN_cjs.cn(
+        "group relative flex h-[32px] items-center",
+        isSelectable && "rounded-uk-md",
+        !item.disable && "cursor-pointer",
+        hoveredId === item.id && !item.disable && "bg-bg-secondary",
+        isSelectable && selectedItemId === item.id && "bg-brand-primary text-text-withbg"
+      ),
+      onMouseEnter: () => onItemHover?.(item.id),
+      onMouseLeave: () => onItemHover?.(null),
+      onClick: handleItemSelect,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-[-0.28rem] z-0 flex h-full items-center", children: [
+          ancestors.map((ancestor, index) => {
+            const parentIsLast = dataWithMeta.find((d) => d.id === ancestor.id)?.isLast;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: chunkOHIB3TEN_cjs.cn(
+                  "h-full w-[1.25rem]",
+                  parentIsLast ? "" : "border-l",
+                  "border-line-primary"
+                )
+              },
+              index
+            );
+          }),
+          indent > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full w-[1.24rem]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: chunkOHIB3TEN_cjs.cn(
+                  "absolute top-0 left-0 h-1/2 w-1/2 border-b border-l",
+                  isLast ? "rounded-bl-md" : "",
+                  "border-line-primary"
+                )
+              }
+            ),
+            !isLast && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-line-primary absolute top-1/2 left-0 h-1/2 w-1/2 border-l" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "text-uk-md z-10 flex w-full items-center justify-between gap-2 px-2 whitespace-nowrap",
+            style: { paddingLeft: `${indent * 1.25 + 0.5}rem` },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                alwaysShowExpand && hasDescendants(item.id) && !expandedItems.has(item.id) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        toggleItem(item.id);
+                      },
+                      className: "flex size-4 cursor-pointer items-center justify-center",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.ChevronDown,
+                        {
+                          className: chunkOHIB3TEN_cjs.cn(
+                            "size-4 -rotate-90 transition-transform",
+                            item.disable && "text-icon-tertiary"
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: chunkOHIB3TEN_cjs.cn(
+                        "flex size-4 items-center justify-center",
+                        item.disable && "text-icon-tertiary"
+                      ),
+                      children: getIcon(item)
+                    }
+                  )
+                ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex size-4 items-center justify-center", children: [
+                  item.isCollapsible && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        toggleItem(item.id);
+                      },
+                      className: "absolute z-20 flex cursor-pointer items-center justify-center opacity-0 transition-opacity group-hover:opacity-100",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        lucideReact.ChevronDown,
+                        {
+                          className: chunkOHIB3TEN_cjs.cn(
+                            "size-4 transition-transform",
+                            !expandedItems.has(item.id) && "-rotate-90",
+                            item.disable && "text-icon-tertiary"
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      className: chunkOHIB3TEN_cjs.cn(
+                        "cursor-pointer transition-opacity",
+                        item.isCollapsible && "group-hover:opacity-0",
+                        item.disable && "text-icon-tertiary"
+                      ),
+                      children: getIcon(item)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkOHIB3TEN_cjs.cn("truncate", item.disable && "text-text-tertiary"), children: renderLabel(item.label, item.id) })
+              ] }),
+              item.actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", onClick: (e) => e.stopPropagation(), children: item.actions })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.TreeEntryItem = TreeEntryItem;
+exports.TreeView = TreeView;

package/dist/{chunk-Z5P6VCGR.cjs → chunk-V2OROE7H.cjs}

@@ -4,9 +4,9 @@ var chunkOHIB3TEN_cjs = require('./chunk-OHIB3TEN.cjs');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var PACKAGE_VERSION = "0.0.74" ;
+var PACKAGE_VERSION = "0.0.76" ;
 var PACKAGE_NAME = "@vuer-ai/vuer-uikit" ;
-var GIT_HASH = "ff4e4b8" ;
+var GIT_HASH = "d181b80" ;
 function PackageBadge({
   className,
   packageName,

package/dist/chunk-VOTZLQ6J.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/chunk-W4CDQ2RJ.mjs

@@ -0,0 +1,69 @@
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-PCSY5IJ2.mjs';
+import { InputRoot, InputSlot } from './chunk-JXALL32A.mjs';
+import { cn } from './chunk-HMN4IKTG.mjs';
+import { Search, CaseSensitive, Regex } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TreeSearchBar({
+  searchQuery,
+  setSearchQuery,
+  isCaseSensitive,
+  setIsCaseSensitive,
+  isRegex,
+  setIsRegex,
+  isRegexValid,
+  searchResultsCount,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("shrink-0", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 py-1", children: /* @__PURE__ */ jsxs(
+      InputRoot,
+      {
+        type: "text",
+        placeholder: "Search...",
+        size: "md",
+        className: "flex-1",
+        inputClassName: cn(!isRegexValid && "text-red-500"),
+        value: searchQuery,
+        onChange: (e) => setSearchQuery(e.target.value),
+        children: [
+          /* @__PURE__ */ jsx(InputSlot, { side: "left", children: /* @__PURE__ */ jsx(Search, { className: "text-text-secondary size-4 stroke-1" }) }),
+          /* @__PURE__ */ jsx(InputSlot, { side: "right", children: /* @__PURE__ */ jsxs(TooltipProvider, { delayDuration: 200, children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsCaseSensitive((prev) => !prev),
+                  className: cn(
+                    "rounded-uk-sm mr-1 p-1",
+                    isCaseSensitive ? "bg-shadow-secondary" : ""
+                  ),
+                  children: /* @__PURE__ */ jsx(CaseSensitive, { className: "size-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Case Sensitive" }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsRegex((prev) => !prev),
+                  className: cn("rounded-uk-sm p-1", isRegex && "bg-shadow-secondary"),
+                  children: /* @__PURE__ */ jsx(Regex, { className: "size-4" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: "Use Regular Expression" }) })
+            ] })
+          ] }) })
+        ]
+      }
+    ) }),
+    searchQuery && isRegexValid && /* @__PURE__ */ jsx("div", { className: "flex justify-end px-2 pb-1", children: /* @__PURE__ */ jsxs("span", { className: "text-uk-xs text-text-secondary", children: [
+      searchResultsCount,
+      " result",
+      searchResultsCount !== 1 ? "s" : ""
+    ] }) })
+  ] });
+}
+
+export { TreeSearchBar };