@vuer-ai/vuer-uikit 0.0.12 → 0.0.13

package/src/ui/toast.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { Toaster as Sonner, ToasterProps, toast } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // Don't render anything during SSR
+  if (!isClient) {
+    return null;
+  }
+
+  return (
+    <Sonner
+      toastOptions={{
+        className: "vk-toast liquid:liquid-bg",
+        descriptionClassName: "vk-toast-description",
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster, toast };

package/src/ui/toggle-group.tsx

@@ -0,0 +1,82 @@
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import { ComponentProps, createContext, useContext } from "react";
+
+import { cn } from "../utils";
+import { toggleVariants } from "./toggle";
+
+const ToggleGroupContext = createContext<VariantProps<typeof toggleVariants>>({
+  size: "base",
+  variant: "primary",
+});
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group",
+        "flex",
+        "w-fit",
+        "items-center",
+        "rounded-uk-md",
+        "data-[variant=outline]:shadow-xs",
+        className,
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
+  const context = useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0",
+        "flex-1",
+        "shrink-0",
+        "rounded-none",
+        "shadow-none",
+        "first:rounded-l-md",
+        "last:rounded-r-md",
+        "focus:z-10",
+        "focus-visible:z-10",
+        "data-[variant=outline]:border-l-0",
+        "data-[variant=outline]:first:border-l",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };

package/src/ui/toggle.tsx

@@ -0,0 +1,88 @@
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ComponentProps } from "react";
+
+import { cn } from "../utils";
+
+const toggleVariants = cva(
+  [
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "shrink-0",
+    "whitespace-nowrap",
+    "font-normal",
+    "transition-all",
+    "[&_svg]:shrink-0 ",
+    "[&_svg]:pointer-events-none",
+    "outline-none",
+    "disabled:bg-transparent",
+    "disabled:text-bg-tertiary",
+    "disabled:cursor-not-allowed",
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "text-text-primary",
+          "data-[state=on]:text-text-highlight",
+          "data-[state=on]:bg-brand-primary",
+          "hover:bg-bg-secondary",
+        ],
+        secondary: [
+          "text-text-secondary",
+          "data-[state=on]:text-text-highlight",
+          "data-[state=on]:bg-bg-secondary",
+          "hover:bg-bg-secondary ",
+        ],
+      },
+      size: {
+        sm: [
+          "text-uk-sm",
+          "leading-uk-sm",
+          "gap-xxs",
+          "p-xs",
+          "[&_svg:not([class*='size-'])]:size-3",
+          "rounded-uk-xs",
+        ],
+        base: [
+          "text-uk-md",
+          "leading-uk-md",
+          "gap-xs",
+          "p-sm",
+          "[&_svg:not([class*='size-'])]:size-3.5",
+          "rounded-uk-sm",
+        ],
+        lg: [
+          "text-uk-lg",
+          "leading-uk-lg",
+          "gap-xs",
+          "p-md",
+          "[&_svg:not([class*='size-'])]:size-4",
+          "rounded-uk-md",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "base",
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/src/ui/tooltip.tsx

@@ -0,0 +1,132 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { ComponentProps, useEffect, useState } from "react";
+
+import { cn } from "../utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  children,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Provider>) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // Don't render anything during SSR
+  if (!isClient) {
+    return <>{children}</>;
+  }
+
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    >
+      {children}
+    </TooltipPrimitive.Provider>
+  );
+}
+
+function Tooltip({ children, ...props }: ComponentProps<typeof TooltipPrimitive.Root>) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // During SSR, just render children without tooltip functionality
+  if (!isClient) {
+    return <>{children}</>;
+  }
+
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props}>
+        {children}
+      </TooltipPrimitive.Root>
+    </TooltipProvider>
+  );
+}
+
+function TooltipTrigger({ ...props }: ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // During SSR, just render children without tooltip functionality
+  if (!isClient) {
+    return <>{props.children}</>;
+  }
+
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: ComponentProps<typeof TooltipPrimitive.Content>) {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  // During SSR, don't render tooltip content
+  if (!isClient) {
+    return null;
+  }
+
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-bg-secondary",
+          "text-text-primary",
+          "animate-in",
+          "text-uk-sm",
+          "leading-uk-sm",
+          "rounded-uk-md",
+          "px-lg",
+          "py-md",
+          "shadow-[0_8px_24px_0_var(--color-shadow-secondary)]",
+          "fade-in-0",
+          "zoom-in-95",
+          "data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0",
+          "data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2",
+          "data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2",
+          "data-[side=top]:slide-in-from-bottom-2",
+          "z-50",
+          "w-fit",
+          "origin-(--radix-tooltip-content-transform-origin)",
+          "text-balance",
+          "liquid:liquid-bg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow
+          className="fill-bg-secondary liquid:liquid-bg z-50 h-[9px] w-[20px] border-none"
+          style={{
+            clipPath: "polygon(50% 100%, 0% 0%, 100% 0%)",
+            borderRadius: "1px 1px 0 0",
+          }}
+        />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/ui/tree-view-v2.tsx

@@ -0,0 +1,300 @@
+import { CaseSensitive, ChevronDown, Regex, Search } from "lucide-react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+import { cn } from "../utils/cn";
+
+type TreeDataItem = {
+  id: string;
+  parentId: string | null;
+  label: string;
+  isCollapsible?: boolean;
+  [key: string]: unknown;
+};
+
+type TreeViewProps<T extends TreeDataItem> = {
+  data: T[];
+  getIcon: (item: T) => ReactNode;
+  onVisibleDataChange?: (data: (T & { indent: number; isLast: boolean; ancestors: T[] })[]) => void;
+  onItemHover?: (id: string | null) => void;
+  className?: string;
+  hoveredId?: string | null;
+};
+
+function TreeView<T extends TreeDataItem>({
+  data,
+  getIcon,
+  onVisibleDataChange,
+  onItemHover,
+  className,
+  hoveredId,
+}: TreeViewProps<T>) {
+  const [expandedItems, setExpandedItems] = useState(() => {
+    const initial = new Set<string>();
+    data.forEach((item) => {
+      if (item.isCollapsible) initial.add(item.id);
+    });
+    return initial;
+  });
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isCaseSensitive, setIsCaseSensitive] = useState(false);
+  const [isRegex, setIsRegex] = useState(false);
+  const [isRegexValid, setIsRegexValid] = useState(true);
+
+  const toggleItem = (id: string) => {
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(id)) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
+  };
+
+  const childrenMap = useMemo(() => {
+    const map = new Map<string | null, T[]>();
+    data.forEach((item) => {
+      if (!map.has(item.parentId)) {
+        map.set(item.parentId, []);
+      }
+      map.get(item.parentId)!.push(item);
+    });
+    return map;
+  }, [data]);
+
+  const dataWithMeta = useMemo(() => {
+    const dataMap = new Map(data.map((item) => [item.id, item]));
+
+    const getAncestors = (item: T) => {
+      const ancestors: T[] = [];
+      let current = item.parentId;
+      while (current) {
+        const parent = dataMap.get(current);
+        if (parent) {
+          ancestors.unshift(parent);
+          current = parent.parentId;
+        } else {
+          break;
+        }
+      }
+      return ancestors;
+    };
+
+    return data.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 = useMemo(() => {
+    const dataMap = new Map(data.map((item) => [item.id, item]));
+
+    if (!searchQuery) {
+      const isVisible = (item: { ancestors: T[] }) => {
+        return item.ancestors.every((ancestor) => expandedItems.has(ancestor.id));
+      };
+      return dataWithMeta.filter(isVisible);
+    }
+
+    const matchingAndAncestorIds = new Set<string>();
+    let regex: RegExp | null = null;
+
+    if (isRegex) {
+      try {
+        regex = new RegExp(searchQuery, isCaseSensitive ? "" : "i");
+        if (!isRegexValid) setIsRegexValid(true);
+      } catch {
+        if (isRegexValid) setIsRegexValid(false);
+        return [];
+      }
+    }
+
+    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) {
+        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;
+          }
+        }
+      }
+    });
+
+    return dataWithMeta.filter((item) => matchingAndAncestorIds.has(item.id));
+  }, [searchQuery, dataWithMeta, expandedItems, isCaseSensitive, isRegex, isRegexValid, data]);
+
+  useEffect(() => {
+    onVisibleDataChange?.(visibleData);
+  }, [visibleData, onVisibleDataChange]);
+
+  const renderLabel = (label: string) => {
+    if (!searchQuery || !isRegexValid) {
+      return label;
+    }
+
+    let regex;
+    try {
+      regex = new RegExp(`(${searchQuery})`, isCaseSensitive ? "g" : "gi");
+    } catch {
+      return label;
+    }
+
+    const parts = label.split(regex);
+
+    return (
+      <>
+        {parts.map((part, i) =>
+          i % 2 === 1 ? (
+            <span key={i} className="rounded-uk-xs bg-yellow-300 dark:bg-yellow-700">
+              {part}
+            </span>
+          ) : (
+            part
+          ),
+        )}
+      </>
+    );
+  };
+
+  return (
+    <div className={cn("border-line-secondary/20 flex flex-col", className)}>
+      <div className="border-line-secondary/20 flex h-[32px] shrink-0 items-center gap-1 border-b px-2">
+        <Search className="text-text-secondary size-4" />
+        <input
+          type="text"
+          placeholder="Search..."
+          className={cn(
+            "text-uk-md w-full bg-transparent focus:outline-none",
+            !isRegexValid && "text-red-500",
+          )}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+        />
+        <TooltipProvider delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => setIsCaseSensitive((prev) => !prev)}
+                className={cn("rounded-uk-sm p-1", isCaseSensitive && "bg-bg-tertiary")}
+              >
+                <CaseSensitive className="size-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Case Sensitive</p>
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={() => setIsRegex((prev) => !prev)}
+                className={cn("rounded-uk-sm p-1", isRegex && "bg-bg-tertiary")}
+              >
+                <Regex className="size-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Use Regular Expression</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <div className="overflow-y-auto">
+        {visibleData.map((item) => (
+          <div
+            key={item.id}
+            className={cn(
+              "group relative flex h-[32px] cursor-pointer items-center",
+              hoveredId === item.id && "bg-bg-secondary/80",
+            )}
+            onMouseEnter={() => onItemHover?.(item.id)}
+            onMouseLeave={() => onItemHover?.(null)}
+          >
+            {/* Guide Lines */}
+            <div className="absolute top-0 left-[-0.28rem] z-0 flex h-full items-center">
+              {item.ancestors.map((ancestor, index) => {
+                const parentIsLast = dataWithMeta.find((d) => d.id === ancestor.id)?.isLast;
+                return (
+                  <div
+                    key={index}
+                    className={cn(
+                      "h-full w-[1.25rem]",
+                      parentIsLast ? "" : "border-l",
+                      "border-line-secondary/20",
+                    )}
+                  />
+                );
+              })}
+              {item.indent > 0 && (
+                <div className="relative h-full w-[1.24rem]">
+                  <div
+                    className={cn(
+                      "absolute top-0 left-0 h-1/2 w-1/2 border-b border-l",
+                      item.isLast ? "rounded-bl-md" : "",
+                      "border-line-secondary/20",
+                    )}
+                  />
+                  {!item.isLast && (
+                    <div className="border-line-secondary/20 absolute top-1/2 left-0 h-1/2 w-1/2 border-l" />
+                  )}
+                </div>
+              )}
+            </div>
+
+            <div
+              className="text-uk-md z-10 flex w-full items-center gap-2 px-2 whitespace-nowrap"
+              style={{ paddingLeft: `${item.indent * 1.25 + 0.5}rem` }}
+            >
+              <div className="relative flex size-4 items-center justify-center">
+                {item.isCollapsible && (
+                  <button
+                    onClick={() => toggleItem(item.id)}
+                    className="absolute z-20 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100"
+                  >
+                    <ChevronDown
+                      className={cn(
+                        "size-4 transition-transform",
+                        !expandedItems.has(item.id) && "-rotate-90",
+                      )}
+                    />
+                  </button>
+                )}
+                <div
+                  className={cn(
+                    "transition-opacity",
+                    item.isCollapsible && "group-hover:opacity-0",
+                  )}
+                >
+                  {getIcon(item)}
+                </div>
+              </div>
+              <span className="truncate">{renderLabel(item.label)}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export { TreeView as TreeViewV2, type TreeDataItem as TreeDataItemV2 };