@vuer-ai/vuer-uikit 0.0.47 → 0.0.49

package/src/ui/index.ts

@@ -31,6 +31,7 @@ export * from "./slider";
 export * from "./layout";
 export * from "./version-badge";
 export * from "./form";
+export * from "./resizable";
 
 export * from "./theme";
 export * from "./drag-selectable";

package/src/ui/resizable.tsx

@@ -0,0 +1,50 @@
+import { GripVerticalIcon } from "lucide-react";
+import * as React from "react";
+import { ComponentProps } from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "../hooks";
+
+type ResizablePanelGroupProps = ComponentProps<typeof ResizablePrimitive.PanelGroup>;
+
+function ResizablePanelGroup({ className, ...props }: Readonly<ResizablePanelGroupProps>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+type ComponentPropsProps = ComponentProps<typeof ResizablePrimitive.Panel>;
+
+function ResizablePanel(props: Readonly<ComponentPropsProps>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+
+interface ResizableHandleProps extends ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
+  withHandle?: boolean;
+}
+
+function ResizableHandle({ withHandle, className, children, ...props }: ResizableHandleProps) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {!children && withHandle && (
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+          <GripVerticalIcon className="size-2.5" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  );
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/src/ui/sidebar.tsx

@@ -221,7 +221,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-bg-primary liquid:liquid-bg group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-uk-lg flex h-full w-full flex-col group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          className="font-normal bg-bg-primary liquid:liquid-bg group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-uk-lg flex h-full w-full flex-col group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
         >
           {children}
         </div>
@@ -315,7 +315,7 @@ function SidebarHeader({ className, ...props }: ComponentProps<"div">) {
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn("px-lg flex flex-col", className)}
+      className={cn("text-uk-lg leading-uk-lg px-md flex flex-col", className)}
       {...props}
     />
   );
@@ -352,7 +352,7 @@ function SidebarContent({ className, ...props }: ComponentProps<"div">) {
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        "px-lg lgflex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        "px-md lgflex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
         className,
       )}
       {...props}
@@ -383,7 +383,7 @@ function SidebarGroupLabel({
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        "text-text-primary ring-sidebar-ring rounded-uk-md text-uk-md leading-uk-md flex h-[36px] shrink-0 items-center font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "text-text-primary ring-sidebar-ring rounded-uk-md text-uk-md leading-uk-md flex h-[32px] shrink-0 items-center font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className,
       )}
