@eightshift/ui-components 5.6.1 → 6.0.0

package/dist/components/slider/slider.js

@@ -1,12 +1,12 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-cvK1vxO7.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-DWVaNd2E.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-DfU6bRtH.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-CL5CM9S8.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
-import { useState, useContext } from "react";
-import { generateMarkers } from "./utils.js";
+import { generateMarkers, generateGridTemplate } from "./utils.js";
+import { HStack } from "../layout/hstack.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-0B6wWuDe.js";
 /**
  * A single/multi-thumb slider component.
  *
@@ -22,7 +22,6 @@ import { generateMarkers } from "./utils.js";
  * @param {Number} [props.step=1] - The step value of the slider.
  * @param {Number} [props.startPoint] - The starting point of the slider.
  * @param {SliderMarkerType} [props.markers] - The markers to display on the slider. If `true`, markers are auto-generated, with labels. If set to `dots`, markers are auto-generated, but do not show labels next to dots. If an object is provided, the keys are the values of the markers, and the values are the labels.
- * @param {boolean} [props.noActiveHighlight=false] - If `true`, the highlight of the active value will not be displayed.
  * @param {Number | Number[]} props.value - The current value of the slider.
  * @param {Function} props.onChange - Function to run when the value changes.
  * @param {Function} props.onChangeEnd - Function to run when the value change ends.
@@ -33,9 +32,13 @@ import { generateMarkers } from "./utils.js";
  * @param {JSX.Element} [props.after] - Element to display after the slider.
  * @param {string[]} [props.thumbLabels] - ARIA labels for the thumbs.
  * @param {Function} [props.thumbContent] - If provided, the function will be called with the current value of the thumb, and the return value will be displayed within the thumb. `(currentIndex: number) => JSX.Element`.
+ * @param {Function} [props.tooltipContent] - If provided, the function will format the tooltip content. `(value) => JSX.Element`.
  * @param {string} [props.labelClassName] - Additional classes to pass to the label.
  * @param {Object<string, any>} [props.trackStyle] - Additional style for the track.
  * @param {Number} [props.markerStep] - If provided, this value is used to generate markers instead of the step value. Useful when using small steps with a larger range.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+ * @param {boolean} [props.trackBgGradientSupport] - If `true`, parts of the track will get additional background size and position settings to make the gradient more seamless. Supported only in horizontal mode. BETA!
+ * @param {boolean} [props.noActiveHighlight] - If `true`, the active area highlight will not be shown.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Slider component.
@@ -61,9 +64,8 @@ const Slider = (props) => {
     min = 0,
     max = 100,
     step = 1,
-    startPoint,
+    startPoint: rawStartPoint,
     markers,
-    noActiveHighlight = false,
     value,
     onChange,
     onChangeEnd,
@@ -74,16 +76,24 @@ const Slider = (props) => {
     after,
     thumbLabels,
     thumbContent,
+    tooltipContent = (value2) => value2,
     labelClassName,
     trackStyle,
+    trackContainerStyle,
+    trackBgGradientSupport,
+    noActiveHighlight,
     markerStep = step,
+    flat,
     hidden,
     ...other
   } = props;
-  const [currentThumbIndex, setCurrentThumbIndex] = useState(-1);
   if (hidden) {
     return null;
   }
+  let startPoint = rawStartPoint;
+  if (Array.isArray(value) && rawStartPoint) {
+    startPoint = null;
+  }
   let generatedMarkers = {};
   if (typeof markers === "object" && Object.keys(markers).length > 0) {
     generatedMarkers = markers;
@@ -91,8 +101,9 @@ const Slider = (props) => {
   if (markers === true || markers === "dots") {
     generatedMarkers = generateMarkers(min, max, markerStep);
   }
-  const markerEntries = Object.entries(generatedMarkers);
+  const markerEntries = Object.entries(generatedMarkers).toSorted((a, b) => parseFloat(a[0]) - parseFloat(b[0]));
   const markerData = vertical ? markerEntries.toReversed() : markerEntries;
+  const isRange = Array.isArray(value);
   return /* @__PURE__ */ jsx(
     $6f909507e6374d18$export$472062a354075cee,
     {
@@ -115,231 +126,280 @@ const Slider = (props) => {
           help,
           actions: /* @__PURE__ */ jsxs(Fragment, { children: [
             actions,
-            !inputField && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es:text-xs es:tabular-nums es:text-secondary-600"), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ") }),
-            inputField && /* @__PURE__ */ jsx(
-              NumberInputField,
+            (!inputField || inputField && isRange) && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es:text-xs es:tabular-nums es:text-secondary-600"), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ") }),
+            inputField && !isRange && /* @__PURE__ */ jsx(
+              NumberPicker,
               {
-                fieldIndex: Array.isArray(value) ? currentThumbIndex : 0,
+                "aria-label": label || __("Slider value", "eightshift-ui-components"),
+                value,
+                onChange,
                 min,
                 max,
                 step,
-                focusedThumb: currentThumbIndex,
-                setFocusedThumb: setCurrentThumbIndex
+                size: "small"
               }
             )
           ] }),
           labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
           className: labelClassName,
           children: /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-center es:gap-2.5 es:space-y-0!", vertical && "es:flex-col"), children: [
