@plexui/ui 0.2.0

package/dist/es/components/Sidebar/index.js

@@ -0,0 +1,30 @@
+// Sidebar Component - Composable navigation sidebar
+// Re-export all components from Sidebar.tsx and useSidebarContext.ts
+export { 
+// Core
+Sidebar, 
+// Card
+SidebarCard, SidebarCardContent, SidebarCardFooter, SidebarCardHeader, SidebarCardTitle, SidebarCardTitleLink, SidebarContent, SidebarFooter, 
+// Footer Links
+SidebarFooterLinks, 
+// Groups
+SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, 
+// Sections
+SidebarHeader, 
+// Input
+SidebarInput, SidebarInset, SidebarLayout, 
+// Menu
+SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuButtonIcon, SidebarMenuButtonLabel, SidebarMenuChevron, SidebarMenuItem, SidebarMenuSkeleton, 
+// Submenu
+SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarMobile, SidebarMobileFooter, SidebarMobileHeader, 
+// Mobile
+SidebarMobileMenuButton, 
+// Provider and Hook
+SidebarProvider, SidebarRail, 
+// Separator
+SidebarSeparator, 
+// Trigger
+SidebarTrigger, useSidebar, } from "./Sidebar";
+// Export constants
+export { SIDEBAR_CONSTANTS } from "./useSidebarContext";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/index.tsx"],"names":[],"mappings":"AAAA,oDAAoD;AACpD,qEAAqE;AAErE,OAAO;AACL,OAAO;AACP,OAAO;AACP,OAAO;AACP,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,oBAAoB,EACpB,cAAc,EACd,aAAa;AACb,eAAe;AACf,kBAAkB;AAClB,SAAS;AACT,YAAY,EACZ,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB;AACjB,WAAW;AACX,aAAa;AACb,QAAQ;AACR,YAAY,EACZ,YAAY,EACZ,aAAa;AACb,OAAO;AACP,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,EACtB,kBAAkB,EAClB,eAAe,EACf,mBAAmB;AACnB,UAAU;AACV,cAAc,EACd,oBAAoB,EACpB,kBAAkB,EAClB,aAAa,EACb,mBAAmB,EACnB,mBAAmB;AACnB,SAAS;AACT,uBAAuB;AACvB,oBAAoB;AACpB,eAAe,EACf,WAAW;AACX,YAAY;AACZ,gBAAgB;AAChB,UAAU;AACV,cAAc,EACd,UAAU,GACX,MAAM,WAAW,CAAA;AAmDlB,mBAAmB;AACnB,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA","sourcesContent":["// Sidebar Component - Composable navigation sidebar\n// Re-export all components from Sidebar.tsx and useSidebarContext.ts\n\nexport {\n  // Core\n  Sidebar,\n  // Card\n  SidebarCard,\n  SidebarCardContent,\n  SidebarCardFooter,\n  SidebarCardHeader,\n  SidebarCardTitle,\n  SidebarCardTitleLink,\n  SidebarContent,\n  SidebarFooter,\n  // Footer Links\n  SidebarFooterLinks,\n  // Groups\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  // Sections\n  SidebarHeader,\n  // Input\n  SidebarInput,\n  SidebarInset,\n  SidebarLayout,\n  // Menu\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuButtonIcon,\n  SidebarMenuButtonLabel,\n  SidebarMenuChevron,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  // Submenu\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarMobile,\n  SidebarMobileFooter,\n  SidebarMobileHeader,\n  // Mobile\n  SidebarMobileMenuButton,\n  // Provider and Hook\n  SidebarProvider,\n  SidebarRail,\n  // Separator\n  SidebarSeparator,\n  // Trigger\n  SidebarTrigger,\n  useSidebar,\n} from \"./Sidebar\"\n\n// Export types\nexport type {\n  SidebarCardContentProps,\n  SidebarCardFooterProps,\n  SidebarCardHeaderProps,\n  SidebarCardProps,\n  SidebarCardTitleLinkProps,\n  SidebarCardTitleProps,\n  // Context types\n  SidebarCollapsible,\n  SidebarContentProps,\n  SidebarFooterLinksProps,\n  SidebarFooterProps,\n  SidebarGroupActionProps,\n  SidebarGroupContentProps,\n  SidebarGroupLabelProps,\n  SidebarGroupProps,\n  SidebarHeaderProps,\n  SidebarInputProps,\n  SidebarInsetProps,\n  SidebarLayoutProps,\n  SidebarMenuActionProps,\n  SidebarMenuBadgeProps,\n  SidebarMenuButtonIconProps,\n  SidebarMenuButtonLabelProps,\n  SidebarMenuButtonProps,\n  SidebarMenuChevronProps,\n  SidebarMenuItemProps,\n  SidebarMenuProps,\n  SidebarMenuSkeletonProps,\n  SidebarMenuSubButtonProps,\n  SidebarMenuSubItemProps,\n  SidebarMenuSubProps,\n  SidebarMobileFooterProps,\n  SidebarMobileHeaderProps,\n  SidebarMobileMenuButtonProps,\n  SidebarMobileProps,\n  // Component props\n  SidebarProps,\n  SidebarRailProps,\n  SidebarSeparatorProps,\n  SidebarSide,\n  SidebarTriggerProps,\n  SidebarVariant,\n} from \"./Sidebar\"\n\n// Export provider props and context types\nexport type { SidebarContextValue, SidebarProviderProps, SidebarState } from \"./useSidebarContext\"\n\n// Export constants\nexport { SIDEBAR_CONSTANTS } from \"./useSidebarContext\"\n"]}

