@zag-js/splitter 0.9.1 → 0.10.0

package/dist/{chunk-G4OIUPPJ.mjs → chunk-3GDOPT5W.mjs}

@@ -7,7 +7,7 @@ var dom = createScope({
   getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
   getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
   globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
   getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
   getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
   getCursor(ctx) {

package/dist/{chunk-PI3URGYH.mjs → chunk-64C2WGI5.mjs}

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-G4OIUPPJ.mjs";
+} from "./chunk-3GDOPT5W.mjs";
 import {
   clamp,
   getHandleBounds,
@@ -11,7 +11,7 @@ import {
 
 // src/splitter.machine.ts
 import { createMachine } from "@zag-js/core";
-import { getRelativePointPercent, trackPointerMove } from "@zag-js/dom-event";
+import { getRelativePoint, trackPointerMove } from "@zag-js/dom-event";
 import { raf } from "@zag-js/dom-query";
 import { compact } from "@zag-js/utils";
 function machine(userContext) {
@@ -268,10 +268,15 @@ function machine(userContext) {
         setPointerValue(ctx2, evt) {
           const panels = getHandlePanels(ctx2);
           const bounds = getHandleBounds(ctx2);
-          const rootEl = dom.getRootEl(ctx2);
-          if (!panels || !rootEl || !bounds)
+          if (!panels || !bounds)
             return;
-          let pointValue = getRelativePointPercent(evt.point, rootEl).normalize(ctx2) * 100;
+          const rootEl = dom.getRootEl(ctx2);
+          const relativePoint = getRelativePoint(evt.point, rootEl);
+          const percentValue = relativePoint.getPercentValue({
+            dir: ctx2.dir,
+            orientation: ctx2.orientation
+          });
+          let pointValue = percentValue * 100;
           ctx2.activeResizeState = {
             isAtMin: pointValue < bounds.min,
             isAtMax: pointValue > bounds.max

package/dist/{chunk-ECKRJG7O.mjs → chunk-FCVFZHPC.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-HPRMFGOY.mjs";
 import {
   dom
-} from "./chunk-G4OIUPPJ.mjs";
+} from "./chunk-3GDOPT5W.mjs";
 import {
   getHandleBounds
 } from "./chunk-MV44GBQY.mjs";

package/dist/index.js

@@ -44,7 +44,7 @@ var dom = (0, import_dom_query.createScope)({
   getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
   getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
   globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
   getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
   getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
   getCursor(ctx) {
@@ -659,10 +659,15 @@ function machine(userContext) {
         setPointerValue(ctx2, evt) {
           const panels = getHandlePanels(ctx2);
           const bounds = getHandleBounds(ctx2);
-          const rootEl = dom.getRootEl(ctx2);
-          if (!panels || !rootEl || !bounds)
+          if (!panels || !bounds)
             return;
-          let pointValue = (0, import_dom_event2.getRelativePointPercent)(evt.point, rootEl).normalize(ctx2) * 100;
+          const rootEl = dom.getRootEl(ctx2);
+          const relativePoint = (0, import_dom_event2.getRelativePoint)(evt.point, rootEl);
+          const percentValue = relativePoint.getPercentValue({
+            dir: ctx2.dir,
+            orientation: ctx2.orientation
+          });
+          let pointValue = percentValue * 100;
           ctx2.activeResizeState = {
             isAtMin: pointValue < bounds.min,
             isAtMax: pointValue > bounds.max

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   connect
-} from "./chunk-ECKRJG7O.mjs";
+} from "./chunk-FCVFZHPC.mjs";
 import {
   anatomy
 } from "./chunk-HPRMFGOY.mjs";
 import {
   machine
-} from "./chunk-PI3URGYH.mjs";
-import "./chunk-G4OIUPPJ.mjs";
+} from "./chunk-64C2WGI5.mjs";
+import "./chunk-3GDOPT5W.mjs";
 import "./chunk-MV44GBQY.mjs";
 export {
   anatomy,

package/dist/splitter.connect.js

@@ -40,7 +40,7 @@ var dom = (0, import_dom_query.createScope)({
   getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
   getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
   globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
   getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
   getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
   getCursor(ctx) {

package/dist/splitter.connect.mjs

@@ -1,8 +1,8 @@
 import {
   connect
-} from "./chunk-ECKRJG7O.mjs";
+} from "./chunk-FCVFZHPC.mjs";
 import "./chunk-HPRMFGOY.mjs";
-import "./chunk-G4OIUPPJ.mjs";
+import "./chunk-3GDOPT5W.mjs";
 import "./chunk-MV44GBQY.mjs";
 export {
   connect

package/dist/splitter.dom.d.ts

@@ -28,7 +28,7 @@ declare const dom: {
     getLabelId: (ctx: MachineContext) => string | ((id: string) => string);
     getPanelId: (ctx: MachineContext, id: string | number) => string;
     globalCursorId: (ctx: MachineContext) => string;
-    getRootEl: (ctx: MachineContext) => HTMLElement | null;
+    getRootEl: (ctx: MachineContext) => HTMLElement;
     getResizeTriggerEl: (ctx: MachineContext, id: string) => HTMLElement | null;
     getPanelEl: (ctx: MachineContext, id: string | number) => HTMLElement | null;
     getCursor(ctx: MachineContext): (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";

package/dist/splitter.dom.js

@@ -31,7 +31,7 @@ var dom = (0, import_dom_query.createScope)({
   getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
   getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
   globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
   getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
   getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
   getCursor(ctx) {

package/dist/splitter.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-G4OIUPPJ.mjs";
+} from "./chunk-3GDOPT5W.mjs";
 export {
   dom
 };

package/dist/splitter.machine.js

@@ -37,7 +37,7 @@ var dom = (0, import_dom_query.createScope)({
   getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
   getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
   globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getRootEl: (ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
   getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
   getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
   getCursor(ctx) {
@@ -462,10 +462,15 @@ function machine(userContext) {
         setPointerValue(ctx2, evt) {
           const panels = getHandlePanels(ctx2);
           const bounds = getHandleBounds(ctx2);
-          const rootEl = dom.getRootEl(ctx2);
-          if (!panels || !rootEl || !bounds)
+          if (!panels || !bounds)
             return;
-          let pointValue = (0, import_dom_event.getRelativePointPercent)(evt.point, rootEl).normalize(ctx2) * 100;
+          const rootEl = dom.getRootEl(ctx2);
+          const relativePoint = (0, import_dom_event.getRelativePoint)(evt.point, rootEl);
+          const percentValue = relativePoint.getPercentValue({
+            dir: ctx2.dir,
+            orientation: ctx2.orientation
+          });
+          let pointValue = percentValue * 100;
           ctx2.activeResizeState = {
             isAtMin: pointValue < bounds.min,
             isAtMax: pointValue > bounds.max

package/dist/splitter.machine.mjs

@@ -1,7 +1,7 @@
 import {
   machine
-} from "./chunk-PI3URGYH.mjs";
-import "./chunk-G4OIUPPJ.mjs";
+} from "./chunk-64C2WGI5.mjs";
+import "./chunk-3GDOPT5W.mjs";
 import "./chunk-MV44GBQY.mjs";
 export {
   machine

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/splitter",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Core logic for the splitter widget implemented as a state machine",
   "keywords": [
     "js",
@@ -18,7 +18,8 @@
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/splitter",
   "sideEffects": false,
   "files": [
-    "dist/**/*"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
@@ -27,13 +28,13 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.9.1",
-    "@zag-js/core": "0.9.1",
-    "@zag-js/types": "0.9.1",
-    "@zag-js/dom-query": "0.9.1",
-    "@zag-js/dom-event": "0.9.1",
-    "@zag-js/number-utils": "0.9.1",
-    "@zag-js/utils": "0.9.1"
+    "@zag-js/anatomy": "0.10.0",
+    "@zag-js/core": "0.10.0",
+    "@zag-js/types": "0.10.0",
+    "@zag-js/dom-query": "0.10.0",
+    "@zag-js/dom-event": "0.10.0",
+    "@zag-js/number-utils": "0.10.0",
+    "@zag-js/utils": "0.10.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/index.ts

@@ -0,0 +1,4 @@
+export { anatomy } from "./splitter.anatomy"
+export { connect } from "./splitter.connect"
+export { machine } from "./splitter.machine"
+export type { MachineState, UserDefinedContext as Context, PanelProps, ResizeTriggerProps } from "./splitter.types"

package/src/splitter.anatomy.ts

@@ -0,0 +1,5 @@
+import { createAnatomy } from "@zag-js/anatomy"
+
+export const anatomy = createAnatomy("splitter").parts("root", "panel", "toggleTrigger", "resizeTrigger")
+
+export const parts = anatomy.build()

package/src/splitter.connect.ts

@@ -0,0 +1,198 @@
+import { EventKeyMap, getEventKey, getEventStep } from "@zag-js/dom-event"
+import { dataAttr } from "@zag-js/dom-query"
+import type { NormalizeProps, PropTypes } from "@zag-js/types"
+import { parts } from "./splitter.anatomy"
+import { dom } from "./splitter.dom"
+import type { PanelId, PanelProps, ResizeTriggerProps, Send, State } from "./splitter.types"
+import { getHandleBounds } from "./splitter.utils"
+
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {
+  const isHorizontal = state.context.isHorizontal
+  const isFocused = state.hasTag("focus")
+  const isDragging = state.matches("dragging")
+
+  const api = {
+    /**
+     * Whether the splitter is focused.
+     */
+    isFocused,
+    /**
+     * Whether the splitter is being dragged.
+     */
+    isDragging,
+    /**
+     *  The bounds of the currently dragged splitter handle.
+     */
+    bounds: getHandleBounds(state.context),
+    /**
+     * Function to collapse a panel.
+     */
+    collapse(id: PanelId) {
+      send({ type: "COLLAPSE", id })
+    },
+    /**
+     * Function to expand a panel.
+     */
+    expand(id: PanelId) {
+      send({ type: "EXPAND", id })
+    },
+    /**
+     * Function to toggle a panel between collapsed and expanded.
+     */
+    toggle(id: PanelId) {
+      send({ type: "TOGGLE", id })
+    },
+    /**
+     * Function to set the size of a panel.
+     */
+    setSize(id: PanelId, size: number) {
+      send({ type: "SET_SIZE", id, size })
+    },
+    /**
+     * Returns the state details for a resize trigger.
+     */
+    getResizeTriggerState(props: ResizeTriggerProps) {
+      const { id, disabled } = props
+      const ids = id.split(":")
+      const panelIds = ids.map((id) => dom.getPanelId(state.context, id))
+      const panels = getHandleBounds(state.context, id)
+
+      return {
+        isDisabled: !!disabled,
+        isFocused: state.context.activeResizeId === id && isFocused,
+        panelIds,
+        min: panels?.min,
+        max: panels?.max,
+        value: 0,
+      }
+    },
+
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      "data-orientation": state.context.orientation,
+      id: dom.getRootId(state.context),
+      dir: state.context.dir,
+      style: {
+        display: "flex",
+        flexDirection: isHorizontal ? "row" : "column",
+        height: "100%",
+        width: "100%",
+        overflow: "hidden",
+      },
+    }),
+
+    getPanelProps(props: PanelProps) {
+      const { id } = props
+      return normalize.element({
+        ...parts.panel.attrs,
+        dir: state.context.dir,
+        id: dom.getPanelId(state.context, id),
+        "data-ownedby": dom.getRootId(state.context),
+        style: dom.getPanelStyle(state.context, id),
+      })
+    },
+
+    // toggleTriggerProps: normalize.element({
+    //   ...parts.toggleButton.attrs,
+    //   id: dom.getToggleButtonId(state.context),
+    //   "aria-label": state.context.isAtMin ? "Expand Primary Pane" : "Collapse Primary Pane",
+    //   onClick() {
+    //     send("TOGGLE")
+    //   },
+    // }),
+
+    getResizeTriggerProps(props: ResizeTriggerProps) {
+      const { id, disabled, step = 1 } = props
+      const triggerState = api.getResizeTriggerState(props)
+
+      return normalize.element({
+        ...parts.resizeTrigger.attrs,
+        dir: state.context.dir,
+        id: dom.getResizeTriggerId(state.context, id),
+        role: "separator",
+        "data-ownedby": dom.getRootId(state.context),
+        tabIndex: disabled ? undefined : 0,
+        "aria-valuenow": triggerState.value,
+        "aria-valuemin": triggerState.min,
+        "aria-valuemax": triggerState.max,
+        "data-orientation": state.context.orientation,
+        "aria-orientation": state.context.orientation,
+        "aria-controls": triggerState.panelIds.join(" "),
+        "data-focus": dataAttr(triggerState.isFocused),
+        "data-disabled": dataAttr(disabled),
+        style: {
+          touchAction: "none",
+          userSelect: "none",
+          flex: "0 0 auto",
+          pointerEvents: isDragging && !triggerState.isFocused ? "none" : undefined,
+          cursor: isHorizontal ? "col-resize" : "row-resize",
+          [isHorizontal ? "minHeight" : "minWidth"]: "0",
+        },
+        onPointerDown(event) {
+          if (disabled) {
+            event.preventDefault()
+            return
+          }
+          send({ type: "POINTER_DOWN", id })
+          event.preventDefault()
+          event.stopPropagation()
+        },
+        onPointerOver() {
+          if (disabled) return
+          send({ type: "POINTER_OVER", id })
+        },
+        onPointerLeave() {
+          if (disabled) return
+          send({ type: "POINTER_LEAVE", id })
+        },
+        onBlur() {
+          send("BLUR")
+        },
+        onFocus() {
+          send({ type: "FOCUS", id })
+        },
+        onDoubleClick() {
+          if (disabled) return
+          send({ type: "DOUBLE_CLICK", id })
+        },
+        onKeyDown(event) {
+          if (disabled) return
+          const moveStep = getEventStep(event) * step
+          const keyMap: EventKeyMap = {
+            Enter() {
+              send("ENTER")
+            },
+            ArrowUp() {
+              send({ type: "ARROW_UP", step: moveStep })
+            },
+            ArrowDown() {
+              send({ type: "ARROW_DOWN", step: moveStep })
+            },
+            ArrowLeft() {
+              send({ type: "ARROW_LEFT", step: moveStep })
+            },
+            ArrowRight() {
+              send({ type: "ARROW_RIGHT", step: moveStep })
+            },
+            Home() {
+              send("HOME")
+            },
+            End() {
+              send("END")
+            },
+          }
+
+          const key = getEventKey(event, state.context)
+          const exec = keyMap[key]
+
+          if (exec) {
+            exec(event)
+            event.preventDefault()
+          }
+        },
+      })
+    },
+  }
+
+  return api
+}

package/src/splitter.dom.ts

@@ -0,0 +1,62 @@
+import { createScope, queryAll } from "@zag-js/dom-query"
+import type { JSX, Style } from "@zag-js/types"
+import type { MachineContext as Ctx, PanelId } from "./splitter.types"
+
+export const dom = createScope({
+  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
+  getResizeTriggerId: (ctx: Ctx, id: string) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
+  getToggleTriggerId: (ctx: Ctx) => ctx.ids?.toggleTrigger?.(ctx.id) ?? `splitter:${ctx.id}:toggle-btn`,
+  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
+  getPanelId: (ctx: Ctx, id: string | number) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
+  globalCursorId: (ctx: Ctx) => `splitter:${ctx.id}:global-cursor`,
+
+  getRootEl: (ctx: Ctx) => dom.queryById(ctx, dom.getRootId(ctx)),
+  getResizeTriggerEl: (ctx: Ctx, id: string) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
+  getPanelEl: (ctx: Ctx, id: string | number) => dom.getById(ctx, dom.getPanelId(ctx, id)),
+
+  getCursor(ctx: Ctx) {
+    const x = ctx.isHorizontal
+    let cursor: Style["cursor"] = x ? "col-resize" : "row-resize"
+    if (ctx.activeResizeState.isAtMin) cursor = x ? "e-resize" : "s-resize"
+    if (ctx.activeResizeState.isAtMax) cursor = x ? "w-resize" : "n-resize"
+    return cursor
+  },
+
+  getPanelStyle(ctx: Ctx, id: PanelId): JSX.CSSProperties {
+    const flexGrow = ctx.panels.find((panel) => panel.id === id)?.size ?? "0"
+    return {
+      flexBasis: 0,
+      flexGrow,
+      flexShrink: 1,
+      overflow: "hidden",
+    }
+  },
+
+  getActiveHandleEl(ctx: Ctx) {
+    const activeId = ctx.activeResizeId
+    if (activeId == null) return
+    return dom.getById(ctx, dom.getResizeTriggerId(ctx, activeId))
+  },
+
+  getResizeTriggerEls(ctx: Ctx) {
+    const ownerId = CSS.escape(dom.getRootId(ctx))
+    return queryAll(dom.getRootEl(ctx), `[role=separator][data-ownedby='${ownerId}']`)
+  },
+
+  setupGlobalCursor(ctx: Ctx) {
+    const styleEl = dom.getById(ctx, dom.globalCursorId(ctx))
+    const textContent = `* { cursor: ${dom.getCursor(ctx)} !important; }`
+    if (styleEl) {
+      styleEl.textContent = textContent
+    } else {
+      const style = dom.getDoc(ctx).createElement("style")
+      style.id = dom.globalCursorId(ctx)
+      style.textContent = textContent
+      dom.getDoc(ctx).head.appendChild(style)
+    }
+  },
+
+  removeGlobalCursor(ctx: Ctx) {
+    dom.getById(ctx, dom.globalCursorId(ctx))?.remove()
+  },
+})

package/src/splitter.machine.ts

@@ -0,0 +1,294 @@
+import { createMachine } from "@zag-js/core"
+import { getRelativePoint, trackPointerMove } from "@zag-js/dom-event"
+import { raf } from "@zag-js/dom-query"
+import { compact } from "@zag-js/utils"
+import { dom } from "./splitter.dom"
+import type { MachineContext, MachineState, UserDefinedContext } from "./splitter.types"
+import { clamp, getHandleBounds, getHandlePanels, getNormalizedPanels, getPanelBounds } from "./splitter.utils"
+
+export function machine(userContext: UserDefinedContext) {
+  const ctx = compact(userContext)
+  return createMachine<MachineContext, MachineState>(
+    {
+      id: "splitter",
+      initial: "idle",
+      context: {
+        orientation: "horizontal",
+        activeResizeId: null,
+        previousPanels: [],
+        size: [],
+        initialSize: [],
+        activeResizeState: {
+          isAtMin: false,
+          isAtMax: false,
+        },
+        ...ctx,
+      },
+
+      created: ["setPreviousPanels", "setInitialSize"],
+
+      watch: {
+        size: ["setActiveResizeState"],
+      },
+
+      computed: {
+        isHorizontal: (ctx) => ctx.orientation === "horizontal",
+        panels: (ctx) => getNormalizedPanels(ctx),
+      },
+
+      on: {
+        COLLAPSE: {
+          actions: "setStartPanelToMin",
+        },
+        EXPAND: {
+          actions: "setStartPanelToMax",
+        },
+        TOGGLE: [
+          {
+            guard: "isStartPanelAtMin",
+            actions: "setStartPanelToMax",
+          },
+          {
+            actions: "setStartPanelToMin",
+          },
+        ],
+      },
+      states: {
+        idle: {
+          entry: ["clearActiveHandleId"],
+          on: {
+            POINTER_OVER: {
+              target: "hover:temp",
+              actions: ["setActiveHandleId"],
+            },
+            FOCUS: {
+              target: "focused",
+              actions: ["setActiveHandleId"],
+            },
+            DOUBLE_CLICK: {
+              actions: ["resetStartPanel", "setPreviousPanels"],
+            },
+          },
+        },
+
+        "hover:temp": {
+          after: {
+            HOVER_DELAY: "hover",
+          },
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setActiveHandleId", "invokeOnResizeStart"],
+            },
+            POINTER_LEAVE: "idle",
+          },
+        },
+
+        hover: {
+          tags: ["focus"],
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["invokeOnResizeStart"],
+            },
+            POINTER_LEAVE: "idle",
+          },
+        },
+
+        focused: {
+          tags: ["focus"],
+          on: {
+            BLUR: "idle",
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setActiveHandleId", "invokeOnResizeStart"],
+            },
+            ARROW_LEFT: {
+              guard: "isHorizontal",
+              actions: ["shrinkStartPanel", "setPreviousPanels"],
+            },
+            ARROW_RIGHT: {
+              guard: "isHorizontal",
+              actions: ["expandStartPanel", "setPreviousPanels"],
+            },
+            ARROW_UP: {
+              guard: "isVertical",
+              actions: ["shrinkStartPanel", "setPreviousPanels"],
+            },
+            ARROW_DOWN: {
+              guard: "isVertical",
+              actions: ["expandStartPanel", "setPreviousPanels"],
+            },
+            ENTER: [
+              {
+                guard: "isStartPanelAtMax",
+                actions: ["setStartPanelToMin", "setPreviousPanels"],
+              },
+              { actions: ["setStartPanelToMax", "setPreviousPanels"] },
+            ],
+            HOME: {
+              actions: ["setStartPanelToMin", "setPreviousPanels"],
+            },
+            END: {
+              actions: ["setStartPanelToMax", "setPreviousPanels"],
+            },
+          },
+        },
+
+        dragging: {
+          tags: ["focus"],
+          entry: "focusResizeHandle",
+          activities: ["trackPointerMove"],
+          on: {
+            POINTER_MOVE: {
+              actions: ["setPointerValue", "setGlobalCursor"],
+            },
+            POINTER_UP: {
+              target: "focused",
+              actions: ["invokeOnResizeEnd", "setPreviousPanels", "clearGlobalCursor", "blurResizeHandle"],
+            },
+          },
+        },
+      },
+    },
+    {
+      activities: {
+        trackPointerMove: (ctx, _evt, { send }) => {
+          const doc = dom.getDoc(ctx)
+          return trackPointerMove(doc, {
+            onPointerMove(info) {
+              send({ type: "POINTER_MOVE", point: info.point })
+            },
+            onPointerUp() {
+              send("POINTER_UP")
+            },
+          })
+        },
+      },
+      guards: {
+        isStartPanelAtMin: (ctx) => ctx.activeResizeState.isAtMin,
+        isStartPanelAtMax: (ctx) => ctx.activeResizeState.isAtMax,
+        isHorizontal: (ctx) => ctx.isHorizontal,
+        isVertical: (ctx) => !ctx.isHorizontal,
+      },
+      delays: {
+        HOVER_DELAY: 250,
+      },
+      actions: {
+        setGlobalCursor(ctx) {
+          dom.setupGlobalCursor(ctx)
+        },
+        clearGlobalCursor(ctx) {
+          dom.removeGlobalCursor(ctx)
+        },
+        invokeOnResize(ctx) {
+          ctx.onResize?.({ size: ctx.size, activeHandleId: ctx.activeResizeId })
+        },
+        invokeOnResizeStart(ctx) {
+          ctx.onResizeStart?.({ size: ctx.size, activeHandleId: ctx.activeResizeId })
+        },
+        invokeOnResizeEnd(ctx) {
+          ctx.onResizeEnd?.({ size: ctx.size, activeHandleId: ctx.activeResizeId })
+        },
+        setActiveHandleId(ctx, evt) {
+          ctx.activeResizeId = evt.id
+        },
+        clearActiveHandleId(ctx) {
+          ctx.activeResizeId = null
+        },
+        setInitialSize(ctx) {
+          ctx.initialSize = ctx.panels.slice().map((panel) => ({
+            id: panel.id,
+            size: panel.size,
+          }))
+        },
+        setStartPanelToMin(ctx) {
+          const bounds = getPanelBounds(ctx)
+          if (!bounds) return
+          const { before, after } = bounds
+          ctx.size[before.index].size = before.min
+          ctx.size[after.index].size = after.min
+        },
+        setStartPanelToMax(ctx) {
+          const bounds = getPanelBounds(ctx)
+          if (!bounds) return
+          const { before, after } = bounds
+          ctx.size[before.index].size = before.max
+          ctx.size[after.index].size = after.max
+        },
+        expandStartPanel(ctx, evt) {
+          const bounds = getPanelBounds(ctx)
+          if (!bounds) return
+          const { before, after } = bounds
+          ctx.size[before.index].size = before.up(evt.step)
+          ctx.size[after.index].size = after.down(evt.step)
+        },
+        shrinkStartPanel(ctx, evt) {
+          const bounds = getPanelBounds(ctx)
+          if (!bounds) return
+          const { before, after } = bounds
+          ctx.size[before.index].size = before.down(evt.step)
+          ctx.size[after.index].size = after.up(evt.step)
+        },
+        resetStartPanel(ctx, evt) {
+          const bounds = getPanelBounds(ctx, evt.id)
+          if (!bounds) return
+          const { before, after } = bounds
+          ctx.size[before.index].size = ctx.initialSize[before.index].size
+          ctx.size[after.index].size = ctx.initialSize[after.index].size
+        },
+        focusResizeHandle(ctx) {
+          raf(() => {
+            dom.getActiveHandleEl(ctx)?.focus({ preventScroll: true })
+          })
+        },
+        blurResizeHandle(ctx) {
+          raf(() => {
+            dom.getActiveHandleEl(ctx)?.blur()
+          })
+        },
+        setPreviousPanels(ctx) {
+          ctx.previousPanels = ctx.panels.slice()
+        },
+        setActiveResizeState(ctx) {
+          const panels = getPanelBounds(ctx)
+          if (!panels) return
+          const { before } = panels
+          ctx.activeResizeState = {
+            isAtMin: before.isAtMin,
+            isAtMax: before.isAtMax,
+          }
+        },
+        setPointerValue(ctx, evt) {
+          const panels = getHandlePanels(ctx)
+          const bounds = getHandleBounds(ctx)
+
+          if (!panels || !bounds) return
+
+          const rootEl = dom.getRootEl(ctx)
+          const relativePoint = getRelativePoint(evt.point, rootEl)
+          const percentValue = relativePoint.getPercentValue({
+            dir: ctx.dir,
+            orientation: ctx.orientation,
+          })
+
+          let pointValue = percentValue * 100
+
+          // update active resize state here because we use `previousPanels` in the calculations
+          ctx.activeResizeState = {
+            isAtMin: pointValue < bounds.min,
+            isAtMax: pointValue > bounds.max,
+          }
+
+          pointValue = clamp(pointValue, bounds.min, bounds.max)
+
+          const { before, after } = panels
+
+          const offset = pointValue - before.end
+          ctx.size[before.index].size = before.size + offset
+          ctx.size[after.index].size = after.size - offset
+        },
+      },
+    },
+  )
+}

package/src/splitter.types.ts

@@ -0,0 +1,100 @@
+import type { StateMachine as S } from "@zag-js/core"
+import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types"
+
+export type PanelId = string | number
+
+type PanelSizeData = {
+  id: PanelId
+  size?: number
+  minSize?: number
+  maxSize?: number
+}
+
+type ResizeDetails = {
+  size: PanelSizeData[]
+  activeHandleId: string | null
+}
+
+type ElementIds = Partial<{
+  root: string
+  resizeTrigger(id: string): string
+  toggleTrigger(id: string): string
+  label(id: string): string
+  panel(id: string | number): string
+}>
+
+type PublicContext = DirectionProperty &
+  CommonProperties & {
+    /**
+     * The orientation of the splitter. Can be `horizontal` or `vertical`
+     */
+    orientation: "horizontal" | "vertical"
+    /**
+     * The size data of the panels
+     */
+    size: PanelSizeData[]
+    /**
+     * Function called when the splitter is resized.
+     */
+    onResize?: (details: ResizeDetails) => void
+    /**
+     * Function called when the splitter resize starts.
+     */
+    onResizeStart?: (details: ResizeDetails) => void
+    /**
+     * Function called when the splitter resize ends.
+     */
+    onResizeEnd?: (details: ResizeDetails) => void
+    /**
+     * The ids of the elements in the splitter. Useful for composition.
+     */
+    ids?: ElementIds
+  }
+
+export type UserDefinedContext = RequiredBy<PublicContext, "id">
+
+export type NormalizedPanelData = Array<
+  Required<PanelSizeData> & {
+    remainingSize: number
+    minSize: number
+    maxSize: number
+    start: number
+    end: number
+  }
+>
+
+type ComputedContext = Readonly<{
+  isHorizontal: boolean
+  panels: NormalizedPanelData
+  activeResizeBounds?: { min: number; max: number }
+  activeResizePanels?: { before: PanelSizeData; after: PanelSizeData }
+}>
+
+type PrivateContext = Context<{
+  activeResizeId: string | null
+  previousPanels: NormalizedPanelData
+  activeResizeState: { isAtMin: boolean; isAtMax: boolean }
+  initialSize: Array<Required<Pick<PanelSizeData, "id" | "size">>>
+}>
+
+export type MachineContext = PublicContext & ComputedContext & PrivateContext
+
+export type MachineState = {
+  value: "idle" | "hover:temp" | "hover" | "dragging" | "focused"
+  tags: "focus"
+}
+
+export type State = S.State<MachineContext, MachineState>
+
+export type Send = S.Send<S.AnyEventObject>
+
+export type PanelProps = {
+  id: PanelId
+  snapSize?: number
+}
+
+export type ResizeTriggerProps = {
+  id: `${PanelId}:${PanelId}`
+  step?: number
+  disabled?: boolean
+}

package/src/splitter.utils.ts

@@ -0,0 +1,143 @@
+import type { MachineContext as Ctx, NormalizedPanelData } from "./splitter.types"
+
+function validateSize(key: string, size: number) {
+  if (Math.floor(size) > 100) {
+    throw new Error(`Total ${key} of panels cannot be greater than 100`)
+  }
+}
+
+export function getNormalizedPanels(ctx: Ctx): NormalizedPanelData {
+  let numOfPanelsWithoutSize = 0
+  let totalSize = 0
+  let totalMinSize = 0
+
+  const panels = ctx.size.map((panel) => {
+    const minSize = panel.minSize ?? 10
+    const maxSize = panel.maxSize ?? 100
+
+    totalMinSize += minSize
+
+    if (panel.size == null) {
+      numOfPanelsWithoutSize++
+    } else {
+      totalSize += panel.size
+    }
+
+    return {
+      ...panel,
+      minSize,
+      maxSize,
+    }
+  })
+
+  validateSize("minSize", totalMinSize)
+  validateSize("size", totalSize)
+
+  let end = 0
+  let remainingSize = 0
+
+  const result = panels.map((panel) => {
+    let start = end
+
+    if (panel.size != null) {
+      end += panel.size
+      remainingSize = panel.size - panel.minSize
+      return {
+        ...panel,
+        start,
+        end,
+        remainingSize,
+      }
+    }
+
+    const size = (100 - totalSize) / numOfPanelsWithoutSize
+    end += size
+    remainingSize = size - panel.minSize
+
+    return { ...panel, size, start, end, remainingSize }
+  })
+
+  return result as NormalizedPanelData
+}
+
+export function getHandlePanels(ctx: Ctx, id = ctx.activeResizeId) {
+  const [beforeId, afterId] = id?.split(":") ?? []
+  if (!beforeId || !afterId) return
+
+  const beforeIndex = ctx.previousPanels.findIndex((panel) => panel.id === beforeId)
+  const afterIndex = ctx.previousPanels.findIndex((panel) => panel.id === afterId)
+  if (beforeIndex === -1 || afterIndex === -1) return
+
+  const before = ctx.previousPanels[beforeIndex]
+  const after = ctx.previousPanels[afterIndex]
+
+  return {
+    before: {
+      ...before,
+      index: beforeIndex,
+    },
+    after: {
+      ...after,
+      index: afterIndex,
+    },
+  }
+}
+
+export function getHandleBounds(ctx: Ctx, id = ctx.activeResizeId) {
+  const panels = getHandlePanels(ctx, id)
+  if (!panels) return
+
+  const { before, after } = panels
+
+  return {
+    min: Math.max(before.start + before.minSize, after.end - after.maxSize),
+    max: Math.min(after.end - after.minSize, before.maxSize + before.start),
+  }
+}
+
+export function getPanelBounds(ctx: Ctx, id?: string | null) {
+  const bounds = getHandleBounds(ctx, id)
+  const panels = getHandlePanels(ctx, id)
+
+  if (!bounds || !panels) return
+  const { before, after } = panels
+
+  const beforeMin = Math.abs(before.start - bounds.min)
+  const afterMin = after.size + (before.size - beforeMin)
+
+  const beforeMax = Math.abs(before.start - bounds.max)
+  const afterMax = after.size - (beforeMax - before.size)
+
+  return {
+    before: {
+      index: before.index,
+      min: beforeMin,
+      max: beforeMax,
+      isAtMin: beforeMin === before.size,
+      isAtMax: beforeMax === before.size,
+      up(step: number) {
+        return Math.min(before.size + step, beforeMax)
+      },
+      down(step: number) {
+        return Math.max(before.size - step, beforeMin)
+      },
+    },
+    after: {
+      index: after.index,
+      min: afterMin,
+      max: afterMax,
+      isAtMin: afterMin === after.size,
+      isAtMax: afterMax === after.size,
+      up(step: number) {
+        return Math.min(after.size + step, afterMin)
+      },
+      down(step: number) {
+        return Math.max(after.size - step, afterMax)
+      },
+    },
+  }
+}
+
+export function clamp(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}