@zag-js/splitter 0.5.0 → 0.7.0

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

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

package/dist/{chunk-BSW3DTW4.mjs → chunk-G4OIUPPJ.mjs}

@@ -1,11 +1,11 @@
 // src/splitter.dom.ts
 import { createScope, queryAll } from "@zag-js/dom-query";
 var dom = createScope({
-  getRootId: (ctx) => `splitter:${ctx.id}`,
-  getResizeTriggerId: (ctx, id) => `splitter:${ctx.id}:splitter:${id}`,
-  getToggleTriggerId: (ctx) => `splitter:${ctx.id}:toggle-btn`,
-  getLabelId: (ctx) => `splitter:${ctx.id}:label`,
-  getPanelId: (ctx, id) => `splitter:${ctx.id}:panel:${id}`,
+  getRootId: (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
+  getResizeTriggerId: (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
+  getToggleTriggerId: (ctx) => ctx.ids?.toggleTrigger?.(ctx.id) ?? `splitter:${ctx.id}:toggle-btn`,
+  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)),
   getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),

package/dist/{chunk-63NJ553U.mjs → chunk-PI3URGYH.mjs}

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-BSW3DTW4.mjs";
+} from "./chunk-G4OIUPPJ.mjs";
 import {
   clamp,
   getHandleBounds,
@@ -271,7 +271,7 @@ function machine(userContext) {
           const rootEl = dom.getRootEl(ctx2);
           if (!panels || !rootEl || !bounds)
             return;
-          let pointValue = getRelativePointPercent(evt.point, rootEl).normalize(ctx2);
+          let pointValue = getRelativePointPercent(evt.point, rootEl).normalize(ctx2) * 100;
           ctx2.activeResizeState = {
             isAtMin: pointValue < bounds.min,
             isAtMax: pointValue > bounds.max

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { anatomy } from './splitter.anatomy.js';
 export { connect } from './splitter.connect.js';
 export { machine } from './splitter.machine.js';
-export { UserDefinedContext as Context, MachineState } from './splitter.types.js';
+export { UserDefinedContext as Context, MachineState, PanelProps, ResizeTriggerProps } from './splitter.types.js';
 import '@zag-js/anatomy';
 import '@zag-js/types';
 import '@zag-js/core';

package/dist/index.js

@@ -38,11 +38,11 @@ var import_dom_query2 = require("@zag-js/dom-query");
 // src/splitter.dom.ts
 var import_dom_query = require("@zag-js/dom-query");
 var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => `splitter:${ctx.id}`,
-  getResizeTriggerId: (ctx, id) => `splitter:${ctx.id}:splitter:${id}`,
-  getToggleTriggerId: (ctx) => `splitter:${ctx.id}:toggle-btn`,
-  getLabelId: (ctx) => `splitter:${ctx.id}:label`,
-  getPanelId: (ctx, id) => `splitter:${ctx.id}:panel:${id}`,
+  getRootId: (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
+  getResizeTriggerId: (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
+  getToggleTriggerId: (ctx) => ctx.ids?.toggleTrigger?.(ctx.id) ?? `splitter:${ctx.id}:toggle-btn`,
+  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)),
   getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
@@ -662,7 +662,7 @@ function machine(userContext) {
           const rootEl = dom.getRootEl(ctx2);
           if (!panels || !rootEl || !bounds)
             return;
-          let pointValue = (0, import_dom_event2.getRelativePointPercent)(evt.point, rootEl).normalize(ctx2);
+          let pointValue = (0, import_dom_event2.getRelativePointPercent)(evt.point, rootEl).normalize(ctx2) * 100;
           ctx2.activeResizeState = {
             isAtMin: pointValue < bounds.min,
             isAtMax: pointValue > bounds.max

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import {
   connect
-} from "./chunk-CQT32RFW.mjs";
+} from "./chunk-ECKRJG7O.mjs";
 import {
   anatomy
 } from "./chunk-HPRMFGOY.mjs";
 import {
   machine
-} from "./chunk-63NJ553U.mjs";
-import "./chunk-BSW3DTW4.mjs";
+} from "./chunk-PI3URGYH.mjs";
+import "./chunk-G4OIUPPJ.mjs";
 import "./chunk-MV44GBQY.mjs";
 export {
   anatomy,

package/dist/splitter.connect.js

@@ -34,11 +34,11 @@ var parts = anatomy.build();
 // src/splitter.dom.ts
 var import_dom_query = require("@zag-js/dom-query");
 var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => `splitter:${ctx.id}`,
-  getResizeTriggerId: (ctx, id) => `splitter:${ctx.id}:splitter:${id}`,
-  getToggleTriggerId: (ctx) => `splitter:${ctx.id}:toggle-btn`,
-  getLabelId: (ctx) => `splitter:${ctx.id}:label`,
-  getPanelId: (ctx, id) => `splitter:${ctx.id}:panel:${id}`,
+  getRootId: (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
+  getResizeTriggerId: (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
+  getToggleTriggerId: (ctx) => ctx.ids?.toggleTrigger?.(ctx.id) ?? `splitter:${ctx.id}:toggle-btn`,
+  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)),
   getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),

package/dist/splitter.connect.mjs

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

package/dist/splitter.dom.d.ts

@@ -25,7 +25,7 @@ declare const dom: {
     getRootId: (ctx: MachineContext) => string;
     getResizeTriggerId: (ctx: MachineContext, id: string) => string;
     getToggleTriggerId: (ctx: MachineContext) => string;
-    getLabelId: (ctx: MachineContext) => string;
+    getLabelId: (ctx: MachineContext) => string | ((id: string) => string);
     getPanelId: (ctx: MachineContext, id: string | number) => string;
     globalCursorId: (ctx: MachineContext) => string;
     getRootEl: (ctx: MachineContext) => HTMLElement | null;

package/dist/splitter.dom.js

@@ -25,11 +25,11 @@ __export(splitter_dom_exports, {
 module.exports = __toCommonJS(splitter_dom_exports);
 var import_dom_query = require("@zag-js/dom-query");
 var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => `splitter:${ctx.id}`,
-  getResizeTriggerId: (ctx, id) => `splitter:${ctx.id}:splitter:${id}`,
-  getToggleTriggerId: (ctx) => `splitter:${ctx.id}:toggle-btn`,
-  getLabelId: (ctx) => `splitter:${ctx.id}:label`,
-  getPanelId: (ctx, id) => `splitter:${ctx.id}:panel:${id}`,
+  getRootId: (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
+  getResizeTriggerId: (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
+  getToggleTriggerId: (ctx) => ctx.ids?.toggleTrigger?.(ctx.id) ?? `splitter:${ctx.id}:toggle-btn`,
+  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)),
   getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),

package/dist/splitter.dom.mjs

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

package/dist/splitter.machine.js

@@ -31,11 +31,11 @@ var import_utils = require("@zag-js/utils");
 // src/splitter.dom.ts
 var import_dom_query = require("@zag-js/dom-query");
 var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => `splitter:${ctx.id}`,
-  getResizeTriggerId: (ctx, id) => `splitter:${ctx.id}:splitter:${id}`,
-  getToggleTriggerId: (ctx) => `splitter:${ctx.id}:toggle-btn`,
-  getLabelId: (ctx) => `splitter:${ctx.id}:label`,
-  getPanelId: (ctx, id) => `splitter:${ctx.id}:panel:${id}`,
+  getRootId: (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
+  getResizeTriggerId: (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
+  getToggleTriggerId: (ctx) => ctx.ids?.toggleTrigger?.(ctx.id) ?? `splitter:${ctx.id}:toggle-btn`,
+  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)),
   getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
@@ -465,7 +465,7 @@ function machine(userContext) {
           const rootEl = dom.getRootEl(ctx2);
           if (!panels || !rootEl || !bounds)
             return;
-          let pointValue = (0, import_dom_event.getRelativePointPercent)(evt.point, rootEl).normalize(ctx2);
+          let pointValue = (0, import_dom_event.getRelativePointPercent)(evt.point, rootEl).normalize(ctx2) * 100;
           ctx2.activeResizeState = {
             isAtMin: pointValue < bounds.min,
             isAtMax: pointValue > bounds.max

package/dist/splitter.machine.mjs

@@ -1,7 +1,7 @@
 import {
   machine
-} from "./chunk-63NJ553U.mjs";
-import "./chunk-BSW3DTW4.mjs";
+} from "./chunk-PI3URGYH.mjs";
+import "./chunk-G4OIUPPJ.mjs";
 import "./chunk-MV44GBQY.mjs";
 export {
   machine

package/dist/splitter.types.d.ts

@@ -12,12 +12,38 @@ 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;
 };
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type NormalizedPanelData = Array<Required<PanelSizeData> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/splitter",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Core logic for the splitter widget implemented as a state machine",
   "keywords": [
     "js",
@@ -28,10 +28,10 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "0.1.4",
-    "@zag-js/core": "0.5.0",
+    "@zag-js/core": "0.7.0",
     "@zag-js/types": "0.5.0",
     "@zag-js/dom-query": "0.1.4",
-    "@zag-js/dom-event": "0.5.0",
+    "@zag-js/dom-event": "0.6.0",
     "@zag-js/number-utils": "0.2.3",
     "@zag-js/utils": "0.3.4"
   },