package/dist/es/components/Sidebar/useSidebarContext.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+// Constants
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; // 7 days
+const SIDEBAR_WIDTH = "240px";
+const SIDEBAR_WIDTH_MOBILE = "288px";
+const SIDEBAR_WIDTH_ICON = "64px";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+const MOBILE_BREAKPOINT = 768;
+// Context
+const SidebarContext = createContext(null);
+// Hook to access sidebar context
+export const useSidebar = () => {
+    const context = useContext(SidebarContext);
+    if (!context) {
+        throw new Error("useSidebar must be used within a SidebarProvider");
+    }
+    return context;
+};
+// Hook for mobile detection via matchMedia
+function useIsMobile() {
+    const [isMobile, setIsMobile] = useState(false);
+    useEffect(() => {
+        // Check if we're in browser environment
+        if (typeof window === "undefined")
+            return;
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const handleChange = () => setIsMobile(mql.matches);
+        handleChange(); // Initial check
+        mql.addEventListener("change", handleChange);
+        return () => mql.removeEventListener("change", handleChange);
+    }, []);
+    return isMobile;
+}
+// Provider component
+export const SidebarProvider = ({ children, defaultOpen = true, open: openProp, onOpenChange: setOpenProp, collapsible = "offcanvas", style, className, }) => {
+    const isMobile = useIsMobile();
+    const [openMobile, setOpenMobile] = useState(false);
+    // Controlled vs uncontrolled state for desktop
+    const [_open, _setOpen] = useState(defaultOpen);
+    const open = openProp ?? _open;
+    const setOpen = useCallback((value) => {
+        const openState = typeof value === "function" ? value(open) : value;
+        if (setOpenProp) {
+            setOpenProp(openState);
+        }
+        else {
+            _setOpen(openState);
+        }
+        // Persist state in cookie for SSR
+        if (typeof document !== "undefined") {
+            document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+        }
+    }, [setOpenProp, open]);
+    // Toggle function that handles both mobile and desktop
+    const toggleSidebar = useCallback(() => {
+        if (isMobile) {
+            setOpenMobile((prev) => !prev);
+        }
+        else {
+            setOpen((prev) => !prev);
+        }
+    }, [isMobile, setOpen]);
+    // Keyboard shortcut: Cmd/Ctrl + B
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            // Skip if collapsible is "none"
+            if (collapsible === "none")
+                return;
+            // Don't trigger when focus is in an editable element (input, textarea, contenteditable)
+            const target = event.target;
+            if (target?.closest?.("input, textarea") || target?.isContentEditable)
+                return;
+            // Check for Cmd (Mac) or Ctrl (Windows/Linux) + B
+            if (event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+                (event.metaKey || event.ctrlKey) &&
+                !event.altKey &&
+                !event.shiftKey) {
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [toggleSidebar, collapsible]);
+    // Close mobile menu on escape key
+    useEffect(() => {
+        if (!openMobile)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                setOpenMobile(false);
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [openMobile]);
+    // Derive state from open boolean
+    const state = open ? "expanded" : "collapsed";
+    // Context value
+    const contextValue = useMemo(() => ({
+        state,
+        open,
+        setOpen,
+        openMobile,
+        setOpenMobile,
+        isMobile,
+        collapsible,
+        toggleSidebar,
+    }), [state, open, setOpen, openMobile, isMobile, collapsible, toggleSidebar]);
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx("div", { className: className, style: {
+                "--sidebar-width": SIDEBAR_WIDTH,
+                "--sidebar-width-mobile": SIDEBAR_WIDTH_MOBILE,
+                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+                ...style,
+            }, "data-sidebar": state, "data-mobile-menu": openMobile ? "visible" : "hidden", "data-collapsible": collapsible, children: children }) }));
+};
+// Re-export constants for external use
+export const SIDEBAR_CONSTANTS = {
+    WIDTH: SIDEBAR_WIDTH,
+    WIDTH_MOBILE: SIDEBAR_WIDTH_MOBILE,
+    WIDTH_ICON: SIDEBAR_WIDTH_ICON,
+    KEYBOARD_SHORTCUT: SIDEBAR_KEYBOARD_SHORTCUT,
+    MOBILE_BREAKPOINT,
+    COOKIE_NAME: SIDEBAR_COOKIE_NAME,
+    COOKIE_MAX_AGE: SIDEBAR_COOKIE_MAX_AGE,
+};
+//# sourceMappingURL=useSidebarContext.js.map

