@gv-tech/ui-web 2.15.2 → 2.17.0

package/src/index.ts

@@ -335,6 +335,14 @@ export type { ResizableHandleProps, ResizablePanelGroupProps, ResizablePanelProp
 export { ScrollArea, ScrollBar } from './scroll-area';
 export type { ScrollAreaProps, ScrollBarProps } from './scroll-area';
 
+// Scroll To Top
+export { ScrollToTop } from './scroll-to-top';
+export type { ScrollToTopProps } from './scroll-to-top';
+
+// Support FAB
+export { SupportFab } from './support-fab';
+export type { SupportFabProps } from './support-fab';
+
 // Search
 export { Search, SearchTrigger } from './search';
 export type { SearchProps, SearchTriggerProps } from './search';
@@ -476,4 +484,7 @@ export { useTheme } from './hooks/use-theme';
 export type { ToasterBaseProps as ToasterProps } from '@gv-tech/ui-core';
 export { toast, useToast } from './hooks/use-toast';
 export { Toaster } from './toaster';
-// sync
+
+// Table Of Contents
+export { TableOfContents } from './table-of-contents';
+export type { TableOfContentsProps } from './table-of-contents';

package/src/label.tsx

@@ -15,7 +15,7 @@ const Label = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
 ));
-Label.displayName = LabelPrimitive.Root.displayName;
+Label.displayName = LabelPrimitive.Root?.displayName || 'Label';
 
 export { Label };
 export type { LabelBaseProps as LabelProps };

package/src/lib/utils.ts

@@ -4,3 +4,13 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+export function slugify(text: string): string {
+  return text
+    .toString()
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-') // Replace spaces with -
+    .replace(/[^\w-]+/g, '') // Remove all non-word chars
+    .replace(/--+/g, '-'); // Replace multiple - with single -
+}

package/src/menubar.tsx

@@ -51,7 +51,7 @@ const Menubar = React.forwardRef<
     {...props}
   />
 ));
-Menubar.displayName = MenubarPrimitive.Root.displayName;
+Menubar.displayName = MenubarPrimitive.Root?.displayName || 'Menubar';
 
 const MenubarTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Trigger>,
@@ -66,7 +66,7 @@ const MenubarTrigger = React.forwardRef<
     {...props}
   />
 ));
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+MenubarTrigger.displayName = MenubarPrimitive.Trigger?.displayName || 'MenubarTrigger';
 
 const MenubarSubTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
@@ -85,7 +85,7 @@ const MenubarSubTrigger = React.forwardRef<
     <ChevronRight className="ml-auto h-4 w-4" />
   </MenubarPrimitive.SubTrigger>
 ));
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger?.displayName || 'MenubarSubTrigger';
 
 const MenubarSubContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubContent>,
@@ -100,7 +100,7 @@ const MenubarSubContent = React.forwardRef<
     {...props}
   />
 ));
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+MenubarSubContent.displayName = MenubarPrimitive.SubContent?.displayName || 'MenubarSubContent';
 
 const MenubarContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,
@@ -120,7 +120,7 @@ const MenubarContent = React.forwardRef<
     />
   </MenubarPrimitive.Portal>
 ));
-MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+MenubarContent.displayName = MenubarPrimitive.Content?.displayName || 'MenubarContent';
 
 const MenubarItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Item>,
@@ -136,7 +136,7 @@ const MenubarItem = React.forwardRef<
     {...props}
   />
 ));
-MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+MenubarItem.displayName = MenubarPrimitive.Item?.displayName || 'MenubarItem';
 
 const MenubarCheckboxItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
@@ -159,7 +159,7 @@ const MenubarCheckboxItem = React.forwardRef<
     {children}
   </MenubarPrimitive.CheckboxItem>
 ));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem?.displayName || 'MenubarCheckboxItem';
 
 const MenubarRadioItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
@@ -181,7 +181,7 @@ const MenubarRadioItem = React.forwardRef<
     {children}
   </MenubarPrimitive.RadioItem>
 ));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem?.displayName || 'MenubarRadioItem';
 
 const MenubarLabel = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Label>,
