@rebasepro/ui 0.17.3 → 0.18.1

package/src/components/ResizablePanels.tsx

@@ -1,189 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { cls } from "../util";
-import { defaultBorderMixin } from "../styles";
-
-export type ResizablePanelsProps = {
-    firstPanel: React.ReactNode;
-    secondPanel: React.ReactNode;
-    /** Whether the first panel is visible (e.g. Sidebar) */
-    showFirstPanel?: boolean;
-    /** Whether the second panel is visible (e.g. Results) */
-    showSecondPanel?: boolean;
-    /** 0-100 representing the width/height of the first panel */
-    panelSizePercent: number;
-    onPanelSizeChange: (sizePercent: number) => void;
-    minPanelSizePx?: number;
-    orientation?: "horizontal" | "vertical";
-    animateLayout?: boolean;
-    className?: string;
-    stacked?: boolean;
-};
-
-export function ResizablePanels({
-    firstPanel,
-    secondPanel,
-    showFirstPanel = true,
-    showSecondPanel = true,
-    panelSizePercent,
-    onPanelSizeChange,
-    minPanelSizePx = 200,
-    orientation = "horizontal",
-    animateLayout = true,
-    className,
-    stacked = false
-}: ResizablePanelsProps) {
-
-    const containerRef = useRef<HTMLDivElement>(null);
-    const isResizingRef = useRef(false);
-
-    // For local layout tracking without triggering React rerenders during drag
-    const firstPanelRef = useRef<HTMLDivElement>(null);
-    const startPosRef = useRef(0);
-    const startSizeRef = useRef(0);
-
-    const [isResizing, setIsResizing] = useState(false);
-    const isHorizontal = orientation === "horizontal";
-
-    const handleResizeStart = useCallback((e: React.MouseEvent) => {
-        if (!showFirstPanel || !showSecondPanel) return;
-
-        e.preventDefault();
-        isResizingRef.current = true;
-        setIsResizing(true);
-
-        startPosRef.current = isHorizontal ? e.clientX : e.clientY;
-
-        if (firstPanelRef.current) {
-            const rect = firstPanelRef.current.getBoundingClientRect();
-            startSizeRef.current = isHorizontal ? rect.width : rect.height;
-        }
-
-        document.body.style.cursor = isHorizontal ? "col-resize" : "row-resize";
-        document.body.style.userSelect = "none";
-    }, [isHorizontal, showFirstPanel, showSecondPanel]);
-
-    useEffect(() => {
-        const handleMouseMove = (e: MouseEvent) => {
-            if (!isResizingRef.current || !containerRef.current) return;
-
-            const currentPos = isHorizontal ? e.clientX : e.clientY;
-            const delta = currentPos - startPosRef.current; // Dragging right/down increases first panel size
-
-            let newSize = startSizeRef.current + delta;
-
-            const containerRect = containerRef.current.getBoundingClientRect();
-            const containerTotal = isHorizontal ? containerRect.width : containerRect.height;
-
-            // Limit the maximum size to prevent pushing the second panel offscreen
-            const maxSize = containerTotal - minPanelSizePx;
-
-            newSize = Math.max(minPanelSizePx, Math.min(newSize, maxSize));
-
-            // Directly update the DOM for performance while dragging
-            if (firstPanelRef.current) {
-                firstPanelRef.current.style.flexBasis = `${newSize}px`;
-            }
-        };
-
-        const handleMouseUp = () => {
-            if (isResizingRef.current && containerRef.current && firstPanelRef.current) {
-                // Calculate the final percentage
-                const containerRect = containerRef.current.getBoundingClientRect();
-                const firstPanelRect = firstPanelRef.current.getBoundingClientRect();
-
-                const containerSize = isHorizontal ? containerRect.width : containerRect.height;
-                const finalSize = isHorizontal ? firstPanelRect.width : firstPanelRect.height;
-
-                // Pre-set the DOM to the exact % value BEFORE re-enabling transitions.
-                // This prevents the visual "snap" that occurs when switching from px → %
-                // with the CSS transition active.
-                if (containerSize > 0) {
-                    const newPercent = (finalSize / containerSize) * 100;
-                    firstPanelRef.current.style.flexBasis = `${newPercent}%`;
-                    onPanelSizeChange(Math.max(0, Math.min(100, newPercent)));
-                }
-
-                isResizingRef.current = false;
-                setIsResizing(false);
-                document.body.style.cursor = "";
-                document.body.style.userSelect = "";
-            }
-        };
-
-        window.addEventListener("mousemove", handleMouseMove);
-        window.addEventListener("mouseup", handleMouseUp);
-
-        return () => {
-            window.removeEventListener("mousemove", handleMouseMove);
-            window.removeEventListener("mouseup", handleMouseUp);
-        };
-    }, [onPanelSizeChange, isHorizontal, minPanelSizePx]);
-
-    // Calculate applied size
-    const appliedBasis = !showFirstPanel ? "0%" : (showSecondPanel ? `${panelSizePercent}%` : "100%");
-
-    return (
-        <div
-            ref={containerRef}
-            className={cls(
-                "relative w-full h-full flex overflow-hidden",
-                !stacked && (isHorizontal ? "flex-row" : "flex-col"),
-                className
-            )}
-        >
-            {/* First Panel */}
-            <div
-                ref={firstPanelRef}
-                className={cls(
-                    stacked ? "absolute inset-0" : "relative flex-shrink-0",
-                    "flex flex-col overflow-hidden",
-                    !stacked && !isResizing && animateLayout && "transition-[flex-basis] duration-150 ease-out",
-                    !showFirstPanel && "hidden"
-                )}
-                style={stacked ? undefined : {
-                    flexBasis: appliedBasis,
-                    minWidth: isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : undefined,
-                    minHeight: !isHorizontal && showFirstPanel && showSecondPanel ? `${minPanelSizePx}px` : undefined,
-                    maxWidth: showSecondPanel ? undefined : "100%",
-                    maxHeight: showSecondPanel ? undefined : "100%"
-                }}
-            >
-                {firstPanel}
-            </div>
-
-            {/* Divider */}
-            {!stacked && showFirstPanel && showSecondPanel && (
-                <div
-                    className={cls(
-                        "relative z-10 flex flex-shrink-0 items-center justify-center",
-                        defaultBorderMixin,
-                        isHorizontal ? "border-l w-px h-full cursor-col-resize" : "border-t h-px w-full cursor-row-resize"
-                    )}
-                    onMouseDown={handleResizeStart}
-                >
-                    {/* Transparent Hit Area with Pill inside */}
-                    <div className={cls(
-                        "absolute flex items-center justify-center group",
-                        isHorizontal ? "w-4 h-full cursor-col-resize top-0" : "h-4 w-full cursor-row-resize left-0"
-                    )}>
-                        <div className={cls(
-                            "bg-primary/60 dark:bg-primary rounded-full opacity-0 group-hover:opacity-100 transition-all duration-200",
-                            isHorizontal ? "w-1 h-8" : "h-1 w-8"
-                        )}/>
-                    </div>
-                </div>
-            )}
-
-            {/* Second Panel */}
-            <div
-                className={cls(
-                    stacked ? "absolute inset-0" : "flex-grow relative min-w-0 min-h-0",
-                    "flex flex-col overflow-hidden",
-                    !showSecondPanel && "hidden"
-                )}
-            >
-                {secondPanel}
-            </div>
-        </div>
-    );
-}

