@eightshift/ui-components 0.0.1

package/dist/components/slider/slider.js

@@ -0,0 +1,362 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-BsiH7-5Y.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-BPzS-sR7.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, c as $6f909507e6374d18$export$a590f758a961cb5b, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-Pyh2V4bY.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { classnames } from "../../utilities/classnames.js";
+import { NumberPicker } from "../number-picker/number-picker.js";
+import { useState, useContext } from "react";
+import { generateMarkers } from "./utils.js";
+/**
+ * A single/multi-thumb slider component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - Icon to display within the slider.
+ * @param {string} [props.label] - The label of the slider.
+ * @param {string} [props.subtitle] - The subtitle of the slider.
+ * @param {string} [props.help] - The help text shown below the slider.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to display next to the label.
+ * @param {Number} [props.min=0] - The minimum value of the slider.
+ * @param {Number} [props.max=100] - The maximum value of the slider.
+ * @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.
+ * @param {boolean} [props.disabled] - If `true`, the slider is disabled.
+ * @param {boolean} [props.inputField=false] - If `true`, the slider will display an input field for the value. For multi-thumb sliders, the input field will be displayed for the focused thumb.
+ * @param {boolean} [props.vertical=false] - If `true`, the slider will be displayed vertically.
+ * @param {JSX.Element} [props.before] - Element to display before the slider.
+ * @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 {string} [props.labelClassName] - Additional classes to pass to the label.
+ * @param {Object<string, any>} [props.trackStyle] - Additional style for the track.
+ *
+ * @returns {JSX.Element} The Slider component.
+ *
+ * @typedef {'dots' | 'lines' | 'true' | Object<Number, string>} SliderMarkerType
+ *
+ * @example
+ * <Slider
+ * 	label='My slider'
+ * 	value={sliderValue}
+ * 	onChange={setSliderValue}
+ * />
+ *
+ * @preserve
+ */
+const Slider = (props) => {
+  const {
+    icon,
+    label,
+    subtitle,
+    help,
+    actions,
+    min = 0,
+    max = 100,
+    step = 1,
+    startPoint,
+    markers,
+    noActiveHighlight = false,
+    value,
+    onChange,
+    onChangeEnd,
+    disabled,
+    inputField = false,
+    vertical = false,
+    before,
+    after,
+    thumbLabels,
+    thumbContent,
+    labelClassName,
+    trackStyle,
+    ...other
+  } = props;
+  const [currentThumbIndex, setCurrentThumbIndex] = useState(-1);
+  let generatedMarkers = {};
+  if (typeof markers === "object" && Object.keys(markers).length > 0) {
+    generatedMarkers = markers;
+  }
+  if (markers === true || markers === "dots") {
+    generatedMarkers = generateMarkers(min, max, step);
+  }
+  const markerEntries = Object.entries(generatedMarkers);
+  const markerData = vertical ? markerEntries.toReversed() : markerEntries;
+  return /* @__PURE__ */ jsx(
+    $6f909507e6374d18$export$472062a354075cee,
+    {
+      value,
+      onChange,
+      minValue: min,
+      maxValue: max,
+      step,
+      isDisabled: disabled,
+      orientation: vertical ? "vertical" : "horizontal",
+      className: "es-uic-w-full es-uic-pb-3.5",
+      onChangeEnd,
+      ...other,
+      children: /* @__PURE__ */ jsxs(
+        BaseControl,
+        {
+          icon,
+          label,
+          subtitle,
+          help,
+          actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+            actions,
+            !inputField && /* @__PURE__ */ jsx(
+              $6f909507e6374d18$export$a590f758a961cb5b,
+              {
+                className: classnames("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-600"),
+                children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ")
+              }
+            ),
+            inputField && /* @__PURE__ */ jsx(
+              NumberInputField,
+              {
+                fieldIndex: Array.isArray(value) ? currentThumbIndex : 0,
+                min,
+                max,
+                step,
+                focusedThumb: currentThumbIndex,
+                setFocusedThumb: setCurrentThumbIndex
+              }
+            )
+          ] }),
+          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+          className: labelClassName,
+          controlContainerClassName: classnames(
+            "es-uic-flex es-uic-items-center es-uic-gap-2.5 !es-uic-space-y-0",
+            vertical && "es-uic-flex-col"
+          ),
+          children: [
+            before && /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-shrink-0 es-uic-items-center es-uic-gap-1", children: before }),
+            /* @__PURE__ */ jsx(
+              $6f909507e6374d18$export$105594979f116971,
+              {
+                className: classnames(
+                  "es-uic-isolate es-uic-grid es-uic-grid-cols-1 es-uic-grid-rows-1",
+                  vertical ? "es-uic-mx-auto es-uic-h-40 es-uic-w-4" : "es-uic-h-4 es-uic-w-full es-uic-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;
+                    }
+                  } 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 /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: classnames(
+                          "es-uic-relative es-uic-col-start-1 es-uic-row-start-1 es-uic-rounded-full es-uic-border",
+                          !vertical && "es-uic-h-1.5 es-uic-w-full es-uic-self-center",
+                          vertical && "es-uic-h-full es-uic-w-1.5 es-uic-flex-col es-uic-justify-self-center",
+                          disabled ? "es-uic-border-gray-200 es-uic-bg-white" : "es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-shadow-sm"
+                        ),
+                        style: trackStyle
+                      }
+                    ),
+                    !noActiveHighlight && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: classnames(
+                          "es-uic-absolute es-uic-col-start-1 es-uic-row-start-1 es-uic-border",
+                          !vertical && "es-uic-h-1.5 es-uic-w-full es-uic-self-center",
+                          vertical && "es-uic-h-full es-uic-w-1.5 es-uic-flex-col es-uic-justify-self-center",
+                          !vertical && shouldRoundStart && "es-uic-rounded-l-full",
+                          !vertical && shouldRoundEnd && "es-uic-rounded-r-full",
+                          vertical && shouldRoundStart && "es-uic-rounded-t-full",
+                          vertical && shouldRoundEnd && "es-uic-rounded-b-full",
+                          !vertical && activeBarOffset && "-es-uic-translate-x-px",
+                          vertical && activeBarOffset && "es-uic-translate-y-px",
+                          disabled ? "es-uic-border-gray-200 es-uic-bg-gray-50" : "es-uic-border-teal-500 es-uic-bg-teal-500/30"
+                        ),
+                        style: {
+                          bottom: vertical ? `${activeBarBottom}%` : null,
+                          height: vertical ? `${activeBarHeight}%` : null,
+                          width: vertical ? null : `${activeBarWidth}%`,
+                          left: vertical ? null : `${activeBarLeft}%`
+                        }
+                      }
+                    ),
+                    markers && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: classnames(
+                          "es-uic-relative es-uic-col-start-1 es-uic-row-start-1",
+                          !vertical && "es-uic-h-1 es-uic-w-full es-uic-self-center",
+                          vertical && "es-uic-h-full es-uic-w-1 es-uic-flex-col es-uic-justify-self-center"
+                        ),
+                        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;
+                          }
+                          return /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: classnames(
+                                "es-uic-absolute",
+                                vertical ? "es-uic-h-px es-uic-w-1" : "es-uic-h-1 es-uic-w-px es-uic-translate-x-1/2",
+                                !(dotValue === min || dotValue === max || dotValue === startPoint && !noActiveHighlight || min < 0 && dotValue === 0 && !noActiveHighlight || isWithinActiveBar) && "es-uic-bg-gray-300",
+                                !noActiveHighlight && isWithinActiveBar && "es-uic-bg-teal-500/75"
+                              ),
+                              style: {
+                                left: vertical ? null : `${state.getValuePercent(dotValue) * 100}%`,
+                                top: vertical ? `calc(${state.getValuePercent(dotValue) * 100}%)` : null
+                              },
+                              children: /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: classnames(
+                                    "es-uic-absolute es-uic-select-none es-uic-text-xs es-uic-transition-colors",
+                                    vertical ? "es-uic-left-3.5 es-uic-top-0 -es-uic-translate-y-1/2" : "es-uic-left-0 es-uic-top-2.5 -es-uic-translate-x-1/2",
+                                    (Array.isArray(value) ? value.includes(Number(dotValue)) : value === Number(dotValue) && !disabled) ? "es-uic-text-teal-700" : "es-uic-text-gray-300"
+                                  ),
+                                  children: markers && markers !== "dots" && labelData
+                                }
+                              )
+                            },
+                            index
+                          );
+                        })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "es-uic-relative es-uic-col-start-1 es-uic-row-start-1 es-uic-p-px", children: state.values.map((_, i) => /* @__PURE__ */ jsxs(
+                      $6f909507e6374d18$export$2c1b491743890dec,
+                      {
+                        index: i,
+                        "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
+                        className: classnames(
+                          "es-uic-absolute es-uic-size-3.5 es-uic-rounded-full es-uic-border es-uic-transition es-uic-duration-300",
+                          vertical ? "!-es-uic-translate-y-1/2 !es-uic-translate-x-0" : "!-es-uic-translate-x-1/2 !es-uic-translate-y-0",
+                          "es-uic-shadow dragging:es-uic-bg-teal-600 disabled:es-uic-border-gray-200 disabled:es-uic-bg-gray-100 disabled:es-uic-shadow-none",
+                          "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
+                          "es-uic-border-teal-600 es-uic-bg-teal-500 es-uic-shadow-teal-600/50"
+                        ),
+                        onFocus: () => {
+                          if (state.values.length < 2) {
+                            return;
+                          }
+                          setCurrentThumbIndex(i);
+                        },
+                        children: [
+                          inputField && state.values.length > 1 && currentThumbIndex === i && /* @__PURE__ */ jsx("div", { className: "es-uic-m-0.5 es-uic-size-2 es-uic-rounded-full es-uic-bg-teal-100" }),
+                          thumbContent && thumbContent(i)
+                        ]
+                      },
+                      i
+                    )) })
+                  ] });
+                }
+              }
+            ),
+            after && /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-shrink-0 es-uic-items-center es-uic-gap-1", 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-uic-invisible" : "",
+        ...other
+      }
+    ),
+    fieldIndex === -1 && !isSingleValue && /* @__PURE__ */ jsx(
+      $6f909507e6374d18$export$a590f758a961cb5b,
+      {
+        className: classnames("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-600"),
+        children: ({ state: state2 }) => state2.values.map((_, i) => state2.getThumbValueLabel(i)).join(" – ")
+      }
+    )
+  ] });
+};
+export {
+  Slider
+};

