@vertesia/ui 0.24.0-dev.202601221707

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

@@ -0,0 +1,92 @@
+import * as React from "react"
+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(
+  "",
+  {
+    variants: {
+      size: {
+        xs: "rounded py-1 text-xs rounded-xs",
+        sm: "rounded text-xs rounded-sm",
+        md: "rounded-md py-2 text-sm",
+        lg: "rounded-md text-base",
+        xl: "rounded-md py-2.5 text-lg",
+      },
+      variant: {
+        default: "flex w-full rounded-md border border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 ring-inset focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        unstyled: "block m-0 p-0 w-full border-0 focus:outline-hidden focus:ring-0 bg-transparent",
+        noPadding: "block rounded-md border-0 bg-background shadow-2xs ring-1 ring-inset ring-ring placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-ring ring-offset-background",
+        legacy: "py-1.5 block rounded-md border-0 bg-background shadow-2xs ring-1 ring-inset ring-ring placeholder:text-muted-foreground focus:ring-2 focus:ring-inset focus:ring-ring ring-offset-background",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+    },
+  }
+)
+
+type InputVariant = "default" | "unstyled" | "noPadding" | "legacy";
+
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+  size?: VariantProps<typeof variants>["size"];
+  variant?: InputVariant;
+  clearable?: boolean;
+  value?: string;
+  onChange?: (value: string) => void
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, size = "md", variant = "default", clearable = true, onChange, value, ...props }, ref) => {
+
+    const _onClear = () => {
+      onChange && onChange('');
+    };
+
+    const _onChange = (ev: ChangeEvent<HTMLInputElement>) => {
+      onChange && onChange(ev.target.value);
+    };
+
+    return (
+      <div className="w-full relative inline-block [&:hover_.clear-button]:opacity-100">
+        <input
+          type={type}
+          className={
+            cn(
+              variants({ size, variant }),
+              className,
+              clearable && value ? "pr-8" : "",
+            )}
+          ref={ref}
+          value={value == null ? '' : value}
+          onChange={_onChange}
+          {...props}
+        />
+        {clearable && value && !props.readOnly && !props.disabled && (
+          <Button variant={"link"} size={"icon"}
+            type="button"
+            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>
+        )}
+      </div>
+    )
+  }
+)
+
+Input.displayName = "Input"
+
+export {
+  Input,
+}

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

@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../libs/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+  VariantProps<typeof labelVariants> & {
+    required?: boolean
+  }
+
+const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<React.ElementRef<typeof LabelPrimitive.Root>>> = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  LabelProps
+>(({ className, required, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  >
+    {props.children}
+    {required && <span className="text-destructive-foreground ml-1">*</span>}
+  </LabelPrimitive.Root>
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

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

@@ -0,0 +1,115 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "../libs/utils"
+import { JSX } from "react";
+import { useIsInModal } from "./dialog";
+
+export interface PopoverContextValue {
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  hover: boolean;
+  click: boolean;
+}
+export const PopoverContext = React.createContext<PopoverContextValue | null>(null);
+
+interface PopoverProps {
+  _open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  hover?: boolean;
+  click?: boolean;
+  children?: React.ReactNode;
+}
+const Popover = ({ hover = false, click = false, children, _open, onOpenChange }: PopoverProps): JSX.Element => {
+  const [open, setOpen] = React.useState(_open || false);
+  const insideModal = useIsInModal();
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (onOpenChange) {
+      onOpenChange(open);
+    }
+  };
+
+  return (
+    <PopoverContext.Provider value={{ open, setOpen, hover, click }}>
+      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange} modal={insideModal}>
+        {children}
+      </PopoverPrimitive.Root>
+    </PopoverContext.Provider>
+  );
+};
+
+function handleHover(hover: boolean = false, setOpen: React.Dispatch<React.SetStateAction<boolean>> = () => { }, type: "enter" | "leave") {
+  if (hover) {
+    setOpen(type === "enter");
+  }
+}
+
+const PopoverTrigger = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
+>(({ children, ...props }, ref) => {
+  const context = React.useContext(PopoverContext);
+
+  if (!context) {
+    throw new Error("PopoverTrigger must be used within a Popover");
+  }
+
+  const { setOpen, hover, click } = context;
+
+  return (
+    <PopoverPrimitive.Trigger
+      ref={ref}
+      asChild
+      onMouseEnter={() => handleHover(hover, setOpen, "enter")}
+      onMouseLeave={() => handleHover(hover, setOpen, "leave")}
+      onClick={() => {
+        if (click) setOpen((prev) => !prev);
+      }}
+      {...props}
+    >
+      {children}
+    </PopoverPrimitive.Trigger>
+  );
+});
+PopoverTrigger.displayName = PopoverPrimitive.Trigger.displayName;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", side = "bottom", ...props }, ref) => {
+  const context = React.useContext<PopoverContextValue | null>(PopoverContext);
+
+  if (!context) {
+    throw new Error("PopoverContent must be used within a Popover");
+  }
+
+  const { setOpen, hover } = context;
+
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        side={side}
+        onMouseEnter={() => handleHover(hover, setOpen, "enter")}
+        onMouseLeave={() => handleHover(hover, setOpen, "leave")}
+        // onClick={() => {setOpen(false)}}
+        className={cn(
+          "z-50 w-72 rounded-md border-popover bg-popover text-popover-foreground ring-1 ring-gray-200 dark:ring-slate-700 shadow-md focus:outline-none animate-in",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+});
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+const PopoverClose = PopoverPrimitive.Close;
+PopoverClose.displayName = PopoverPrimitive.Close.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose };

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