package/src/components/SearchBar.tsx

@@ -1,136 +0,0 @@
-
-"use client";
-import { SearchIcon, XIcon } from "lucide-react";
-import { iconSize } from "../icons/Icon";
-import React, { useCallback, useState } from "react";
-
-import { defaultBorderMixin } from "../styles";
-import { CircularProgress } from "./CircularProgress";
-import { IconButton } from "./IconButton";
-
-import { cls } from "../util";
-import { useDebounceValue } from "../hooks";
-
-interface SearchBarProps {
-    onClick?: () => void;
-    onTextSearch?: (searchString?: string) => void;
-    placeholder?: string;
-    expandable?: boolean;
-    /**
-     * Size of the search bar.
-     * - "small": 32px height (matches TextField small)
-     * - "medium": 44px height (matches TextField medium)
-     * @default "medium"
-     */
-    size?: "smallest" | "small" | "medium" | "large";
-    innerClassName?: string;
-    className?: string;
-    autoFocus?: boolean;
-    disabled?: boolean;
-    loading?: boolean;
-    inputRef?: React.Ref<HTMLInputElement>;
-    /**
-     * Optional initial value for the search input, e.g. from URL params.
-     */
-    initialValue?: string;
-}
-
-export function SearchBar({
-    onClick,
-    onTextSearch,
-    placeholder = "Search",
-    expandable = false,
-    size = "medium",
-    innerClassName,
-    className,
-    autoFocus,
-    disabled,
-    loading,
-    inputRef,
-    initialValue
-}: SearchBarProps) {
-
-    const [searchText, setSearchText] = useState<string>(initialValue ?? "");
-    const [active, setActive] = useState<boolean>(false);
-
-    const deferredValues = useDebounceValue(searchText, 200);
-
-    /**
-     * Debounce on SearchIcon text update
-     */
-    React.useEffect(() => {
-        if (!onTextSearch) return;
-        if (deferredValues) {
-            onTextSearch(deferredValues);
-        } else {
-            onTextSearch(undefined);
-        }
-    }, [deferredValues]);
-
-    const clearText = useCallback(() => {
-        if (!onTextSearch) return;
-        setSearchText("");
-        onTextSearch(undefined);
-    }, [onTextSearch]);
-
-    // Height classes matching TextField sizes
-    // Heights come from the shared control scale (styles.ts) so a SearchBar
-    // lines up with the Button and Select beside it in a toolbar.
-    const heightClass = { smallest: "h-[28px]", small: "h-[32px]", medium: "h-[40px]", large: "h-[48px]" }[size];
-    const iconPaddingClass = size === "smallest" || size === "small" ? "px-2" : size === "medium" ? "px-3" : "px-4";
-    const inputPaddingClass = size === "smallest" || size === "small" ? "pl-8" : size === "medium" ? "pl-10" : "pl-12";
-
-    return (
-        <div
-            role="search"
-            aria-label="Search"
-            onClick={onClick}
-            className={cls("relative transition-all",
-                heightClass,
-                "bg-surface-accent-50 dark:bg-surface-900 border",
-                defaultBorderMixin,
-                "focus-within:ring-1 focus-within:ring-primary/60 focus-within:border-primary focus-within:shadow-[0_0_0_3px_rgba(0,112,244,0.1)]",
-                "rounded-lg overflow-hidden",
-                className)}>
-            <div
-                className={cls("absolute p-0 h-full pointer-events-none flex items-center justify-center top-0", iconPaddingClass)}>
-                {loading ? <CircularProgress size={"smallest"}/> : <SearchIcon className={"text-text-disabled dark:text-text-disabled-dark"} size={size === "smallest" ? 14 : size === "small" ? 18 : 20}/>}
-            </div>
-            <input
-                value={searchText ?? ""}
-                ref={inputRef}
-                onClick={onClick}
-                placeholder={placeholder}
-                aria-label={placeholder}
-                readOnly={!onTextSearch}
-                onChange={onTextSearch
-                    ? (event) => {
-                        setSearchText(event.target.value);
-                    }
-                    : undefined}
-                autoFocus={autoFocus}
-                onFocus={() => setActive(true)}
-                onBlur={() => setActive(false)}
-                className={cls(
-                    (disabled || loading) && "pointer-events-none",
-                    "placeholder-text-disabled dark:placeholder-text-disabled-dark",
-                    "relative flex items-center transition-all bg-transparent outline-none focus:outline-none focus:ring-0 appearance-none border-none focus:border-transparent",
-                    inputPaddingClass, "h-full w-full text-current",
-                    size === "small" ? "text-sm" : "",
-                    expandable ? (active ? "w-[220px]" : "w-[180px]") : "",
-                    innerClassName
-                )}
-            />
-            {searchText
-                ? <IconButton
-                    className={`${size === "small" ? "mr-0 top-0" : "mr-1 top-0"} absolute right-0 z-10`}
-                    size={"small"}
-                    aria-label="Clear search"
-                    onClick={clearText}>
-                    <XIcon size={iconSize.smallest}/>
-                </IconButton>
-                : <div style={{ width: 26 }}/>
-            }
-        </div>
-    );
-}

