@vuer-ai/vuer-uikit 0.0.121 → 0.1.0

package/src/ui/inputs/number-inputs/VectorInput.tsx

@@ -8,6 +8,8 @@ interface VectorInputProps
   onValuesChange?: (value: number[]) => void;
   labels?: ReactNode[];
   step?: number | number[];
+  disabledItems?: boolean[];
+  onSuffixBatchAction?: (indices: number[]) => void;
   gridAutoFlow?: "column" | "row";
   columns?: number;
   rows?: number;

package/src/ui/popover.tsx

@@ -1,49 +1,33 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { ComponentProps } from "react";
 
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
 /**
  * Popover root based on Radix primitives.
  */
-function PopoverRoot({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>) {
+function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>) {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverFallback({ ...props }: ComponentProps<"div">) {
-  return <div data-slot="popover" {...props} />;
-}
-
-const Popover = createClientOnlyComponent(PopoverRoot, PopoverFallback);
-
 /**
  * Element that opens the popover.
  */
-function PopoverTriggerRoot({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>) {
+function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>) {
   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
-function PopoverTriggerFallback({
-  asChild,
-  children,
-  ...props
-}: ComponentProps<"button"> & { asChild?: boolean }) {
-  if (asChild) {
-    return <>{children}</>;
-  }
-  return (
-    <button data-slot="popover-trigger" {...props}>
-      {children}
-    </button>
-  );
+/**
+ * Element that opens the popover.
+ */
+function PopoverClose({ ...props }: ComponentProps<typeof PopoverPrimitive.Close>) {
+  return <PopoverPrimitive.Close data-slot="popover-close" {...props} />;
 }
 
-const PopoverTrigger = createClientOnlyComponent(PopoverTriggerRoot, PopoverTriggerFallback);
-
 /**
  * Floating content panel for the popover.
  */
-function PopoverContentRoot({
+function PopoverContent({
   className,
   align = "center",
   sideOffset = 4,
@@ -84,31 +68,8 @@ function PopoverContentRoot({
   );
 }
 
-function PopoverContentFallback({ className, ...props }: ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="popover-content"
-      className={cn(
-        "bg-bg-primary",
-        "rounded-uk-lg",
-        "p-xl",
-        "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-        "z-20",
-        "border-none",
-        "outline-hidden",
-        "liquid-dark:liquid-dark-bg",
-        "liquid-light:liquid-light-bg",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-const PopoverContent = createClientOnlyComponent(PopoverContentRoot, PopoverContentFallback);
-
 function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>) {
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverClose, PopoverContent, PopoverAnchor };

package/src/ui/select.tsx

@@ -100,7 +100,9 @@ export const selectTriggerVariants = cva(
 
 interface SelectTriggerProps
   extends Omit<ComponentProps<typeof SelectPrimitive.Trigger>, "ref">,
-    VariantProps<typeof selectTriggerVariants> {}
+    VariantProps<typeof selectTriggerVariants> {
+  icon?: ReactNode;
+}
 
 /**
  * Trigger button for the select.
@@ -113,6 +115,7 @@ export function SelectTrigger({
   state,
   font,
   align,
+  icon,
   ...props
 }: SelectTriggerProps) {
   return (
@@ -133,7 +136,7 @@ export function SelectTrigger({
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="opacity-50" />
+        {icon || <ChevronDownIcon className="opacity-50" />}
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   );

package/src/ui/switch.tsx

@@ -3,16 +3,19 @@ import { type ComponentProps } from "react";
 
 import { cn } from "../hooks";
 
+interface Props extends ComponentProps<typeof SwitchPrimitive.Root> {
+  thumbClassName?: string;
+}
+
 /**
  * Toggle switch control.
  * todo: need to add sizing - Ge
  */
-function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.Root>) {
+function Switch({ className, thumbClassName, ...props }: Props) {
   return (
     <SwitchPrimitive.Root
       data-slot="switch"
       className={cn(
-        className,
         "group",
         "w-[32px]",
         "h-[16px]",
@@ -21,6 +24,7 @@ function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.R
         "aria-checked:bg-brand-primary",
         "disabled:bg-bg-secondary",
         "disabled:cursor-not-allowed",
+        className,
       )}
       {...props}
     >
@@ -36,6 +40,7 @@ function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.R
           "duration-200",
           "translate-x-[2px]",
           "data-[state=checked]:translate-x-[18px]",
+          thumbClassName,
         )}
       />
     </SwitchPrimitive.Root>

package/src/ui/tabs.tsx

@@ -93,6 +93,7 @@ function TabsListInner({
 
 const tabsTriggerVariants = cva(
   [
+    "cursor-pointer",
     "inline-flex",
     "items-center",
     "justify-center",
@@ -158,5 +159,5 @@ function TabsContent({ className, ...props }: TabsContentProps) {
   );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsListInner };
 export type { TabsProps, TabsListProps, TabsTriggerProps, TabsContentProps };

package/src/ui/theme/ThemeProvider.tsx

@@ -26,6 +26,7 @@ export const saveToLS = (key: string, value: string) => {
   // Save to storage
   try {
     localStorage.setItem(key, value);
+    document.cookie = `vuer:theme=${value}; path=/; max-age=3153600000;`;
   } catch {
     // Unsupported
   }
@@ -73,11 +74,11 @@ export function useTheme<T = UseThemeProps>(
   return useMemo(
     () => {
       if (!selector) {
-        return context as any;
+        return context;
       } else if (typeof selector === "function") {
         return selector(context);
       } else {
-        return context[selector] as any;
+        return context[selector];
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -160,7 +161,7 @@ export const Theme = ({
       return forcedTheme as ComputedTheme;
     }
     return computedTheme;
-  }, [forcedTheme, computedTheme, systemIsDark]);
+  }, [forcedTheme, computedTheme]);
 
   const applyTheme = useCallback(
     (theme: string) => {

package/src/ui/theme/ThemeToggles.tsx

@@ -1,6 +1,6 @@
 // Liquid toggle component
 import { LayoutTemplate, Moon, PanelsTopLeft, Sun, SunMoon } from "lucide-react";
-import React, { type ComponentProps } from "react";
+import React, { type ComponentProps, useRef } from "react";
 
 import { Button } from "../button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
@@ -31,25 +31,61 @@ export const LiquidToggle: React.FC<LiquidToggleProps> = ({ className, ...props
   );
 };
 
-// Theme color toggle component for light/dark/system
+/**
+ * Theme color toggle component for light/dark/system.
+ *
+ * Toggle behavior:
+ * - After a timeout (1.5s): prioritizes light ↔ dark toggle
+ *   - system (resolves dark) → light → dark → light ...
+ *   - system (resolves light) → dark → light → dark ...
+ *   - light → dark → light ...
+ *   - dark → light → dark ...
+ * - Quick clicks (within 1.5s): cycles through all three options
+ *   - light → dark → system → light ...
+ *
+ * This gives casual users a simple light/dark toggle, while quick
+ * clicks still allow access to the system option.
+ */
 type ThemeColorToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
 
+const QUICK_TOGGLE_TIMEOUT = 1500; // ms
+
 export const ThemeColorToggle: React.FC<ThemeColorToggleProps> = (props) => {
   const { baseTheme, setBaseTheme, resolvedTheme } = useTheme();
+  const lastClickRef = useRef<number>(0);
+
+  const isDark = resolvedTheme?.includes("dark");
+  const isSystem = baseTheme === "system";
 
   const handleThemeChange = () => {
-    if (baseTheme === "light") {
-      setBaseTheme("dark");
-    } else if (baseTheme === "dark") {
-      setBaseTheme("system");
-    } else if (baseTheme === "system") {
-      setBaseTheme("light");
+    const now = Date.now();
+    const timeSinceLastClick = now - lastClickRef.current;
+    lastClickRef.current = now;
+
+    const isQuickToggle = timeSinceLastClick < QUICK_TOGGLE_TIMEOUT;
+
+    if (isQuickToggle) {
+      // Quick toggle: cycle through all options, system always last
+      if (baseTheme === "light") {
+        setBaseTheme("dark");
+      } else if (baseTheme === "dark") {
+        setBaseTheme("system");
+      } else {
+        setBaseTheme("light");
+      }
+    } else {
+      // After timeout: prioritize light ↔ dark toggle, system goes to opposite
+      if (baseTheme === "system") {
+        // If system resolves to dark, go to light; if light, go to dark
+        setBaseTheme(isDark ? "light" : "dark");
+      } else if (baseTheme === "light") {
+        setBaseTheme("dark");
+      } else {
+        setBaseTheme("light");
+      }
     }
   };
 
-  const isDark = resolvedTheme?.includes("dark");
-  const isSystem = baseTheme === "system";
-
   return (
     <Button
       icon
@@ -58,7 +94,7 @@ export const ThemeColorToggle: React.FC<ThemeColorToggleProps> = (props) => {
       {...props}
       onClick={handleThemeChange}
     >
-      {isSystem ? <SunMoon size={20} /> : isDark ? <Moon size={20} /> : <Sun size={20} />}
+      {isSystem ? <SunMoon size={24} /> : isDark ? <Moon size={24} /> : <Sun size={24} />}
     </Button>
   );
 };

package/src/ui/toast.tsx

@@ -1,4 +1,3 @@
-import { CSSProperties } from "react";
 import { toast, Toaster as Sonner, type ToasterProps } from "sonner";
 
 import { useTheme } from "./theme";
@@ -6,7 +5,6 @@ import { useTheme } from "./theme";
 /**
  * Client-only Toaster wrapper applying default classes.
  */
-
 const Toaster = ({ ...props }: ToasterProps) => {
   const { baseTheme = "system" } = useTheme();
 
@@ -19,7 +17,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
           "--normal-bg": "var(--bg-primary)",
           "--normal-text": "var(--text-primary)",
           "--normal-border": "var(--bg-secondary)",
-        } as CSSProperties
+        } as Record<string, string>
       }
       {...props}
     />

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

@@ -125,7 +125,7 @@ export function TreeEntryItem<T extends TreeDataItem>({
   selectionMode?: "single" | "multi";
 }) {
   const handleItemSelect = (event: React.MouseEvent) => {
-    if (!item.disable && isSelectable) {
+    if (!item.disable && isSelectable && item.selectable !== false) {
       const isMultiSelectMode = selectionMode === "multi" && (event.ctrlKey || event.metaKey);
       const isRangeSelectMode = selectionMode === "multi" && event.shiftKey;
 
@@ -201,7 +201,7 @@ export function TreeEntryItem<T extends TreeDataItem>({
   // Calculate border radius classes based on adjacent selection
   const getBorderRadiusClass = () => {
     if (!isSelectable || (!isSelected && !isIndirectlySelected)) {
-      return "rounded-uk-md";
+      return "";
     }
 
     // Remove top radius if previous item is selected, remove bottom radius if next item is selected
@@ -218,7 +218,14 @@ export function TreeEntryItem<T extends TreeDataItem>({
 
   const handleContextMenuOpenChange = (open: boolean) => {
     // If item is not selected when opening context menu, select it first
-    if (open && isSelectable && !isSelected && !isIndirectlySelected && onSelectionChange) {
+    if (
+      open &&
+      isSelectable &&
+      item.selectable !== false &&
+      !isSelected &&
+      !isIndirectlySelected &&
+      onSelectionChange
+    ) {
       onSelectionChange(new Set([item.id]));
     }
   };
@@ -229,7 +236,7 @@ export function TreeEntryItem<T extends TreeDataItem>({
         "group relative flex h-[32px] items-center",
         getBorderRadiusClass(),
         hoveredId === item.id && !item.disable && "bg-bg-secondary",
-        isSelectable && isSelected && "bg-brand-primary text-text-withbg",
+        isSelectable && isSelected && "bg-bg-tertiary",
         isSelectable && isIndirectlySelected && "bg-shadow-secondary text-text-primary",
       )}
       onMouseEnter={() => onItemHover?.(item.id)}
@@ -335,9 +342,31 @@ export function TreeEntryItem<T extends TreeDataItem>({
               </div>
             </div>
           )}
-          <span className={cn("truncate", item.disable && "text-text-tertiary")}>
-            {renderLabel(item.label, item.id)}
-          </span>
+          {(() => {
+            const label = item.label;
+            const keepEnd = 9;
+
+            if (label.length <= keepEnd) {
+              return (
+                <span className={cn("truncate", item.disable && "text-text-tertiary")}>
+                  {renderLabel(label, item.id)}
+                </span>
+              );
+            }
+
+            const firstPart = label.substring(0, label.length - keepEnd);
+            const lastPart = label.substring(label.length - keepEnd);
+
+            return (
+              <span
+                className={cn("flex min-w-0 flex-1", item.disable && "text-text-tertiary")}
+                style={{ maxWidth: "100%" }}
+              >
+                <span className="min-w-0 truncate">{firstPart}</span>
+                <span className="shrink-0">{lastPart}</span>
+              </span>
+            );
+          })()}
         </div>
         {item.actions && (
           <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
@@ -348,7 +377,7 @@ export function TreeEntryItem<T extends TreeDataItem>({
     </div>
   );
 
-  if (renderContextMenu) {
+  if (renderContextMenu && item.selectable !== false) {
     return (
       <ContextMenu onOpenChange={handleContextMenuOpenChange}>
         <ContextMenuTrigger asChild>{treeItemContent}</ContextMenuTrigger>

package/src/ui/tree-view/types.ts

@@ -10,6 +10,7 @@ export type TreeDataItem = {
   isCollapsible?: boolean;
   actions?: ReactNode;
   disable?: boolean;
+  selectable?: boolean;
   [key: string]: unknown;
 };