@gfazioli/mantine-split-pane/dist/cjs/Split.cjs

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

'use client';
'use strict';

var React = require('react');
var core = require('@mantine/core');
var SplitPane = require('./Pane/SplitPane.cjs');
var SplitPaneResizer = require('./Resizer/SplitPaneResizer.cjs');
var Split_context = require('./Split.context.cjs');
var Split_module = require('./Split.module.css.cjs');

const defaultProps = {
  inline: false,
  ...SplitPaneResizer.defaultProps
};
const varsResolver = core.createVarsResolver((_, { inline }) => ({
  root: {
    "--split-inline": inline ? "inline-flex" : "flex"
  }
}));
const Split = core.factory((_props, ref) => {
  const props = core.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 = core.useStyles({
    name: "Split",
    props,
    classes: Split_module,
    className,
    style,
    classNames,
    styles,
    unstyled,
    vars,
    varsResolver
  });
  const childRefs = React.Children.map(children, () => React.useRef(null));
  const clonedChildren = React.Children.map(children, (child, index) => {
    if (React.isValidElement(child)) {
      if (child.type === SplitPaneResizer.SplitPaneResizer) {
        const beforeRef = childRefs[index - 1];
        const afterRef = childRefs[index + 1];
        return React.cloneElement(child, {
          __beforeRef: beforeRef,
          __afterRef: afterRef
        });
      } else if (child.type === SplitPane.SplitPane) {
        {
          return React.cloneElement(child, {
            ref: childRefs[index]
          });
        }
      } else {
        return child;
      }
    }
    return child;
  });
  return /* @__PURE__ */ React.createElement(
    Split_context.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(core.Box, { ref, mod: { orientation }, ...getStyles("root"), ...others }, clonedChildren)
  );
});
Split.classes = Split_module;
Split.displayName = "Split";
Split.Pane = SplitPane.SplitPane;
Split.Resizer = SplitPaneResizer.SplitPaneResizer;

exports.Split = Split;
//# sourceMappingURL=Split.cjs.map