@@ -193,7 +193,7 @@ const MenubarLabel = React.forwardRef<
     {...props}
   />
 ));
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+MenubarLabel.displayName = MenubarPrimitive.Label?.displayName || 'MenubarLabel';
 
 const MenubarSeparator = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Separator>,
@@ -201,7 +201,7 @@ const MenubarSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <MenubarPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
 ));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+MenubarSeparator.displayName = MenubarPrimitive.Separator?.displayName || 'MenubarSeparator';
 
 const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement> & MenubarShortcutBaseProps) => {
   return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />;

package/src/navigation-menu.tsx

@@ -30,7 +30,7 @@ const NavigationMenu = React.forwardRef<
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
 ));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+NavigationMenu.displayName = NavigationMenuPrimitive.Root?.displayName || 'NavigationMenu';
 
 const NavigationMenuList = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.List>,
@@ -42,7 +42,7 @@ const NavigationMenuList = React.forwardRef<
     {...props}
   />
 ));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+NavigationMenuList.displayName = NavigationMenuPrimitive.List?.displayName || 'NavigationMenuList';
 
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
@@ -66,7 +66,7 @@ const NavigationMenuTrigger = React.forwardRef<
     />
   </NavigationMenuPrimitive.Trigger>
 ));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger?.displayName || 'NavigationMenuTrigger';
 
 const NavigationMenuContent = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
@@ -81,7 +81,7 @@ const NavigationMenuContent = React.forwardRef<
     {...props}
   />
 ));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content?.displayName || 'NavigationMenuContent';
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
@@ -100,7 +100,7 @@ const NavigationMenuViewport = React.forwardRef<
     />
   </div>
 ));
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport?.displayName || 'NavigationMenuViewport';
 
 const NavigationMenuIndicator = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -117,7 +117,7 @@ const NavigationMenuIndicator = React.forwardRef<
     <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator?.displayName || 'NavigationMenuIndicator';
 
 export {
   NavigationMenu,

package/src/popover.tsx

@@ -34,7 +34,7 @@ const PopoverContent = React.forwardRef<
     />
   </PopoverPrimitive.Portal>
 ));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+PopoverContent.displayName = PopoverPrimitive.Content?.displayName || 'PopoverContent';
 
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
 export type {

package/src/progress.tsx

@@ -22,7 +22,7 @@ const Progress = React.forwardRef<
     />
   </ProgressPrimitive.Root>
 ));
-Progress.displayName = ProgressPrimitive.Root.displayName;
+Progress.displayName = ProgressPrimitive.Root?.displayName || 'Progress';
 
 export { Progress };
 export type { ProgressBaseProps as ProgressProps };

package/src/radio-group.tsx

@@ -14,7 +14,7 @@ const RadioGroup = React.forwardRef<React.ElementRef<typeof RadioGroupPrimitive.
     return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />;
   },
 );
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+RadioGroup.displayName = RadioGroupPrimitive.Root?.displayName || 'RadioGroup';
 
 export interface RadioGroupItemProps
   extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, RadioGroupItemBaseProps {}
@@ -37,6 +37,6 @@ const RadioGroupItem = React.forwardRef<React.ElementRef<typeof RadioGroupPrimit
     );
   },
 );
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+RadioGroupItem.displayName = RadioGroupPrimitive.Item?.displayName || 'RadioGroupItem';
 
 export { RadioGroup, RadioGroupItem };

package/src/scroll-area.tsx

@@ -16,7 +16,7 @@ const ScrollArea = React.forwardRef<
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+ScrollArea.displayName = ScrollAreaPrimitive.Root?.displayName || 'ScrollArea';
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -36,7 +36,7 @@ const ScrollBar = React.forwardRef<
     <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar?.displayName || 'ScrollBar';
 
 export { ScrollArea, ScrollBar };
 export type { ScrollAreaBaseProps as ScrollAreaProps, ScrollBarBaseProps as ScrollBarProps };