package/dist/components/slider/utils.js

@@ -0,0 +1,45 @@
+/**
+ * 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.
+ *
+ * @param {number} min - The minimum value for the markers.
+ * @param {number} max - The maximum value for the markers.
+ * @param {number} [step=10] - The step between each marker. Default is 10.
+ *
+ * @returns {Object} An object where the keys are the marker values and the values are either the marker value (if divisible by 10) or an empty string.
+ *
+ * @example
+ * generateMarkers(-20, 50, 10); // { '-20': '-20', '-10': '-10', '0': '0', '10': '10', '20': '20', '30': '30', '40': '40', '50': '50' }
+ *
+ * @preserve
+ */
+const generateMarkers = (min, max, step = 10) => {
+  const smallStep = step < 10 && Math.abs(max - min) > 20;
+  const markers = [];
+  if (min < 0) {
+    for (let i = min; i < 0; i += step) {
+      markers.push(i.toString());
+    }
+    for (let i = 0; i <= max; i += step) {
+      markers.push(i.toString());
+    }
+  } else {
+    for (let i = min; i <= max; i += step) {
+      markers.push(i.toString());
+    }
+  }
+  return markers.reduce((acc, marker) => {
+    if (smallStep && marker % 5 !== 0) {
+      return acc;
+    }
+    if (smallStep && marker % 10 !== 0) {
+      acc[marker] = "";
+    } else {
+      acc[marker] = marker;
+    }
+    return acc;
+  }, {});
+};
+export {
+  generateMarkers
+};

