@zag-js/splitter 1.39.1 → 1.41.0

package/dist/utils/aria.d.mts

@@ -1,4 +1,4 @@
-import { PanelData } from '../splitter.types.mjs';
+import { NormalizedPanelData } from '../splitter.types.mjs';
 import '@zag-js/core';
 import '@zag-js/types';
 import './registry.mjs';
@@ -10,14 +10,20 @@ import './registry.mjs';
 
 declare function calculateAriaValues({ size, panels, pivotIndices, }: {
     size: number[];
-    panels: PanelData[];
+    panels: NormalizedPanelData[];
     pivotIndices: number[];
 }): {
     valueMax: number;
     valueMin: number;
     valueNow: number;
 };
-declare function getAriaValue(size: number[], panels: PanelData[], handleId: string): {
+declare function getAriaValue(size: number[], panels: NormalizedPanelData[], handleId: string): {
+    beforeId: string | undefined;
+    afterId: string | undefined;
+    valueMax: undefined;
+    valueMin: undefined;
+    valueNow: undefined;
+} | {
     beforeId: string;
     afterId: string;
     valueMax: number;

package/dist/utils/aria.d.ts

@@ -1,4 +1,4 @@
-import { PanelData } from '../splitter.types.js';
+import { NormalizedPanelData } from '../splitter.types.js';
 import '@zag-js/core';
 import '@zag-js/types';
 import './registry.js';
@@ -10,14 +10,20 @@ import './registry.js';
 
 declare function calculateAriaValues({ size, panels, pivotIndices, }: {
     size: number[];
-    panels: PanelData[];
+    panels: NormalizedPanelData[];
     pivotIndices: number[];
 }): {
     valueMax: number;
     valueMin: number;
     valueNow: number;
 };
-declare function getAriaValue(size: number[], panels: PanelData[], handleId: string): {
+declare function getAriaValue(size: number[], panels: NormalizedPanelData[], handleId: string): {
+    beforeId: string | undefined;
+    afterId: string | undefined;
+    valueMax: undefined;
+    valueMin: undefined;
+    valueNow: undefined;
+} | {
     beforeId: string;
     afterId: string;
     valueMax: number;

package/dist/utils/aria.js

@@ -59,6 +59,15 @@ function getAriaValue(size, panels, handleId) {
   const [beforeId, afterId] = handleId.split(":");
   const beforeIndex = panels.findIndex((panel) => panel.id === beforeId);
   const afterIndex = panels.findIndex((panel) => panel.id === afterId);
+  if (beforeIndex === -1 || afterIndex === -1) {
+    return {
+      beforeId: beforeId || void 0,
+      afterId: afterId || void 0,
+      valueMax: void 0,
+      valueMin: void 0,
+      valueNow: void 0
+    };
+  }
   const { valueMax, valueMin, valueNow } = calculateAriaValues({
     size,
     panels,

package/dist/utils/aria.mjs

@@ -36,6 +36,15 @@ function getAriaValue(size, panels, handleId) {
   const [beforeId, afterId] = handleId.split(":");
   const beforeIndex = panels.findIndex((panel) => panel.id === beforeId);
   const afterIndex = panels.findIndex((panel) => panel.id === afterId);
+  if (beforeIndex === -1 || afterIndex === -1) {
+    return {
+      beforeId: beforeId || void 0,
+      afterId: afterId || void 0,
+      valueMax: void 0,
+      valueMin: void 0,
+      valueNow: void 0
+    };
+  }
   const { valueMax, valueMin, valueNow } = calculateAriaValues({
     size,
     panels,

package/dist/utils/panel.d.mts

@@ -1,30 +1,31 @@
 import { Style } from '@zag-js/types';
-import { PanelData, DragState, PanelId } from '../splitter.types.mjs';
+import { PanelData, PanelSize, DragState } from '../splitter.types.mjs';
 import '@zag-js/core';
 import './registry.mjs';
 
-declare function getPanelById(panels: PanelData[], id: string): PanelData;
+/**
+ * This code was modified from react-resizable-panels by Brian Vaughn
+ * @see https://github.com/bvaughn/react-resizable-panels
+ */
+
+declare function getPanelById<T extends PanelData>(panels: T[], id: string): T;
 declare function findPanelDataIndex(panels: PanelData[], panel: PanelData): number;
 declare function findPanelIndex(panels: PanelData[], id: string): number;
-declare function panelDataHelper(panels: PanelData[], panel: PanelData, sizes: number[]): {
+declare function panelDataHelper<T extends PanelData>(panels: T[], panel: T, sizes: number[]): T & {
     panelSize: number;
     pivotIndices: number[];
-    id: PanelId;
-    order?: number | undefined;
-    minSize?: number | undefined;
-    maxSize?: number | undefined;
-    collapsible?: boolean | undefined;
-    collapsedSize?: number | undefined;
 };
 declare function sortPanels(panels: PanelData[]): PanelData[];
 declare function getPanelLayout(panels: PanelData[]): string;
 declare function serializePanels(panels: PanelData[]): string;
-declare function getPanelFlexBoxStyle({ defaultSize, dragState, sizes, panels, panelIndex, precision, }: {
-    defaultSize: number | undefined;
-    sizes: number[];
+declare function getPanelFlexBoxStyle({ size, defaultSize, dragState, resolvedSizes, panels, panelIndex, horizontal, precision, }: {
+    size: PanelSize | undefined;
+    defaultSize: PanelSize | undefined;
+    resolvedSizes: number[];
     dragState: DragState | null;
     panels: PanelData[];
     panelIndex: number;
+    horizontal: boolean;
     precision?: number | undefined;
 }): Style;
 declare function getUnsafeDefaultSize({ panels, size: sizes }: {

package/dist/utils/panel.d.ts

@@ -1,30 +1,31 @@
 import { Style } from '@zag-js/types';
-import { PanelData, DragState, PanelId } from '../splitter.types.js';
+import { PanelData, PanelSize, DragState } from '../splitter.types.js';
 import '@zag-js/core';
 import './registry.js';
 
-declare function getPanelById(panels: PanelData[], id: string): PanelData;
+/**
+ * This code was modified from react-resizable-panels by Brian Vaughn
+ * @see https://github.com/bvaughn/react-resizable-panels
+ */
+
+declare function getPanelById<T extends PanelData>(panels: T[], id: string): T;
 declare function findPanelDataIndex(panels: PanelData[], panel: PanelData): number;
 declare function findPanelIndex(panels: PanelData[], id: string): number;
-declare function panelDataHelper(panels: PanelData[], panel: PanelData, sizes: number[]): {
+declare function panelDataHelper<T extends PanelData>(panels: T[], panel: T, sizes: number[]): T & {
     panelSize: number;
     pivotIndices: number[];
-    id: PanelId;
-    order?: number | undefined;
-    minSize?: number | undefined;
-    maxSize?: number | undefined;
-    collapsible?: boolean | undefined;
-    collapsedSize?: number | undefined;
 };
 declare function sortPanels(panels: PanelData[]): PanelData[];
 declare function getPanelLayout(panels: PanelData[]): string;
 declare function serializePanels(panels: PanelData[]): string;
-declare function getPanelFlexBoxStyle({ defaultSize, dragState, sizes, panels, panelIndex, precision, }: {
-    defaultSize: number | undefined;
-    sizes: number[];
+declare function getPanelFlexBoxStyle({ size, defaultSize, dragState, resolvedSizes, panels, panelIndex, horizontal, precision, }: {
+    size: PanelSize | undefined;
+    defaultSize: PanelSize | undefined;
+    resolvedSizes: number[];
     dragState: DragState | null;
     panels: PanelData[];
     panelIndex: number;
+    horizontal: boolean;
     precision?: number | undefined;
 }): Style;
 declare function getUnsafeDefaultSize({ panels, size: sizes }: {

package/dist/utils/panel.js

@@ -32,6 +32,7 @@ __export(panel_exports, {
 });
 module.exports = __toCommonJS(panel_exports);
 var import_utils = require("@zag-js/utils");
+var import_size = require("./size.js");
 function getPanelById(panels, id) {
   const panel = panels.find((panel2) => panel2.id === id);
   (0, import_utils.ensure)(panel, () => `Panel data not found for id "${id}"`);
@@ -77,26 +78,52 @@ function serializePanels(panels) {
   return serialized.join(",");
 }
 function getPanelFlexBoxStyle({
+  size,
   defaultSize,
   dragState,
-  sizes,
+  resolvedSizes,
   panels,
   panelIndex,
+  horizontal,
   precision = 3
 }) {
-  const size = sizes[panelIndex];
+  const resolvedSize = resolvedSizes[panelIndex];
+  const layoutSize = size ?? defaultSize;
+  const panel = panels[panelIndex];
   let flexGrow;
-  if (size == null) {
-    flexGrow = defaultSize != void 0 ? defaultSize.toPrecision(precision) : "1";
+  let flexBasis;
+  let flexShrink = 1;
+  const constraintAxis = horizontal ? "Width" : "Height";
+  const minSize = panel ? (0, import_size.toCssPanelSize)(panel.minSize) : void 0;
+  const maxSize = panel ? (0, import_size.toCssPanelSize)(panel.maxSize) : void 0;
+  const layoutCssSize = (0, import_size.toCssPanelSize)(layoutSize);
+  if (resolvedSize == null) {
+    if (layoutCssSize != null) {
+      if (layoutCssSize.endsWith("%")) {
+        flexGrow = Number.parseFloat(layoutCssSize).toPrecision(precision);
+      } else {
+        flexBasis = getClampedFlexBasis({
+          basis: layoutCssSize,
+          minSize,
+          maxSize
+        });
+        flexGrow = "0";
+        flexShrink = 0;
+      }
+    } else {
+      flexGrow = "1";
+    }
   } else if (panels.length === 1) {
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = resolvedSize.toPrecision(precision);
   }
   return {
-    flexBasis: 0,
+    flexBasis: flexBasis ?? 0,
     flexGrow,
-    flexShrink: 1,
+    flexShrink,
+    ...minSize ? { [`min${constraintAxis}`]: minSize } : {},
+    ...maxSize ? { [`max${constraintAxis}`]: maxSize } : {},
     // Without this, Panel sizes may be unintentionally overridden by their content
     overflow: "hidden",
     // Disable pointer events inside of a panel during resize
@@ -104,6 +131,13 @@ function getPanelFlexBoxStyle({
     pointerEvents: dragState !== null ? "none" : void 0
   };
 }
+function getClampedFlexBasis({
+  basis,
+  minSize,
+  maxSize
+}) {
+  return `clamp(${minSize ?? "0%"}, ${basis}, ${maxSize ?? "100%"})`;
+}
 function getUnsafeDefaultSize({ panels, size: sizes }) {
   const finalSizes = Array(panels.length);
   let numPanelsWithSizes = 0;

package/dist/utils/panel.mjs

@@ -2,6 +2,7 @@ import "../chunk-QZ7TP4HQ.mjs";
 
 // src/utils/panel.ts
 import { ensure } from "@zag-js/utils";
+import { toCssPanelSize } from "./size.mjs";
 function getPanelById(panels, id) {
   const panel = panels.find((panel2) => panel2.id === id);
   ensure(panel, () => `Panel data not found for id "${id}"`);
@@ -47,26 +48,52 @@ function serializePanels(panels) {
   return serialized.join(",");
 }
 function getPanelFlexBoxStyle({
+  size,
   defaultSize,
   dragState,
-  sizes,
+  resolvedSizes,
   panels,
   panelIndex,
+  horizontal,
   precision = 3
 }) {
-  const size = sizes[panelIndex];
+  const resolvedSize = resolvedSizes[panelIndex];
+  const layoutSize = size ?? defaultSize;
+  const panel = panels[panelIndex];
   let flexGrow;
-  if (size == null) {
-    flexGrow = defaultSize != void 0 ? defaultSize.toPrecision(precision) : "1";
+  let flexBasis;
+  let flexShrink = 1;
+  const constraintAxis = horizontal ? "Width" : "Height";
+  const minSize = panel ? toCssPanelSize(panel.minSize) : void 0;
+  const maxSize = panel ? toCssPanelSize(panel.maxSize) : void 0;
+  const layoutCssSize = toCssPanelSize(layoutSize);
+  if (resolvedSize == null) {
+    if (layoutCssSize != null) {
+      if (layoutCssSize.endsWith("%")) {
+        flexGrow = Number.parseFloat(layoutCssSize).toPrecision(precision);
+      } else {
+        flexBasis = getClampedFlexBasis({
+          basis: layoutCssSize,
+          minSize,
+          maxSize
+        });
+        flexGrow = "0";
+        flexShrink = 0;
+      }
+    } else {
+      flexGrow = "1";
+    }
   } else if (panels.length === 1) {
     flexGrow = "1";
   } else {
-    flexGrow = size.toPrecision(precision);
+    flexGrow = resolvedSize.toPrecision(precision);
   }
   return {
-    flexBasis: 0,
+    flexBasis: flexBasis ?? 0,
     flexGrow,
-    flexShrink: 1,
+    flexShrink,
+    ...minSize ? { [`min${constraintAxis}`]: minSize } : {},
+    ...maxSize ? { [`max${constraintAxis}`]: maxSize } : {},
     // Without this, Panel sizes may be unintentionally overridden by their content
     overflow: "hidden",
     // Disable pointer events inside of a panel during resize
@@ -74,6 +101,13 @@ function getPanelFlexBoxStyle({
     pointerEvents: dragState !== null ? "none" : void 0
   };
 }
+function getClampedFlexBasis({
+  basis,
+  minSize,
+  maxSize
+}) {
+  return `clamp(${minSize ?? "0%"}, ${basis}, ${maxSize ?? "100%"})`;
+}
 function getUnsafeDefaultSize({ panels, size: sizes }) {
   const finalSizes = Array(panels.length);
   let numPanelsWithSizes = 0;

package/dist/utils/preserve-fixed-panel-sizes.d.mts

@@ -0,0 +1,18 @@
+import { NormalizedPanelData } from '../splitter.types.mjs';
+import '@zag-js/core';
+import '@zag-js/types';
+import './registry.mjs';
+
+/**
+ * This code was modified from react-resizable-panels by Brian Vaughn
+ * @see https://github.com/bvaughn/react-resizable-panels
+ */
+
+declare function preserveFixedPanelSizes({ panels, prevLayout, prevGroupSize, nextGroupSize, }: {
+    panels: NormalizedPanelData[];
+    prevLayout: number[];
+    prevGroupSize: number;
+    nextGroupSize: number;
+}): number[];
+
+export { preserveFixedPanelSizes };

package/dist/utils/preserve-fixed-panel-sizes.d.ts

@@ -0,0 +1,18 @@
+import { NormalizedPanelData } from '../splitter.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+import './registry.js';
+
+/**
+ * This code was modified from react-resizable-panels by Brian Vaughn
+ * @see https://github.com/bvaughn/react-resizable-panels
+ */
+
+declare function preserveFixedPanelSizes({ panels, prevLayout, prevGroupSize, nextGroupSize, }: {
+    panels: NormalizedPanelData[];
+    prevLayout: number[];
+    prevGroupSize: number;
+    nextGroupSize: number;
+}): number[];
+
+export { preserveFixedPanelSizes };

package/dist/utils/preserve-fixed-panel-sizes.js

@@ -0,0 +1,91 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/preserve-fixed-panel-sizes.ts
+var preserve_fixed_panel_sizes_exports = {};
+__export(preserve_fixed_panel_sizes_exports, {
+  preserveFixedPanelSizes: () => preserveFixedPanelSizes
+});
+module.exports = __toCommonJS(preserve_fixed_panel_sizes_exports);
+var import_fuzzy = require("./fuzzy.js");
+function preserveFixedPanelSizes({
+  panels,
+  prevLayout,
+  prevGroupSize,
+  nextGroupSize
+}) {
+  if (prevGroupSize <= 0 || nextGroupSize <= 0) {
+    return prevLayout;
+  }
+  const nextLayout = [...prevLayout];
+  const relativeIndices = [];
+  let fixedTotal = 0;
+  let relativeTotal = 0;
+  panels.forEach((panel, index) => {
+    if (panel.resizeBehavior === "preserve-pixel-size") {
+      const prevPixelSize = prevLayout[index] / 100 * prevGroupSize;
+      const nextPercentSize = prevPixelSize / nextGroupSize * 100;
+      nextLayout[index] = nextPercentSize;
+      fixedTotal += nextPercentSize;
+    } else {
+      relativeIndices.push(index);
+      relativeTotal += prevLayout[index];
+    }
+  });
+  if (relativeIndices.length === 0) {
+    const total2 = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
+    if ((0, import_fuzzy.fuzzyNumbersEqual)(total2, 100)) {
+      return nextLayout;
+    }
+    if (total2 <= 0) {
+      return prevLayout;
+    }
+    const scale2 = 100 / total2;
+    return nextLayout.map((size) => size * scale2);
+  }
+  const remainingSize = 100 - fixedTotal;
+  if (remainingSize <= 0) {
+    const total2 = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
+    if ((0, import_fuzzy.fuzzyNumbersEqual)(total2, 100)) {
+      return nextLayout;
+    }
+    const scale2 = 100 / Math.max(total2, 1);
+    return nextLayout.map((size) => size * scale2);
+  }
+  if ((0, import_fuzzy.fuzzyNumbersEqual)(relativeTotal, 0)) {
+    const size = remainingSize / relativeIndices.length;
+    relativeIndices.forEach((index) => {
+      nextLayout[index] = size;
+    });
+    return nextLayout;
+  }
+  relativeIndices.forEach((index) => {
+    nextLayout[index] = prevLayout[index] / relativeTotal * remainingSize;
+  });
+  const total = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
+  if ((0, import_fuzzy.fuzzyNumbersEqual)(total, 100)) {
+    return nextLayout;
+  }
+  const scale = 100 / total;
+  return nextLayout.map((size) => size * scale);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  preserveFixedPanelSizes
+});

package/dist/utils/preserve-fixed-panel-sizes.mjs

@@ -0,0 +1,68 @@
+import "../chunk-QZ7TP4HQ.mjs";
+
+// src/utils/preserve-fixed-panel-sizes.ts
+import { fuzzyNumbersEqual } from "./fuzzy.mjs";
+function preserveFixedPanelSizes({
+  panels,
+  prevLayout,
+  prevGroupSize,
+  nextGroupSize
+}) {
+  if (prevGroupSize <= 0 || nextGroupSize <= 0) {
+    return prevLayout;
+  }
+  const nextLayout = [...prevLayout];
+  const relativeIndices = [];
+  let fixedTotal = 0;
+  let relativeTotal = 0;
+  panels.forEach((panel, index) => {
+    if (panel.resizeBehavior === "preserve-pixel-size") {
+      const prevPixelSize = prevLayout[index] / 100 * prevGroupSize;
+      const nextPercentSize = prevPixelSize / nextGroupSize * 100;
+      nextLayout[index] = nextPercentSize;
+      fixedTotal += nextPercentSize;
+    } else {
+      relativeIndices.push(index);
+      relativeTotal += prevLayout[index];
+    }
+  });
+  if (relativeIndices.length === 0) {
+    const total2 = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
+    if (fuzzyNumbersEqual(total2, 100)) {
+      return nextLayout;
+    }
+    if (total2 <= 0) {
+      return prevLayout;
+    }
+    const scale2 = 100 / total2;
+    return nextLayout.map((size) => size * scale2);
+  }
+  const remainingSize = 100 - fixedTotal;
+  if (remainingSize <= 0) {
+    const total2 = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
+    if (fuzzyNumbersEqual(total2, 100)) {
+      return nextLayout;
+    }
+    const scale2 = 100 / Math.max(total2, 1);
+    return nextLayout.map((size) => size * scale2);
+  }
+  if (fuzzyNumbersEqual(relativeTotal, 0)) {
+    const size = remainingSize / relativeIndices.length;
+    relativeIndices.forEach((index) => {
+      nextLayout[index] = size;
+    });
+    return nextLayout;
+  }
+  relativeIndices.forEach((index) => {
+    nextLayout[index] = prevLayout[index] / relativeTotal * remainingSize;
+  });
+  const total = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
+  if (fuzzyNumbersEqual(total, 100)) {
+    return nextLayout;
+  }
+  const scale = 100 / total;
+  return nextLayout.map((size) => size * scale);
+}
+export {
+  preserveFixedPanelSizes
+};

package/dist/utils/registry.js

@@ -135,7 +135,7 @@ var SplitterRegistry = class {
    */
   findIntersectingHandles(x, y, pointerType, eventTarget) {
     const hits = this.findHitHandles(x, y, pointerType);
-    const targetElement = eventTarget instanceof HTMLElement || eventTarget instanceof SVGElement ? eventTarget : null;
+    const targetElement = (0, import_dom_query.isElement)(eventTarget) ? eventTarget : null;
     if (!targetElement || !(0, import_dom_query.contains)(this.doc, targetElement)) return hits;
     return hits.filter((handle) => {
       const dragHandleElement = handle.element;

package/dist/utils/registry.mjs

@@ -3,7 +3,7 @@ import {
 } from "../chunk-QZ7TP4HQ.mjs";
 
 // src/utils/registry.ts
-import { contains, getDocument, getParentElement } from "@zag-js/dom-query";
+import { contains, getDocument, getParentElement, isElement } from "@zag-js/dom-query";
 import { intersects, toRect } from "./intersects.mjs";
 import { compareStackingOrder } from "./stacking-order.mjs";
 var SplitterRegistry = class {
@@ -112,7 +112,7 @@ var SplitterRegistry = class {
    */
   findIntersectingHandles(x, y, pointerType, eventTarget) {
     const hits = this.findHitHandles(x, y, pointerType);
-    const targetElement = eventTarget instanceof HTMLElement || eventTarget instanceof SVGElement ? eventTarget : null;
+    const targetElement = isElement(eventTarget) ? eventTarget : null;
     if (!targetElement || !contains(this.doc, targetElement)) return hits;
     return hits.filter((handle) => {
       const dragHandleElement = handle.element;

package/dist/utils/resize-by-delta.d.mts

@@ -1,4 +1,4 @@
-import { PanelData } from '../splitter.types.mjs';
+import { NormalizedPanelData } from '../splitter.types.mjs';
 import '@zag-js/core';
 import '@zag-js/types';
 import './registry.mjs';
@@ -11,7 +11,7 @@ import './registry.mjs';
 interface Layout {
     delta: number;
     initialSize: number[];
-    panels: PanelData[];
+    panels: NormalizedPanelData[];
     pivotIndices: number[];
     prevSize: number[];
     trigger: "imperative-api" | "keyboard" | "mouse-or-touch";

package/dist/utils/resize-by-delta.d.ts

@@ -1,4 +1,4 @@
-import { PanelData } from '../splitter.types.js';
+import { NormalizedPanelData } from '../splitter.types.js';
 import '@zag-js/core';
 import '@zag-js/types';
 import './registry.js';
@@ -11,7 +11,7 @@ import './registry.js';
 interface Layout {
     delta: number;
     initialSize: number[];
-    panels: PanelData[];
+    panels: NormalizedPanelData[];
     pivotIndices: number[];
     prevSize: number[];
     trigger: "imperative-api" | "keyboard" | "mouse-or-touch";

package/dist/utils/resize-panel.d.mts

@@ -1,4 +1,4 @@
-import { PanelData } from '../splitter.types.mjs';
+import { NormalizedPanelData } from '../splitter.types.mjs';
 import '@zag-js/core';
 import '@zag-js/types';
 import './registry.mjs';
@@ -9,7 +9,7 @@ import './registry.mjs';
  */
 
 declare function resizePanel({ panels, index, size }: {
-    panels: PanelData[];
+    panels: NormalizedPanelData[];
     index: number;
     size: number;
 }): number;

package/dist/utils/resize-panel.d.ts

@@ -1,4 +1,4 @@
-import { PanelData } from '../splitter.types.js';
+import { NormalizedPanelData } from '../splitter.types.js';
 import '@zag-js/core';
 import '@zag-js/types';
 import './registry.js';
@@ -9,7 +9,7 @@ import './registry.js';
  */
 
 declare function resizePanel({ panels, index, size }: {
-    panels: PanelData[];
+    panels: NormalizedPanelData[];
     index: number;
     size: number;
 }): number;

package/dist/utils/size.d.mts

@@ -0,0 +1,17 @@
+import { PanelData, NormalizedPanelData, PanelSize } from '../splitter.types.mjs';
+import '@zag-js/core';
+import '@zag-js/types';
+import './registry.mjs';
+
+declare function getGroupSize(rootEl: HTMLElement | null, orientation: "horizontal" | "vertical"): number;
+declare function parsePanelSize(size: PanelSize | undefined, rootEl: HTMLElement | null, orientation: "horizontal" | "vertical"): number | undefined;
+declare function toCssPanelSize(size: PanelSize | undefined): string | undefined;
+declare function resolvePanelSizes({ sizes, panels, rootEl, orientation, }: {
+    sizes: PanelSize[] | undefined;
+    panels: PanelData[];
+    rootEl: HTMLElement | null;
+    orientation: "horizontal" | "vertical";
+}): number[];
+declare function normalizePanels(panels: PanelData[], rootEl: HTMLElement | null, orientation: "horizontal" | "vertical"): NormalizedPanelData[];
+
+export { getGroupSize, normalizePanels, parsePanelSize, resolvePanelSizes, toCssPanelSize };

package/dist/utils/size.d.ts

@@ -0,0 +1,17 @@
+import { PanelData, NormalizedPanelData, PanelSize } from '../splitter.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+import './registry.js';
+
+declare function getGroupSize(rootEl: HTMLElement | null, orientation: "horizontal" | "vertical"): number;
+declare function parsePanelSize(size: PanelSize | undefined, rootEl: HTMLElement | null, orientation: "horizontal" | "vertical"): number | undefined;
+declare function toCssPanelSize(size: PanelSize | undefined): string | undefined;
+declare function resolvePanelSizes({ sizes, panels, rootEl, orientation, }: {
+    sizes: PanelSize[] | undefined;
+    panels: PanelData[];
+    rootEl: HTMLElement | null;
+    orientation: "horizontal" | "vertical";
+}): number[];
+declare function normalizePanels(panels: PanelData[], rootEl: HTMLElement | null, orientation: "horizontal" | "vertical"): NormalizedPanelData[];
+
+export { getGroupSize, normalizePanels, parsePanelSize, resolvePanelSizes, toCssPanelSize };