package/src/scroll-to-top.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { ScrollToTopBaseProps } from '@gv-tech/ui-core';
+import { ArrowUp } from 'lucide-react';
+import * as React from 'react';
+import { Button } from './button';
+import { cn } from './lib/utils';
+
+export interface ScrollToTopProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ScrollToTopBaseProps {
+  /** Optional custom scroll container; defaults to window when undefined. */
+  scrollTarget?: Window | HTMLElement | null;
+}
+
+type ScrollTarget = Window | HTMLElement | null;
+
+const isWindowTarget = (target: Exclude<ScrollTarget, null>): target is Window =>
+  typeof (target as Window).scrollY === 'number';
+
+const getScrollOffset = (target: Exclude<ScrollTarget, null>) =>
+  isWindowTarget(target) ? target.scrollY : target.scrollTop;
+
+export function ScrollToTop({
+  threshold = 240,
+  exitDuration = 450,
+  behavior = 'smooth',
+  scrollTarget,
+  className,
+  label = 'Scroll to top',
+  onClick,
+  tabIndex,
+  type,
+  ...props
+}: ScrollToTopProps) {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [isExiting, setIsExiting] = React.useState(false);
+  const timeoutRef = React.useRef<number | null>(null);
+
+  React.useEffect(() => {
+    const target = scrollTarget === undefined ? window : scrollTarget;
+
+    if (!target) {
+      setIsVisible(false);
+      return;
+    }
+
+    const updateVisibility = () => {
+      const offset = getScrollOffset(target);
+
+      if (isExiting) {
+        // Keep the control dismissed during the return-to-top animation,
+        // then release once we are back under the visibility threshold.
+        if (offset <= threshold) {
+          setIsVisible(false);
+          setIsExiting(false);
+        }
+        return;
+      }
+
+      setIsVisible(offset > threshold);
+    };
+
+    updateVisibility();
+    target.addEventListener('scroll', updateVisibility, { passive: true });
+
+    return () => {
+      target.removeEventListener('scroll', updateVisibility);
+    };
+  }, [isExiting, scrollTarget, threshold]);
+
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const state = isExiting ? 'exiting' : isVisible ? 'visible' : 'hidden';
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    if (event.defaultPrevented || isExiting) {
+      return;
+    }
+
+    const target = scrollTarget === undefined ? window : scrollTarget;
+    if (!target) {
+      return;
+    }
+
+    setIsExiting(true);
+
+    const timeout = Math.max(0, exitDuration);
+    timeoutRef.current = window.setTimeout(() => {
+      target.scrollTo({ top: 0, behavior });
+
+      const offset = getScrollOffset(target);
+      setIsVisible(false);
+
+      if (offset <= threshold) {
+        setIsExiting(false);
+      }
+    }, timeout);
+  };
+
+  return (
+    <Button
+      aria-label={label}
+      data-state={state}
+      type={type ?? 'button'}
+      variant="default"
+      size="icon"
+      tabIndex={state === 'hidden' ? -1 : tabIndex}
+      className={cn(
+        'group border-primary/40 bg-primary text-primary-foreground focus-visible:ring-ring fixed right-6 bottom-6 z-50 inline-flex h-14 w-14 items-center justify-center overflow-hidden rounded-full border shadow-[0_18px_40px_-22px_hsl(var(--primary)/0.9)] transition-all duration-500 ease-out focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+        'before:pointer-events-none before:absolute before:inset-0 before:bg-[radial-gradient(circle_at_35%_30%,rgba(255,255,255,0.45),transparent_55%)] before:opacity-80',
+        'hover:-translate-y-1 hover:scale-105 hover:shadow-[0_24px_48px_-24px_hsl(var(--primary)/0.95)] active:translate-y-0 active:scale-95',
+        state === 'visible' && 'translate-y-0 scale-100 opacity-100',
+        state === 'hidden' &&
+          'pointer-events-none translate-y-24 scale-75 opacity-0 blur-[1px] motion-safe:animate-none',
+        state === 'exiting' &&
+          'pointer-events-none translate-y-28 scale-90 opacity-0 blur-[2px] motion-safe:animate-none',
+        className,
+      )}
+      onClick={handleClick}
+      {...props}
+    >
+      <span className="bg-primary-foreground/20 absolute inset-0 rounded-full opacity-0 transition-opacity duration-500 group-hover:animate-pulse group-hover:opacity-100" />
+      <span className="border-primary-foreground/35 absolute inset-0 rounded-full border opacity-0 transition-opacity duration-300 group-hover:animate-ping group-hover:opacity-100" />
+      <ArrowUp className="relative z-10 h-5 w-5 drop-shadow-[0_2px_2px_rgba(0,0,0,0.2)]" />
+      <span className="sr-only">{label}</span>
+    </Button>
+  );
+}