@@ -0,0 +1,54 @@
+import * as React from "react"
+import { Minus } from "lucide-react"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "../libs/utils"
+
+function ResizablePanelGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+  return (
+    <ResizablePrimitive.PanelGroup
+      data-slot="resizable-panel-group"
+      className={cn(
+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ResizablePanel({
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}
+
+function ResizableHandle({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) {
+  return (
+    <ResizablePrimitive.PanelResizeHandle
+      data-slot="resizable-handle"
+      className={cn(
+        "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="z-10 flex size-4 items-center justify-center rounded-xs font-semibold">
+          <Minus className="size-4 rotate-90" />
+        </div>
+      )}
+    </ResizablePrimitive.PanelResizeHandle>
+  )
+}
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

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

@@ -0,0 +1,337 @@
+import clsx from 'clsx';
+import { isEqual } from 'lodash-es';
+import { AlertTriangle, Check, ChevronsUpDown, SearchIcon, SquarePlus, X } from 'lucide-react';
+import { useState, useEffect, useRef, useMemo } from 'react';
+
+import { Popover, PopoverContent, PopoverTrigger, PopoverClose } from './popover';
+import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from './command';
+import { Input } from './input';
+import { Button } from '@vertesia/ui/core';
+import { VTooltip } from './tooltip';
+
+export interface VSelectBoxBaseProps<T> {
+    options: T[] | undefined;
+    optionLabel?: (option: T) => React.ReactNode;
+    onBlur?: () => void;
+    onKeyDown?: (e: React.KeyboardEvent, isOpen: boolean) => void;
+    label?: string;
+    placeholder?: string;
+    addNew?: () => void;
+    addNewLabel?: string;
+    disabled?: boolean;
+    filterBy?: string | ((o: T) => string);
+    by?: (keyof T & string) | ((a: T, z: T) => boolean)
+    className?: string;
+    popupClass?: string;
+    isClearable?: boolean;
+    border?: boolean;
+    inline?: boolean;
+    /** Show warning when value is not in options list (default: true) */
+    warnOnMissingValue?: boolean;
+    /** Custom warning message when value is not in options */
+    missingValueWarning?: string;
+}
+
+interface VSelectBoxSingleProps<T> extends VSelectBoxBaseProps<T> {
+    multiple?: false;
+    value?: T;
+    onChange: (option: T) => void;
+}
+
+interface VSelectBoxMultipleProps<T> extends VSelectBoxBaseProps<T> {
+    multiple: true;
+    value?: T[];
+    onChange: (options: T[]) => void;
+}
+
+type VSelectBoxProps<T> = VSelectBoxSingleProps<T> | VSelectBoxMultipleProps<T>;
+
+export function VSelectBox<T = any>({ options, optionLabel, value, onChange, addNew, addNewLabel, disabled, filterBy, label, placeholder, className, popupClass, isClearable, border = true, multiple = false, by, inline = false, warnOnMissingValue = true, missingValueWarning = "Value not in options list, may not be valid" }: Readonly<VSelectBoxProps<T>>) {
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const [open, setOpen] = useState(false);
+    const [width, setWidth] = useState<number>(0);
+    const [filterValue, setFilterValue] = useState('');
+
+    // Check if value is in options list (for single select only)
+    const isMissingValue = useMemo(() => {
+        if (!warnOnMissingValue || multiple || value == null || !options) return false;
+        // Use the isOptionsEqual helper which respects the 'by' comparator
+        return !options.some(opt => {
+            if (typeof by === 'string') {
+                return (opt as any)[by] === (value as any)[by];
+            } else if (typeof by === 'function') {
+                return by(opt, value as T);
+            } else {
+                return isEqual(opt, value);
+            }
+        });
+    }, [warnOnMissingValue, multiple, value, options, by]);
+
+    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();
+        };
+    }, []);
+
+    const handleTriggerClick = (e: React.MouseEvent) => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        setOpen(!open);
+    };
+
+    const _onClick = (opt: any) => {
+        if (multiple) {
+            const currentValues = Array.isArray(value) ? value : [];
+            const isSelected = isOptionSelected(opt, currentValues);
+
+            if (isSelected) {
+                // Remove from selection
+                const newValues = currentValues.filter(v => !isOptionsEqual(v, opt));
+                (onChange as (options: T[]) => void)(newValues);
+            } else {
+                // Add to selection
+                (onChange as (options: T[]) => void)([...currentValues, opt]);
+            }
+            // Don't close the popover in multiple mode
+        } else {
+            setOpen(false);
+            (onChange as (option: T) => void)(opt);
+        }
+    };
+
+    // Helper function to check if an option is selected
+    const isOptionSelected = (option: T, selectedValues: T[]): boolean => {
+        if (!selectedValues || selectedValues.length === 0) return false;
+        return selectedValues.some(v => isOptionsEqual(v, option));
+    };
+
+    // Helper function to compare options for equality
+    const isOptionsEqual = (a: T, b: T): boolean => {
+        // Handle null/undefined values
+        if (a == null || b == null) {
+            return a === b;
+        }
+        
+        if (typeof by === 'string') {
+            return (a as any)[by] === (b as any)[by];
+        } else if (typeof by === 'function') {
+            return by(a, b);
+        } else {
+            return isEqual(a, b);
+        }
+    };
+
+    let filteredOptions = options || [];
+
+    function getFilterByFn<T>(filterBy?: string | ((o: T) => string)) {
+        if (!filterBy) {
+            return (o: T) => String(o).toLowerCase();
+        } else if (typeof filterBy === 'string') {
+            return (o: any) => String(o[filterBy]).toLowerCase();
+        } else {
+            return filterBy;
+        }
+    }
+
+    const filterLc = filterValue.toLowerCase();
+    const filterFn = getFilterByFn(filterBy);
+    filteredOptions = filteredOptions.filter(o => filterFn(o).includes(filterLc))
+
+    const renderSingleValue = () => {
+        if (!value || (Array.isArray(value) && value.length === 0)) {
+            return <span className="text-muted">{placeholder}</span>;
+        }
+        const singleValue = Array.isArray(value) ? value[0] : value;
+        return optionLabel ? optionLabel(singleValue) : singleValue as string;
+    };
+
+    const renderMultipleValue = () => {
+        const arrayValue = Array.isArray(value) ? value : (value ? [value] : []);
+
+        if (arrayValue.length === 0) {
+            return <span className="text-muted">{placeholder}</span>;
+        }
+
+        if (arrayValue.length === 1) {
+            return optionLabel ? optionLabel(arrayValue[0]) : arrayValue[0] as string;
+        }
+
+        return (
+            <div className="flex flex-wrap gap-1">
+                {arrayValue.slice(0, 1).map((item, index) => (
+                    <span key={index} className="inline-flex items-center gap-1 px-2 py-1 text-xs bg-muted rounded">
+                        {optionLabel ? optionLabel(item) : item as string}
+                    </span>
+                ))}
+                {arrayValue.length > 1 && (
+                    <span className="inline-flex items-center px-2 py-1 text-xs bg-muted rounded">
+                        +{arrayValue.length - 1} more
+                    </span>
+                )}
+            </div>
+        );
+    };
+
+    // Render the options list content
+    const renderOptionsContent = () => (
+        <>
+            {filterBy && (
+                <div className='flex justify-start items-center mb-1'>
+                    <div className='mx-2'>
+                        <SearchIcon className="size-4" />
+                    </div>
+                    <Input variant='unstyled' value={filterValue} onChange={setFilterValue} className="w-full p-1 rounded-md" placeholder="Search..." />
+                </div>
+            )}
+            <Command className="overflow-hidden">
+                <CommandList className={inline ? "max-h-full overflow-y-auto" : "max-h-[200px] overflow-y-auto"}>
+                    <CommandEmpty>No result found.</CommandEmpty>
+                    <CommandGroup>
+                        {filteredOptions?.map((opt, index) => {
+                            const isSelected = multiple
+                                ? isOptionSelected(opt, Array.isArray(value) ? value : [])
+                                : value != null ? isOptionsEqual(value as T, opt) : false;
+
+                            return (
+                                <CommandItem
+                                    key={index}
+                                    onSelect={() => _onClick(opt)}
+                                    className="w-full"
+                                >
+                                    {multiple || inline ? (
+                                        <div className='w-full flex justify-between items-center cursor-pointer'>
+                                            <div className='w-full truncate text-left'>
+                                                {optionLabel ? optionLabel(opt) : opt as String}
+                                            </div>
+                                            {isSelected && <Check className="size-4" />}
+                                        </div>
+                                    ) : (
+                                        <PopoverClose className='w-full flex justify-between items-center'>
+                                            <div className='w-full truncate text-left'>
+                                                {optionLabel ? optionLabel(opt) : opt as String}
+                                            </div>
+                                            {isSelected && <Check className="size-4" />}
+                                        </PopoverClose>
+                                    )}
+                                </CommandItem>
+                            );
+                        })}
+                    </CommandGroup>
+                </CommandList>
+            </Command>
+            {addNew && (
+                <div className='p-1'>
+                    <a
+                        onClick={addNew}
+                        className={clsx(
+                            'gap-x-2 px-2 py-1.5 truncate group flex rounded-md items-center text-sm cursor-pointer hover:bg-accent',
+                        )}
+                    >
+                        <SquarePlus size={16} strokeWidth={1.25} absoluteStrokeWidth />
+                        {addNewLabel}
+                    </a>
+                </div>
+            )}
+        </>
+    );
+
+    if (inline) {
+        return (
+            <div className={clsx(
+                className,
+                border && 'border border-border rounded-md',
+                "bg-popover p-1",
+                popupClass
+            )}>
+                {renderOptionsContent()}
+            </div>
+        );
+    }
+
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <div
+                    ref={triggerRef}
+                    onClick={handleTriggerClick}
+                    className={clsx(
+                        className,
+                        border && (isMissingValue ? 'border border-destructive' : 'border border-border'),
+                        'flex flex-row gap-2 items-center justify-between p-2 rounded-md group relative [&:hover_.clear-button]:opacity-100',
+                        !disabled ? "cursor-pointer hover:bg-muted" : "cursor-not-allowed text-muted",
+                    )}
+                >
+                    <div
+                        className={clsx(
+                            "flex flex-col w-full rounded-md text-sm items-center justify-center truncate",
+                            !disabled && "",
+                            isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && "pr-6"
+                        )}
+                    >
+                        {label && <div className='w-full text-left text-xs font-semibold'>{label}</div>}
+                        <div className={clsx('w-full text-left min-h-6', !disabled && '', isMissingValue && 'text-destructive')}>
+                            {isMissingValue && (
+                                <VTooltip description={missingValueWarning} placement="top" asChild>
+                                    <AlertTriangle className="inline-block size-4 mr-1 -mt-0.5 cursor-help" />
+                                </VTooltip>
+                            )}
+                            {multiple ? renderMultipleValue() : renderSingleValue()}
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-1 group">
+                        {isClearable && value && (Array.isArray(value) ? value.length > 0 : true) && (
+                            <Button variant={"link"} size={"icon"}
+                                disabled={disabled}
+                                alt="Clear selection"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    if (multiple) {
+                                        (onChange as (options: T[]) => void)([] as T[]);
+                                    } else {
+                                        (onChange as (option: T) => void)(undefined as any);
+                                    }
+                                }}
+                                className="cursor-pointer hover:bg-muted/20 clear-button opacity-0 transition-opacity duration-200 rounded p-1"
+                            >
+                                <X className="size-4" />
+                            </Button>
+                        )}
+                        {!disabled && (
+                            <ChevronsUpDown className="size-4 opacity-50" />
+                        )}
+                    </div>
+                </div>
+            </PopoverTrigger>
+
+            <PopoverContent
+                style={{ width: `${width}px`, zIndex: 1000000 }}
+                className={clsx(
+                    "min-w-[8rem] w-64 bg-popover p-1 border shadow",
+                    "divide-y divide-border",
+                    popupClass
+                )}
+            >
+                {renderOptionsContent()}
+            </PopoverContent>
+        </Popover>
+    );
+}

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

@@ -0,0 +1,31 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "../libs/utils"
+
+type SeparatorProps = React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+
+const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<React.ElementRef<typeof SeparatorPrimitive.Root>>> = React.forwardRef<
+    React.ElementRef<typeof SeparatorPrimitive.Root>,
+    SeparatorProps
+>(
+    (
+        { className, orientation = "horizontal", decorative = true, ...props },
+        ref
+    ) => (
+        <SeparatorPrimitive.Root
+            ref={ref}
+            decorative={decorative}
+            orientation={orientation}
+            className={cn(
+                "shrink-0 bg-border",
+                orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+                className
+            )}
+            {...props}
+        />
+    )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }