@vertesia/ui 0.79.0 → 0.80.0-dev-20251118

package/src/core/components/TagsInput.tsx

@@ -0,0 +1,388 @@
+import clsx from 'clsx';
+import { X } from 'lucide-react';
+import { useContext, useEffect, useRef, useState } from 'react';
+import { Popover, PopoverContent, PopoverContext, PopoverTrigger } from './shadcn/popover';
+
+interface TagsInputProps {
+    options: string[];
+    value: string[];
+    onChange: (selected: string[]) => void;
+    onOptionsChange?: (options: string[]) => void;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    layout?: 'horizontal' | 'vertical';
+    creatable?: boolean;
+    createText?: string;
+    maxDropdownHeight?: number;
+}
+
+function TagsInputContent({
+    options,
+    value,
+    onChange,
+    onOptionsChange,
+    placeholder,
+    className,
+    disabled,
+    layout = 'horizontal',
+    creatable = false,
+    createText = 'Create "%value%"',
+    maxDropdownHeight = 200
+}: TagsInputProps) {
+    const popoverContext = useContext(PopoverContext);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const [width, setWidth] = useState<number>(0);
+    const [pendingDeleteIndex, setPendingDeleteIndex] = useState<number | null>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const dropdownRef = useRef<HTMLDivElement>(null);
+    const highlightedItemRef = useRef<HTMLElement | null>(null);
+
+    const isOpen = popoverContext?.open ?? false;
+    const setIsOpen = popoverContext?.setOpen ?? (() => { });
+
+    // Measure trigger width for popover
+    useEffect(() => {
+        const element = triggerRef.current;
+        if (!element) return;
+
+        const updateWidth = () => {
+            const contentWidth = element.getBoundingClientRect().width;
+            setWidth(contentWidth);
+        };
+
+        const resizeObserver = new ResizeObserver(() => {
+            updateWidth();
+        });
+
+        updateWidth();
+        resizeObserver.observe(element);
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+
+    // Filter options based on search term and exclude already selected
+    const filteredOptions = options.filter(
+        option =>
+            !value.includes(option) &&
+            option.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    // Check if create option should be shown
+    const showCreateOption = creatable && searchTerm && !value.includes(searchTerm) && !options.includes(searchTerm);
+
+    // Total number of items (filtered options + create option if shown)
+    const totalItems = filteredOptions.length + (showCreateOption ? 1 : 0);
+
+    // Reset highlighted index when filtered options change
+    useEffect(() => {
+        setHighlightedIndex(0);
+    }, [searchTerm, showCreateOption]);
+
+    // Clear pending delete when user starts typing
+    useEffect(() => {
+        if (searchTerm !== '') {
+            setPendingDeleteIndex(null);
+        }
+    }, [searchTerm]);
+
+    // Scroll highlighted item into view
+    useEffect(() => {
+        if (isOpen && highlightedItemRef.current && dropdownRef.current) {
+            highlightedItemRef.current.scrollIntoView({
+                block: 'nearest',
+                behavior: 'smooth'
+            });
+        }
+    }, [highlightedIndex, isOpen]);
+
+    // Clear search term when popover closes and refocus input when it opens
+    useEffect(() => {
+        if (!isOpen) {
+            setSearchTerm('');
+        } else {
+            // Ensure input stays focused when popover opens
+            inputRef.current?.focus();
+        }
+    }, [isOpen]);
+
+    const handleSelect = (option: string) => {
+        onChange([...value, option]);
+        setSearchTerm('');
+        setIsOpen(false);
+        setHighlightedIndex(0);
+        setPendingDeleteIndex(null);
+    };
+
+    const handleCreate = (newTag: string) => {
+        // Add to value
+        onChange([...value, newTag]);
+        // Add to options if callback provided
+        if (onOptionsChange && !options.includes(newTag)) {
+            onOptionsChange([...options, newTag]);
+        }
+        setSearchTerm('');
+        setIsOpen(false);
+        setHighlightedIndex(0);
+        setPendingDeleteIndex(null);
+    };
+
+    const handleRemove = (option: string, e: React.MouseEvent) => {
+        e.stopPropagation();
+        onChange(value.filter(v => v !== option));
+        setPendingDeleteIndex(null);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        // Handle special keys
+        if (e.key === 'Enter' && isOpen && totalItems > 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            // Check if we're selecting the create option
+            if (highlightedIndex === filteredOptions.length && showCreateOption) {
+                handleCreate(searchTerm);
+            } else if (highlightedIndex < filteredOptions.length) {
+                handleSelect(filteredOptions[highlightedIndex]);
+            }
+            return;
+        }
+
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!isOpen) {
+                setIsOpen(true);
+            } else {
+                setHighlightedIndex(prev =>
+                    prev < totalItems - 1 ? prev + 1 : prev
+                );
+            }
+            return;
+        }
+
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (!isOpen) {
+                setIsOpen(true);
+            } else {
+                setHighlightedIndex(prev => (prev > 0 ? prev - 1 : 0));
+            }
+            return;
+        }
+
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsOpen(false);
+            return;
+        }
+
+        if (e.key === 'Backspace' && searchTerm === '' && value.length > 0) {
+            // Two-step deletion: first backspace marks for deletion, second backspace deletes
+            e.stopPropagation();
+            const lastIndex = value.length - 1;
+
+            if (pendingDeleteIndex === lastIndex) {
+                // Second backspace: actually delete the item
+                onChange(value.slice(0, -1));
+                setPendingDeleteIndex(null);
+            } else {
+                // First backspace: mark for deletion
+                setPendingDeleteIndex(lastIndex);
+            }
+            return;
+        }
+
+        // For any other key (typing characters), open dropdown
+        if (!isOpen && e.key.length === 1) {
+            setIsOpen(true);
+        }
+    };
+
+    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {
+        e.stopPropagation();
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    };
+
+    const handleInputFocus = () => {
+        if (!disabled) {
+            setIsOpen(true);
+        }
+    };
+
+    const handleContainerClick = () => {
+        if (!disabled) {
+            inputRef.current?.focus();
+        }
+    };
+
+    return (
+        <div className={clsx('relative', className)}>
+            <PopoverTrigger asChild>
+                <div
+                    ref={triggerRef}
+                    className={clsx(
+                        'min-h-[40px] w-full rounded-md border border-input bg-background px-3 py-2',
+                        'flex items-center gap-1',
+                        layout === 'horizontal' ? 'flex-wrap' : 'flex-col items-stretch',
+                        'cursor-text',
+                        'ring-offset-background',
+                        disabled && 'opacity-50 cursor-not-allowed',
+                        isOpen ? 'ring-1 ring-inset ring-ring' : ''
+                    )}
+                    onClick={handleContainerClick}
+                >
+                    {/* Selected Items Badges - Vertical Layout */}
+                    {layout === 'vertical' && value.length > 0 && (
+                        <div className="flex flex-col gap-1 w-full">
+                            {value.map((item, index) => (
+                                <span
+                                    key={item}
+                                    className={clsx(
+                                        "inline-flex items-center justify-between gap-2 px-2 py-1 text-sm bg-primary/10 text-primary rounded-md w-full transition-all",
+                                        pendingDeleteIndex === index && "ring-2 ring-red-300 shadow-[0_0_8px_rgba(252,165,165,0.5)]"
+                                    )}
+                                >
+                                    <span className="truncate">{item}</span>
+                                    <button
+                                        type="button"
+                                        onClick={(e) => handleRemove(item, e)}
+                                        disabled={disabled}
+                                        className="hover:bg-primary/20 rounded-sm transition-colors flex-shrink-0"
+                                    >
+                                        <X className="h-3 w-3" />
+                                    </button>
+                                </span>
+                            ))}
+                        </div>
+                    )}
+
+                    {/* Selected Items Badges - Horizontal Layout */}
+                    {layout === 'horizontal' && value.map((item, index) => (
+                        <span
+                            key={item}
+                            className={clsx(
+                                "inline-flex items-center gap-1 px-2 py-1 text-sm bg-primary/10 text-primary rounded-md transition-all",
+                                pendingDeleteIndex === index && "ring-2 ring-red-300 shadow-[0_0_8px_rgba(252,165,165,0.5)]"
+                            )}
+                        >
+                            {item}
+                            <button
+                                type="button"
+                                onClick={(e) => handleRemove(item, e)}
+                                disabled={disabled}
+                                className="hover:bg-primary/20 rounded-sm transition-colors"
+                            >
+                                <X className="h-3 w-3" />
+                            </button>
+                        </span>
+                    ))}
+
+                    {/* Search Input */}
+                    <input
+                        ref={inputRef}
+                        type="text"
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        onClick={handleInputClick}
+                        onFocus={handleInputFocus}
+                        disabled={disabled}
+                        placeholder={value.length === 0 ? placeholder : ''}
+                        className={clsx(
+                            'flex-1 min-w-[120px] bg-transparent text-sm',
+                            'placeholder:text-muted-foreground',
+                            'border-none outline-none focus:outline-none focus:ring-0 p-0 m-0',
+                            layout === 'vertical' && 'w-full'
+                        )}
+                    />
+                </div>
+            </PopoverTrigger>
+
+            <PopoverContent
+                style={{ width: `${width}px` }}
+                className="p-0 bg-popover border border-border shadow-lg"
+                align="start"
+                side="bottom"
+                onOpenAutoFocus={(e) => {
+                    // Prevent the popover from stealing focus from the input
+                    e.preventDefault();
+                }}
+            >
+                <div ref={dropdownRef} className="overflow-y-auto" style={{ maxHeight: `${maxDropdownHeight}px` }}>
+                    {filteredOptions.length === 0 && !showCreateOption ? (
+                        <div className="px-3 py-2 text-sm text-muted-foreground">
+                            {searchTerm ? 'No options found' : 'No more options available'}
+                        </div>
+                    ) : (
+                        <>
+                            {filteredOptions.length > 0 && (
+                                <ul className="py-1">
+                                    {filteredOptions.map((option, index) => (
+                                        <li
+                                            key={option}
+                                            ref={(el) => {
+                                                if (index === highlightedIndex) {
+                                                    highlightedItemRef.current = el;
+                                                }
+                                            }}
+                                            onClick={() => handleSelect(option)}
+                                            onMouseEnter={() => setHighlightedIndex(index)}
+                                            className={clsx(
+                                                'px-3 py-2 text-sm cursor-pointer transition-colors',
+                                                index === highlightedIndex
+                                                    ? 'bg-blue-500/20 text-foreground'
+                                                    : 'hover:bg-accent/50'
+                                            )}
+                                        >
+                                            {option}
+                                        </li>
+                                    ))}
+                                </ul>
+                            )}
+                            {showCreateOption && (
+                                <>
+                                    {filteredOptions.length > 0 && (
+                                        <div className="border-t border-border" />
+                                    )}
+                                    <div
+                                        ref={(el) => {
+                                            if (highlightedIndex === filteredOptions.length) {
+                                                highlightedItemRef.current = el;
+                                            }
+                                        }}
+                                        onClick={() => handleCreate(searchTerm)}
+                                        onMouseEnter={() => setHighlightedIndex(filteredOptions.length)}
+                                        className={clsx(
+                                            'px-3 py-2 text-sm cursor-pointer transition-colors text-primary',
+                                            highlightedIndex === filteredOptions.length
+                                                ? 'bg-blue-500/20'
+                                                : 'hover:bg-accent/50'
+                                        )}
+                                    >
+                                        {createText.replace('%value%', searchTerm)}
+                                    </div>
+                                </>
+                            )}
+                        </>
+                    )}
+                </div>
+            </PopoverContent>
+        </div>
+    );
+}
+
+export function TagsInput(props: TagsInputProps) {
+    return (
+        <Popover click>
+            <TagsInputContent {...props} />
+        </Popover>
+    );
+}