package/dist/es/components/Sidebar/useSidebarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSidebarContext.js","sourceRoot":"","sources":["../../../../src/components/Sidebar/useSidebarContext.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\"\n\n// Constants\nconst SIDEBAR_COOKIE_NAME = \"sidebar:state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7 // 7 days\nconst SIDEBAR_WIDTH = \"240px\"\nconst SIDEBAR_WIDTH_MOBILE = \"288px\"\nconst SIDEBAR_WIDTH_ICON = \"64px\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\nconst MOBILE_BREAKPOINT = 768\n\n// Types\nexport type SidebarState = \"expanded\" | \"collapsed\"\nexport type SidebarCollapsible = \"offcanvas\" | \"icon\" | \"none\"\nexport type SidebarSide = \"left\" | \"right\"\nexport type SidebarVariant = \"sidebar\" | \"docs\"\n\nexport type SidebarContextValue = {\n  state: SidebarState\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  collapsible: SidebarCollapsible\n  toggleSidebar: () => void\n}\n\n// Context\nconst SidebarContext = createContext<SidebarContextValue | null>(null)\n\n// Hook to access sidebar context\nexport const useSidebar = (): SidebarContextValue => {\n  const context = useContext(SidebarContext)\n\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider\")\n  }\n\n  return context\n}\n\n// Hook for mobile detection via matchMedia\nfunction useIsMobile(): boolean {\n  const [isMobile, setIsMobile] = useState(false)\n\n  useEffect(() => {\n    // Check if we're in browser environment\n    if (typeof window === \"undefined\") return\n\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n\n    const handleChange = () => setIsMobile(mql.matches)\n    handleChange() // Initial check\n\n    mql.addEventListener(\"change\", handleChange)\n    return () => mql.removeEventListener(\"change\", handleChange)\n  }, [])\n\n  return isMobile\n}\n\n// Provider props\nexport type SidebarProviderProps = {\n  children: ReactNode\n  /**\n   * Default open state (uncontrolled)\n   * @default true\n   */\n  defaultOpen?: boolean\n  /**\n   * Controlled open state\n   */\n  open?: boolean\n  /**\n   * Callback when open state changes\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Collapsible mode\n   * @default \"offcanvas\"\n   */\n  collapsible?: SidebarCollapsible\n  /**\n   * Custom CSS properties for the sidebar\n   */\n  style?: React.CSSProperties\n  /**\n   * Additional class name\n   */\n  className?: string\n}\n\n// Provider component\nexport const SidebarProvider = ({\n  children,\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  collapsible = \"offcanvas\",\n  style,\n  className,\n}: SidebarProviderProps) => {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = useState(false)\n\n  // Controlled vs uncontrolled state for desktop\n  const [_open, _setOpen] = useState(defaultOpen)\n  const open = openProp ?? _open\n\n  const setOpen = useCallback(\n    (value: boolean | ((prev: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // Persist state in cookie for SSR\n      if (typeof document !== \"undefined\") {\n        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n      }\n    },\n    [setOpenProp, open],\n  )\n\n  // Toggle function that handles both mobile and desktop\n  const toggleSidebar = useCallback(() => {\n    if (isMobile) {\n      setOpenMobile((prev) => !prev)\n    } else {\n      setOpen((prev) => !prev)\n    }\n  }, [isMobile, setOpen])\n\n  // Keyboard shortcut: Cmd/Ctrl + B\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      // Skip if collapsible is \"none\"\n      if (collapsible === \"none\") return\n\n      // Don't trigger when focus is in an editable element (input, textarea, contenteditable)\n      const target = event.target as HTMLElement | null\n      if (target?.closest?.(\"input, textarea\") || target?.isContentEditable) return\n\n      // Check for Cmd (Mac) or Ctrl (Windows/Linux) + B\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey) &&\n        !event.altKey &&\n        !event.shiftKey\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar, collapsible])\n\n  // Close mobile menu on escape key\n  useEffect(() => {\n    if (!openMobile) return\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setOpenMobile(false)\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [openMobile])\n\n  // Derive state from open boolean\n  const state: SidebarState = open ? \"expanded\" : \"collapsed\"\n\n  // Context value\n  const contextValue = useMemo<SidebarContextValue>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      openMobile,\n      setOpenMobile,\n      isMobile,\n      collapsible,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, openMobile, isMobile, collapsible, toggleSidebar],\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        className={className}\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-mobile\": SIDEBAR_WIDTH_MOBILE,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        data-sidebar={state}\n        data-mobile-menu={openMobile ? \"visible\" : \"hidden\"}\n        data-collapsible={collapsible}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\n// Re-export constants for external use\nexport const SIDEBAR_CONSTANTS = {\n  WIDTH: SIDEBAR_WIDTH,\n  WIDTH_MOBILE: SIDEBAR_WIDTH_MOBILE,\n  WIDTH_ICON: SIDEBAR_WIDTH_ICON,\n  KEYBOARD_SHORTCUT: SIDEBAR_KEYBOARD_SHORTCUT,\n  MOBILE_BREAKPOINT,\n  COOKIE_NAME: SIDEBAR_COOKIE_NAME,\n  COOKIE_MAX_AGE: SIDEBAR_COOKIE_MAX_AGE,\n} as const\n"]}

package/dist/es/components/Skeleton/Skeleton.module.css

@@ -0,0 +1,17 @@
+@layer components {.Skeleton {
+  background-color: var(--skeleton-background);
+  border-radius: var(--skeleton-radius);
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+}.Skeleton[data-circle] {
+  border-radius: var(--radius-full);
+}@keyframes skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+}

package/dist/es/components/Skeleton/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import {} from "react";
+import s from "./Skeleton.module.css";
+/**
+ * Skeleton component for displaying loading placeholders.
+ * Use to show a placeholder while content is loading.
+ */
+export const Skeleton = ({ className, circle, style, ...props }) => (_jsx("div", { className: clsx(s.Skeleton, className), "data-circle": circle ? "" : undefined, style: style, ...props }));
+//# sourceMappingURL=index.js.map

package/dist/es/components/Skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAuB,MAAM,OAAO,CAAA;AAC3C,OAAO,CAAC,MAAM,uBAAuB,CAAA;AAUrC;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAiB,EAAE,EAAE,CAAC,CACjF,cACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,iBACzB,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EACpC,KAAK,EAAE,KAAK,KACR,KAAK,GACT,CACH,CAAA","sourcesContent":["import clsx from \"clsx\"\nimport { type ComponentProps } from \"react\"\nimport s from \"./Skeleton.module.css\"\n\nexport type SkeletonProps = ComponentProps<\"div\"> & {\n  /**\n   * Makes the skeleton circular (border-radius: 50%)\n   * @default false\n   */\n  circle?: boolean\n}\n\n/**\n * Skeleton component for displaying loading placeholders.\n * Use to show a placeholder while content is loading.\n */\nexport const Skeleton = ({ className, circle, style, ...props }: SkeletonProps) => (\n  <div\n    className={clsx(s.Skeleton, className)}\n    data-circle={circle ? \"\" : undefined}\n    style={style}\n    {...props}\n  />\n)\n"]}