-            before && /* @__PURE__ */ jsx("div", { className: "es:flex es:shrink-0 es:items-center es:gap-1", children: before }),
-            /* @__PURE__ */ jsx($6f909507e6374d18$export$105594979f116971, { className: clsx("es:isolate es:grid es:grid-cols-1 es:grid-rows-1", vertical ? "es:mx-auto es:h-40 es:w-4" : "es:h-4 es:w-full es:grow"), children: ({ state }) => {
-              let activeBarLeft;
-              let activeBarBottom;
-              let activeBarWidth;
-              let activeBarHeight;
-              let activeBarOffset = false;
-              let shouldRoundStart = false;
-              let shouldRoundEnd = false;
-              const currValue = state.getThumbValue(0);
-              if (vertical && !noActiveHighlight) {
-                if (Array.isArray(value)) {
-                  activeBarBottom = state.getThumbPercent(0) * 100;
-                  activeBarHeight = state.getThumbPercent(value.length - 1) * 100 - activeBarBottom;
-                } else if (startPoint && currValue >= startPoint) {
-                  activeBarBottom = state.getValuePercent(startPoint) * 100;
-                  activeBarHeight = state.getThumbPercent(0) * 100 - activeBarBottom;
-                  activeBarOffset = true;
-                } else if (startPoint && currValue < startPoint) {
-                  activeBarBottom = state.getThumbPercent(0) * 100;
-                  activeBarHeight = state.getValuePercent(startPoint) * 100 - activeBarBottom;
-                } else if (min < 0 && currValue >= 0) {
-                  activeBarBottom = state.getValuePercent(0) * 100;
-                  activeBarHeight = state.getThumbPercent(0) * 100 - activeBarBottom;
-                } else if (min < 0 && currValue < 0) {
-                  activeBarBottom = state.getThumbPercent(0) * 100;
-                  activeBarHeight = state.getValuePercent(0) * 100 - activeBarBottom;
-                } else {
-                  activeBarBottom = state.getValuePercent(min) * 100;
-                  activeBarHeight = state.getThumbPercent(0) * 100;
-                  shouldRoundEnd = true;
+            before && /* @__PURE__ */ jsx(HStack, { children: before }),
+            /* @__PURE__ */ jsx($6f909507e6374d18$export$105594979f116971, { className: clsx("es:isolate", vertical && "es:mx-auto es:h-48", !vertical && "es:grow"), children: ({ state }) => {
+              const thumbPositions = state.values.map((_, i) => Math.round(state.getThumbPercent(i) * 100));
+              let gridTemplate = generateGridTemplate(thumbPositions, startPoint ? [startPoint] : [], { spaceBetween: 3 });
+              if (vertical) {
+                gridTemplate.reverse();
+              }
+              const tracks = gridTemplate.map((v) => {
+                if (v.startsWith("minmax")) {
+                  return parseFloat(v.replace("minmax(0, ", "").replace("fr)", ""));
+                }
+                if (v.endsWith("fr")) {
+                  return parseFloat(v.replace("fr", ""));
                 }
-              } else if (!noActiveHighlight) {
-                if (Array.isArray(value)) {
-                  activeBarLeft = state.getThumbPercent(0) * 100;
-                  activeBarWidth = state.getThumbPercent(value.length - 1) * 100 - activeBarLeft;
-                } else if (startPoint && currValue >= startPoint) {
-                  activeBarLeft = state.getValuePercent(startPoint) * 100;
-                  activeBarWidth = state.getThumbPercent(0) * 100 - activeBarLeft;
-                } else if (startPoint && currValue < startPoint) {
-                  activeBarLeft = state.getThumbPercent(0) * 100;
-                  activeBarWidth = state.getValuePercent(startPoint) * 100 - activeBarLeft;
-                } else if (min < 0 && currValue >= 0) {
-                  activeBarLeft = state.getValuePercent(0) * 100;
-                  activeBarWidth = state.getThumbPercent(0) * 100 - activeBarLeft;
-                  activeBarOffset = true;
-                } else if (min < 0 && currValue < 0) {
-                  activeBarLeft = state.getThumbPercent(0) * 100;
-                  activeBarWidth = state.getValuePercent(0) * 100 - activeBarLeft;
-                } else {
-                  activeBarLeft = state.getValuePercent(min) * 100;
-                  activeBarWidth = state.getThumbPercent(0) * 100;
-                  shouldRoundStart = true;
+                return null;
+              });
+              const trackIndices = gridTemplate.map((v, index) => {
+                if (v.startsWith("minmax") || v.endsWith("fr")) {
+                  return index;
                 }
+                return null;
+              }).filter(Boolean);
+              const markerIndices = gridTemplate.map((colWidth, index) => {
+                if (colWidth === "auto" || colWidth.endsWith("px")) {
+                  return index + 1;
+                }
+                return null;
+              }).filter(Boolean);
+              if (vertical) {
+                markerIndices.reverse();
               }
-              return /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "es:relative es:col-start-1 es:row-start-1 es:rounded-full es:border",
-                      !vertical && "es:h-1.5 es:w-full es:self-center",
-                      vertical && "es:h-full es:w-1.5 es:flex-col es:justify-self-center",
-                      disabled ? "es:border-secondary-200 es:bg-white" : "es:border-secondary-300 es:bg-secondary-50 es:shadow-sm"
-                    ),
-                    style: trackStyle
-                  }
-                ),
-                !noActiveHighlight && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "es:absolute es:col-start-1 es:row-start-1 es:border",
-                      !vertical && "es:h-1.5 es:w-full es:self-center",
-                      vertical && "es:h-full es:w-1.5 es:flex-col es:justify-self-center",
-                      !vertical && shouldRoundStart && "es:rounded-l-full",
-                      !vertical && shouldRoundEnd && "es:rounded-r-full",
-                      vertical && shouldRoundStart && "es:rounded-t-full",
-                      vertical && shouldRoundEnd && "es:rounded-b-full",
-                      !vertical && activeBarOffset && "es:-translate-x-px",
-                      vertical && activeBarOffset && "es:translate-y-px",
-                      disabled ? "es:border-secondary-200 es:bg-secondary-50" : "es:border-accent-500 es:bg-accent-500/30"
-                    ),
-                    style: {
-                      bottom: vertical ? `${activeBarBottom}%` : null,
-                      height: vertical ? `${activeBarHeight}%` : null,
-                      width: vertical ? null : `${activeBarWidth}%`,
-                      left: vertical ? null : `${activeBarLeft}%`
-                    }
-                  }
-                ),
-                markers && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "es:relative es:col-start-1 es:row-start-1",
-                      !vertical && "es:h-1 es:w-full es:self-center",
-                      vertical && "es:h-full es:w-1 es:flex-col es:justify-self-center"
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx("es:grid", trackBgGradientSupport && "es:@container", vertical && "es:justify-items-center es:h-full", !vertical && "es:items-center"),
+                  style: {
+                    gridTemplateColumns: vertical ? "1fr" : gridTemplate.join(" "),
+                    gridTemplateRows: vertical ? gridTemplate.join(" ") : "1fr",
+                    ...trackContainerStyle
+                  },
+                  children: [
+                    markers && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: clsx(
+                          "es:flex es:justify-between",
+                          !vertical && ["es:w-fill es:self-center", "es:row-1 es:mx-0.75"],
+                          vertical && ["es:h-fill es:flex es:flex-col es:justify-self-center", "es:col-1 es:my-0.75"]
+                        ),
+                        style: {
+                          gridColumn: vertical ? null : `1 / span ${gridTemplate.length}`,
+                          gridRow: vertical ? `1 / span ${gridTemplate.length}` : null
+                        },
+                        children: markerData.map(([rawDotValue, labelData], index) => {
+                          const dotValue = parseFloat(rawDotValue);
+                          let isWithinActiveBar = false;
+                          if (isRange) {
+                            isWithinActiveBar = dotValue > state.values[0] && dotValue < state.values.at(-1);
+                          } else if (startPoint) {
+                            if (state.values[0] < startPoint) {
+                              isWithinActiveBar = dotValue > state.values[0] && dotValue <= startPoint;
+                            } else {
+                              isWithinActiveBar = dotValue >= startPoint && dotValue < state.values[0];
+                            }
+                          } else {
+                            isWithinActiveBar = dotValue < state.values[0];
+                          }
+                          return /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: clsx(
+                                "es:relative",
+                                "es:size-0.75 es:place-self-center es:rounded-2xl",
+                                !disabled && isWithinActiveBar && "es:bg-accent-50",
+                                !disabled && !isWithinActiveBar && "es:bg-surface-500",
+                                disabled && isWithinActiveBar && "es:bg-secondary-300",
+                                disabled && !isWithinActiveBar && "es:bg-secondary-400",
+                                state.values.includes(dotValue) && "es:opacity-0"
+                              ),
+                              children: /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: clsx(
+                                    "es:absolute es:transition",
+                                    !vertical && "es:top-5 es:-translate-x-1/4 es:-rotate-90 es:text-end",
+                                    vertical && "es:left-5 es:-translate-y-1/4 es:text-start",
+                                    "es:select-none es:text-10 es:tracking-wide es:tabular-nums",
+                                    isWithinActiveBar ? "es:text-surface-400" : "es:text-surface-300",
+                                    disabled && "es:opacity-0"
+                                  ),
+                                  children: markers && markers !== "dots" && labelData
+                                }
+                              )
+                            },
+                            index
+                          );
+                        })
+                      }
                     ),
-                    children: markerData.map(([rawDotValue, labelData], index) => {
-                      const dotValue = parseFloat(rawDotValue);
-                      let isWithinActiveBar = false;
-                      if (Array.isArray(value)) {
-                        isWithinActiveBar = value[0] <= dotValue && dotValue <= value[value.length - 1];
-                      } else if (startPoint && dotValue >= startPoint) {
-                        isWithinActiveBar = dotValue >= startPoint && dotValue <= currValue && dotValue !== startPoint;
-                      } else if (startPoint && dotValue < startPoint) {
-                        isWithinActiveBar = dotValue <= startPoint && dotValue >= currValue && dotValue !== startPoint;
-                      } else if (min < 0 && dotValue >= 0) {
-                        isWithinActiveBar = dotValue >= 0 && dotValue <= currValue && dotValue !== 0;
-                      } else if (min < 0 && dotValue < 0) {
-                        isWithinActiveBar = dotValue <= 0 && dotValue >= currValue && dotValue !== 0;
-                      } else {
-                        isWithinActiveBar = dotValue <= currValue && dotValue > min && dotValue < max;
+                    state.values.map((_, i) => {
+                      return /* @__PURE__ */ jsxs(
+                        $6f909507e6374d18$export$2c1b491743890dec,
+                        {
+                          index: i,
+                          "aria-label": thumbLabels?.[i],
+                          className: clsx(
+                            !vertical && ["es:h-10 es:w-0.75", "es:row-1"],
+                            vertical && ["es:w-10 es:h-0.75", "es:col-1"],
+                            "es:z-20",
+                            "es:static! es:rounded-md es:transition es:duration-300",
+                            "es:origin-center",
+                            "es:hover:ring-[0.25px] es:focus-visible:ring-[0.5px] es:dragging:ring-[1px] es:ring-accent-500",
+                            "es:transform-none!",
+                            "es:dragging:es:bg-accent-600 es:disabled:bg-secondary-400",
+                            "es:focus-visible:outline-2 es:outline-offset-2 es:outline-accent-500/40",
+                            "es:bg-accent-500",
+                            "es:hover:ring-accent-600",
+                            "es:dragging:bg-accent-600 es:dragging:ring-accent-600",
+                            !disabled && "es:hover:not-dragging:cursor-grab",
+                            "es:justify-self-center",
+                            !flat && !disabled && "es:shadow-xs es:shadow-black/5"
+                          ),
+                          style: {
+                            gridColumn: vertical ? null : markerIndices[i],
+                            gridRow: vertical ? markerIndices[i] : null
+                          },
+                          children: [
+                            thumbContent && thumbContent(i),
+                            /* @__PURE__ */ jsx(AnimatePresence, { children: i === state.focusedThumb && /* @__PURE__ */ jsx(
+                              motion.div,
+                              {
+                                className: clsx(
+                                  "es:absolute es:text-nowrap es:w-fit es:min-w-5 es:h-6",
+                                  !vertical && "es:bottom-12 es:-translate-x-1/2",
+                                  vertical && "es:left-12 es:-translate-y-1/2",
+                                  "es:bg-surface-50/80 es:text-surface-700",
+                                  "es:backdrop-blur-xs",
+                                  "es:text-12 es:leading-none",
+                                  "es:py-1 es:px-2 es:rounded-lg",
+                                  "es:text-center",
+                                  "es:line-clamp-1",
+                                  "es:flex es:items-center es:justify-center es:gap-1",
+                                  "es:shadow",
+                                  "es:icon:size-2 es:icon:stroke-3"
+                                ),
+                                initial: { y: 2, opacity: 0, scale: 0.85 },
+                                animate: { y: 0, opacity: 1, scale: 1 },
+                                exit: { y: 6, opacity: 0, scale: 0.85 },
+                                children: tooltipContent(state.values[i])
+                              }
+                            ) })
+                          ]
+                        },
+                        i
+                      );
+                    }),
+                    gridTemplate.map((colWidth, i) => {
+                      if (colWidth === "auto" || colWidth.endsWith("px")) {
+                        return null;
+                      }
+                      if (colWidth.endsWith("rem")) {
+                        return null;
+                      }
+                      let val = i + 1;
+                      let activeStyle = [
+                        "es:transition es:duration-300",
+                        !flat && !disabled && "es:shadow-xs es:shadow-black/5",
+                        !disabled && [
+                          "es:bg-accent-500 es:from-accent-100/15 es:to-accent-100/0 es:from-25%",
+                          vertical ? "es:bg-linear-to-r" : "es:bg-linear-to-b",
+                          "es:inset-ring es:inset-ring-accent-700/10",
+                          "es:inset-shadow-sm es:inset-shadow-accent-50/30"
+                        ],
+                        disabled && "es:bg-secondary-400"
+                      ];
+                      const inactiveStyle = [
+                        !disabled && [
+                          "es:bg-surface-200",
+                          vertical ? "es:bg-linear-to-r" : "es:bg-linear-to-b",
+                          "es:from-surface-700/0 es:to-surface-700/5 es:from-25%",
+                          "es:inset-ring es:inset-ring-surface-300/20"
+                        ],
+                        disabled && "es:bg-secondary-200"
+                      ];
+                      if (noActiveHighlight) {
+                        activeStyle = inactiveStyle;
+                      }
+                      const extraStyles = {};
+                      if (trackBgGradientSupport) {
+                        let bgOffset = 0;
+                        if (i === trackIndices.at(-1)) {
+                          bgOffset = 100;
+                        } else if (i > 0) {
+                          bgOffset = tracks.slice(0, startPoint && state.values[0] > startPoint ? i + 1 : i).reduce((acc, val2) => val2 ? acc + val2 : acc, 0);
+                        }
+                        extraStyles.backgroundSize = "100cqw 100%";
+                        extraStyles.backgroundPositionX = `${bgOffset}%`;
                       }
                       return /* @__PURE__ */ jsx(
                         "div",
                         {
                           className: clsx(
-                            "es:absolute",
-                            vertical ? "es:h-px es:w-1" : "es:h-1 es:w-px es:translate-x-1/2",
-                            !(dotValue === min || dotValue === max || dotValue === startPoint && !noActiveHighlight || min < 0 && dotValue === 0 && !noActiveHighlight || isWithinActiveBar) && "es:bg-secondary-300",
-                            !noActiveHighlight && isWithinActiveBar && "es:bg-accent-500/75"
+                            "es:rounded-sm",
+                            "es:transition es:duration-300 es:ease-spring-smooth",
+                            !flat && !disabled && "es:shadow-xs es:shadow-black/5",
+                            !vertical && [
+                              "es:h-6 es:row-1",
+                              i === 0 && "es:rounded-l-xl",
+                              i === gridTemplate.length - 1 && "es:rounded-r-xl",
+                              !isRange && [
+                                !startPoint && [state.values[0] > min && i < markerIndices[0] && activeStyle, i > markerIndices[0] && inactiveStyle],
+                                startPoint && [
+                                  state.values[0] < startPoint && i === markerIndices[0] + 1 && activeStyle,
+                                  state.values[0] > startPoint && i === markerIndices[0] - 3 && activeStyle,
+                                  state.values[0] <= startPoint && i !== markerIndices[0] + 1 && inactiveStyle,
+                                  state.values[0] >= startPoint && i !== markerIndices[0] - 3 && inactiveStyle
+                                ]
+                              ],
+                              isRange && [i > markerIndices[0] && i < markerIndices.at(-1) && activeStyle, (i < markerIndices[0] || i > markerIndices.at(-1)) && inactiveStyle]
+                            ],
+                            vertical && [
+                              "es:w-6 es:col-1",
+                              i === 0 && "es:rounded-t-xl",
+                              i === gridTemplate.length - 1 && "es:rounded-b-xl",
+                              !isRange && [
+                                !startPoint && [state.values[0] > min && i > markerIndices[0] && activeStyle, i < markerIndices.at(-1) && inactiveStyle],
+                                startPoint && [
+                                  state.values.at(-1) > startPoint && i === markerIndices.at(-1) + 1 && activeStyle,
+                                  state.values.at(-1) < startPoint && i === markerIndices.at(-1) - 3 && activeStyle,
+                                  state.values.at(-1) >= startPoint && i !== markerIndices.at(-1) + 1 && inactiveStyle,
+                                  state.values.at(-1) <= startPoint && i !== markerIndices.at(-1) - 3 && inactiveStyle
+                                ]
+                              ],
+                              isRange && [i < markerIndices[0] && i > markerIndices.at(-1) && activeStyle, (i > markerIndices[0] || i < markerIndices.at(-1)) && inactiveStyle]
+                            ]
                           ),
                           style: {
-                            left: vertical ? null : `${state.getValuePercent(dotValue) * 100}%`,
-                            top: vertical ? `calc(${state.getValuePercent(dotValue) * 100}%)` : null
-                          },
-                          children: /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              className: clsx(
-                                "es:absolute es:select-none es:text-xs es:transition-colors",
-                                vertical ? "es:left-3.5 es:top-0 es:-translate-y-1/2" : "es:left-0 es:top-2.5 es:-translate-x-1/2",
-                                (Array.isArray(value) ? value.includes(Number(dotValue)) : value === Number(dotValue) && !disabled) ? "es:text-accent-700" : "es:text-secondary-300"
-                              ),
-                              children: markers && markers !== "dots" && labelData
-                            }
-                          )
+                            gridColumn: vertical ? null : val,
+                            gridRow: vertical ? val : null,
+                            ...extraStyles,
+                            ...trackStyle
+                          }
                         },
-                        index
+                        i
                       );
                     })
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "es:relative es:col-start-1 es:row-start-1 es:p-px", children: state.values.map((_, i) => /* @__PURE__ */ jsxs(
-                  $6f909507e6374d18$export$2c1b491743890dec,
-                  {
-                    index: i,
-                    "aria-label": thumbLabels?.[i],
-                    className: clsx(
-                      "es:absolute es:size-3.5 es:rounded-full es:border es:transition es:duration-300",
-                      vertical ? "es:translate-x-1/2!" : "es:translate-y-1/2!",
-                      "es:shadow dragging:es:bg-accent-600 es:disabled:border-secondary-200 es:disabled:bg-secondary-100 es:disabled:shadow-none",
-                      "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                      "es:border-accent-600 es:bg-accent-500 es:shadow-accent-600/50",
-                      "es:hover:cursor-grab dragging:es:cursor-grabbing"
-                    ),
-                    onFocus: () => {
-                      if (state.values.length < 2) {
-                        return;
-                      }
-                      setCurrentThumbIndex(i);
-                    },
-                    children: [
-                      inputField && state.values.length > 1 && currentThumbIndex === i && /* @__PURE__ */ jsx("div", { className: "es:m-0.5 es:size-2 es:rounded-full es:bg-accent-100" }),
-                      thumbContent && thumbContent(i)
-                    ]
-                  },
-                  i
-                )) })
-              ] });
+                  ]
+                }
+              );
             } }),
