@salt-ds/lab 1.0.0-alpha.61 → 1.0.0-alpha.63

package/dist-cjs/slider/internal/useSliderThumb.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var window = require('@salt-ds/window');
+var react = require('react');
+var utils = require('./utils.js');
+
+const useSliderThumb = ({
+  decimalPlaces,
+  handleInputChange,
+  marks,
+  min = 0,
+  max = 10,
+  step = 1,
+  onChange,
+  onChangeEnd,
+  restrictToMarks,
+  setValue,
+  stepMultiplier,
+  value
+}) => {
+  const [isDragging, setIsDragging] = react.useState(false);
+  const lastValueRef = react.useRef(value);
+  const sliderRef = react.useRef(null);
+  const targetWindow = window.useWindow();
+  const handlePointerMove = react.useCallback(
+    (event) => {
+      if (!sliderRef.current) return;
+      const newValue = utils.getClickedPosition(
+        sliderRef,
+        event.clientX,
+        max,
+        min,
+        step,
+        decimalPlaces,
+        marks,
+        restrictToMarks
+      );
+      if (newValue === void 0 || lastValueRef.current === newValue) {
+        return;
+      }
+      lastValueRef.current = newValue;
+      setValue(newValue);
+      onChange == null ? void 0 : onChange(event, newValue);
+    },
+    [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step]
+  );
+  const handlePointerUp = react.useCallback(
+    (event) => {
+      setIsDragging(false);
+      onChangeEnd == null ? void 0 : onChangeEnd(event, lastValueRef.current);
+    },
+    [onChangeEnd]
+  );
+  react.useEffect(() => {
+    if (isDragging) {
+      targetWindow == null ? void 0 : targetWindow.addEventListener("pointermove", handlePointerMove);
+      targetWindow == null ? void 0 : targetWindow.addEventListener("pointerup", handlePointerUp);
+    } else {
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
+    }
+    return () => {
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointermove", handlePointerMove);
+      targetWindow == null ? void 0 : targetWindow.removeEventListener("pointerup", handlePointerUp);
+    };
+  }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);
+  const handlePointerDownOnThumb = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsDragging(true);
+    },
+    []
+  );
+  const handlePointerDownOnTrack = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      setIsDragging(true);
+      const newValue = utils.getClickedPosition(
+        sliderRef,
+        event.clientX,
+        max,
+        min,
+        step,
+        decimalPlaces,
+        marks,
+        restrictToMarks
+      );
+      if (newValue === void 0 || lastValueRef.current === newValue) {
+        return;
+      }
+      lastValueRef.current = newValue;
+      setValue(newValue);
+      onChange == null ? void 0 : onChange(event, newValue);
+    },
+    [decimalPlaces, marks, max, min, onChange, restrictToMarks, setValue, step]
+  );
+  const handleKeydownOnThumb = (event) => {
+    const newValue = utils.getKeyboardValue(
+      event,
+      value,
+      step,
+      stepMultiplier,
+      max,
+      min,
+      restrictToMarks,
+      marks
+    );
+    handleInputChange({
+      target: { value: newValue.toString() }
+    });
+  };
+  return {
+    handleKeydownOnThumb,
+    handlePointerDownOnThumb,
+    handlePointerDownOnTrack,
+    isDragging,
+    sliderRef
+  };
+};
+
+exports.useSliderThumb = useSliderThumb;
+//# sourceMappingURL=useSliderThumb.js.map

package/dist-cjs/slider/internal/useSliderThumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSliderThumb.js","sources":["../src/slider/internal/useSliderThumb.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport {\n  type ChangeEvent,\n  type Dispatch,\n  type SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SliderProps } from \"../Slider\";\nimport { getClickedPosition, getKeyboardValue } from \"./utils\";\n\ntype UseSliderThumbProps = Pick<SliderProps, \"min\" | \"max\" | \"step\"> & {\n  decimalPlaces: number;\n  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  marks?: { label: string; value: number }[];\n  onChange?: (event: SyntheticEvent<unknown> | Event, value: number) => void;\n  onChangeEnd?: (event: SyntheticEvent<unknown> | Event, value: number) => void;\n  restrictToMarks?: boolean;\n  setValue: Dispatch<SetStateAction<number>>;\n  stepMultiplier: number;\n  value: number;\n};\n\nexport const useSliderThumb = ({\n  decimalPlaces,\n  handleInputChange,\n  marks,\n  min = 0,\n  max = 10,\n  step = 1,\n  onChange,\n  onChangeEnd,\n  restrictToMarks,\n  setValue,\n  stepMultiplier,\n  value,\n}: UseSliderThumbProps) => {\n  const [isDragging, setIsDragging] = useState(false);\n  const lastValueRef = useRef<number>(value);\n  const sliderRef = useRef<HTMLDivElement>(null);\n  const targetWindow = useWindow();\n\n  const handlePointerMove = useCallback(\n    (event: PointerEvent) => {\n      if (!sliderRef.current) return;\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event, newValue);\n    },\n    [decimalPlaces, marks, max, min, onChange, setValue, restrictToMarks, step],\n  );\n\n  const handlePointerUp = useCallback(\n    (event: PointerEvent) => {\n      setIsDragging(false);\n      onChangeEnd?.(event, lastValueRef.current);\n    },\n    [onChangeEnd],\n  );\n\n  useEffect(() => {\n    if (isDragging) {\n      targetWindow?.addEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.addEventListener(\"pointerup\", handlePointerUp);\n    } else {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    }\n    return () => {\n      targetWindow?.removeEventListener(\"pointermove\", handlePointerMove);\n      targetWindow?.removeEventListener(\"pointerup\", handlePointerUp);\n    };\n  }, [handlePointerMove, handlePointerUp, isDragging, targetWindow]);\n\n  const handlePointerDownOnThumb = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      event.stopPropagation();\n      setIsDragging(true);\n    },\n    [],\n  );\n\n  const handlePointerDownOnTrack = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      setIsDragging(true);\n      const newValue = getClickedPosition(\n        sliderRef,\n        event.clientX,\n        max,\n        min,\n        step,\n        decimalPlaces,\n        marks,\n        restrictToMarks,\n      );\n      if (newValue === undefined || lastValueRef.current === newValue) {\n        return;\n      }\n      lastValueRef.current = newValue;\n      setValue(newValue);\n      onChange?.(event, newValue);\n    },\n    [decimalPlaces, marks, max, min, onChange, restrictToMarks, setValue, step],\n  );\n\n  const handleKeydownOnThumb = (event: React.KeyboardEvent) => {\n    const newValue = getKeyboardValue(\n      event,\n      value,\n      step,\n      stepMultiplier,\n      max,\n      min,\n      restrictToMarks,\n      marks,\n    );\n\n    handleInputChange({\n      target: { value: newValue.toString() },\n    } as ChangeEvent<HTMLInputElement>);\n  };\n\n  return {\n    handleKeydownOnThumb,\n    handlePointerDownOnThumb,\n    handlePointerDownOnTrack,\n    isDragging,\n    sliderRef,\n  };\n};\n"],"names":["useState","useRef","useWindow","useCallback","getClickedPosition","useEffect","getKeyboardValue"],"mappings":"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"}