package/src/components/Select.tsx

@@ -1,326 +0,0 @@
-
-"use client";
-import { CheckIcon, ChevronDownIcon } from "lucide-react";
-import { iconSize } from "../icons/Icon";
-import React, { ChangeEvent, Children, forwardRef, useCallback, useEffect, useMemo, useState } from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import {
-    defaultBorderMixin,
-    fieldBackgroundDisabledMixin,
-    fieldBackgroundHoverMixin,
-    fieldBackgroundInvisibleMixin,
-    fieldBackgroundMixin,
-    focusedDisabled
-} from "../styles";
-
-import { cls } from "../util";
-import { SelectInputLabel } from "./common/SelectInputLabel";
-import { usePortalContainer } from "../hooks/PortalContainerContext";
-
-export type SelectValue = string | number | boolean;
-
-export type SelectProps<T extends SelectValue = string> = {
-    open?: boolean,
-    name?: string,
-    fullWidth?: boolean,
-    id?: string,
-    onOpenChange?: (open: boolean) => void,
-    value?: T,
-    className?: string,
-    inputClassName?: string,
-    viewportClassName?: string,
-    onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>,
-    onValueChange?: (updatedValue: T) => void,
-    placeholder?: React.ReactNode,
-    renderValue?: (value: T) => React.ReactNode,
-    size?: "smallest" | "small" | "medium" | "large",
-    label?: React.ReactNode | string,
-    disabled?: boolean,
-    error?: boolean,
-    position?: "item-aligned" | "popper",
-    endAdornment?: React.ReactNode,
-    inputRef?: React.Ref<HTMLButtonElement>,
-    padding?: boolean,
-    invisible?: boolean,
-    children?: React.ReactNode;
-    dataType?: "string" | "number" | "boolean";
-    portalContainer?: HTMLElement | null; // Explicitly added to props type if missing
-    /**
-     * Accessible name for the trigger, for a select whose `label` is a node
-     * rather than a string — or which shows no label at all.
-     *
-     * Without it such a select announces the literal fallback "Select an
-     * option", which is indistinguishable from every other unlabelled select
-     * on the screen.
-     */
-    "aria-label"?: string;
-};
-
-export const Select = forwardRef<HTMLDivElement, SelectProps>(({
-    inputRef,
-    open,
-    name,
-    fullWidth = false,
-    id,
-    onOpenChange,
-    value,
-    onChange,
-    onValueChange,
-    className,
-    inputClassName,
-    viewportClassName,
-    placeholder,
-    renderValue,
-    label,
-    size = "large",
-    error,
-    disabled,
-    padding = true,
-    position = "item-aligned",
-    endAdornment,
-    invisible,
-    children,
-    dataType = "string",
-    portalContainer: manualContainer, // Rename to avoid confusion
-    "aria-label": ariaLabel,
-    ...props
-}, ref) => {
-
-    const [openInternal, setOpenInternal] = useState(open ?? false);
-
-    useEffect(() => {
-        setOpenInternal(open ?? false);
-    }, [open]);
-
-    // Get the portal container from context
-    const contextContainer = usePortalContainer();
-
-    // Resolve final container (Manual Prop > Context Container > Undefined/Body)
-    const finalContainer = (manualContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;
-
-    const onValueChangeInternal = useCallback((newValue: string) => {
-        let typedValue: SelectValue = newValue;
-        if (dataType === "boolean") {
-            if (newValue === "true") typedValue = true;
-            else if (newValue === "false") typedValue = false;
-        } else if (dataType === "number") {
-            if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
-        }
-
-        onValueChange?.(typedValue as SelectValue & typeof value);
-        if (onChange) {
-            const event = {
-                target: {
-                    name,
-                    value: typedValue
-                }
-            } as ChangeEvent<HTMLSelectElement>;
-            onChange(event);
-        }
-    }, [onChange, onValueChange, name, dataType]);
-
-    const hasValue = Array.isArray(value) ? value.length > 0 : (value != null && value !== "" && value !== undefined);
-    const stringValue = value !== undefined ? String(value) : undefined;
-
-    const displayChildren = useMemo(() => {
-        if (!hasValue || renderValue) return null;
-
-        // Find the child that matches the current value to display its content
-        let found: React.ReactNode = null;
-        Children.forEach(children, (child) => {
-            if (React.isValidElement<SelectItemProps>(child) && String(child.props.value) === String(value)) {
-                found = child.props.children;
-            }
-        });
-        return found;
-    }, [children, hasValue, renderValue, value]);
-
-    return (
-        <SelectPrimitive.Root
-            name={name}
-            value={stringValue}
-            open={openInternal}
-            disabled={disabled}
-            onValueChange={onValueChangeInternal}
-            onOpenChange={(open) => {
-                onOpenChange?.(open);
-                setOpenInternal(open);
-            }}
-            {...props}>
-            {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
-            <div className={cls(
-                "select-none rounded-lg text-sm",
-                invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
-                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                "relative flex items-center",
-                className,
-                {
-                    "min-h-[28px]": size === "smallest",
-                    "min-h-[32px]": size === "small",
-                    "min-h-[40px]": size === "medium",
-                    "min-h-[48px]": size === "large",
-                    "w-fit": !fullWidth,
-                    "w-full": fullWidth
-                }
-            )}>
-                <SelectPrimitive.Trigger
-                    ref={inputRef}
-                    id={id}
-                    asChild={false}
-                    type="button"
-                    aria-label={ariaLabel ?? (typeof label === "string" ? label : (typeof renderValue === "string" ? renderValue : "Select an option"))}
-                    aria-invalid={error || undefined}
-                    className={cls(
-                        "h-full",
-                        padding ? {
-                            "px-4": size === "large",
-                            "px-3": size === "medium",
-                            "px-2": size === "small" || size === "smallest"
-                        } : "",
-                        "outline-hidden focus:outline-hidden",
-                        "outline-none focus:outline-none",
-                        "select-none rounded-lg text-sm",
-                        error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
-                        error ? "border border-red-500 dark:border-red-600" : "",
-                        disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white",
-                        "relative flex flex-row items-center",
-                        {
-                            "min-h-[28px]": size === "smallest",
-                            "min-h-[32px]": size === "small",
-                            "min-h-[40px]": size === "medium",
-                            "min-h-[48px]": size === "large",
-                            "w-full": fullWidth,
-                            "w-fit": !fullWidth
-                        },
-                        inputClassName
-                    )}
-                >
-                    <div
-                        ref={ref}
-                        className={cls(
-                            "flex-grow max-w-full flex flex-row gap-2 items-center",
-                            "overflow-visible",
-                            {
-                                "min-h-[28px]": size === "smallest",
-                                "min-h-[32px]": size === "small",
-                                "min-h-[40px]": size === "medium",
-                                "min-h-[48px]": size === "large"
-                            }
-                        )}>
-                        <SelectPrimitive.Value
-                            onClick={(e) => {
-                                e.preventDefault();
-                                e.stopPropagation();
-                            }}
-                            placeholder={placeholder}
-                            className={"w-full"}>
-
-                            {hasValue && value !== undefined && renderValue
-                                ? renderValue(value)
-                                : (displayChildren || placeholder)
-                            }
-
-                        </SelectPrimitive.Value>
-                    </div>
-
-                    <SelectPrimitive.Icon asChild>
-                        <ChevronDownIcon size={size === "large" ? iconSize.medium : iconSize.small}
-                            className={cls("transition", open ? "rotate-180" : "", {
-                                "px-2": size === "large",
-                                "px-1": size === "medium" || size === "small"
-                            })}/>
-                    </SelectPrimitive.Icon>
-                </SelectPrimitive.Trigger>
-
-                {endAdornment && (
-                    <div
-                        className={cls("h-full flex items-center absolute right-0 pr-12")}
-                        onClick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                        }}>
-                        {endAdornment}
-                    </div>
-                )}
-            </div>
-
-            {/* Pass the calculated finalContainer */}
-            <SelectPrimitive.Portal container={finalContainer}>
-                <SelectPrimitive.Content position={position}
-                    className={cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-800 p-2 rounded-lg shadow-lg animate-in fade-in-0 zoom-in-95 duration-150", defaultBorderMixin)}>
-                    <SelectPrimitive.Viewport className={cls("p-1", viewportClassName)}
-                        style={{ maxHeight: "var(--radix-select-content-available-height)" }}>
-                        {children}
-                    </SelectPrimitive.Viewport>
-                </SelectPrimitive.Content>
-            </SelectPrimitive.Portal>
-        </SelectPrimitive.Root>
-    );
-});
-
-Select.displayName = "Select";
-
-// ... (SelectItem and SelectGroup remain unchanged)
-export type SelectItemProps<T extends SelectValue = string> = {
-    value: T,
-    children?: React.ReactNode,
-    disabled?: boolean,
-    className?: string,
-};
-
-export const SelectItem = React.memo(function SelectItem<T extends SelectValue = string>({
-    value,
-    children,
-    disabled,
-    className
-}: SelectItemProps<T>) {
-    // Convert value to string for Radix UI
-    const stringValue = String(value);
-
-    return <SelectPrimitive.Item
-        key={stringValue}
-        value={stringValue}
-        disabled={disabled}
-        className={cls(
-            "w-full",
-            "relative flex items-center p-2 rounded-md text-sm text-surface-accent-700 dark:text-surface-accent-300",
-            "focus:z-10",
-            "data-[state=checked]:bg-surface-accent-100 data-[state=checked]:dark:bg-surface-accent-800 focus:bg-surface-accent-100 dark:focus:bg-surface-900",
-            "data-[state=checked]:focus:bg-surface-accent-200 data-[state=checked]:dark:focus:bg-surface-900",
-            disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-            "[&>*]:w-full",
-            "overflow-visible",
-            className
-        )}>
-        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-        <div
-            className="absolute left-1 data-[state=checked]:block hidden">
-            <CheckIcon size={iconSize.smallest}/>
-        </div>
-    </SelectPrimitive.Item>;
-});
-
-export type SelectGroupProps = {
-    label: React.ReactNode,
-    children: React.ReactNode,
-    className?: string
-};
-
-export const SelectGroup = React.memo(function SelectGroup({
-    label,
-    children,
-    className
-}: SelectGroupProps) {
-    return <>
-        <SelectPrimitive.Group
-            className={cls(
-                "text-xs text-surface-accent-900 dark:text-white uppercase tracking-wider font-semibold mt-6 first:mt-2",
-                "px-2 py-2",
-                className
-            )}>
-            {label}
-        </SelectPrimitive.Group>
-
-        {children}
-    </>;
-});

package/src/components/Separator.tsx

@@ -1,28 +0,0 @@
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import { cls } from "../util";
-
-export function Separator({
-                              orientation,
-                              decorative,
-                              className
-                          }: {
-    orientation: "horizontal" | "vertical",
-    decorative?: boolean,
-    className?: string
-}) {
-    if (orientation === "horizontal")
-        return (
-            <SeparatorPrimitive.Root
-                decorative={decorative}
-                orientation="horizontal"
-                className={cls("dark:bg-surface-700 bg-surface-200 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)}/>
-        );
-    else
-        return (
-            <SeparatorPrimitive.Root
-                className={cls("dark:bg-surface-700 bg-surface-200 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className)}
-                decorative={decorative}
-                orientation="vertical"
-            />
-        );
-}