package/dist/es/components/Slider/Slider.js

@@ -0,0 +1,227 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import clamp from "lodash/clamp";
+import round from "lodash/round";
+import { Slider as RadixSlider } from "radix-ui";
+import { memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { useDebounceCallback, useResizeObserver } from "usehooks-ts";
+import { useBreakpoint } from "../../hooks/useBreakpoints";
+import { useIsMounted } from "../../hooks/useIsMounted";
+import { useLatestValue } from "../../hooks/useLatestValue";
+import { usePrevious } from "../../hooks/usePrevious";
+import { toCssVariables } from "../../lib/helpers";
+import { Button } from "../Button";
+import { Reload } from "../Icon";
+import { Tooltip } from "../Tooltip";
+import s from "./Slider.module.css";
+export const Slider = memo((props) => {
+    const { className, onChange, min, max, step, disabled, value, resetValue, resetTooltip = "Reset to default", onBlur, onFocus, unit, prefixUnit, label, marks: propMarks = [], trackColor, rangeColor, ref: forwardedRef, } = props;
+    const id = useId();
+    const precision = useMemo(() => String(step).split(".")[1]?.length ?? 0, [step]);
+    const [inputValue, setInputValue] = useState(String(value.toFixed(precision)));
+    const setInputValueNumber = useCallback((nextValue) => {
+        setInputValue(nextValue.toFixed(precision));
+    }, [precision]);
+    // prevents input from jumping around while the user is typing
+    const debouncedOnChange = useDebounceCallback(onChange, 250);
+    const [pointerDown, setPointerDown] = useState(false);
+    const isMounted = useIsMounted();
+    // Used to position the input over the thumb
+    const isTabletAndUp = useBreakpoint("md");
+    const inputRef = useRef(null);
+    // The input width is based on the number of characters in the input / font size
+    const inputWidth = Math.max(inputValue.length, 1) * (isTabletAndUp ? 7.8 : 9.5);
+    // Calculate animation duration based on the distance the thumb needs to move
+    // If the pointer is down, it means the user is dragging the thumb and we want
+    // to disable the animation to make the thumb move in sync with the pointer.
+    const percent = (value - min) / (max - min);
+    const previousPercent = usePrevious(percent);
+    const animationDurationMS = !isMounted || pointerDown ? 0 : Math.max(Math.abs(percent - previousPercent) * 300, 100);
+    // We assume that the width of the thumb does not change from render to render
+    // so we can avoid the overhead of watching it with a resize observer.
+    const thumbRef = useRef(null);
+    // It should be exceedingly uncommon to change marks dynamically, and they are unlikely to be a stable array reference from consumers.
+    // We are sorting so we can make assumptions about which marks have the ability to collide with each other.
+    const marks = useMemo(() => [...propMarks].sort((a, b) => a.value - b.value), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Intentionally limiting when this stable value changes to length of marks
+    [propMarks.length]);
+    // We make assumptions about marks in order to efficiently position them
+    useEffect(() => {
+        if (!marks) {
+            return;
+        }
+        const markValues = new Set();
+        for (const mark of marks) {
+            if (mark.value < min || mark.value > max) {
+                throw new Error(`Slider mark value ${mark.value} is out of bounds [${min}, ${max}]`);
+            }
+            if (markValues.has(mark.value)) {
+                throw new Error("Slider marks must have unique values");
+            }
+            markValues.add(mark.value);
+        }
+    }, [marks, max, min]);
+    // Update the value if it is out of bounds due to min/max changes
+    const latestValue = useLatestValue(value);
+    const latestOnChange = useLatestValue(onChange);
+    useEffect(() => {
+        const clamped = clamp(latestValue.current, min, max);
+        if (clamped !== latestValue.current) {
+            latestOnChange.current(clamped);
+            setInputValueNumber(clamped);
+        }
+    }, [max, min, latestValue, latestOnChange, setInputValueNumber]);
+    useEffect(() => {
+        // If the input is focused then the change came from this input we
+        // wait until after they blur before updating the input value to be
+        // the actual value.
+        if (inputRef.current !== document.activeElement) {
+            setInputValueNumber(value);
+        }
+    }, [value, setInputValueNumber]);
+    const handleKeyDown = (evt) => {
+        // https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
+        if (evt.key === "Home") {
+            evt.preventDefault();
+            onChange(min);
+            setInputValueNumber(min);
+        }
+        if (evt.key === "End") {
+            evt.preventDefault();
+            onChange(max);
+            setInputValueNumber(max);
+        }
+        if (evt.key === "ArrowUp") {
+            evt.preventDefault();
+            const multiplier = evt.shiftKey ? 10 : 1;
+            const next = clamp(value + step * multiplier, min, max);
+            onChange(next);
+            setInputValueNumber(next);
+        }
+        if (evt.key === "ArrowDown") {
+            evt.preventDefault();
+            const multiplier = evt.shiftKey ? 10 : 1;
+            const next = clamp(value - step * multiplier, min, max);
+            onChange(next);
+            setInputValueNumber(next);
+        }
+        // Other keyboard actions not tied to normal slider behavior
+        if (evt.key === "Enter" || evt.key === "Escape") {
+            evt.preventDefault();
+            evt.currentTarget.blur();
+        }
+    };
+    const handleInputChange = (evt) => {
+        const nextValue = evt.currentTarget.value.replace(/[^\d.]/, "").trim();
+        let parsed = parseFloat(nextValue || "0");
+        parsed = clamp(parsed, min, max);
+        if (step >= 1) {
+            parsed = Math.floor(parsed);
+        }
+        debouncedOnChange(parsed);
+        setInputValue(nextValue);
+    };
+    const handleInputBlur = (evt) => {
+        let parsed = parseFloat(evt.target.value.trim()) || 0;
+        // If floats are not allowed (based on `step` value) coerce to whole number
+        if (step >= 1) {
+            parsed = Math.floor(parsed);
+        }
+        else {
+            parsed = round(parsed, precision);
+        }
+        // Make sure the final value is within the min/max range (and emit a change if necessary)
+        parsed = clamp(parsed, min, max);
+        if (parsed !== value) {
+            onChange(parsed);
+        }
+        setInputValueNumber(parsed);
+        onBlur?.(evt);
+    };
+    return (_jsxs("div", { className: clsx(s.SliderWrap, className), children: [_jsxs("div", { className: s.SliderLabel, children: [_jsx("label", { htmlFor: id, className: "flex-1", children: label }), resetValue !== undefined && (_jsx(Tooltip, { content: resetTooltip, compact: true, children: _jsx(Button, { size: "2xs", variant: "ghost", color: "secondary", className: s.Reset, "data-hide": disabled || (resetValue === value && !pointerDown), onClick: () => onChange(resetValue), children: _jsx(Reload, {}) }) })), _jsxs("div", { className: s.SliderValue, onClick: () => inputRef.current?.focus(), children: [prefixUnit && _jsx("span", { className: s.ValueUnit, children: prefixUnit }), _jsx("input", { id: id, className: s.ValueInput, ref: inputRef, style: { width: `${Math.ceil(inputWidth)}px` }, onKeyDown: handleKeyDown, value: inputValue, type: "text", onClick: (e) => e.stopPropagation(), onBlur: handleInputBlur, onFocus: (e) => {
+                                    e.currentTarget.setSelectionRange(0, e.currentTarget.value.length);
+                                    onFocus?.(e);
+                                }, onChange: handleInputChange, disabled: disabled }), unit && _jsx("span", { className: s.ValueUnit, children: unit })] })] }), _jsxs("div", { className: s.SliderContainer, children: [_jsxs(RadixSlider.Root, { ref: forwardedRef, className: s.Slider, onValueChange: (values) => onChange(values[0]), min: min, max: max, step: step, disabled: disabled, value: [value], onBlur: onBlur, onFocus: onFocus, onPointerDown: () => setPointerDown(true), onPointerUp: () => setPointerDown(false), style: toCssVariables({
+                            "slider-duration": `${animationDurationMS}ms`,
+                            "slider-track-color": trackColor,
+                            "slider-range-color": rangeColor,
+                        }), children: [_jsx(RadixSlider.Track, { className: s.Track, children: _jsx(RadixSlider.Range, { className: s.Range }) }), _jsx(RadixSlider.Thumb, { className: s.Thumb, ref: thumbRef })] }), marks && _jsx(SliderMarks, { marks: marks, thumbRef: thumbRef, min: min, max: max })] })] }));
+});
+// The minimum difference we enforce between marks, in pixels
+const MINIMUM_MARK_SPACING_PX = 16;
+const SliderMarks = memo(({ marks, thumbRef, min, max }) => {
+    // We seperate the container and measure divs so that our resize observer
+    // does not fire when we adjust the height of the marks container.
+    const marksContainerRef = useRef(null);
+    const measureRef = useRef(null);
+    // We measure the width of the slider within this component so that sliders
+    // without marks do not pay a performance penalty.
+    // @ts-expect-error(2322) -- bug in types: https://github.com/juliencrn/usehooks-ts/issues/663
+    const { width: sliderWidth } = useResizeObserver({ ref: measureRef });
+    useLayoutEffect(() => {
+        // Impossible
+        if (!thumbRef.current || !marksContainerRef.current) {
+            return;
+        }
+        const markElements = Array.from(marksContainerRef.current.querySelectorAll("[data-mark]"));
+        const thumbHalfWidth = thumbRef.current.getBoundingClientRect().width / 2;
+        // Wipe all styles so we can accurately determine the positions of the marks
+        markElements.forEach((markEl) => {
+            markEl.style.width = "";
+            markEl.style.display = "";
+        });
+        const positionMarks = () => {
+            if (!sliderWidth) {
+                return;
+            }
+            markElements.forEach((markEl, index) => {
+                const markValue = marks[index].value;
+                const valuePercent = (markValue - min) / (max - min);
+                const markWidth = markEl.getBoundingClientRect().width;
+                const markHalfWidth = markWidth / 2;
+                // Radix smoothes the width of the thumb over the entire track so
+                // that the thumb is always within bounds. We need to duplicate
+                // this smoothing so that the marks match the observed breakpoints.
+                const smoothedThumb = thumbHalfWidth - valuePercent * (thumbHalfWidth / 0.5);
+                // Calculate where we would naively put the mark based on the value
+                const naiveLeftOffset = valuePercent * sliderWidth;
+                // Add the thumb smoothing, and account for the width of the mark itself
+                let left = naiveLeftOffset + smoothedThumb - markHalfWidth;
+                // Clamp to the left and right bounds of the container
+                left = Math.max(0, Math.min(left, sliderWidth - markWidth));
+                markEl.style.left = `${left}px`;
+            });
+        };
+        const marksHaveCollisions = () => {
+            for (let i = 0; i < markElements.length - 1; i++) {
+                const currentRect = markElements[i].getBoundingClientRect();
+                const nextRect = markElements[i + 1].getBoundingClientRect();
+                if (currentRect.right + MINIMUM_MARK_SPACING_PX > nextRect.left) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        positionMarks();
+        // If we have collisions, try to wrap the content
+        if (marksHaveCollisions()) {
+            markElements.forEach((markEl) => {
+                markEl.style.width = "min-content";
+            });
+            positionMarks();
+            // Hide all marks if we still have collisions
+            if (marksHaveCollisions()) {
+                markElements.forEach((markEl) => {
+                    markEl.style.display = "none";
+                });
+            }
+        }
+        const tallestHeight = Math.max(...markElements.map((markEl) => markEl.getBoundingClientRect().height));
+        // Give our container a height so that we allocate space on the page
+        // for the marks and push down other content when we have to wrap
+        marksContainerRef.current.style.height = tallestHeight > 0 ? `${tallestHeight}px` : "";
+    }, [marks, thumbRef, marksContainerRef, min, max, sliderWidth]);
+    return (_jsx("div", { className: s.MarksContainer, ref: marksContainerRef, children: _jsx("div", { ref: measureRef, children: marks.map((mark) => (_jsx("div", { className: s.Mark, "data-mark": true, children: _jsx("span", { className: s.MarkLabel, children: mark.label }) }, mark.value))) }) }));
+});
+//# sourceMappingURL=Slider.js.map

package/dist/es/components/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sourceRoot":"","sources":["../../../../src/components/Slider/Slider.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport clamp from \"lodash/clamp\"\nimport round from \"lodash/round\"\nimport { Slider as RadixSlider } from \"radix-ui\"\nimport {\n  type ChangeEventHandler,\n  type ElementRef,\n  type FocusEventHandler,\n  type KeyboardEventHandler,\n  memo,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { useDebounceCallback, useResizeObserver } from \"usehooks-ts\"\nimport { useBreakpoint } from \"../../hooks/useBreakpoints\"\nimport { useIsMounted } from \"../../hooks/useIsMounted\"\nimport { useLatestValue } from \"../../hooks/useLatestValue\"\nimport { usePrevious } from \"../../hooks/usePrevious\"\nimport { toCssVariables } from \"../../lib/helpers\"\nimport { Button } from \"../Button\"\nimport { Reload } from \"../Icon\"\nimport { Tooltip } from \"../Tooltip\"\nimport s from \"./Slider.module.css\"\n\nexport type SliderMark = {\n  value: number\n  label: string\n}\n\nexport type SliderProps = {\n  /**\n   * The current value of the slider\n   */\n  value: number\n  /**\n   * The minimum value the slider can have\n   */\n  min: number\n  /**\n   * The maximum value the slider can have\n   */\n  max: number\n  /**\n   * The step increment between slider values\n   */\n  step: number\n  /**\n   * Value that will be offered as a \"reset to default\" option\n   */\n  resetValue?: number\n  /**\n   * String that will be displayed in the tooltip\n   * @default Reset to default\n   */\n  resetTooltip?: string\n  /**\n   * Unit to display next to the slider value (e.g., ms, px)\n   */\n  unit?: string\n  /**\n   * Unit to display to the right of the slider value (e.g., $)\n   */\n  prefixUnit?: string\n  /**\n   * Optional label for the slider, which can be a string or React node.\n   */\n  label?: ReactNode\n  /**\n   * List of marks to display below the slider track\n   */\n  marks?: SliderMark[]\n  /**\n   * Color of the slider track\n   */\n  trackColor?: string\n  /**\n   * Color of the slider progress along the track\n   */\n  rangeColor?: string\n  className?: string\n  disabled?: boolean\n  /**\n   * Callback function invoked when the slider value changes.\n   *\n   * @param value - The new value of the slider.\n   */\n  onChange: (value: number) => void\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  onFocus?: FocusEventHandler<HTMLInputElement>\n  ref?: React.Ref<ElementRef<typeof RadixSlider.Root> | null>\n}\n\nexport const Slider = memo((props: SliderProps) => {\n  const {\n    className,\n    onChange,\n    min,\n    max,\n    step,\n    disabled,\n    value,\n    resetValue,\n    resetTooltip = \"Reset to default\",\n    onBlur,\n    onFocus,\n    unit,\n    prefixUnit,\n    label,\n    marks: propMarks = [],\n    trackColor,\n    rangeColor,\n    ref: forwardedRef,\n  } = props\n  const id = useId()\n  const precision = useMemo(() => String(step).split(\".\")[1]?.length ?? 0, [step])\n  const [inputValue, setInputValue] = useState<string>(String(value.toFixed(precision)))\n  const setInputValueNumber = useCallback(\n    (nextValue: number) => {\n      setInputValue(nextValue.toFixed(precision))\n    },\n    [precision],\n  )\n\n  // prevents input from jumping around while the user is typing\n  const debouncedOnChange = useDebounceCallback(onChange, 250)\n  const [pointerDown, setPointerDown] = useState(false)\n  const isMounted = useIsMounted()\n\n  // Used to position the input over the thumb\n  const isTabletAndUp = useBreakpoint(\"md\")\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // The input width is based on the number of characters in the input / font size\n  const inputWidth = Math.max(inputValue.length, 1) * (isTabletAndUp ? 7.8 : 9.5)\n\n  // Calculate animation duration based on the distance the thumb needs to move\n  // If the pointer is down, it means the user is dragging the thumb and we want\n  // to disable the animation to make the thumb move in sync with the pointer.\n  const percent = (value - min) / (max - min)\n  const previousPercent = usePrevious(percent)\n  const animationDurationMS =\n    !isMounted || pointerDown ? 0 : Math.max(Math.abs(percent - previousPercent) * 300, 100)\n\n  // We assume that the width of the thumb does not change from render to render\n  // so we can avoid the overhead of watching it with a resize observer.\n  const thumbRef = useRef<HTMLDivElement>(null)\n\n  // It should be exceedingly uncommon to change marks dynamically, and they are unlikely to be a stable array reference from consumers.\n  // We are sorting so we can make assumptions about which marks have the ability to collide with each other.\n  const marks = useMemo<SliderMark[]>(\n    () => [...propMarks].sort((a, b) => a.value - b.value),\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- Intentionally limiting when this stable value changes to length of marks\n    [propMarks.length],\n  )\n\n  // We make assumptions about marks in order to efficiently position them\n  useEffect(() => {\n    if (!marks) {\n      return\n    }\n\n    const markValues = new Set<number>()\n\n    for (const mark of marks) {\n      if (mark.value < min || mark.value > max) {\n        throw new Error(`Slider mark value ${mark.value} is out of bounds [${min}, ${max}]`)\n      }\n      if (markValues.has(mark.value)) {\n        throw new Error(\"Slider marks must have unique values\")\n      }\n      markValues.add(mark.value)\n    }\n  }, [marks, max, min])\n\n  // Update the value if it is out of bounds due to min/max changes\n  const latestValue = useLatestValue(value)\n  const latestOnChange = useLatestValue(onChange)\n  useEffect(() => {\n    const clamped = clamp(latestValue.current, min, max)\n    if (clamped !== latestValue.current) {\n      latestOnChange.current(clamped)\n      setInputValueNumber(clamped)\n    }\n  }, [max, min, latestValue, latestOnChange, setInputValueNumber])\n\n  useEffect(() => {\n    // If the input is focused then the change came from this input we\n    // wait until after they blur before updating the input value to be\n    // the actual value.\n    if (inputRef.current !== document.activeElement) {\n      setInputValueNumber(value)\n    }\n  }, [value, setInputValueNumber])\n\n  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (evt) => {\n    // https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/\n    if (evt.key === \"Home\") {\n      evt.preventDefault()\n      onChange(min)\n      setInputValueNumber(min)\n    }\n    if (evt.key === \"End\") {\n      evt.preventDefault()\n      onChange(max)\n      setInputValueNumber(max)\n    }\n    if (evt.key === \"ArrowUp\") {\n      evt.preventDefault()\n      const multiplier = evt.shiftKey ? 10 : 1\n      const next = clamp(value + step * multiplier, min, max)\n      onChange(next)\n      setInputValueNumber(next)\n    }\n    if (evt.key === \"ArrowDown\") {\n      evt.preventDefault()\n      const multiplier = evt.shiftKey ? 10 : 1\n      const next = clamp(value - step * multiplier, min, max)\n      onChange(next)\n      setInputValueNumber(next)\n    }\n\n    // Other keyboard actions not tied to normal slider behavior\n    if (evt.key === \"Enter\" || evt.key === \"Escape\") {\n      evt.preventDefault()\n      evt.currentTarget.blur()\n    }\n  }\n\n  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (evt) => {\n    const nextValue = evt.currentTarget.value.replace(/[^\\d.]/, \"\").trim()\n    let parsed = parseFloat(nextValue || \"0\")\n    parsed = clamp(parsed, min, max)\n    if (step >= 1) {\n      parsed = Math.floor(parsed)\n    }\n    debouncedOnChange(parsed)\n    setInputValue(nextValue)\n  }\n\n  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (evt) => {\n    let parsed = parseFloat(evt.target.value.trim()) || 0\n    // If floats are not allowed (based on `step` value) coerce to whole number\n    if (step >= 1) {\n      parsed = Math.floor(parsed)\n    } else {\n      parsed = round(parsed, precision)\n    }\n    // Make sure the final value is within the min/max range (and emit a change if necessary)\n    parsed = clamp(parsed, min, max)\n    if (parsed !== value) {\n      onChange(parsed)\n    }\n    setInputValueNumber(parsed)\n    onBlur?.(evt)\n  }\n\n  return (\n    <div className={clsx(s.SliderWrap, className)}>\n      <div className={s.SliderLabel}>\n        <label htmlFor={id} className=\"flex-1\">\n          {label}\n        </label>\n        {resetValue !== undefined && (\n          <Tooltip content={resetTooltip} compact>\n            <Button\n              size=\"2xs\"\n              variant=\"ghost\"\n              color=\"secondary\"\n              className={s.Reset}\n              data-hide={disabled || (resetValue === value && !pointerDown)}\n              onClick={() => onChange(resetValue)}\n            >\n              <Reload />\n            </Button>\n          </Tooltip>\n        )}\n        <div className={s.SliderValue} onClick={() => inputRef.current?.focus()}>\n          {prefixUnit && <span className={s.ValueUnit}>{prefixUnit}</span>}\n          <input\n            id={id}\n            className={s.ValueInput}\n            ref={inputRef}\n            style={{ width: `${Math.ceil(inputWidth)}px` }}\n            onKeyDown={handleKeyDown}\n            value={inputValue}\n            type=\"text\"\n            onClick={(e) => e.stopPropagation()}\n            onBlur={handleInputBlur}\n            onFocus={(e) => {\n              e.currentTarget.setSelectionRange(0, e.currentTarget.value.length)\n              onFocus?.(e)\n            }}\n            onChange={handleInputChange}\n            disabled={disabled}\n          />\n          {unit && <span className={s.ValueUnit}>{unit}</span>}\n        </div>\n      </div>\n      <div className={s.SliderContainer}>\n        <RadixSlider.Root\n          ref={forwardedRef}\n          className={s.Slider}\n          onValueChange={(values) => onChange(values[0])}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          value={[value]}\n          onBlur={onBlur}\n          onFocus={onFocus}\n          onPointerDown={() => setPointerDown(true)}\n          onPointerUp={() => setPointerDown(false)}\n          style={toCssVariables({\n            \"slider-duration\": `${animationDurationMS}ms`,\n            \"slider-track-color\": trackColor,\n            \"slider-range-color\": rangeColor,\n          })}\n        >\n          <RadixSlider.Track className={s.Track}>\n            <RadixSlider.Range className={s.Range} />\n          </RadixSlider.Track>\n          <RadixSlider.Thumb className={s.Thumb} ref={thumbRef} />\n        </RadixSlider.Root>\n        {marks && <SliderMarks marks={marks} thumbRef={thumbRef} min={min} max={max} />}\n      </div>\n    </div>\n  )\n})\n\ntype MarksProps = {\n  marks: SliderMark[]\n  thumbRef: React.RefObject<HTMLDivElement | null>\n  min: number\n  max: number\n}\n\n// The minimum difference we enforce between marks, in pixels\nconst MINIMUM_MARK_SPACING_PX = 16\n\nconst SliderMarks = memo(({ marks, thumbRef, min, max }: MarksProps) => {\n  // We seperate the container and measure divs so that our resize observer\n  // does not fire when we adjust the height of the marks container.\n  const marksContainerRef = useRef<HTMLDivElement>(null)\n  const measureRef = useRef<HTMLDivElement>(null)\n\n  // We measure the width of the slider within this component so that sliders\n  // without marks do not pay a performance penalty.\n  // @ts-expect-error(2322) -- bug in types: https://github.com/juliencrn/usehooks-ts/issues/663\n  const { width: sliderWidth } = useResizeObserver({ ref: measureRef })\n\n  useLayoutEffect(() => {\n    // Impossible\n    if (!thumbRef.current || !marksContainerRef.current) {\n      return\n    }\n\n    const markElements = Array.from(\n      marksContainerRef.current.querySelectorAll(\"[data-mark]\"),\n    ) as HTMLDivElement[]\n\n    const thumbHalfWidth = thumbRef.current.getBoundingClientRect().width / 2\n\n    // Wipe all styles so we can accurately determine the positions of the marks\n    markElements.forEach((markEl) => {\n      markEl.style.width = \"\"\n      markEl.style.display = \"\"\n    })\n\n    const positionMarks = () => {\n      if (!sliderWidth) {\n        return\n      }\n\n      markElements.forEach((markEl, index) => {\n        const markValue = marks[index].value\n        const valuePercent = (markValue - min) / (max - min)\n        const markWidth = markEl.getBoundingClientRect().width\n        const markHalfWidth = markWidth / 2\n\n        // Radix smoothes the width of the thumb over the entire track so\n        // that the thumb is always within bounds. We need to duplicate\n        // this smoothing so that the marks match the observed breakpoints.\n        const smoothedThumb = thumbHalfWidth - valuePercent * (thumbHalfWidth / 0.5)\n\n        // Calculate where we would naively put the mark based on the value\n        const naiveLeftOffset = valuePercent * sliderWidth\n\n        // Add the thumb smoothing, and account for the width of the mark itself\n        let left = naiveLeftOffset + smoothedThumb - markHalfWidth\n\n        // Clamp to the left and right bounds of the container\n        left = Math.max(0, Math.min(left, sliderWidth - markWidth))\n\n        markEl.style.left = `${left}px`\n      })\n    }\n\n    const marksHaveCollisions = () => {\n      for (let i = 0; i < markElements.length - 1; i++) {\n        const currentRect = markElements[i].getBoundingClientRect()\n        const nextRect = markElements[i + 1].getBoundingClientRect()\n\n        if (currentRect.right + MINIMUM_MARK_SPACING_PX > nextRect.left) {\n          return true\n        }\n      }\n      return false\n    }\n\n    positionMarks()\n\n    // If we have collisions, try to wrap the content\n    if (marksHaveCollisions()) {\n      markElements.forEach((markEl) => {\n        markEl.style.width = \"min-content\"\n      })\n\n      positionMarks()\n\n      // Hide all marks if we still have collisions\n      if (marksHaveCollisions()) {\n        markElements.forEach((markEl) => {\n          markEl.style.display = \"none\"\n        })\n      }\n    }\n\n    const tallestHeight = Math.max(\n      ...markElements.map((markEl) => markEl.getBoundingClientRect().height),\n    )\n\n    // Give our container a height so that we allocate space on the page\n    // for the marks and push down other content when we have to wrap\n    marksContainerRef.current.style.height = tallestHeight > 0 ? `${tallestHeight}px` : \"\"\n  }, [marks, thumbRef, marksContainerRef, min, max, sliderWidth])\n\n  return (\n    <div className={s.MarksContainer} ref={marksContainerRef}>\n      <div ref={measureRef}>\n        {marks.map((mark) => (\n          <div key={mark.value} className={s.Mark} data-mark>\n            <span className={s.MarkLabel}>{mark.label}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n})\n"]}