package/src/core/components/index.ts

@@ -18,6 +18,7 @@ export * from "./MessageBox.js";
 export * from "./Modal.js";
 export * from "./NumberInput.js";
 export * from "./Overlay.js";
+export * from "./Panel.js";
 export * from "./popup/index.js";
 export * from "./Portal.js";
 export * from "./RadioGroup.js";
@@ -31,7 +32,7 @@ export * from "./styles.js";
 export * from "./Switch.js";
 export * from "./table/index.js";
 export * from "./tabs/index.js";
-export * from "./Textarea.js";
+export * from "./TagsInput.js";
 export * from "./toast/index.js";
 
 export type HeroIcon = React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & {

package/src/core/components/shadcn/breadcrumb.tsx

@@ -6,28 +6,37 @@ import { cn } from "../libs/utils"
 interface BreadcrumbProps {
   label: string
   href?: string
+  onClick?: () => void
 }
 interface BreadcrumbItemProps {
-  children: BreadcrumbProps[]
+  path: BreadcrumbProps[]
   className?: string
   maxItems?: number
   separator?: React.ReactNode
 }
-export function Breadcrumbs({ children, maxItems = 3, className, separator }: BreadcrumbItemProps) {
-  if (children.length <= maxItems) {
+export function Breadcrumbs({ path, maxItems = 3, className, separator }: BreadcrumbItemProps) {
+  const items = path || [];
+
+  const renderBreadcrumbItem = (item: BreadcrumbProps) => {
+    if (item.onClick) {
+      return <BreadcrumbButton onClick={item.onClick} href={item.href}>{item.label}</BreadcrumbButton>;
+    } else if (item.href) {
+      return <BreadcrumbButton href={item.href}>{item.label}</BreadcrumbButton>;
+    } else {
+      return <BreadcrumbPage>{item.label}</BreadcrumbPage>;
+    }
+  };
+
+  if (items.length <= maxItems) {
     return (
       <Breadcrumb className={cn("w-full", className)}>
         <BreadcrumbList>
-          {children.map((item, index) => (
+          {items.map((item, index) => (
             <React.Fragment key={index}>
               <BreadcrumbItem>
-                {item.href ? (
-                  <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
-                ) : (
-                  <BreadcrumbPage>{item.label}</BreadcrumbPage>
-                )}
+                {renderBreadcrumbItem(item)}
               </BreadcrumbItem>
-              {index < children.length - 1 &&
+              {index < items.length - 1 &&
                 <BreadcrumbSeparator>{separator ?? <ChevronRight />}</BreadcrumbSeparator>
               }
             </React.Fragment>
@@ -37,36 +46,22 @@ export function Breadcrumbs({ children, maxItems = 3, className, separator }: Br
     );
   }
 
-  const firstItem = children[0];
-  const lastItems = children.slice(-(maxItems - 2));
+  const lastThreeItems = items.slice(-(maxItems - 1));
 
   return (
     <Breadcrumb className={cn("w-full", className)}>
       <BreadcrumbList>
-        <BreadcrumbItem>
-          {firstItem.href ? (
-            <BreadcrumbLink href={firstItem.href}>{firstItem.label}</BreadcrumbLink>
-          ) : (
-            <BreadcrumbPage>{firstItem.label}</BreadcrumbPage>
-          )}
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>{separator ?? <ChevronRight />}</BreadcrumbSeparator>
-
         <BreadcrumbItem>
           <BreadcrumbEllipsis />
         </BreadcrumbItem>
         <BreadcrumbSeparator>{separator ?? <ChevronRight />}</BreadcrumbSeparator>
 
-        {lastItems.map((item, index) => (
+        {lastThreeItems.map((item, index) => (
           <React.Fragment key={index}>
             <BreadcrumbItem>
-              {item.href ? (
-                <BreadcrumbLink href={item.href}>{item.label}</BreadcrumbLink>
-              ) : (
-                <BreadcrumbPage>{item.label}</BreadcrumbPage>
-              )}
+              {renderBreadcrumbItem(item)}
             </BreadcrumbItem>
-            {index < lastItems.length - 1 && <BreadcrumbSeparator>{separator ?? <ChevronRight />}</BreadcrumbSeparator>
+            {index < lastThreeItems.length - 1 && <BreadcrumbSeparator>{separator ?? <ChevronRight />}</BreadcrumbSeparator>
             }
           </React.Fragment>
         ))}
@@ -104,7 +99,7 @@ const BreadcrumbItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <li
     ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
+    className={cn("inline-flex items-center gap-1.5 text-muted", className)}
     {...props}
   />
 ))
@@ -119,13 +114,37 @@ const BreadcrumbLink = React.forwardRef<
   return (
     <a
       ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
+      className={cn("transition-colors hover:text-muted", className)}
       {...props}
     />
   )
 })
 BreadcrumbLink.displayName = "BreadcrumbLink"
 
+const BreadcrumbButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button"> & {
+    href?: string
+  }
+>(({ className, href, onClick, ...props }, ref) => {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  return (
+    <button
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground cursor-pointer", className)}
+      onClick={handleClick}
+      {...props}
+    />
+  );
+})
+BreadcrumbButton.displayName = "BreadcrumbButton"
+
 const BreadcrumbPage = React.forwardRef<
   HTMLSpanElement,
   React.ComponentPropsWithoutRef<"span">

package/src/core/components/shadcn/button.tsx

@@ -20,7 +20,7 @@ const buttonVariants = cva(
         secondary:
           "bg-primary/5 dark:bg-primary/10 text-primary shadow-xs hover:bg-primary/10 dark:hover:bg-primary/20 ring-inset",
         ghost: "hover:bg-muted/50 dark:hover:bg-muted/20 ring-inset",
-        link: "text-white underline-offset-4 hover:underline ring-inset",
+        link: "text-foreground underline-offset-4 hover:underline ring-inset",
         primary:
           "bg-primary text-white shadow-xs hover:bg-primary/90 ring-inset",
         unstyled:
@@ -108,7 +108,8 @@ const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
 
     const [isCopied, setIsCopied] = useState(false);
 
-    const handleCopy = () => {
+    const handleCopy = (e: React.MouseEvent) => {
+      e.stopPropagation();
       navigator.clipboard.writeText(content).then(() => {
         setIsCopied(true)
         setTimeout(() => setIsCopied(false), 2000)

package/src/core/components/shadcn/filters/filterBar.tsx

@@ -71,8 +71,8 @@ const FilterProvider = ({ filters, setFilters, filterGroups, children }: FilterP
         params.delete('filters');
       }
 
-      const newUrl = `${window.location.pathname}?${params.toString()}`;
-      window.history.replaceState({}, '', newUrl);
+      const newUrl = `${window.location.pathname}?${params.toString()}${window.location.hash}`;
+      window.history.replaceState(window.history.state || {}, '', newUrl);
     } catch (error) {
       console.error("Failed to update URL with filters:", error);
     }
@@ -350,7 +350,7 @@ const FilterBar = ({ className }: { className?: string }) => {
   );
 };
 
-const FilterClear = ({ className }: { className?: string }) => {
+const FilterClear = ({ className }: { className?: string}) => {
   const { filters, setFilters } = React.useContext(FilterContext);
 
   const hasActiveFilters = filters.filter((filter) => filter.value?.length > 0).length > 0;

package/src/core/components/shadcn/index.ts

@@ -20,4 +20,5 @@ export * from './command';
 export * from './checkbox';
 export * from './heading';
 export * from './text';
-export * from './resizeable';
+export * from './resizeable';
+export * from './textarea';

package/src/core/components/shadcn/input.tsx

@@ -4,6 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "../libs/utils"
 import { X } from "lucide-react";
 import { ChangeEvent } from "react";
+import { Button } from "@vertesia/ui/core";
 
 const variants = cva(
   "",
@@ -53,14 +54,14 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     };
 
     return (
-      <div className="w-full" style={{ position: 'relative', display: 'inline-block' }}>
+      <div className="w-full relative inline-block [&:hover_.clear-button]:opacity-100">
         <input
           type={type}
           className={
             cn(
               variants({ size, variant }),
               className,
-              clearable && value ? "pr-6" : "",
+              clearable && value ? "pr-8" : "",
             )}
           ref={ref}
           value={value == null ? '' : value}
@@ -68,14 +69,16 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           {...props}
         />
         {clearable && value && !props.readOnly && !props.disabled && (
-          <button
-            onClick={_onClear}
-            className={`absolute ${type !== 'number' ? 'right-0' : 'right-7'} top-1/2 -translate-y-1/2 size-7 text-muted-foreground hover:text-destructive cursor-pointer flex items-center justify-center`}
+          <Button variant={"link"} size={"icon"}
             type="button"
-            aria-label="Clear input"
+            onClick={_onClear}
+            className={`clear-button opacity-0 transition-opacity duration-200
+              absolute top-1/2 -translate-y-1/2 text-muted !hover:text-destructive cursor-pointer
+              flex items-center justify-center size-6 rounded right-2`}
+            alt="Clear input"
           >
             <X size={16} />
-          </button>
+          </Button>
         )}
       </div>
     )

package/src/core/components/shadcn/popover.tsx

@@ -5,13 +5,13 @@ import { cn } from "../libs/utils"
 import { JSX } from "react";
 import { useIsInModal } from "./dialog";
 
-interface PopoverContextValue {
+export interface PopoverContextValue {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   hover: boolean;
   click: boolean;
 }
-const PopoverContext = React.createContext<PopoverContextValue | null>(null);
+export const PopoverContext = React.createContext<PopoverContextValue | null>(null);
 
 interface PopoverProps {
   _open?: boolean;

package/src/core/components/shadcn/resizeable.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
+import { Minus } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from "../libs/utils"
@@ -37,14 +37,14 @@ function ResizableHandle({
     <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",
+        "bg-muted 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}
     >
       {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 className="z-10 flex size-4 items-center justify-center rounded-xs font-semibold">
+          <Minus className="size-4 rotate-90" />
         </div>
       )}
     </ResizablePrimitive.PanelResizeHandle>