@officesdk/design 0.2.1 → 0.2.2

package/dist/components/cjs/index.d.ts

@@ -301,6 +301,25 @@ interface CheckboxProps {
  */
 declare const Checkbox: React$1.FC<CheckboxProps>;
 
+/**
+ * Value map utilities for piecewise linear mapping (non-linear slider)
+ */
+interface ValueMapPiece {
+    /** Size of the piece (value range) */
+    size: number;
+    /** Step increment, defaults to 1 */
+    step?: number;
+    /** Visual size (relative), defaults to size/step */
+    visualSize?: number;
+}
+interface ValueMap {
+    type: 'piecewise';
+    /** Starting value */
+    start: number;
+    /** Array of pieces defining the mapping */
+    pieces: ValueMapPiece[];
+}
+
 interface SliderProps {
     /**
      * Current value (0-100)
@@ -326,6 +345,15 @@ interface SliderProps {
      * Whether the slider is disabled
      */
     disabled?: boolean;
+    /**
+     * Slider direction
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Value map for piecewise linear mapping (non-linear slider)
+     * When provided, min/max/step props are ignored
+     */
+    valueMap?: ValueMap;
     /**
      * Callback when value changes
      */

package/dist/components/cjs/index.js

@@ -907,38 +907,199 @@ var init_Button = __esm({
     exports.Button.displayName = "Button";
   }
 });
+
+// src/Slider/valueMap.ts
+var toFixed, createSinglePiecewiseMap, extendValueMap, snapToStep, valueToVisualPercentage, visualPercentToValue, changeByStep;
+var init_valueMap = __esm({
+  "src/Slider/valueMap.ts"() {
+    toFixed = (num, precision = 10) => {
+      return Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision);
+    };
+    createSinglePiecewiseMap = (min, max, step) => {
+      return {
+        type: "piecewise",
+        start: min,
+        pieces: [
+          {
+            size: max - min,
+            step,
+            visualSize: 100
+          }
+        ]
+      };
+    };
+    extendValueMap = (valueMap) => {
+      const piecesExt = [];
+      valueMap.pieces.forEach((p) => {
+        const start2 = piecesExt.length ? piecesExt[piecesExt.length - 1].end : valueMap.start;
+        const end2 = start2 + p.size;
+        const visualStart2 = piecesExt.length ? piecesExt[piecesExt.length - 1].visualEnd : 0;
+        const step = p.step || 1;
+        const visualSize2 = p.visualSize || p.size / step;
+        const visualEnd2 = visualStart2 + visualSize2;
+        const stepStart = piecesExt.length ? piecesExt[piecesExt.length - 1].stepEnd : 0;
+        const stepEnd = stepStart + Math.ceil(p.size / step);
+        piecesExt.push({
+          size: p.size,
+          step,
+          visualSize: visualSize2,
+          start: start2,
+          end: end2,
+          visualStart: visualStart2,
+          visualEnd: visualEnd2,
+          stepStart,
+          stepEnd
+        });
+      });
+      const firstPiece = piecesExt[0];
+      const lastPiece = piecesExt[piecesExt.length - 1];
+      const start = firstPiece.start;
+      const end = lastPiece.end;
+      const size = end - start;
+      const visualStart = firstPiece.visualStart;
+      const visualEnd = lastPiece.visualEnd;
+      const visualSize = visualEnd - visualStart;
+      return {
+        type: "piecewise",
+        size,
+        start,
+        end,
+        visualSize,
+        visualStart,
+        visualEnd,
+        pieces: piecesExt,
+        stepStart: firstPiece.stepStart,
+        stepEnd: lastPiece.stepEnd
+      };
+    };
+    snapToStep = (value, valueMap) => {
+      const { pieces, start, end } = valueMap;
+      if (value <= start) return start;
+      if (value >= end) return end;
+      const p = pieces.find((piece) => value >= piece.start && value <= piece.end);
+      if (!p) return value;
+      const pieceStep = p.step;
+      const steps = (value - p.start) / pieceStep;
+      const decimal = steps % 1;
+      let snapped;
+      if (decimal < 0.5) {
+        snapped = Math.max(start, toFixed(p.start + Math.floor(steps) * pieceStep));
+      } else {
+        snapped = Math.min(end, toFixed(p.start + Math.ceil(steps) * pieceStep));
+      }
+      return toFixed(snapped);
+    };
+    valueToVisualPercentage = (value, valueMap) => {
+      const { pieces, start, end, visualSize } = valueMap;
+      if (value <= start) return 0;
+      if (value >= end) return 1;
+      const p = pieces.find((piece) => value >= piece.start && value <= piece.end);
+      if (!p) return 0;
+      const visualPosition = p.visualStart + (value - p.start) / p.size * p.visualSize;
+      return visualPosition / visualSize;
+    };
+    visualPercentToValue = (visualPercent, valueMap) => {
+      const { pieces, start, end, visualSize } = valueMap;
+      if (visualPercent <= 0) return start;
+      if (visualPercent >= 1) return end;
+      const visualPosition = visualSize * visualPercent;
+      const p = pieces.find(
+        (piece) => visualPosition >= piece.visualStart && visualPosition <= piece.visualEnd
+      );
+      if (!p) return start;
+      return p.start + (visualPosition - p.visualStart) / p.visualSize * p.size;
+    };
+    changeByStep = (value, steps, valueMap) => {
+      const { pieces, start, end } = valueMap;
+      const p = pieces.find((piece) => value >= piece.start && value <= piece.end);
+      if (!p) {
+        if (value < start) return start;
+        if (value > end) return end;
+        return value;
+      }
+      const curStepNo = (value - p.start) / p.step + p.stepStart;
+      const curStepRounded = Math.round(curStepNo);
+      let stepsInValueMap;
+      if (Math.abs(curStepRounded - curStepNo) < 1e-5) {
+        stepsInValueMap = Math.round(curStepNo) + steps;
+      } else if (steps < 0) {
+        stepsInValueMap = Math.ceil(curStepNo) + steps;
+      } else {
+        stepsInValueMap = Math.floor(curStepNo) + steps;
+      }
+      if (stepsInValueMap <= valueMap.stepStart) {
+        return valueMap.start;
+      }
+      if (stepsInValueMap >= valueMap.stepEnd) {
+        return valueMap.end;
+      }
+      const newPiece = pieces.find(
+        (piece) => stepsInValueMap >= piece.stepStart && stepsInValueMap <= piece.stepEnd
+      );
+      if (!newPiece) return value;
+      const newValue = newPiece.start + (stepsInValueMap - newPiece.stepStart) * newPiece.step;
+      return toFixed(newValue);
+    };
+  }
+});
 var SliderContainer, SliderTrack, SliderFill, SliderThumb; exports.Slider = void 0;
 var init_Slider = __esm({
   "src/Slider/Slider.tsx"() {
     init_styled();
+    init_valueMap();
     SliderContainer = exports.styled.div`
   position: relative;
   display: flex;
   align-items: center;
-  width: 100%;
-  height: 18px;
+  justify-content: center;
+  ${({ $direction }) => $direction === "vertical" ? `
+        width: 18px;
+        height: 100%;
+        flex: 1;
+        flex-direction: column;
+      ` : `
+        width: 100%;
+        height: 18px;
+        flex-direction: row;
+      `}
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   user-select: none;
 `;
     SliderTrack = exports.styled.div`
   position: absolute;
-  left: 0;
-  right: 0;
-  height: ${({ theme: theme2 }) => theme2.components.slider.track.height};
   background: ${({ theme: theme2 }) => theme2.colors.palettes.transparency["20"]};
   border-radius: 1000px;
-  top: 50%;
-  transform: translateY(-50%);
+  ${({ $direction, theme: theme2 }) => $direction === "vertical" ? `
+        top: 0;
+        bottom: 0;
+        width: ${theme2.components.slider.track.height};
+        left: 50%;
+        transform: translateX(-50%);
+      ` : `
+        left: 0;
+        right: 0;
+        height: ${theme2.components.slider.track.height};
+        top: 50%;
+        transform: translateY(-50%);
+      `}
 `;
     SliderFill = exports.styled.div`
   position: absolute;
-  left: 0;
-  height: ${({ theme: theme2 }) => theme2.components.slider.track.height};
   border-radius: ${({ theme: theme2 }) => theme2.components.slider.track.borderRadius};
-  top: 50%;
-  transform: translateY(-50%);
-  width: ${({ $percentage }) => $percentage}%;
   background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.components.slider.track.filledBackgroundDisabled : theme2.components.slider.track.filledBackground};
+  ${({ $direction, $percentage, theme: theme2 }) => $direction === "vertical" ? `
+        bottom: 0;
+        width: ${theme2.components.slider.track.height};
+        left: 50%;
+        transform: translateX(-50%);
+        height: ${$percentage}%;
+      ` : `
+        left: 0;
+        height: ${theme2.components.slider.track.height};
+        top: 50%;
+        transform: translateY(-50%);
+        width: ${$percentage}%;
+      `}
 `;
     SliderThumb = exports.styled.div`
   position: absolute;
@@ -946,12 +1107,19 @@ var init_Slider = __esm({
   height: ${({ theme: theme2 }) => theme2.components.slider.large.thumbSize};
   border-radius: 50%;
   background: ${({ $disabled, theme: theme2 }) => $disabled ? theme2.components.slider.thumb.backgroundDisabled : theme2.components.slider.thumb.background};
-  left: ${({ $percentage }) => $percentage}%;
-  top: 50%;
-  transform: translate(-50%, -50%);
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "grab"};
-  transition: ${({ $isDragging }) => $isDragging ? "none" : "left 0.1s ease"};
   box-shadow: ${({ theme: theme2 }) => theme2.components.slider.thumb.boxShadow};
+  ${({ $direction, $percentage, $isDragging }) => $direction === "vertical" ? `
+        bottom: ${$percentage}%;
+        left: 50%;
+        transform: translate(-50%, 50%);
+        transition: ${$isDragging ? "none" : "bottom 0.1s ease"};
+      ` : `
+        left: ${$percentage}%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        transition: ${$isDragging ? "none" : "left 0.1s ease"};
+      `}
 
   ${({ $disabled, theme: theme2 }) => !$disabled && `
     &:hover {
@@ -971,49 +1139,72 @@ var init_Slider = __esm({
       max = 100,
       step = 1,
       disabled = false,
+      direction = "horizontal",
+      valueMap: valueMapProp,
       onChange,
       onDragStart,
       onDragEnd,
       className,
       style
     }) => {
+      const extendedValueMap = React3.useMemo(() => {
+        if (valueMapProp) {
+          return extendValueMap(valueMapProp);
+        }
+        return extendValueMap(createSinglePiecewiseMap(min, max, step));
+      }, [valueMapProp, min, max, step]);
+      const effectiveMin = extendedValueMap.start;
+      const effectiveMax = extendedValueMap.end;
       const [internalValue, setInternalValue] = React3.useState(
         controlledValue ?? defaultValue
       );
       const [isDragging, setIsDragging] = React3.useState(false);
       const containerRef = React3.useRef(null);
       const value = controlledValue !== void 0 ? controlledValue : internalValue;
-      const percentage = (value - min) / (max - min) * 100;
+      const percentage = valueToVisualPercentage(value, extendedValueMap) * 100;
       const updateValue = React3.useCallback(
-        (clientX) => {
+        (clientX, clientY) => {
           if (!containerRef.current || disabled) return;
           const rect = containerRef.current.getBoundingClientRect();
-          const offsetX = clientX - rect.left;
-          const newPercentage = Math.max(0, Math.min(100, offsetX / rect.width * 100));
-          const rawValue = newPercentage / 100 * (max - min) + min;
-          const steppedValue = Math.round(rawValue / step) * step;
-          const clampedValue = Math.max(min, Math.min(max, steppedValue));
+          let visualPercent;
+          if (direction === "vertical") {
+            const offsetY = rect.bottom - clientY;
+            visualPercent = Math.max(0, Math.min(1, offsetY / rect.height));
+          } else {
+            const offsetX = clientX - rect.left;
+            visualPercent = Math.max(0, Math.min(1, offsetX / rect.width));
+          }
+          const rawValue = visualPercentToValue(visualPercent, extendedValueMap);
+          const snappedValue = snapToStep(rawValue, extendedValueMap);
           if (controlledValue === void 0) {
-            setInternalValue(clampedValue);
+            setInternalValue(snappedValue);
           }
-          onChange?.(clampedValue);
+          onChange?.(snappedValue);
+        },
+        [disabled, controlledValue, onChange, direction, extendedValueMap]
+      );
+      const handleTrackClick = React3.useCallback(
+        (e) => {
+          if (disabled) return;
+          e.preventDefault();
+          updateValue(e.clientX, e.clientY);
         },
-        [min, max, step, disabled, controlledValue, onChange]
+        [disabled, updateValue]
       );
-      const handleMouseDown = React3.useCallback(
+      const handleThumbMouseDown = React3.useCallback(
         (e) => {
           if (disabled) return;
           e.preventDefault();
+          e.stopPropagation();
           setIsDragging(true);
           onDragStart?.();
-          updateValue(e.clientX);
         },
-        [disabled, onDragStart, updateValue]
+        [disabled, onDragStart]
       );
       React3.useEffect(() => {
         if (!isDragging) return;
         const handleMouseMove = (e) => {
-          updateValue(e.clientX);
+          updateValue(e.clientX, e.clientY);
         };
         const handleMouseUp = () => {
           setIsDragging(false);
@@ -1034,20 +1225,20 @@ var init_Slider = __esm({
             case "ArrowLeft":
             case "ArrowDown":
               e.preventDefault();
-              newValue = Math.max(min, value - step);
+              newValue = changeByStep(value, -1, extendedValueMap);
               break;
             case "ArrowRight":
             case "ArrowUp":
               e.preventDefault();
-              newValue = Math.min(max, value + step);
+              newValue = changeByStep(value, 1, extendedValueMap);
               break;
             case "Home":
               e.preventDefault();
-              newValue = min;
+              newValue = effectiveMin;
               break;
             case "End":
               e.preventDefault();
-              newValue = max;
+              newValue = effectiveMax;
               break;
             default:
               return;
@@ -1057,32 +1248,36 @@ var init_Slider = __esm({
           }
           onChange?.(newValue);
         },
-        [disabled, value, min, max, step, controlledValue, onChange]
+        [disabled, value, effectiveMin, effectiveMax, controlledValue, onChange, extendedValueMap]
       );
       return /* @__PURE__ */ React3__default.default.createElement(
         SliderContainer,
         {
           ref: containerRef,
           $disabled: disabled,
+          $direction: direction,
           className,
           style,
-          onMouseDown: handleMouseDown,
+          onMouseDown: handleTrackClick,
           onKeyDown: handleKeyDown,
           tabIndex: disabled ? -1 : 0,
           role: "slider",
-          "aria-valuemin": min,
-          "aria-valuemax": max,
+          "aria-valuemin": effectiveMin,
+          "aria-valuemax": effectiveMax,
           "aria-valuenow": value,
-          "aria-disabled": disabled
+          "aria-disabled": disabled,
+          "aria-orientation": direction
         },
-        /* @__PURE__ */ React3__default.default.createElement(SliderTrack, { $disabled: disabled }),
-        /* @__PURE__ */ React3__default.default.createElement(SliderFill, { $percentage: percentage, $disabled: disabled }),
+        /* @__PURE__ */ React3__default.default.createElement(SliderTrack, { $disabled: disabled, $direction: direction }),
+        /* @__PURE__ */ React3__default.default.createElement(SliderFill, { $percentage: percentage, $disabled: disabled, $direction: direction }),
         /* @__PURE__ */ React3__default.default.createElement(
           SliderThumb,
           {
             $percentage: percentage,
             $disabled: disabled,
-            $isDragging: isDragging
+            $isDragging: isDragging,
+            $direction: direction,
+            onMouseDown: handleThumbMouseDown
           }
         )
       );
@@ -1095,6 +1290,7 @@ var init_Slider = __esm({
 var init_Slider2 = __esm({
   "src/Slider/index.ts"() {
     init_Slider();
+    init_valueMap();
   }
 });
 var NumberInputContainer, InputWrapper, UnitText, StyledInput, ButtonGroup, StepButton, UpArrow, DownArrow; exports.NumberInput = void 0;