package/dist-cjs/slider/internal/utils.js

@@ -1,86 +1,111 @@
 'use strict';
 
-const getValue = (trackRef, min, max, step, clientX) => {
-  const { width, x } = trackRef.current.getBoundingClientRect();
-  const localX = clientX - x;
-  const normaliseBetweenValues = localX / width * (max - min) + min;
-  const roundedToStep = roundToStep(normaliseBetweenValues, step);
-  const decimals = countDecimalPlaces(step);
-  const rounded = Number(roundedToStep.toFixed(decimals));
-  const value = clampValue(rounded, [min, max]);
-  return value;
-};
-const setValue = (value, newValue, index, onChange) => {
-  if (value.length === 2) {
-    const newValueArray = [...value];
-    newValueArray.splice(index, 1, newValue);
-    onChange(newValueArray);
-    return;
+const toFloat = (value) => typeof value === "string" ? Number.parseFloat(value) : value;
+const calculateMarkPosition = (value, max, min) => {
+  if (min === max) {
+    return 0;
   }
-  onChange([newValue]);
+  const clampedValue = Number.isNaN(toFloat(value)) ? min : Math.min(Math.max(toFloat(value), min), max);
+  const markPosition = (clampedValue - min) / (max - min) * 100;
+  return Math.round(markPosition * 100) / 100;
 };
-const roundToStep = (value, step) => Math.round(value / step) * step;
-const clampValue = (value, [min, max]) => {
-  if (value > max) {
-    return max;
-  }
-  if (value < min) {
+const calculatePercentage = (value, max, min) => (value - min) / (max - min) * 100;
+const clamp = (value, max, min, step, decimalPlaces, marks, restrictToMarks) => {
+  if (Number.isNaN(value)) {
     return min;
   }
-  return value;
-};
-const getPercentage = (min, max, value) => {
-  const percentage = (value - min) / (max - min) * 100;
-  return Math.min(Math.max(percentage, 0), 100);
-};
-const countDecimalPlaces = (num) => {
-  const parts = num.toString().split(".");
-  return parts.length > 1 ? parts[1].length : 0;
+  const clampedValue = Math.min(Math.max(value, min), max);
+  if (restrictToMarks && marks) {
+    let closestMark = marks[0].value;
+    let smallestDifference = Math.abs(clampedValue - closestMark);
+    for (let i = 1; i < marks.length; i++) {
+      const currentDifference = Math.abs(clampedValue - marks[i].value);
+      if (currentDifference < smallestDifference) {
+        smallestDifference = currentDifference;
+        closestMark = marks[i].value;
+      }
+    }
+    return closestMark;
+  }
+  let roundedValue = Math.round(clampedValue / step) * step;
+  if (roundedValue > max) {
+    roundedValue = max;
+  }
+  return Number.parseFloat(roundedValue.toFixed(decimalPlaces));
 };
-const getMarkStyles = (min, max, step) => {
-  const marks = [];
-  for (let i = min; i <= max; i = Number((i + step).toPrecision(4))) {
-    const value = Number(i.toPrecision(4));
-    const position = `${getPercentage(min, max, value)}%`;
-    marks.push({ value, position });
+const clampRange = (range, max, min, step, decimalPlaces, marks, restrictToMarks) => {
+  let [start, end] = range;
+  if (Number.isNaN(start)) {
+    start = min;
+  }
+  if (Number.isNaN(end)) {
+    end = max;
+  }
+  if (start > end) {
+    [start, end] = [end, start];
   }
-  const decimals = Math.max(
-    ...marks.map((mark) => countDecimalPlaces(mark.value))
+  start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);
+  end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);
+  return [start, end];
+};
+const getClickedPosition = (sliderRef, clientX, max, min, step, decimalPlaces, marks, restrictToMarks) => {
+  if (!sliderRef.current) return;
+  const sliderRect = sliderRef.current.getBoundingClientRect();
+  const rawValue = (clientX - sliderRect.left) / sliderRect.width * (max - min) + min;
+  const steppedValue = Math.round(rawValue / step) * step;
+  return clamp(
+    steppedValue,
+    max,
+    min,
+    step,
+    decimalPlaces,
+    marks,
+    restrictToMarks
   );
-  return marks.map((mark) => ({
-    ...mark,
-    label: mark.value.toFixed(decimals)
-  }));
 };
-const getNearestIndex = (value, newValue) => {
-  if (value.length === 1) return 0;
-  if (value[0] === value[1]) {
-    if (newValue < value[0]) return 0;
-    return 1;
+const getKeyboardValue = (event, value, step, stepMultiplier, max, min, restrictToMarks, marks) => {
+  let newValue = value;
+  if (restrictToMarks && marks && marks.length >= 1) {
+    const currentIndex = marks.findIndex((mark) => mark.value === value);
+    switch (event.key) {
+      case "ArrowUp":
+      case "ArrowRight":
+      case "PageUp":
+        if (currentIndex < marks.length - 1) {
+          newValue = marks[currentIndex + 1].value;
+        }
+        break;
+      case "ArrowDown":
+      case "ArrowLeft":
+      case "PageDown":
+        if (currentIndex > 0) {
+          newValue = marks[currentIndex - 1].value;
+        }
+        break;
+      default:
+        return newValue;
+    }
+  } else {
+    switch (event.key) {
+      case "PageUp":
+        newValue = Math.min(value + step * stepMultiplier, max);
+        break;
+      case "PageDown":
+        newValue = Math.max(value - step * stepMultiplier, min);
+        break;
+      default:
+        return newValue;
+    }
   }
-  const distances = value.map((value2) => Math.abs(newValue - value2));
-  const minDistance = Math.min(...distances);
-  const nearestIndex = distances.indexOf(minDistance);
-  return nearestIndex;
-};
-const preventOverlappingValues = (value, newValue, index) => value.length === 2 ? index === 0 ? Math.min(newValue, value[1]) : Math.max(newValue, value[0]) : newValue;
-const parseValueProp = (value, min, max) => {
-  if (typeof value === "undefined" || value.length < 1) return;
-  const a = clampValue(value[0], [min, max]);
-  if (value.length === 1) return [a];
-  const b = clampValue(value[1], [min, max]);
-  if (a > b) return [a, a];
-  return [a, b];
+  event.preventDefault();
+  return newValue;
 };
 
-exports.clampValue = clampValue;
-exports.countDecimalPlaces = countDecimalPlaces;
-exports.getMarkStyles = getMarkStyles;
-exports.getNearestIndex = getNearestIndex;
-exports.getPercentage = getPercentage;
-exports.getValue = getValue;
-exports.parseValueProp = parseValueProp;
-exports.preventOverlappingValues = preventOverlappingValues;
-exports.roundToStep = roundToStep;
-exports.setValue = setValue;
+exports.calculateMarkPosition = calculateMarkPosition;
+exports.calculatePercentage = calculatePercentage;
+exports.clamp = clamp;
+exports.clampRange = clampRange;
+exports.getClickedPosition = getClickedPosition;
+exports.getKeyboardValue = getKeyboardValue;
+exports.toFloat = toFloat;
 //# sourceMappingURL=utils.js.map

package/dist-cjs/slider/internal/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import type { RefObject } from \"react\";\nimport type { SliderChangeHandler, SliderValue, ThumbIndex } from \"../types\";\n\nexport const getValue = (\n  trackRef: RefObject<Element>,\n  min: number,\n  max: number,\n  step: number,\n  clientX: number,\n) => {\n  const { width, x } = trackRef.current!.getBoundingClientRect();\n  const localX = clientX - x;\n  const normaliseBetweenValues = (localX / width) * (max - min) + min;\n  const roundedToStep = roundToStep(normaliseBetweenValues, step);\n  const decimals = countDecimalPlaces(step);\n  const rounded = Number(roundedToStep.toFixed(decimals));\n  const value = clampValue(rounded, [min, max]);\n  return value;\n};\n\nexport const setValue = (\n  value: SliderValue,\n  newValue: number,\n  index: ThumbIndex,\n  onChange: SliderChangeHandler,\n) => {\n  if (value.length === 2) {\n    const newValueArray = [...value];\n    newValueArray.splice(index, 1, newValue);\n    onChange(newValueArray as SliderValue);\n    return;\n  }\n  onChange([newValue]);\n};\n\nexport const roundToStep = (value: number, step: number) =>\n  Math.round(value / step) * step;\n\nexport const clampValue = (value: number, [min, max]: number[]) => {\n  if (value > max) {\n    return max;\n  }\n  if (value < min) {\n    return min;\n  }\n  return value;\n};\n\nexport const getPercentage = (min: number, max: number, value: number) => {\n  const percentage = ((value - min) / (max - min)) * 100;\n  return Math.min(Math.max(percentage, 0), 100);\n};\n\nexport const getPercentageDifference = (\n  min: number,\n  max: number,\n  value: number[],\n) => {\n  const valueDiff = value[1] - value[0];\n  const percentage = ((valueDiff - min) / (max - min)) * 100;\n  return `${Math.min(Math.max(percentage, 0), 100)}%`;\n};\n\nexport const getPercentageOffset = (\n  min: number,\n  max: number,\n  value: number[],\n) => {\n  const offsetLeft = ((value[0] - min) / (max - min)) * 100;\n  return `${Math.min(Math.max(offsetLeft, 0), 100)}%`;\n};\n\nexport const countDecimalPlaces = (num: number) => {\n  const parts = num.toString().split(\".\");\n  return parts.length > 1 ? parts[1].length : 0;\n};\n\nexport const getMarkStyles = (min: number, max: number, step: number) => {\n  const marks = [];\n  for (let i = min; i <= max; i = Number((i + step).toPrecision(4))) {\n    const value = Number(i.toPrecision(4));\n    const position = `${getPercentage(min, max, value)}%`;\n    marks.push({ value, position });\n  }\n  const decimals = Math.max(\n    ...marks.map((mark) => countDecimalPlaces(mark.value)),\n  );\n  return marks.map((mark) => ({\n    ...mark,\n    label: mark.value.toFixed(decimals),\n  }));\n};\n\nexport const getNearestIndex = (value: SliderValue, newValue: number) => {\n  if (value.length === 1) return 0;\n\n  if (value[0] === value[1]) {\n    if (newValue < value[0]) return 0;\n    return 1;\n  }\n\n  const distances = value.map((value) => Math.abs(newValue - value));\n  const minDistance = Math.min(...distances);\n  const nearestIndex = distances.indexOf(minDistance);\n\n  return nearestIndex as ThumbIndex;\n};\n\nexport const preventOverlappingValues = (\n  value: SliderValue,\n  newValue: number,\n  index: ThumbIndex,\n) =>\n  value.length === 2\n    ? index === 0\n      ? Math.min(newValue, value[1])\n      : Math.max(newValue, value[0])\n    : newValue;\n\nexport const parseValueProp = (\n  value: number[] | undefined,\n  min: number,\n  max: number,\n) => {\n  if (typeof value === \"undefined\" || value.length < 1) return;\n  const a = clampValue(value[0], [min, max]);\n  if (value.length === 1) return [a] as SliderValue;\n  const b = clampValue(value[1], [min, max]);\n  if (a > b) return [a, a] as SliderValue;\n  return [a, b] as SliderValue;\n};\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../src/slider/internal/utils.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nexport const toFloat = (value: number | string) =>\n  typeof value === \"string\" ? Number.parseFloat(value) : value;\n\nexport const calculateMarkPosition = (\n  value: number | string,\n  max: number,\n  min: number,\n) => {\n  if (min === max) {\n    return 0;\n  }\n  const clampedValue = Number.isNaN(toFloat(value))\n    ? min\n    : Math.min(Math.max(toFloat(value), min), max);\n  const markPosition = ((clampedValue - min) / (max - min)) * 100;\n  return Math.round(markPosition * 100) / 100;\n};\n\nexport const calculatePercentage = (value: number, max: number, min: number) =>\n  ((value - min) / (max - min)) * 100;\n\nexport const clamp = (\n  value: number,\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { value: number; label: string }[],\n  restrictToMarks?: boolean,\n) => {\n  if (Number.isNaN(value)) {\n    return min;\n  }\n  // Clamp the value between min and max\n  const clampedValue = Math.min(Math.max(value, min), max);\n  if (restrictToMarks && marks) {\n    // Find the closest mark value\n    let closestMark = marks[0].value;\n    let smallestDifference = Math.abs(clampedValue - closestMark);\n    for (let i = 1; i < marks.length; i++) {\n      const currentDifference = Math.abs(clampedValue - marks[i].value);\n      if (currentDifference < smallestDifference) {\n        smallestDifference = currentDifference;\n        closestMark = marks[i].value;\n      }\n    }\n    return closestMark;\n  }\n  // Round to the nearest multiple of the step\n  let roundedValue = Math.round(clampedValue / step) * step;\n  // Ensure the rounded value does not exceed max\n  if (roundedValue > max) {\n    roundedValue = max;\n  }\n  return Number.parseFloat(roundedValue.toFixed(decimalPlaces));\n};\n\nexport const clampRange = (\n  range: [number, number],\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { value: number; label: string }[],\n  restrictToMarks?: boolean,\n) => {\n  let [start, end] = range;\n\n  if (Number.isNaN(start)) {\n    start = min;\n  }\n  if (Number.isNaN(end)) {\n    end = max;\n  }\n  if (start > end) {\n    [start, end] = [end, start];\n  }\n  start = clamp(start, max, min, step, decimalPlaces, marks, restrictToMarks);\n  end = clamp(end, max, min, step, decimalPlaces, marks, restrictToMarks);\n  return [start, end] as [number, number];\n};\n\nexport const getClickedPosition = (\n  sliderRef: RefObject<HTMLDivElement>,\n  clientX: number,\n  max: number,\n  min: number,\n  step: number,\n  decimalPlaces: number,\n  marks?: { label: string; value: number }[],\n  restrictToMarks?: boolean,\n) => {\n  if (!sliderRef.current) return;\n\n  const sliderRect = sliderRef.current.getBoundingClientRect();\n  const rawValue =\n    ((clientX - sliderRect.left) / sliderRect.width) * (max - min) + min;\n  const steppedValue = Math.round(rawValue / step) * step;\n  return clamp(\n    steppedValue,\n    max,\n    min,\n    step,\n    decimalPlaces,\n    marks,\n    restrictToMarks,\n  );\n};\n\nexport const getKeyboardValue = (\n  event: React.KeyboardEvent,\n  value: number,\n  step: number,\n  stepMultiplier: number,\n  max: number,\n  min: number,\n  restrictToMarks?: boolean,\n  marks?: { label: string; value: number }[],\n) => {\n  let newValue = value;\n\n  if (restrictToMarks && marks && marks.length >= 1) {\n    const currentIndex = marks.findIndex((mark) => mark.value === value);\n\n    switch (event.key) {\n      case \"ArrowUp\":\n      case \"ArrowRight\":\n      case \"PageUp\":\n        if (currentIndex < marks.length - 1) {\n          newValue = marks[currentIndex + 1].value;\n        }\n        break;\n      case \"ArrowDown\":\n      case \"ArrowLeft\":\n      case \"PageDown\":\n        if (currentIndex > 0) {\n          newValue = marks[currentIndex - 1].value;\n        }\n        break;\n      default:\n        return newValue;\n    }\n  } else {\n    switch (event.key) {\n      case \"PageUp\":\n        newValue = Math.min(value + step * stepMultiplier, max);\n        break;\n      case \"PageDown\":\n        newValue = Math.max(value - step * stepMultiplier, min);\n        break;\n      default:\n        return newValue;\n    }\n  }\n\n  event.preventDefault();\n  return newValue;\n};\n"],"names":[],"mappings":"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"}

package/dist-cjs/splitter/SplitHandle.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltSplitHandle {\n  --splitHandle-size: var(--salt-size-thickness-400, calc(var(--salt-size-border) * 4));\n  --splitHandle-borderWidth: var(--salt-size-thickness-100, var(--salt-size-border));\n  --splitHandle-borderColor: var(--salt-separable-secondary-borderColor);\n  --splitHandle-borderStyle: var(--salt-separable-borderStyle);\n  --splitHandle-dot-background: var(--salt-separable-foreground);\n  --splitHandle-dot-background-hover: var(--salt-separable-foreground-hover);\n  --splitHandle-dot-background-active: var(--salt-separable-foreground-active);\n\n  position: relative;\n\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  gap: 2px;\n\n  box-sizing: content-box;\n\n  background: var(--splitHandle-background);\n}\n\n.saltSplitHandle-bordered,\n.saltSplitHandle-variant-primary {\n  --splitHandle-background: var(--salt-container-primary-background);\n  --splitHandle-background-hover: var(--salt-separable-background-hover);\n  --splitHandle-background-active: var(--salt-separable-background-active);\n}\n\n.saltSplitHandle-variant-secondary {\n  --splitHandle-background: var(--salt-container-secondary-background);\n  --splitHandle-background-hover: var(--salt-separable-background-hover);\n  --splitHandle-background-active: var(--salt-separable-background-active);\n}\n\n.saltSplitHandle-variant-tertiary {\n  --splitHandle-background: var(--salt-container-tertiary-background);\n  --splitHandle-background-hover: var(--salt-separable-background-hover);\n  --splitHandle-background-active: var(--salt-separable-background-active);\n}\n\n.saltSplitHandle-variant-transparent {\n  --splitHandle-background: var(--salt-separable-background);\n  --splitHandle-background-hover: var(--salt-separable-background-hover);\n  --splitHandle-background-active: var(--salt-separable-background-active);\n}\n\n.saltSplitHandle[data-resize-handle-state=\"hover\"] {\n  background: var(--splitHandle-background-hover);\n}\n\n.saltSplitHandle[data-resize-handle-state=\"drag\"] {\n  --splitHandle-background: var(--splitHandle-background-active);\n}\n\n.saltSplitHandle[data-panel-group-direction=\"horizontal\"] {\n  flex-direction: column;\n  width: var(--splitHandle-size);\n}\n\n.saltSplitHandle[data-panel-group-direction=\"vertical\"] {\n  flex-direction: row;\n  height: var(--splitHandle-size);\n}\n\n.saltSplitHandle[data-panel-group-direction=\"horizontal\"]::after {\n  content: \"\";\n  position: absolute;\n  left: -10px;\n  right: -10px;\n  top: 0;\n  bottom: 0;\n}\n\n.saltSplitHandle[data-panel-group-direction=\"vertical\"]::after {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: -10px;\n  bottom: -10px;\n}\n\n.saltSplitHandle:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltSplitHandle-border-top {\n  border-top-width: var(--splitHandle-borderWidth);\n  border-top-color: var(--splitHandle-borderColor);\n  border-top-style: var(--splitHandle-borderStyle);\n\n  border-bottom-width: var(--splitHandle-borderWidth);\n  border-bottom-color: transparent;\n  border-bottom-style: var(--splitHandle-borderStyle);\n}\n\n.saltSplitHandle-border-bottom {\n  border-top-width: var(--splitHandle-borderWidth);\n  border-top-color: transparent;\n  border-top-style: var(--splitHandle-borderStyle);\n\n  border-bottom-width: var(--splitHandle-borderWidth);\n  border-bottom-color: var(--splitHandle-borderColor);\n  border-bottom-style: var(--splitHandle-borderStyle);\n}\n\n.saltSplitHandle-border-top-bottom {\n  border-top-width: var(--splitHandle-borderWidth);\n  border-top-color: var(--splitHandle-borderColor);\n  border-top-style: var(--splitHandle-borderStyle);\n\n  border-bottom-width: var(--splitHandle-borderWidth);\n  border-bottom-color: var(--splitHandle-borderColor);\n  border-bottom-style: var(--splitHandle-borderStyle);\n}\n\n.saltSplitHandle-border-left {\n  border-left-width: var(--splitHandle-borderWidth);\n  border-left-color: var(--splitHandle-borderColor);\n  border-left-style: var(--splitHandle-borderStyle);\n\n  border-right-width: var(--splitHandle-borderWidth);\n  border-right-color: transparent;\n  border-right-style: var(--splitHandle-borderStyle);\n}\n\n.saltSplitHandle-border-right {\n  border-left-width: var(--splitHandle-borderWidth);\n  border-left-color: transparent;\n  border-left-style: var(--splitHandle-borderStyle);\n\n  border-right-width: var(--splitHandle-borderWidth);\n  border-right-color: var(--splitHandle-borderColor);\n  border-right-style: var(--splitHandle-borderStyle);\n}\n\n.saltSplitHandle-border-left-right {\n  border-left-width: var(--splitHandle-borderWidth);\n  border-left-color: var(--splitHandle-borderColor);\n  border-left-style: var(--splitHandle-borderStyle);\n\n  border-right-width: var(--splitHandle-borderWidth);\n  border-right-color: var(--splitHandle-borderColor);\n  border-right-style: var(--splitHandle-borderStyle);\n}\n\n/* two handles touching horizontally */\n.saltSplitHandle[data-panel-group-direction=\"horizontal\"] + div[data-panel-size=\"0.0\"] + .saltSplitHandle[data-panel-group-direction=\"horizontal\"] {\n  margin-left: -1px;\n}\n\n/* two handles touching vertically */\n.saltSplitHandle[data-panel-group-direction=\"vertical\"] + div[data-panel-size=\"0.0\"] + .saltSplitHandle[data-panel-group-direction=\"vertical\"] {\n  margin-top: -1px;\n}\n\n/* handle touching the side of a container */\n@supports selector(:has(*)) {\n  .saltSplitPanel:first-of-type[data-panel-size=\"0.0\"] + .saltSplitHandle-bordered[data-panel-group-direction=\"horizontal\"] {\n    margin-left: -1px;\n  }\n\n  .saltSplitPanel:first-of-type[data-panel-size=\"0.0\"] + .saltSplitHandle-bordered[data-panel-group-direction=\"vertical\"] {\n    margin-top: -1px;\n  }\n\n  .saltSplitHandle-bordered[data-panel-group-direction=\"horizontal\"]:has(+ .saltSplitPanel:last-of-type[data-panel-size=\"0.0\"]) {\n    margin-right: -1px;\n  }\n\n  .saltSplitHandle-bordered[data-panel-group-direction=\"vertical\"]:has(+ .saltSplitPanel:last-of-type[data-panel-size=\"0.0\"]) {\n    margin-bottom: -1px;\n  }\n}\n\n.saltSplitHandle-dot {\n  background: var(--splitHandle-dot-background);\n}\n\n.saltSplitHandle[data-resize-handle-state=\"hover\"] > .saltSplitHandle-dot {\n  background: var(--splitHandle-dot-background-hover);\n}\n\n.saltSplitHandle[data-resize-handle-state=\"drag\"] > .saltSplitHandle-dot {\n  background: var(--splitHandle-dot-background-active);\n}\n\n.saltSplitHandle[data-panel-group-direction=\"horizontal\"] > .saltSplitHandle-dot {\n  width: 2px;\n  height: 1px;\n}\n\n.saltSplitHandle[data-panel-group-direction=\"vertical\"] > .saltSplitHandle-dot {\n  height: 2px;\n  width: 1px;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SplitHandle.css.js.map

package/dist-cjs/splitter/SplitHandle.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitHandle.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/splitter/SplitHandle.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var reactResizablePanels = require('react-resizable-panels');
+var SplitHandle$1 = require('./SplitHandle.css.js');
+var Splitter = require('./Splitter.js');
+var utils = require('./utils.js');
+
+const withBaseName = core.makePrefixer("saltSplitHandle");
+function SplitHandle({
+  variant: variantProp,
+  border: borderProp,
+  hitAreaMargins = {
+    coarse: 9,
+    fine: 9
+  },
+  className,
+  ...props
+}) {
+  const targetWindow = window.useWindow();
+  const appearance = react.useContext(Splitter.AppearanceContext);
+  const orientation = react.useContext(Splitter.OrientationContext);
+  const variant = variantProp ?? utils.computeVariant(appearance);
+  const border = borderProp ?? utils.computeAccent(appearance, orientation);
+  styles.useComponentCssInjection({
+    testId: "salt-split-handle",
+    css: SplitHandle$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactResizablePanels.PanelResizeHandle,
+    {
+      hitAreaMargins,
+      "data-variant": variant,
+      "data-border": border,
+      className: clsx(
+        withBaseName(),
+        withBaseName(appearance),
+        withBaseName("border", border),
+        withBaseName("variant", variant),
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("dot") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("dot") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("dot") }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("dot") })
+      ]
+    }
+  );
+}
+
+exports.SplitHandle = SplitHandle;
+//# sourceMappingURL=SplitHandle.js.map

package/dist-cjs/splitter/SplitHandle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitHandle.js","sources":["../src/splitter/SplitHandle.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { useContext } from \"react\";\nimport {\n  PanelResizeHandle,\n  type PanelResizeHandleProps,\n} from \"react-resizable-panels\";\n\nimport splitHandleCSS from \"./SplitHandle.css\";\nimport { AppearanceContext, OrientationContext } from \"./Splitter\";\nimport { computeAccent, computeVariant } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSplitHandle\");\n\nexport type SplitHandleVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"transparent\";\n\nexport type SplitHandleBorder =\n  | \"top\"\n  | \"bottom\"\n  | \"right\"\n  | \"left\"\n  | \"top-bottom\"\n  | \"left-right\"\n  | \"none\";\n\nexport interface SplitHandleProps extends PanelResizeHandleProps {\n  /**\n   * Styling variant\n   * @default \"primary\"\n   */\n  variant?: SplitHandleVariant;\n  /**\n   * Change which sides get a border displayed\n   *\n   * Default is based on the orientation and appearance\n   * set on the parent Stepper components, ex.\n   * bordered + vertical = left-right\n   * bordered + horizontal = top-bottom\n   * transparent = none\n   */\n  border?: SplitHandleBorder;\n}\n\nexport function SplitHandle({\n  variant: variantProp,\n  border: borderProp,\n  hitAreaMargins = {\n    coarse: 9,\n    fine: 9,\n  },\n  className,\n  ...props\n}: SplitHandleProps) {\n  const targetWindow = useWindow();\n  const appearance = useContext(AppearanceContext);\n  const orientation = useContext(OrientationContext);\n\n  const variant = variantProp ?? computeVariant(appearance);\n  const border = borderProp ?? computeAccent(appearance, orientation);\n\n  useComponentCssInjection({\n    testId: \"salt-split-handle\",\n    css: splitHandleCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <PanelResizeHandle\n      hitAreaMargins={hitAreaMargins}\n      data-variant={variant}\n      data-border={border}\n      className={clsx(\n        withBaseName(),\n        withBaseName(appearance),\n        withBaseName(\"border\", border),\n        withBaseName(\"variant\", variant),\n        className,\n      )}\n      {...props}\n    >\n      <span className={withBaseName(\"dot\")} />\n      <span className={withBaseName(\"dot\")} />\n      <span className={withBaseName(\"dot\")} />\n      <span className={withBaseName(\"dot\")} />\n    </PanelResizeHandle>\n  );\n}\n"],"names":["makePrefixer","useWindow","useContext","AppearanceContext","OrientationContext","computeVariant","computeAccent","useComponentCssInjection","splitHandleCSS","jsxs","PanelResizeHandle","jsx"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAmC5C,SAAS,WAAY,CAAA;AAAA,EAC1B,OAAS,EAAA,WAAA;AAAA,EACT,MAAQ,EAAA,UAAA;AAAA,EACR,cAAiB,GAAA;AAAA,IACf,MAAQ,EAAA,CAAA;AAAA,IACR,IAAM,EAAA;AAAA,GACR;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAqB,EAAA;AACnB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAM,MAAA,UAAA,GAAaC,iBAAWC,0BAAiB,CAAA;AAC/C,EAAM,MAAA,WAAA,GAAcD,iBAAWE,2BAAkB,CAAA;AAEjD,EAAM,MAAA,OAAA,GAAU,WAAe,IAAAC,oBAAA,CAAe,UAAU,CAAA;AACxD,EAAA,MAAM,MAAS,GAAA,UAAA,IAAcC,mBAAc,CAAA,UAAA,EAAY,WAAW,CAAA;AAElE,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,eAAA;AAAA,IAACC,sCAAA;AAAA,IAAA;AAAA,MACC,cAAA;AAAA,MACA,cAAc,EAAA,OAAA;AAAA,MACd,aAAa,EAAA,MAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,UAAU,CAAA;AAAA,QACvB,YAAA,CAAa,UAAU,MAAM,CAAA;AAAA,QAC7B,YAAA,CAAa,WAAW,OAAO,CAAA;AAAA,QAC/B;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,KAAK,CAAG,EAAA,CAAA;AAAA,wBACrCA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,YAAA,CAAa,KAAK,CAAG,EAAA,CAAA;AAAA,wBACrCA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,YAAA,CAAa,KAAK,CAAG,EAAA,CAAA;AAAA,wBACrCA,cAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,YAAA,CAAa,KAAK,CAAG,EAAA;AAAA;AAAA;AAAA,GACxC;AAEJ;;;;"}

package/dist-cjs/splitter/SplitPanel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltSplitPanel {\n  box-sizing: border-box;\n\n  background: var(--splitPanel-background);\n}\n\n.saltSplitPanel[data-panel-size=\"0.0\"] {\n  visibility: hidden;\n}\n\n.saltSplitPanel-primary {\n  --splitPanel-background: var(--salt-container-primary-background);\n}\n\n.saltSplitPanel-secondary {\n  --splitPanel-background: var(--salt-container-secondary-background);\n}\n\n.saltSplitPanel-tertiary {\n  --splitPanel-background: var(--salt-container-tertiary-background);\n}\n\n@supports selector(:has(*)) {\n  .saltSplitPanel:has(.saltSplitPanel) {\n    background: unset;\n  }\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=SplitPanel.css.js.map

package/dist-cjs/splitter/SplitPanel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/splitter/SplitPanel.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var reactResizablePanels = require('react-resizable-panels');
+var SplitPanel$1 = require('./SplitPanel.css.js');
+
+const withBaseName = core.makePrefixer("saltSplitPanel");
+const SplitPanel = react.forwardRef(
+  function SplitPanel2({ id: idProp, variant = "primary", minSize = 10, className, ...props }, ref) {
+    const id = core.useId(idProp);
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-split-panel",
+      css: SplitPanel$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactResizablePanels.Panel,
+      {
+        id,
+        minSize,
+        "data-variant": variant,
+        className: clsx(withBaseName(), withBaseName(variant), className),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+
+exports.SplitPanel = SplitPanel;
+//# sourceMappingURL=SplitPanel.js.map

package/dist-cjs/splitter/SplitPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPanel.js","sources":["../src/splitter/SplitPanel.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\nimport {\n  type ImperativePanelHandle,\n  Panel,\n  type PanelProps,\n} from \"react-resizable-panels\";\n\nimport splitPanelCSS from \"./SplitPanel.css\";\n\nexport type SplitPanelVariant = \"primary\" | \"secondary\" | \"tertiary\";\n\nexport interface SplitPanelProps extends PanelProps {\n  /**\n   * Styling variant\n   * @default \"primary\"\n   */\n  variant?: SplitPanelVariant;\n}\n\nconst withBaseName = makePrefixer(\"saltSplitPanel\");\n\nexport const SplitPanel = forwardRef<ImperativePanelHandle, SplitPanelProps>(\n  function SplitPanel(\n    { id: idProp, variant = \"primary\", minSize = 10, className, ...props },\n    ref,\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n\n    useComponentCssInjection({\n      testId: \"salt-split-panel\",\n      css: splitPanelCSS,\n      window: targetWindow,\n    });\n\n    return (\n      <Panel\n        id={id}\n        minSize={minSize}\n        data-variant={variant}\n        className={clsx(withBaseName(), withBaseName(variant), className)}\n        ref={ref}\n        {...props}\n      />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","SplitPanel","useId","useWindow","useComponentCssInjection","splitPanelCSS","jsx","Panel"],"mappings":";;;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAE3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CACP,EAAE,EAAA,EAAI,MAAQ,EAAA,OAAA,GAAU,SAAW,EAAA,OAAA,GAAU,EAAI,EAAA,SAAA,EAAW,GAAG,KAAA,IAC/D,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAACC,0BAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,OAAA;AAAA,QACA,cAAc,EAAA,OAAA;AAAA,QACd,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,QAChE,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}

package/dist-cjs/splitter/Splitter.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactResizablePanels = require('react-resizable-panels');
+
+const OrientationContext = react.createContext("vertical");
+const AppearanceContext = react.createContext("bordered");
+function Splitter({
+  orientation,
+  appearance: appearanceProp,
+  ...props
+}) {
+  const appearanceContext = react.useContext(AppearanceContext);
+  const appearance = appearanceProp ?? appearanceContext;
+  const direction = orientation === "horizontal" ? "vertical" : "horizontal";
+  return /* @__PURE__ */ jsxRuntime.jsx(OrientationContext.Provider, { value: orientation, children: /* @__PURE__ */ jsxRuntime.jsx(AppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactResizablePanels.PanelGroup,
+    {
+      "data-orientation": orientation,
+      "data-appearance": appearance,
+      direction,
+      ...props
+    }
+  ) }) });
+}
+
+exports.AppearanceContext = AppearanceContext;
+exports.OrientationContext = OrientationContext;
+exports.Splitter = Splitter;
+//# sourceMappingURL=Splitter.js.map

package/dist-cjs/splitter/Splitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Splitter.js","sources":["../src/splitter/Splitter.tsx"],"sourcesContent":["import { type ReactNode, createContext, useContext } from \"react\";\nimport { PanelGroup, type PanelGroupProps } from \"react-resizable-panels\";\n\nexport type SplitterAppearance = \"bordered\" | \"transparent\";\nexport type SplitterOrientation = \"horizontal\" | \"vertical\";\n\nexport const OrientationContext =\n  createContext<SplitterOrientation>(\"vertical\");\nexport const AppearanceContext = createContext<SplitterAppearance>(\"bordered\");\n\nexport interface SplitterProps extends Omit<PanelGroupProps, \"direction\"> {\n  /**\n   * The orientation of the splitter.\n   * Replaces `PanelGroupProps[\"direction\"]`\n   */\n  orientation: SplitterOrientation;\n  /**\n   * The appearance of the splitter.\n   * If set to \"transparent\", the splitter handle will\n   * be transparent, hence the background will be visible.\n   * @default \"bordered\"\n   */\n  appearance?: SplitterAppearance;\n  children: ReactNode;\n}\n\nexport function Splitter({\n  orientation,\n  appearance: appearanceProp,\n  ...props\n}: SplitterProps) {\n  const appearanceContext = useContext(AppearanceContext);\n  const appearance = appearanceProp ?? appearanceContext;\n\n  const direction = orientation === \"horizontal\" ? \"vertical\" : \"horizontal\";\n\n  return (\n    <OrientationContext.Provider value={orientation}>\n      <AppearanceContext.Provider value={appearance}>\n        <PanelGroup\n          data-orientation={orientation}\n          data-appearance={appearance}\n          direction={direction}\n          {...props}\n        />\n      </AppearanceContext.Provider>\n    </OrientationContext.Provider>\n  );\n}\n"],"names":["createContext","useContext","jsx","PanelGroup"],"mappings":";;;;;;AAMa,MAAA,kBAAA,GACXA,oBAAmC,UAAU;AAClC,MAAA,iBAAA,GAAoBA,oBAAkC,UAAU;AAkBtE,SAAS,QAAS,CAAA;AAAA,EACvB,WAAA;AAAA,EACA,UAAY,EAAA,cAAA;AAAA,EACZ,GAAG;AACL,CAAkB,EAAA;AAChB,EAAM,MAAA,iBAAA,GAAoBC,iBAAW,iBAAiB,CAAA;AACtD,EAAA,MAAM,aAAa,cAAkB,IAAA,iBAAA;AAErC,EAAM,MAAA,SAAA,GAAY,WAAgB,KAAA,YAAA,GAAe,UAAa,GAAA,YAAA;AAE9D,EACE,uBAAAC,cAAA,CAAC,kBAAmB,CAAA,QAAA,EAAnB,EAA4B,KAAA,EAAO,WAClC,EAAA,QAAA,kBAAAA,cAAA,CAAC,iBAAkB,CAAA,QAAA,EAAlB,EAA2B,KAAA,EAAO,UACjC,EAAA,QAAA,kBAAAA,cAAA;AAAA,IAACC,+BAAA;AAAA,IAAA;AAAA,MACC,kBAAkB,EAAA,WAAA;AAAA,MAClB,iBAAiB,EAAA,UAAA;AAAA,MACjB,SAAA;AAAA,MACC,GAAG;AAAA;AAAA,KAER,CACF,EAAA,CAAA;AAEJ;;;;;;"}

package/dist-cjs/splitter/utils.js

@@ -0,0 +1,18 @@
+'use strict';
+
+function computeAccent(appearance, orientation) {
+  if (appearance === "transparent") {
+    return "none";
+  }
+  if (orientation === "horizontal") {
+    return "top-bottom";
+  }
+  return "left-right";
+}
+function computeVariant(appearance) {
+  return appearance === "bordered" ? "primary" : "transparent";
+}
+
+exports.computeAccent = computeAccent;
+exports.computeVariant = computeVariant;
+//# sourceMappingURL=utils.js.map

package/dist-cjs/splitter/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/splitter/utils.ts"],"sourcesContent":["import type { SplitHandleBorder } from \"./SplitHandle\";\nimport type { SplitterAppearance, SplitterOrientation } from \"./Splitter\";\n\nexport function computeAccent(\n  appearance: SplitterAppearance,\n  orientation: SplitterOrientation,\n): SplitHandleBorder {\n  if (appearance === \"transparent\") {\n    return \"none\";\n  }\n\n  if (orientation === \"horizontal\") {\n    return \"top-bottom\";\n  }\n\n  return \"left-right\";\n}\n\nexport function computeVariant(\n  appearance: SplitterAppearance,\n): \"primary\" | \"transparent\" {\n  return appearance === \"bordered\" ? \"primary\" : \"transparent\";\n}\n"],"names":[],"mappings":";;AAGgB,SAAA,aAAA,CACd,YACA,WACmB,EAAA;AACnB,EAAA,IAAI,eAAe,aAAe,EAAA;AAChC,IAAO,OAAA,MAAA;AAAA;AAGT,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAO,OAAA,YAAA;AAAA;AAGT,EAAO,OAAA,YAAA;AACT;AAEO,SAAS,eACd,UAC2B,EAAA;AAC3B,EAAO,OAAA,UAAA,KAAe,aAAa,SAAY,GAAA,aAAA;AACjD;;;;;"}