-            after && /* @__PURE__ */ jsx("div", { className: "es:flex es:shrink-0 es:items-center es:gap-1", children: after })
+            after && /* @__PURE__ */ jsx(HStack, { children: after })
           ] })
         }
       )
     }
   );
 };
-const NumberInputField = (props) => {
-  const { ...other } = props;
-  const state = useContext($6f909507e6374d18$export$1e7083018727fa60);
-  const labelProps = $64fa3d84918910a7$export$fabf2dc03a41866e($01b77f81d0f07f68$export$75b6ee27786ba447);
-  const isSingleValue = state.values.length === 1;
-  const fieldIndex = isSingleValue ? 0 : props.focusedThumb ?? 0;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      NumberPicker,
-      {
-        "aria-labelledby": labelProps.id,
-        value: state.values[fieldIndex] ?? null,
-        onChange: (v) => state.setThumbValue(fieldIndex, v),
-        size: "compact",
-        min: state.getThumbMinValue(fieldIndex),
-        max: state.getThumbMaxValue(fieldIndex),
-        onBlur: () => {
-          if (isSingleValue) {
-            return;
-          }
-          props.setFocusedThumb(-1);
-        },
-        className: fieldIndex === -1 && !isSingleValue ? "es:invisible" : "",
-        ...other
-      }
-    ),
-    fieldIndex === -1 && !isSingleValue && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es:text-xs es:tabular-nums es:text-secondary-600"), children: ({ state: state2 }) => state2.values.map((_, i) => state2.getThumbValueLabel(i)).join(" – ") })
-  ] });
-};
 export {
   Slider
 };