package/dist/components/spacer/spacer.js

@@ -0,0 +1,93 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { classnames } from "../../utilities/classnames.js";
+/**
+ * A simple spacer/divider component, with optional text or icon.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {SpacerSize} [props.size='m'] - The size of the spacer. Can be 's' or 'm'.
+ * @param {boolean} [props.border=false] - Whether to show a border in the middle.
+ * @param {string} [props.className] - Additional classes to add.
+ * @param {string} [props.text] - Text to display.
+ * @param {JSX.Element} [props.icon] - Icon to display.
+ * @param {boolean} [props.vertical=false] - Whether the spacer is vertical.
+ *
+ * @returns {JSX.Element} The Spacer component.
+ *
+ * @typedef {'px' | 'xs' | 's' | 'm'} SpacerSize
+ *
+ * @example
+ * <Spacer />
+ *
+ * <Spacer border />
+ *
+ * <Spacer vertical />
+ * <Spacer vertical border />
+ *
+ * <Spacer text='My divider' icon={icons.myIcon} />
+ *
+ * @preserve
+ */
+const Spacer = (props) => {
+  const { size = "m", border, className, text, icon, vertical = false } = props;
+  const sizes = {
+    px: {
+      sizeHorizontal: "es-uic-h-px",
+      sizeHorizontalBorder: "es-uic-h-px",
+      sizeVertical: "es-uic-w-px",
+      sizeVerticalBorder: "es-uic-w-px"
+    },
+    xs: {
+      sizeHorizontal: "es-uic-h-1",
+      sizeHorizontalBorder: "es-uic-h-0.5",
+      sizeVertical: "es-uic-w-1",
+      sizeVerticalBorder: "es-uic-w-0.5"
+    },
+    s: {
+      sizeHorizontal: "es-uic-h-2.5",
+      sizeHorizontalBorder: "es-uic-h-1",
+      sizeVertical: "es-uic-w-2.5",
+      sizeVerticalBorder: "es-uic-w-1"
+    },
+    m: {
+      sizeHorizontal: "es-uic-h-5",
+      sizeHorizontalBorder: "es-uic-h-2",
+      sizeVertical: "es-uic-w-5",
+      sizeVerticalBorder: "es-uic-w-2"
+    }
+  };
+  const spaceClass = classnames(
+    vertical ? "es-uic-h-full" : "es-uic-w-full",
+    !vertical && !border && sizes[size].sizeHorizontal,
+    !vertical && border && sizes[size].sizeHorizontalBorder,
+    vertical && !border && sizes[size].sizeVertical,
+    vertical && border && sizes[size].sizeVerticalBorder,
+    className
+  );
+  if (text || icon) {
+    return /* @__PURE__ */ jsxs("div", { className: classnames("es-uic-flex es-uic-items-center es-uic-gap-1.5", className), children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "es-uic-shrink-0 es-uic-rounded es-uic-bg-gray-500 es-uic-p-0.5 es-uic-text-gray-50 es-uic-shadow-sm [&>svg]:es-uic-size-5.5", children: icon }),
+      text && /* @__PURE__ */ jsx("span", { className: "es-uic-shrink-0 es-uic-text-balance es-uic-text-sm es-uic-text-gray-500", children: text }),
+      border && /* @__PURE__ */ jsx("div", { className: "es-uic-h-px es-uic-w-full es-uic-bg-gray-300" })
+    ] });
+  }
+  if (border) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      size !== "px" && /* @__PURE__ */ jsx("div", { className: spaceClass }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classnames(
+            "es-uic-bg-gray-300",
+            vertical ? "es-uic-h-full es-uic-w-px" : "es-uic-h-px es-uic-w-full"
+          )
+        }
+      ),
+      size !== "px" && /* @__PURE__ */ jsx("div", { className: spaceClass })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: spaceClass });
+};
+export {
+  Spacer
+};