@gfazioli/mantine-split-pane/dist/esm/Split.mjs

A React component that manages split panes allows users to divide and resize content areas within a layout efficiently.

'use client';
import React, { useRef, isValidElement, cloneElement } from 'react';
import { createVarsResolver, factory, useProps, useStyles, Box } from '@mantine/core';
import { SplitPane } from './Pane/SplitPane.mjs';
import { defaultProps as defaultProps$1, SplitPaneResizer } from './Resizer/SplitPaneResizer.mjs';
import { SplitContextProvider } from './Split.context.mjs';
import classes from './Split.module.css.mjs';

const defaultProps = {
  inline: false,
  ...defaultProps$1
};
const varsResolver = createVarsResolver((_, { inline }) => ({
  root: {
    "--split-inline": inline ? "inline-flex" : "flex"
  }
}));
const Split = factory((_props, ref) => {
  const props = useProps("Split", defaultProps, _props);
  const {
    inline,
    orientation,
    opacity,
    size,
    radius,
    withKnob,
    knobAlwaysOn,
    knobSize,
    knobOpacity,
    knobRadius,
    knobColor,
    knobHoverColor,
    spacing,
    step,
    shiftStep,
    cursorVertical,
    cursorHorizontal,
    color,
    hoverColor,
    variant,
    gradient,
    hoverGradient,
    classNames,
    style,
    styles,
    unstyled,
    vars,
    mod,
    children,
    className,
    ...others
  } = props;
  const getStyles = useStyles({
    name: "Split",
    props,
    classes,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  const childRefs = React.Children.map(children, () => useRef(null));
  const clonedChildren = React.Children.map(children, (child, index) => {
    if (isValidElement(child)) {
      if (child.type === SplitPaneResizer) {
        const beforeRef = childRefs[index - 1];
        const afterRef = childRefs[index + 1];
        return cloneElement(child, {
          __beforeRef: beforeRef,
          __afterRef: afterRef
        });
      } else if (child.type === SplitPane) {
        {
          return cloneElement(child, {
            ref: childRefs[index]
          });
        }
      } else {
        return child;
      }
    }
    return child;
  });
  return /* @__PURE__ */ React.createElement(
    SplitContextProvider,
    {
      value: {
        orientation,
        size,
        opacity,
        radius,
        color,
        hoverColor,
        knobSize,
        knobOpacity,
        knobRadius,
        knobColor,
        knobHoverColor,
        variant,
        withKnob,
        knobAlwaysOn,
        spacing,
        step,
        shiftStep,
        cursorVertical,
        cursorHorizontal,
        gradient,
        hoverGradient
      }
    },
    /* @__PURE__ */ React.createElement(Box, { ref, mod: { orientation }, ...getStyles("root"), ...others }, clonedChildren)
  );
});
Split.classes = classes;
Split.displayName = "Split";
Split.Pane = SplitPane;
Split.Resizer = SplitPaneResizer;

export { Split };
//# sourceMappingURL=Split.mjs.map