package/dist/components/slider/utils.js

@@ -1,5 +1,5 @@
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
-import { _ as __, a as _n } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __, a as _n } from "../../default-i18n-CnQeC5Pl.js";
 /**
  * Generates an array of markers based on the provided minimum and maximum values and step.
  * If the step is less than 10, only markers divisible by 5 and 10 are included.
@@ -89,7 +89,38 @@ const getColumnConfigOutputText = (columns, offset, width, showOuterAsGutter = f
   }
   return sprintf(_n("%s col from %s", "%s cols from %s", width, "eightshift-ui-components"), width, showOuterAsGutter ? offset - 1 : offset);
 };
+const generateGridTemplate = (points = [], splitPoint = null, { spaceBetween = 0, pointWidth = 3, vertical = false } = {}) => {
+  const gap = spaceBetween / 16;
+  const allPoints = [...points, ...splitPoint !== null && !points.includes(splitPoint) ? [splitPoint] : []].sort((a, b) => a - b);
+  if (allPoints.length === 0) {
+    return ["minmax(0, 100fr)"];
+  }
+  const segments = [];
+  let lastPosition = 0;
+  allPoints.forEach((point) => {
+    if (point > lastPosition) {
+      const segmentPercent = point - lastPosition;
+      segments.push(`${segmentPercent}fr`);
+      if (gap > 0) {
+        segments.push(`${gap}rem`);
+      }
+    }
+    if (points.includes(point)) {
+      segments.push(`${pointWidth}px`);
+      if (gap > 0) {
+        segments.push(`${gap}rem`);
+      }
+    }
+    lastPosition = point;
+  });
+  if (lastPosition < 100) {
+    const segmentPercent = 100 - lastPosition;
+    segments.push(`minmax(0, ${segmentPercent}fr)`);
+  }
+  return segments;
+};
 export {
+  generateGridTemplate,
   generateMarkers,
   getColumnConfigOutputText
 };