package/src/select.tsx

@@ -42,7 +42,7 @@ const SelectTrigger = React.forwardRef<
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+SelectTrigger.displayName = SelectPrimitive.Trigger?.displayName || 'SelectTrigger';
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -56,7 +56,7 @@ const SelectScrollUpButton = React.forwardRef<
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
 ));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton?.displayName || 'SelectScrollUpButton';
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -70,7 +70,7 @@ const SelectScrollDownButton = React.forwardRef<
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
 ));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton?.displayName || 'SelectScrollDownButton';
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -102,7 +102,7 @@ const SelectContent = React.forwardRef<
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
 ));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
+SelectContent.displayName = SelectPrimitive.Content?.displayName || 'SelectContent';
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -110,7 +110,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label ref={ref} className={cn('px-2 py-1.5 text-sm font-semibold', className)} {...props} />
 ));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
+SelectLabel.displayName = SelectPrimitive.Label?.displayName || 'SelectLabel';
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -132,7 +132,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
 ));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
+SelectItem.displayName = SelectPrimitive.Item?.displayName || 'SelectItem';
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -140,7 +140,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator ref={ref} className={cn('bg-muted -mx-1 my-1 h-px', className)} {...props} />
 ));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+SelectSeparator.displayName = SelectPrimitive.Separator?.displayName || 'SelectSeparator';
 
 export {
   Select,

package/src/separator.tsx

@@ -18,7 +18,7 @@ const Separator = React.forwardRef<
     {...props}
   />
 ));
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+Separator.displayName = SeparatorPrimitive.Root?.displayName || 'Separator';
 
 export { Separator };
 export type { SeparatorBaseProps as SeparatorProps };

package/src/setupTests.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/*   @typescript-eslint/no-explicit-any */
 import '@testing-library/jest-dom';
 import { vi } from 'vitest';
 

package/src/sheet.tsx

@@ -40,7 +40,7 @@ const SheetOverlay = React.forwardRef<
     ref={ref}
   />
 ));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+SheetOverlay.displayName = SheetPrimitive.Overlay?.displayName || 'SheetOverlay';
 
 const sheetVariants = cva(
   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
@@ -81,7 +81,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
     </SheetPortal>
   ),
 );
-SheetContent.displayName = SheetPrimitive.Content.displayName;
+SheetContent.displayName = SheetPrimitive.Content?.displayName || 'SheetContent';
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement> & SheetHeaderBaseProps) => (
   <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
@@ -99,7 +99,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title ref={ref} className={cn('text-foreground text-lg font-semibold', className)} {...props} />
 ));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
+SheetTitle.displayName = SheetPrimitive.Title?.displayName || 'SheetTitle';
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -107,7 +107,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
 ));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
+SheetDescription.displayName = SheetPrimitive.Description?.displayName || 'SheetDescription';
 
 export {
   Sheet,

package/src/slider.tsx

@@ -21,7 +21,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
-Slider.displayName = SliderPrimitive.Root.displayName;
+Slider.displayName = SliderPrimitive.Root?.displayName || 'Slider';
 
 export { Slider };
 export type { SliderBaseProps as SliderProps };