@allxsmith/bestax-bulma 5.48.0 → 5.49.0

package/dist/index.cjs

@@ -18224,7 +18224,7 @@ function buildSegmentMap(format) {
 // Arithmetic helpers
 // ---------------------------------------------------------------------------
 const wrap$1 = (n, max) => ((n % max) + max) % max;
-const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
+const clamp$1 = (n, min, max) => Math.max(min, Math.min(max, n));
 /**
  * Number of days in the month of `d` (handles leap Februarys). Built on
  * `makeDate`, so a year below 100 keeps its own leap rule.
@@ -18328,7 +18328,7 @@ function setSegmentValue(segment, currentDate, rawDigits, isPm) {
                 // Hold: 00 is invalid; wait for the second digit (01..09).
                 return { date: currentDate, advance: false };
             }
-            const clamped = clamp(value, 1, 12);
+            const clamped = clamp$1(value, 1, 12);
             const day = next.getDate();
             next.setDate(1);
             next.setMonth(clamped - 1);
@@ -18343,7 +18343,7 @@ function setSegmentValue(segment, currentDate, rawDigits, isPm) {
                 // Hold: 00 is invalid; wait for the second digit (01..09).
                 return { date: currentDate, advance: false };
             }
-            const clamped = clamp(value, 1, daysInMonth(next));
+            const clamped = clamp$1(value, 1, daysInMonth(next));
             next.setDate(clamped);
             // Advance when buffer is full, or first digit >=4 (no day 40+). First
             // digit 3 still waits for 30/31.
@@ -18356,7 +18356,7 @@ function setSegmentValue(segment, currentDate, rawDigits, isPm) {
                     // Don't commit yet; wait for the second digit (01..09 are valid).
                     return { date: currentDate, advance: false };
                 }
-                const clamped = clamp(value, 1, 12);
+                const clamped = clamp$1(value, 1, 12);
                 const h24 = isPm ? (clamped % 12) + 12 : clamped % 12;
                 next.setHours(h24);
                 // Advance when the buffer is full, or when no valid 2-digit
@@ -18367,7 +18367,7 @@ function setSegmentValue(segment, currentDate, rawDigits, isPm) {
                 return { date: next, advance };
             }
             // 24h: valid range 0..23.
-            const clamped = clamp(value, 0, 23);
+            const clamped = clamp$1(value, 0, 23);
             next.setHours(clamped);
             // Advance when buffer is full, or when first digit is 3..9 (since
             // 30..99 are all out of range). First digits 0, 1, 2 can still accept
@@ -18376,14 +18376,14 @@ function setSegmentValue(segment, currentDate, rawDigits, isPm) {
             return { date: next, advance };
         }
         case 'minutes': {
-            const clamped = clamp(value, 0, 59);
+            const clamped = clamp$1(value, 0, 59);
             next.setMinutes(clamped);
             // Advance when buffer full, or first digit 6..9 (can't form 60..99).
             const advance = rawDigits.length >= 2 || value >= 6;
             return { date: next, advance };
         }
         case 'seconds': {
-            const clamped = clamp(value, 0, 59);
+            const clamped = clamp$1(value, 0, 59);
             next.setSeconds(clamped);
             const advance = rawDigits.length >= 2 || value >= 6;
             return { date: next, advance };
@@ -22693,6 +22693,530 @@ const Section = ({ size, className, children, color, bgColor, textColor, style,
     return (jsxRuntime.jsx("section", { className: sectionClasses, style: mergeBulmaStyles(bulmaHelperStyles, style), ...rest, children: children }));
 };
 
+// INTERNAL: deliberately not exported from src/index.ts.
+//
+// The arithmetic behind Splitter. Every size is a percentage of the length
+// the panes share, which is the splitter's length less its handles, and a
+// layout always adds up to 100.
+// Rounding leaves sizes a hair off, so anything this close counts as equal.
+const EPS = 1e-6;
+const clamp = (value, low, high) => Math.min(Math.max(value, low), high);
+/**
+ * A limit in percent of `length` pixels. A number or a `%` is already one. A
+ * `px` or `rem` length needs the length the panes share, and without it
+ * there's no answer yet, so it's `null`. Anything else is `null` too.
+ */
+function limitToPercent(limit, length, remPx) {
+    if (limit === undefined)
+        return null;
+    if (typeof limit === 'number')
+        return limit;
+    const match = /^\s*(\d*\.?\d+)\s*(px|rem|%)?\s*$/.exec(limit);
+    if (!match)
+        return null;
+    const value = parseFloat(match[1]);
+    const unit = match[2] ?? '%';
+    if (unit === '%')
+        return value;
+    if (!length)
+        return null;
+    return ((unit === 'rem' ? value * remPx : value) / length) * 100;
+}
+/**
+ * The sizes panes start at: each its `defaultSize`, and the ones without
+ * one sharing what's left equally. When they all have one, or those that do
+ * take more than 100, the given ones are scaled to fit.
+ */
+function defaultSizes(defaults) {
+    const given = defaults.reduce((sum, d) => sum + (d ?? 0), 0);
+    const free = defaults.filter(d => d === undefined).length;
+    if (free === 0 || given > 100) {
+        const scale = given > 0 ? 100 / given : 0;
+        return defaults.map(d => d === undefined ? 0 : scale ? d * scale : 100 / defaults.length);
+    }
+    const share = (100 - given) / free;
+    return defaults.map(d => (d === undefined ? share : d));
+}
+/** The range a pane can take in a layout: zero when it's shut. */
+const rangeOf = (bound, size) => bound.collapsible && size <= EPS
+    ? { low: 0, high: 0 }
+    : { low: bound.min, high: bound.max };
+/**
+ * Moves each pane into its limits, taking what it needs from the nearest
+ * panes with room to give, or giving what it has too much of to the nearest
+ * with room to take. A shut pane stays shut. Limits that can't all hold are
+ * met as far as they can be.
+ */
+function fitSizes(sizes, bounds) {
+    const next = [...sizes];
+    const n = next.length;
+    // Nearest first, so a change stays as local as it can.
+    const byDistance = (i) => next
+        .map((_, j) => j)
+        .filter(j => j !== i)
+        .sort((x, y) => Math.abs(x - i) - Math.abs(y - i) || x - y);
+    for (let pass = 0; pass < n * 2; pass++) {
+        let moved = false;
+        for (let i = 0; i < n; i++) {
+            const { low, high } = rangeOf(bounds[i], next[i]);
+            if (next[i] < low - EPS) {
+                let need = low - next[i];
+                for (const j of byDistance(i)) {
+                    const give = Math.min(need, Math.max(0, next[j] - rangeOf(bounds[j], next[j]).low));
+                    next[j] -= give;
+                    next[i] += give;
+                    need -= give;
+                    if (give > EPS)
+                        moved = true;
+                    if (need <= EPS)
+                        break;
+                }
+            }
+            else if (next[i] > high + EPS) {
+                let spare = next[i] - high;
+                for (const j of byDistance(i)) {
+                    const take = Math.min(spare, Math.max(0, rangeOf(bounds[j], next[j]).high - next[j]));
+                    next[j] += take;
+                    next[i] -= take;
+                    spare -= take;
+                    if (take > EPS)
+                        moved = true;
+                    if (spare <= EPS)
+                        break;
+                }
+            }
+        }
+        if (!moved)
+            break;
+    }
+    return next;
+}
+/** Whether two layouts are the same, to within rounding. */
+const sameSizes = (a, b) => a.length === b.length && a.every((size, i) => Math.abs(size - b[i]) <= EPS);
+/**
+ * The pane a handle speaks for: the one before it, unless only the one after
+ * it can shut, so that Enter shuts the pane you'd expect.
+ */
+const primaryOf = (handle, bounds) => !bounds[handle].collapsible && bounds[handle + 1].collapsible
+    ? handle + 1
+    : handle;
+/**
+ * How far the pane before handle `a`'s line can go, between the two panes
+ * beside it: `low` to `high` while both stay open, and `shut` and `full`
+ * when one of them can close.
+ */
+function pairRange(sizes, a, bounds) {
+    const b = a + 1;
+    const total = sizes[a] + sizes[b];
+    const low = Math.max(bounds[a].min, total - bounds[b].max);
+    const high = Math.min(bounds[a].max, total - bounds[b].min);
+    return {
+        total,
+        low,
+        high,
+        // The pane before can shut if it may and the one after can take it all.
+        shut: bounds[a].collapsible && total <= bounds[b].max + EPS,
+        // The pane after can shut likewise.
+        full: bounds[b].collapsible && total <= bounds[a].max + EPS,
+    };
+}
+/**
+ * The layout with the line of handle `a` moved so the pane before it is
+ * `target`, within both panes' limits. A collapsible pane dragged below half
+ * its minimum shuts, and one that's shut opens at its minimum once dragged
+ * past that point.
+ */
+function resizePair(sizes, a, target, bounds) {
+    const b = a + 1;
+    const { total, low, high, shut, full } = pairRange(sizes, a, bounds);
+    let size;
+    if (shut && target < bounds[a].min / 2)
+        size = 0;
+    else if (full && total - target < bounds[b].min / 2)
+        size = total;
+    else if (low > high + EPS)
+        size = sizes[a];
+    else
+        size = clamp(target, low, high);
+    const next = [...sizes];
+    next[a] = size;
+    next[b] = total - size;
+    return next;
+}
+/**
+ * The aria value range of a handle's primary pane: zero at the bottom when
+ * it can shut, everything the pair holds at the top when the other pane can.
+ */
+function primaryRange(sizes, a, primary, bounds) {
+    const { total, low, high, shut, full } = pairRange(sizes, a, bounds);
+    const minA = shut ? 0 : low;
+    const maxA = full ? total : high;
+    return primary === a
+        ? { now: sizes[a], min: minA, max: maxA }
+        : { now: sizes[a + 1], min: total - maxA, max: total - minA };
+}
+
+const PaneContext = React.createContext(null);
+/**
+ * One pane of a Splitter, sized by the splitter around it.
+ *
+ * @function
+ * @param {SplitterPaneProps} props - Props for Splitter.Pane.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the pane's `<div>`.
+ * @returns {JSX.Element} The rendered pane.
+ */
+const SplitterPane = React.forwardRef(({ className, textColor, bgColor, label: _label, defaultSize: _defaultSize, minSize: _minSize, maxSize: _maxSize, collapsible: _collapsible, collapsed: _collapsed, defaultCollapsed: _defaultCollapsed, onCollapsedChange: _onCollapsedChange, style, children, ...props }, ref) => {
+    const state = React.useContext(PaneContext);
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const paneClass = usePrefixedClassNames('splitter-pane', {
+        'is-collapsed': !!state?.collapsed,
+    });
+    return (jsxRuntime.jsx("div", { ref: ref, className: classNames(paneClass, bulmaHelperClasses, className), ...rest, id: state?.id ?? rest.id, 
+        // A percentage over a zero basis, so the server and the client lay
+        // it out the same, with no measuring.
+        style: state ? { ...style, flex: `${state.size} 1 0px` } : style, hidden: state?.collapsed || rest.hidden, children: children }));
+});
+SplitterPane.displayName = 'Splitter.Pane';
+const isPane = (child) => React.isValidElement(child) && child.type === SplitterPane;
+/** The bounds with pane `i`'s changed, for a move that mustn't snap it shut. */
+const withBound = (bounds, i, change) => bounds.map((bound, j) => (j === i ? { ...bound, ...change } : bound));
+/** The bounds with neither pane beside handle `h` able to shut. */
+const opened = (bounds, h) => withBound(withBound(bounds, h, { collapsible: false }), h + 1, {
+    collapsible: false,
+});
+/**
+ * The handle a pane's collapse goes through: the one that speaks for it. A
+ * collapsible pane that isn't last always has the handle after it, so the
+ * one left without is a last pane whose neighbour can collapse too, and it
+ * goes through the handle before it.
+ */
+const handleFor = (pane, bounds) => pane < bounds.length - 1 && primaryOf(pane, bounds) === pane
+    ? pane
+    : pane - 1;
+/**
+ * The `Splitter` component lays out two or more panes side by side or one above the other, with a handle between each pair to drag or move by keyboard.
+ *
+ * Each handle is a focusable `separator`, named by the `label` of the pane
+ * it speaks for. Sizes are percentages, so the server renders the layout
+ * the browser does, and `minSize` and `maxSize` also take `px` and `rem`. A
+ * `collapsible` pane shuts when dragged below half its minimum, and Enter on
+ * its handle shuts it and brings it back. It doesn't store sizes itself:
+ * keep them with `sizes` and `onSizesChange`.
+ *
+ * @function
+ * @param {SplitterProps} props - Props for the Splitter component.
+ * @param {React.Ref<HTMLDivElement>} ref - Forwarded ref to the root `<div>`.
+ * @returns {JSX.Element} The rendered splitter.
+ *
+ * @example
+ * <Splitter height={480}>
+ *   <Splitter.Pane label="Files" defaultSize={25} minSize="12rem">…</Splitter.Pane>
+ *   <Splitter.Pane label="Editor">…</Splitter.Pane>
+ * </Splitter>
+ */
+const SplitterRoot = React.forwardRef(({ className, style, textColor, bgColor, orientation = 'horizontal', height, sizes: sizesProp, onSizesChange, step = 1, children, ...props }, ref) => {
+    const { bulmaHelperClasses, rest } = useBulmaClasses({
+        color: textColor,
+        backgroundColor: bgColor,
+        ...props,
+    });
+    const vertical = orientation === 'vertical';
+    const rootClass = usePrefixedClassNames('splitter', {
+        'is-vertical': vertical,
+    });
+    const handleClass = usePrefixedClassNames('splitter-handle');
+    const activeClass = usePrefixedClassNames('is-active');
+    const panes = flattenChildren(children).filter(isPane);
+    const baseId = React.useId();
+    const ids = panes.map((pane, i) => pane.props.id ?? `${baseId}-pane-${i}`);
+    // The room the panes share, in pixels, and a rem, both measured in the
+    // browser. Until then, only percentage limits apply.
+    const [length, setLength] = React.useState(null);
+    const [remPx, setRemPx] = React.useState(16);
+    const bounds = panes.map(({ props: pane }) => ({
+        min: Math.max(0, limitToPercent(pane.minSize, length, remPx) ?? 0),
+        max: Math.min(100, limitToPercent(pane.maxSize, length, remPx) ?? 100),
+        collapsible: !!pane.collapsible,
+    }));
+    const boundsKey = JSON.stringify(bounds);
+    // Shuts pane `i`, giving its room to the pane across the handle that
+    // speaks for it, when that pane can take it within its maximum, as a
+    // drag would. A lone pane has no handle and nowhere to give its room.
+    const collapseIn = (current, i) => {
+        if (current.length < 2)
+            return current;
+        const h = handleFor(i, bounds);
+        const across = h === i ? i + 1 : h;
+        if (current[across] + current[i] > bounds[across].max + 1e-6) {
+            return current;
+        }
+        const next = [...current];
+        next[across] += next[i];
+        next[i] = 0;
+        return next;
+    };
+    const startSizes = () => {
+        const base = defaultSizes(panes.map(pane => pane.props.defaultSize));
+        let next = fitSizes(base, bounds);
+        panes.forEach(({ props: pane }, i) => {
+            if (pane.collapsible && (pane.collapsed ?? pane.defaultCollapsed)) {
+                next = collapseIn(next, i);
+            }
+        });
+        return next;
+    };
+    const paneKey = ids.join('|');
+    const [state, setState] = React.useState(() => ({
+        key: paneKey,
+        sizes: startSizes(),
+    }));
+    // A different set of panes starts over from the defaults.
+    let uncontrolled = state.sizes;
+    if (state.key !== paneKey) {
+        uncontrolled = startSizes();
+        setState({ key: paneKey, sizes: uncontrolled });
+    }
+    const sizes = sizesProp && sizesProp.length === panes.length ? sizesProp : uncontrolled;
+    // The size each pane comes back at after it's shut: the last size it had
+    // open, or its default.
+    const restoreRef = React.useRef([]);
+    const defaults = defaultSizes(panes.map(pane => pane.props.defaultSize));
+    sizes.forEach((size, i) => {
+        var _a;
+        if (size > 0)
+            restoreRef.current[i] = size;
+        else
+            (_a = restoreRef.current)[i] ?? (_a[i] = defaults[i]);
+    });
+    const collapsedAt = (layout) => layout.map((size, i) => bounds[i].collapsible && size <= 1e-6);
+    // Moves the layout on, telling the app and each pane whose collapse
+    // changed, unless the change came from its own `collapsed`. A move that
+    // would collapse or open a pane whose `collapsed` the app holds only
+    // asks: the app's answer comes back through `collapsed`.
+    const sizesRef = React.useRef(sizes);
+    sizesRef.current = sizes;
+    const panesRef = React.useRef(panes);
+    panesRef.current = panes;
+    const commit = (next, fromProp = false) => {
+        const previous = sizesRef.current;
+        if (sameSizes(previous, next))
+            return;
+        const before = collapsedAt(previous);
+        const after = collapsedAt(next);
+        const flipped = after.flatMap((shut, i) => shut !== before[i] ? [i] : []);
+        if (!fromProp &&
+            flipped.some(i => panesRef.current[i].props.collapsed !== undefined)) {
+            flipped.forEach(i => panesRef.current[i].props.onCollapsedChange?.(after[i]));
+            return;
+        }
+        sizesRef.current = next;
+        if (!sizesProp)
+            setState(current => ({ ...current, sizes: next }));
+        onSizesChange?.(next);
+        if (!fromProp) {
+            flipped.forEach(i => panesRef.current[i].props.onCollapsedChange?.(after[i]));
+        }
+    };
+    // Brings pane `i` back at its restore size, taken from across the handle
+    // that speaks for it.
+    // A lone pane never shuts, so there's always a handle here.
+    const expand = (current, i) => {
+        const h = handleFor(i, bounds);
+        const target = restoreRef.current[i];
+        const total = current[h] + current[h + 1];
+        return resizePair(current, h, h === i ? target : total - target, 
+        // Opening one pane snaps neither shut: it stops at the limits.
+        opened(bounds, h));
+    };
+    // A pane's own `collapsed` moving: shut it or bring it back, before the
+    // browser paints.
+    const collapsedProps = panes.map(pane => pane.props.collapsible ? pane.props.collapsed : undefined);
+    const collapsedKey = JSON.stringify(collapsedProps);
+    useClientLayoutEffect(() => {
+        const current = sizesRef.current;
+        const shut = collapsedAt(current);
+        let next = current;
+        collapsedProps.forEach((wanted, i) => {
+            if (wanted === undefined || wanted === shut[i])
+                return;
+            next = wanted ? collapseIn(next, i) : expand(next, i);
+        });
+        commit(next, true);
+        // collapsedKey stands for collapsedProps.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [collapsedKey]);
+    // Measuring: the room the panes share, so `px` and `rem` limits can turn
+    // into percentages, then the layout fitted to them.
+    const rootRef = React.useRef(null);
+    const setRefs = React.useCallback((node) => {
+        rootRef.current = node;
+        if (typeof ref === 'function')
+            return ref(node);
+        if (ref)
+            ref.current = node;
+    }, [ref]);
+    // The room the panes share: the root's length less its handles'.
+    const roomOf = React.useCallback(() => {
+        const root = rootRef.current;
+        /* istanbul ignore next: measuring only runs while it's mounted */
+        if (!root)
+            return null;
+        const along = (el) => {
+            const rect = el.getBoundingClientRect();
+            return vertical ? rect.height : rect.width;
+        };
+        const handles = Array.from(root.children).filter(child => child.matches('[role="separator"]'));
+        const room = along(root) - handles.reduce((sum, handle) => sum + along(handle), 0);
+        return room > 0 ? room : null;
+    }, [vertical]);
+    const measure = React.useCallback(() => {
+        setLength(roomOf());
+        setRemPx(parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+    }, [roomOf]);
+    useClientLayoutEffect(() => {
+        measure();
+        const root = rootRef.current;
+        if (!root || typeof ResizeObserver === 'undefined')
+            return;
+        const resizes = new ResizeObserver(measure);
+        resizes.observe(root);
+        return () => resizes.disconnect();
+    }, [measure]);
+    // Limits that changed, from measuring or from props: fit the layout.
+    useClientLayoutEffect(() => {
+        commit(fitSizes(sizesRef.current, bounds));
+        // boundsKey stands for bounds.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [boundsKey]);
+    const rtl = () => !vertical &&
+        !!rootRef.current &&
+        getComputedStyle(rootRef.current).direction === 'rtl';
+    // ---- Dragging ----
+    const [dragging, setDragging] = React.useState(null);
+    const dragRef = React.useRef(null);
+    const onPointerDown = (h) => (event) => {
+        if (event.button !== 0)
+            return;
+        const pixels = roomOf();
+        if (!pixels)
+            return;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        dragRef.current = {
+            handle: h,
+            start: vertical ? event.clientY : event.clientX,
+            startSizes: sizesRef.current,
+            pixels,
+            flip: rtl(),
+        };
+        setDragging(h);
+    };
+    const onPointerMove = (event) => {
+        const drag = dragRef.current;
+        if (!drag)
+            return;
+        const moved = (vertical ? event.clientY : event.clientX) - drag.start;
+        const delta = ((drag.flip ? -moved : moved) / drag.pixels) * 100;
+        commit(resizePair(sizesRef.current, drag.handle, drag.startSizes[drag.handle] + delta, bounds));
+    };
+    const endDrag = (event) => {
+        if (!dragRef.current)
+            return;
+        dragRef.current = null;
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        setDragging(null);
+    };
+    // While dragging, the resize cursor shows wherever the pointer goes.
+    React.useEffect(() => {
+        if (dragging === null)
+            return;
+        const body = document.body.style;
+        const { cursor, userSelect } = body;
+        body.cursor = vertical ? 'row-resize' : 'col-resize';
+        body.userSelect = 'none';
+        return () => {
+            body.cursor = cursor;
+            body.userSelect = userSelect;
+        };
+    }, [dragging, vertical]);
+    // Double-click: the two panes back to their default share of the room.
+    const onDoubleClick = (h) => () => {
+        const current = sizesRef.current;
+        const total = current[h] + current[h + 1];
+        const pair = defaults[h] + defaults[h + 1];
+        const target = pair > 0 ? (defaults[h] / pair) * total : total / 2;
+        const next = [...current];
+        next[h] = target;
+        next[h + 1] = total - target;
+        commit(fitSizes(next, bounds));
+    };
+    // ---- Keys ----
+    const onKeyDown = (h) => (event) => {
+        const current = sizesRef.current;
+        const primary = primaryOf(h, bounds);
+        const by = event.shiftKey ? step * 10 : step;
+        const back = vertical ? 'ArrowUp' : 'ArrowLeft';
+        const forward = vertical ? 'ArrowDown' : 'ArrowRight';
+        // The line moves the way the key points, so right to left, moving
+        // right shrinks the pane before, which sits on the right.
+        const sign = rtl() ? -1 : 1;
+        // Keys move within the limits; Enter is what shuts a pane.
+        const open = opened(bounds, h);
+        let next = null;
+        if (event.key === back || event.key === forward) {
+            const direction = (event.key === forward ? 1 : -1) * sign;
+            next = resizePair(current, h, current[h] + direction * by, open);
+        }
+        else if (event.key === 'Home' || event.key === 'End') {
+            const range = primaryRange(current, h, primary, open);
+            const size = event.key === 'Home' ? range.min : range.max;
+            const total = current[h] + current[h + 1];
+            next = resizePair(current, h, primary === h ? size : total - size, open);
+        }
+        else if (event.key === 'Enter' && bounds[primary].collapsible) {
+            next =
+                current[primary] > 1e-6
+                    ? collapseIn(current, primary)
+                    : expand(current, primary);
+        }
+        if (!next)
+            return;
+        event.preventDefault();
+        commit(next);
+    };
+    // A handle names its pane, so a pane without a label leaves it nameless.
+    const unnamed = panes
+        .slice(0, -1)
+        .some((_, h) => !panes[primaryOf(h, bounds)].props.label);
+    React.useEffect(() => {
+        if (unnamed) {
+            warnOnce('Splitter:unlabelled', '[bestax-bulma] <Splitter> has a handle whose pane has no label. ' +
+                'Give each Splitter.Pane a label, so a screen reader can say ' +
+                'which pane a handle resizes.');
+        }
+    }, [unnamed]);
+    const collapsed = collapsedAt(sizes);
+    const items = [];
+    panes.forEach((pane, i) => {
+        items.push(jsxRuntime.jsx(PaneContext.Provider
+        // Children.toArray, under flattenChildren, keys every child.
+        , { value: { id: ids[i], size: sizes[i], collapsed: collapsed[i] }, children: pane }, `pane-${String(pane.key)}`));
+        if (i === panes.length - 1)
+            return;
+        const primary = primaryOf(i, bounds);
+        const range = primaryRange(sizes, i, primary, bounds);
+        items.push(jsxRuntime.jsx("div", { className: classNames(handleClass, dragging === i && activeClass), role: "separator", tabIndex: 0, "aria-orientation": vertical ? 'horizontal' : 'vertical', "aria-valuenow": Math.round(range.now), "aria-valuemin": Math.round(range.min), "aria-valuemax": Math.round(range.max), "aria-controls": ids[primary], "aria-label": panes[primary].props.label, onPointerDown: onPointerDown(i), onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onDoubleClick: onDoubleClick(i), onKeyDown: onKeyDown(i) }, `handle-${i}`));
+    });
+    return (jsxRuntime.jsx("div", { ref: setRefs, className: classNames(rootClass, bulmaHelperClasses, className), style: height !== undefined ? { ...style, height } : style, ...rest, children: items }));
+});
+SplitterRoot.displayName = 'Splitter';
+const Splitter = withSubComponents(SplitterRoot, {
+    Pane: SplitterPane,
+});
+
 exports.Autocomplete = Autocomplete;
 exports.Avatar = Avatar;
 exports.Avatars = Avatars;
@@ -22837,6 +23361,8 @@ exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Span = Span;
+exports.Splitter = Splitter;
+exports.SplitterPane = SplitterPane;
 exports.Step = Step;
 exports.Steps = Steps;
 exports.Strong = Strong;