@@ -404,7 +404,7 @@ function SidebarGroupAction({
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        "hover:bg-bg-secondary rounded-uk-md absolute top-[10px] right-0 flex aspect-square w-5 items-center justify-center p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "hover:bg-bg-secondary rounded-uk-md absolute top-[6px] right-0 flex aspect-square w-5 items-center justify-center p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "after:absolute after:-inset-2 md:after:hidden",
         "group-data-[collapsible=icon]:hidden",
         className,
@@ -430,7 +430,7 @@ function SidebarMenu({ className, ...props }: ComponentProps<"ul">) {
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn("gap-sm flex w-full min-w-0 flex-col", className)}
+      className={cn("gap-lg flex w-full min-w-0 flex-col", className)}
       style={{
         paddingLeft: "0px",
         marginBottom: "0px",
@@ -456,7 +456,7 @@ function SidebarMenuItem({ className, ...props }: ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-md overflow-hidden rounde-uk-md text-left text-uk-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] text-text-primary focus-visible:ring-2 active:text-text-highlight disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 font-medium group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-md overflow-hidden rounde-uk-md text-left text-uk-lg leading-uk-lg outline-hidden ring-sidebar-ring transition-[width,height,padding] text-text-primary focus-visible:ring-2 active:text-text-highlight disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 font-medium group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -464,9 +464,9 @@ const sidebarMenuButtonVariants = cva(
         outline: "",
       },
       size: {
-        default: "h-[44px] text-uk-md",
-        sm: "h-[40px] text-uk-sm",
-        lg: "h-[48px] text-uk-lg group-data-[collapsible=icon]:p-0!",
+        default: "h-[32px] text-uk-lg leading-uk-lg",
+        sm: "h-[30px] text-uk-sm leading-uk-sm",
+        lg: "h-[36px] text-uk-lg leading-uk-lg group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {
@@ -542,7 +542,7 @@ function SidebarMenuAction({
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        "hover:bg-bg-secondary rounded-uk-md absolute top-[14px] right-0 flex aspect-square w-5 items-center justify-center p-0 outline-hidden transition-transform [&>svg]:size-4 [&>svg]:shrink-0",
+        "hover:bg-bg-secondary rounded-uk-md absolute top-[6px] right-0 flex aspect-square w-5 items-center justify-center p-0 outline-hidden transition-transform [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:hidden",
         showOnHover &&
           "peer-data-[active=true]/menu-button:text-text-highlight group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
@@ -559,7 +559,7 @@ function SidebarMenuBadge({ className, ...props }: ComponentProps<"div">) {
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "text-text-primary rounded-uk-md text-uk-sm pointer-events-none absolute top-[12px] right-0 flex min-w-5 items-center justify-center font-medium tabular-nums select-none",
+        "text-text-primary rounded-uk-md text-uk-sm pointer-events-none absolute top-[6px] right-0 flex min-w-5 items-center justify-center font-medium tabular-nums select-none",
         "group-data-[collapsible=icon]:hidden",
         className,
       )}
@@ -655,7 +655,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "text-text-primary ring-sidebar-ring hover:bg-bg-secondary hover:text-text-primary active:bg-bg-tertiary active:text-text-highlight [&>svg]:text-icon-primary gap-md rounded-uk-md px-lg flex h-[36px] min-w-0 -translate-x-px items-center overflow-hidden outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-[14px] [&>svg]:shrink-0",
+        "text-text-primary ring-sidebar-ring hover:bg-bg-secondary hover:text-text-primary active:bg-bg-tertiary active:text-text-highlight [&>svg]:text-icon-primary gap-md rounded-uk-md px-lg flex h-[36px] min-w-0 -translate-x-px items-center overflow-hidden outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0",
         size === "sm" && "text-uk-sm leading-uk-sm",
         size === "md" && "text-uk-md leading-uk-md",
         "group-data-[collapsible=icon]:hidden",

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

@@ -12,6 +12,7 @@ type TreeDataItem = {
   parentId: string | null;
   label: string;
   isCollapsible?: boolean;
+  actions?: ReactNode;
   [key: string]: unknown;
 };
 
@@ -25,6 +26,9 @@ type TreeViewProps<T extends TreeDataItem> = {
   onItemHover?: (id: string | null) => void;
   className?: string;
   hoveredId?: string | null;
+  isSelectable?: boolean;
+  selectedItemId?: string | null;
+  onSelectChange?: (id: string | null) => void;
 };
 
 /**
@@ -38,6 +42,9 @@ function TreeView<T extends TreeDataItem>({
   onItemHover,
   className,
   hoveredId,
+  isSelectable = false,
+  selectedItemId,
+  onSelectChange,
 }: TreeViewProps<T>) {
   const [expandedItems, setExpandedItems] = useState(() => {
     const initial = new Set<string>();
@@ -64,6 +71,12 @@ function TreeView<T extends TreeDataItem>({
     });
   };
 
+  const handleItemSelect = (id: string) => {
+    if (isSelectable && onSelectChange) {
+      onSelectChange(selectedItemId === id ? null : id);
+    }
+  };
+
   const childrenMap = useMemo(() => {
     const map = new Map<string | null, T[]>();
     data.forEach((item) => {
@@ -236,9 +249,11 @@ function TreeView<T extends TreeDataItem>({
             className={cn(
               "group relative flex h-[32px] cursor-pointer items-center",
               hoveredId === item.id && "bg-bg-secondary/80",
+              isSelectable && selectedItemId === item.id && "bg-brand-primary",
             )}
             onMouseEnter={() => onItemHover?.(item.id)}
             onMouseLeave={() => onItemHover?.(null)}
+            onClick={() => handleItemSelect(item.id)}
           >
             {/* Guide Lines */}
             <div className="absolute top-0 left-[-0.28rem] z-0 flex h-full items-center">
@@ -272,33 +287,43 @@ function TreeView<T extends TreeDataItem>({
             </div>
 
             <div
-              className="text-uk-md z-10 flex w-full items-center gap-2 px-2 whitespace-nowrap"
+              className="text-uk-md z-10 flex w-full items-center justify-between 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 cursor-pointer 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(
-                    "cursor-pointer transition-opacity",
-                    item.isCollapsible && "group-hover:opacity-0",
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <div className="relative flex size-4 items-center justify-center">
+                  {item.isCollapsible && (
+                    <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"
+                    >
+                      <ChevronDown
+                        className={cn(
+                          "size-4 transition-transform",
+                          !expandedItems.has(item.id) && "-rotate-90",
+                        )}
+                      />
+                    </button>
                   )}
-                >
-                  {getIcon(item)}
+                  <div
+                    className={cn(
+                      "cursor-pointer transition-opacity",
+                      item.isCollapsible && "group-hover:opacity-0",
+                    )}
+                  >
+                    {getIcon(item)}
+                  </div>
                 </div>
+                <span className="truncate">{renderLabel(item.label)}</span>
               </div>
-              <span className="truncate">{renderLabel(item.label)}</span>
+              {item.actions && (
+                <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+                  {item.actions}
+                </div>
+              )}
             </div>
           </div>
         ))}