@zag-js/splitter 0.1.8 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/LICENSE +21 -0
  2. package/dist/index.d.ts +117 -3
  3. package/dist/index.js +158 -150
  4. package/dist/index.mjs +154 -155
  5. package/package.json +14 -12
  6. package/dist/splitter.connect.d.ts +0 -19
  7. package/dist/splitter.dom.d.ts +0 -14
  8. package/dist/splitter.machine.d.ts +0 -2
  9. package/dist/splitter.types.d.ts +0 -94
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2021 Chakra UI
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/dist/index.d.ts CHANGED
@@ -1,3 +1,117 @@
1
- export { connect } from "./splitter.connect";
2
- export { machine } from "./splitter.machine";
3
- export type { UserDefinedContext as Context, MachineState } from "./splitter.types";
1
+ import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
2
+ import * as _zag_js_core from '@zag-js/core';
3
+ import { StateMachine } from '@zag-js/core';
4
+
5
+ declare type ElementIds = Partial<{
6
+ root: string;
7
+ splitter: string;
8
+ label: string;
9
+ toggleBtn: string;
10
+ primaryPane: string;
11
+ secondaryPane: string;
12
+ }>;
13
+ declare type PublicContext = DirectionProperty & CommonProperties & {
14
+ /**
15
+ * The ids of the elements in the splitter. Useful for composition.
16
+ */
17
+ ids?: ElementIds;
18
+ /**
19
+ * Whether to allow the separator to be dragged.
20
+ */
21
+ fixed?: boolean;
22
+ /**
23
+ * The orientation of the split view.
24
+ */
25
+ orientation: "horizontal" | "vertical";
26
+ /**
27
+ * The minimum size of the primary pane.
28
+ */
29
+ min: number;
30
+ /**
31
+ * The maximum size of the primary pane.
32
+ */
33
+ max: number;
34
+ /**
35
+ * The size of the primary pane.
36
+ */
37
+ value: number;
38
+ /**
39
+ * The step increments of the primary pane when it is dragged
40
+ * or resized with keyboard.
41
+ */
42
+ step: number;
43
+ /**
44
+ * Callback to be invoked when the primary pane is resized.
45
+ */
46
+ onChange?: (details: {
47
+ value: number;
48
+ }) => void;
49
+ /**
50
+ * Callback to be invoked when the primary pane's resize session starts
51
+ */
52
+ onChangeStart?: (details: {
53
+ value: number;
54
+ }) => void;
55
+ /**
56
+ * Callback to be invoked when the primary pane's resize session ends
57
+ */
58
+ onChangeEnd?: (details: {
59
+ value: number;
60
+ }) => void;
61
+ /**
62
+ * Whether the primary pane is disabled.
63
+ */
64
+ disabled?: boolean;
65
+ /**
66
+ * The minimum offset needed to snap the primary pane to its minimum or maximum size.
67
+ */
68
+ snapOffset: number;
69
+ };
70
+ declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
71
+ declare type ComputedContext = Readonly<{
72
+ /**
73
+ * @computed
74
+ * Whether the primary pane is at its minimum size.
75
+ */
76
+ isAtMin: boolean;
77
+ /**
78
+ * @computed
79
+ * Whether the primary pane is at its maximum size.
80
+ */
81
+ isAtMax: boolean;
82
+ /**
83
+ * @computed
84
+ * Whether the orientation is horizontal.
85
+ */
86
+ isHorizontal: boolean;
87
+ }>;
88
+ declare type PrivateContext = Context<{}>;
89
+ declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
90
+ declare type MachineState = {
91
+ value: "unknown" | "idle" | "hover:temp" | "hover" | "dragging" | "focused";
92
+ tags: "focus";
93
+ };
94
+ declare type State = StateMachine.State<MachineContext, MachineState>;
95
+ declare type Send = StateMachine.Send<StateMachine.AnyEventObject>;
96
+
97
+ declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
98
+ isCollapsed: boolean;
99
+ isExpanded: boolean;
100
+ isFocused: boolean;
101
+ isDragging: boolean;
102
+ value: number;
103
+ collapse(): void;
104
+ expand(): void;
105
+ toggle(): void;
106
+ setSize(size: number): void;
107
+ rootProps: T["element"];
108
+ secondaryPaneProps: T["element"];
109
+ primaryPaneProps: T["element"];
110
+ toggleButtonProps: T["element"];
111
+ labelProps: T["element"];
112
+ splitterProps: T["element"];
113
+ };
114
+
115
+ declare function machine(ctx: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
116
+
117
+ export { UserDefinedContext as Context, MachineState, connect, machine };
package/dist/index.js CHANGED
@@ -2,21 +2,7 @@
2
2
  var __defProp = Object.defineProperty;
3
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
8
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
- var __spreadValues = (a, b) => {
10
- for (var prop in b || (b = {}))
11
- if (__hasOwnProp.call(b, prop))
12
- __defNormalProp(a, prop, b[prop]);
13
- if (__getOwnPropSymbols)
14
- for (var prop of __getOwnPropSymbols(b)) {
15
- if (__propIsEnum.call(b, prop))
16
- __defNormalProp(a, prop, b[prop]);
17
- }
18
- return a;
19
- };
20
6
  var __export = (target, all) => {
21
7
  for (var name in all)
22
8
  __defProp(target, name, { get: all[name], enumerable: true });
@@ -40,39 +26,134 @@ __export(src_exports, {
40
26
  module.exports = __toCommonJS(src_exports);
41
27
 
42
28
  // ../../utilities/dom/dist/index.mjs
43
- var __pow = Math.pow;
44
29
  var dataAttr = (guard) => {
45
30
  return guard ? "" : void 0;
46
31
  };
47
- var isDom = () => typeof window !== "undefined";
32
+ var runIfFn = (v, ...a) => {
33
+ const res = typeof v === "function" ? v(...a) : v;
34
+ return res ?? void 0;
35
+ };
36
+ var callAll = (...fns) => (...a) => {
37
+ fns.forEach(function(fn) {
38
+ fn == null ? void 0 : fn(...a);
39
+ });
40
+ };
48
41
  var isArray = (v) => Array.isArray(v);
49
42
  var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
50
43
  var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
44
+ var isDom = () => typeof window !== "undefined";
51
45
  function getPlatform() {
52
- var _a;
53
46
  const agent = navigator.userAgentData;
54
- return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
47
+ return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
55
48
  }
56
49
  var pt = (v) => isDom() && v.test(getPlatform());
57
50
  var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
58
51
  var isMac = () => pt(/^Mac/) && !isTouchDevice;
59
52
  var isApple = () => pt(/mac|iphone|ipad|ipod/i);
60
53
  var isIos = () => isApple() && !isMac();
54
+ function isDocument(el) {
55
+ return el.nodeType === Node.DOCUMENT_NODE;
56
+ }
57
+ function isWindow(value) {
58
+ return (value == null ? void 0 : value.toString()) === "[object Window]";
59
+ }
60
+ function getDocument(el) {
61
+ if (isWindow(el))
62
+ return el.document;
63
+ if (isDocument(el))
64
+ return el;
65
+ return (el == null ? void 0 : el.ownerDocument) ?? document;
66
+ }
67
+ function defineDomHelpers(helpers) {
68
+ const dom2 = {
69
+ getRootNode: (ctx) => {
70
+ var _a;
71
+ return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
72
+ },
73
+ getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
74
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
75
+ getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
76
+ getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
77
+ };
78
+ return {
79
+ ...dom2,
80
+ ...helpers
81
+ };
82
+ }
61
83
  var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
62
84
  var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
63
85
  var supportsMouseEvent = () => isDom() && window.onmousedown === null;
64
86
  var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
65
87
  var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
66
88
  var isLeftClick = (v) => v.button === 0;
67
- var runIfFn = (v, ...a) => {
68
- const res = typeof v === "function" ? v(...a) : v;
69
- return res != null ? res : void 0;
89
+ function getElementOffset(element) {
90
+ let left = 0;
91
+ let top = 0;
92
+ let el = element;
93
+ if (el.parentNode) {
94
+ do {
95
+ left += el.offsetLeft;
96
+ top += el.offsetTop;
97
+ } while ((el = el.offsetParent) && el.nodeType < 9);
98
+ el = element;
99
+ do {
100
+ left -= el.scrollLeft;
101
+ top -= el.scrollTop;
102
+ } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
103
+ }
104
+ return {
105
+ top,
106
+ right: innerWidth - left - element.offsetWidth,
107
+ bottom: innerHeight - top - element.offsetHeight,
108
+ left
109
+ };
110
+ }
111
+ function getPointRelativeToNode(point, element) {
112
+ const offset = getElementOffset(element);
113
+ const x = point.x - offset.left;
114
+ const y = point.y - offset.top;
115
+ return { x, y };
116
+ }
117
+ var rtlKeyMap = {
118
+ ArrowLeft: "ArrowRight",
119
+ ArrowRight: "ArrowLeft",
120
+ Home: "End",
121
+ End: "Home"
122
+ };
123
+ var sameKeyMap = {
124
+ Up: "ArrowUp",
125
+ Down: "ArrowDown",
126
+ Esc: "Escape",
127
+ " ": "Space",
128
+ ",": "Comma",
129
+ Left: "ArrowLeft",
130
+ Right: "ArrowRight"
70
131
  };
71
- var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
132
+ function getEventKey(event, options = {}) {
133
+ const { dir = "ltr", orientation = "horizontal" } = options;
134
+ let { key } = event;
135
+ key = sameKeyMap[key] ?? key;
136
+ const isRtl = dir === "rtl" && orientation === "horizontal";
137
+ if (isRtl && key in rtlKeyMap) {
138
+ key = rtlKeyMap[key];
139
+ }
140
+ return key;
141
+ }
142
+ var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
143
+ var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
144
+ function getEventStep(event) {
145
+ if (event.ctrlKey || event.metaKey) {
146
+ return 0.1;
147
+ } else {
148
+ const isPageKey = PAGE_KEYS.has(event.key);
149
+ const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
150
+ return isSkipKey ? 10 : 1;
151
+ }
152
+ }
72
153
  var isRef = (v) => hasProp(v, "current");
73
- var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
154
+ var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
74
155
  function extractInfo(event, type = "page") {
75
- const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
156
+ const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : event;
76
157
  return {
77
158
  point: {
78
159
  x: point[`${type}X`],
@@ -88,8 +169,7 @@ function addDomEvent(target, eventName, handler, options) {
88
169
  };
89
170
  }
90
171
  function addPointerEvent(target, event, listener, options) {
91
- var _a;
92
- const type = (_a = getEventName(event)) != null ? _a : event;
172
+ const type = getEventName(event) ?? event;
93
173
  return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
94
174
  }
95
175
  function wrapHandler(fn, filter = false) {
@@ -100,8 +180,7 @@ function wrapHandler(fn, filter = false) {
100
180
  }
101
181
  function filterPrimaryPointer(fn) {
102
182
  return (event) => {
103
- var _a;
104
- const win = (_a = event.view) != null ? _a : window;
183
+ const win = event.view ?? window;
105
184
  const isMouseEvent2 = event instanceof win.MouseEvent;
106
185
  const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
107
186
  if (isPrimary)
@@ -152,48 +231,11 @@ function raf(fn) {
152
231
  globalThis.cancelAnimationFrame(id);
153
232
  };
154
233
  }
155
- var rtlKeyMap = {
156
- ArrowLeft: "ArrowRight",
157
- ArrowRight: "ArrowLeft",
158
- Home: "End",
159
- End: "Home"
160
- };
161
- var sameKeyMap = {
162
- Up: "ArrowUp",
163
- Down: "ArrowDown",
164
- Esc: "Escape",
165
- " ": "Space",
166
- ",": "Comma",
167
- Left: "ArrowLeft",
168
- Right: "ArrowRight"
169
- };
170
- function getEventKey(event, options = {}) {
171
- var _a;
172
- const { dir = "ltr", orientation = "horizontal" } = options;
173
- let { key } = event;
174
- key = (_a = sameKeyMap[key]) != null ? _a : key;
175
- const isRtl = dir === "rtl" && orientation === "horizontal";
176
- if (isRtl && key in rtlKeyMap) {
177
- key = rtlKeyMap[key];
178
- }
179
- return key;
180
- }
181
- var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
182
- var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
183
- function getEventStep(event) {
184
- if (event.ctrlKey || event.metaKey) {
185
- return 0.1;
186
- } else {
187
- const isPageKey = PAGE_KEYS.has(event.key);
188
- const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
189
- return isSkipKey ? 10 : 1;
190
- }
191
- }
192
234
  var state = "default";
193
235
  var savedUserSelect = "";
194
236
  var modifiedElementMap = /* @__PURE__ */ new WeakMap();
195
237
  function disableTextSelection({ target, doc } = {}) {
196
- const _document = doc != null ? doc : document;
238
+ const _document = doc ?? document;
197
239
  if (isIos()) {
198
240
  if (state === "default") {
199
241
  savedUserSelect = _document.documentElement.style.webkitUserSelect;
@@ -207,7 +249,7 @@ function disableTextSelection({ target, doc } = {}) {
207
249
  return () => restoreTextSelection({ target, doc: _document });
208
250
  }
209
251
  function restoreTextSelection({ target, doc } = {}) {
210
- const _document = doc != null ? doc : document;
252
+ const _document = doc ?? document;
211
253
  if (isIos()) {
212
254
  if (state !== "disabled")
213
255
  return;
@@ -227,7 +269,7 @@ function restoreTextSelection({ target, doc } = {}) {
227
269
  if (target && modifiedElementMap.has(target)) {
228
270
  let targetOldUserSelect = modifiedElementMap.get(target);
229
271
  if (target.style.userSelect === "none") {
230
- target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
272
+ target.style.userSelect = targetOldUserSelect ?? "";
231
273
  }
232
274
  if (target.getAttribute("style") === "") {
233
275
  target.removeAttribute("style");
@@ -236,13 +278,13 @@ function restoreTextSelection({ target, doc } = {}) {
236
278
  }
237
279
  }
238
280
  }
239
- function trackPointerMove(opts) {
240
- const { onPointerMove, onPointerUp, ctx } = opts;
241
- const { doc = document, threshold = 5 } = ctx;
281
+ var THRESHOLD = 5;
282
+ function trackPointerMove(doc, opts) {
283
+ const { onPointerMove, onPointerUp } = opts;
242
284
  const handlePointerMove = (event, info) => {
243
285
  const { point: p } = info;
244
- const distance = Math.sqrt(__pow(p.x, 2) + __pow(p.y, 2));
245
- if (distance < threshold)
286
+ const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
287
+ if (distance < THRESHOLD)
246
288
  return;
247
289
  if (isMouseEvent(event) && isLeftClick(event)) {
248
290
  onPointerUp();
@@ -250,55 +292,37 @@ function trackPointerMove(opts) {
250
292
  }
251
293
  onPointerMove(info, event);
252
294
  };
253
- return pipe(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
254
- }
255
-
256
- // ../../types/dist/index.mjs
257
- function createNormalizer(fn) {
258
- return new Proxy({}, {
259
- get() {
260
- return fn;
261
- }
262
- });
295
+ return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
263
296
  }
264
- var normalizeProp = createNormalizer((v) => v);
265
297
 
266
298
  // src/splitter.dom.ts
267
- var dom = {
268
- getDoc: (ctx) => {
269
- var _a;
270
- return (_a = ctx.doc) != null ? _a : document;
271
- },
272
- getRootNode: (ctx) => {
273
- var _a;
274
- return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
275
- },
299
+ var dom = defineDomHelpers({
276
300
  getRootId: (ctx) => {
277
- var _a, _b;
278
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.uid}`;
301
+ var _a;
302
+ return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `splitter:${ctx.id}`;
279
303
  },
280
304
  getSplitterId: (ctx) => {
281
- var _a, _b;
282
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.uid}:splitter`;
305
+ var _a;
306
+ return ((_a = ctx.ids) == null ? void 0 : _a.splitter) ?? `splitter:${ctx.id}:splitter`;
283
307
  },
284
308
  getToggleButtonId: (ctx) => {
285
- var _a, _b;
286
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.uid}:toggle-btn`;
309
+ var _a;
310
+ return ((_a = ctx.ids) == null ? void 0 : _a.toggleBtn) ?? `splitter:${ctx.id}:toggle-btn`;
287
311
  },
288
312
  getLabelId: (ctx) => {
289
- var _a, _b;
290
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.uid}:label`;
313
+ var _a;
314
+ return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `splitter:${ctx.id}:label`;
291
315
  },
292
316
  getPrimaryPaneId: (ctx) => {
293
- var _a, _b;
294
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.uid}:primary`;
317
+ var _a;
318
+ return ((_a = ctx.ids) == null ? void 0 : _a.primaryPane) ?? `splitter:${ctx.id}:primary`;
295
319
  },
296
320
  getSecondaryPaneId: (ctx) => {
297
- var _a, _b;
298
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.uid}:secondary`;
321
+ var _a;
322
+ return ((_a = ctx.ids) == null ? void 0 : _a.secondaryPane) ?? `splitter:${ctx.id}:secondary`;
299
323
  },
300
- getSplitterEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getSplitterId(ctx)),
301
- getPrimaryPaneEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getPrimaryPaneId(ctx)),
324
+ getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
325
+ getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
302
326
  getCursor(ctx) {
303
327
  if (ctx.disabled || ctx.fixed)
304
328
  return "default";
@@ -310,10 +334,10 @@ var dom = {
310
334
  cursor = x ? "w-resize" : "n-resize";
311
335
  return cursor;
312
336
  }
313
- };
337
+ });
314
338
 
315
339
  // src/splitter.connect.ts
316
- function connect(state2, send, normalize = normalizeProp) {
340
+ function connect(state2, send, normalize) {
317
341
  const isHorizontal = state2.context.isHorizontal;
318
342
  const isDisabled = state2.context.disabled;
319
343
  const isFocused = state2.hasTag("focus");
@@ -368,12 +392,13 @@ function connect(state2, send, normalize = normalizeProp) {
368
392
  id: dom.getPrimaryPaneId(state2.context),
369
393
  "data-disabled": dataAttr(isDisabled),
370
394
  "data-state": isAtMax ? "at-max" : isAtMin ? "at-min" : "between",
371
- style: __spreadValues({
395
+ style: {
372
396
  visibility: "visible",
373
397
  flex: `0 0 ${value}px`,
374
398
  position: "relative",
375
- userSelect: isDragging ? "none" : "auto"
376
- }, isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` })
399
+ userSelect: isDragging ? "none" : "auto",
400
+ ...isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` }
401
+ }
377
402
  }),
378
403
  toggleButtonProps: normalize.element({
379
404
  "data-part": "toggle-button",
@@ -480,10 +505,9 @@ function connect(state2, send, normalize = normalizeProp) {
480
505
  var import_core = require("@zag-js/core");
481
506
 
482
507
  // ../../utilities/number/dist/index.mjs
483
- var __pow2 = Math.pow;
484
508
  function round(v, t) {
485
509
  let num = valueOf(v);
486
- const p = __pow2(10, t != null ? t : 10);
510
+ const p = 10 ** (t ?? 10);
487
511
  num = Math.round(num * p) / p;
488
512
  return t ? num.toFixed(t) : v.toString();
489
513
  }
@@ -517,7 +541,7 @@ function valueOf(v) {
517
541
  function decimalOperation(a, op, b) {
518
542
  let result = op === "+" ? a + b : a - b;
519
543
  if (a % 1 !== 0 || b % 1 !== 0) {
520
- const multiplier = __pow2(10, Math.max(countDecimals(a), countDecimals(b)));
544
+ const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
521
545
  a = Math.round(a * multiplier);
522
546
  b = Math.round(b * multiplier);
523
547
  result = op === "+" ? a + b : a - b;
@@ -527,31 +551,21 @@ function decimalOperation(a, op, b) {
527
551
  }
528
552
  var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
529
553
 
530
- // ../../utilities/rect/dist/index.mjs
531
- function relativeToNode(p, el) {
532
- const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
533
- const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
534
- return {
535
- point: { x: dx, y: dy },
536
- progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
537
- };
538
- }
539
-
540
554
  // src/splitter.machine.ts
541
555
  var { not } = import_core.guards;
542
- function machine(ctx = {}) {
556
+ function machine(ctx) {
543
557
  return (0, import_core.createMachine)({
544
558
  id: "splitter",
545
559
  initial: "unknown",
546
- context: __spreadValues({
547
- uid: "",
560
+ context: {
548
561
  orientation: "horizontal",
549
562
  min: 224,
550
563
  max: 340,
551
564
  step: 1,
552
565
  value: 256,
553
- snapOffset: 0
554
- }, ctx),
566
+ snapOffset: 0,
567
+ ...ctx
568
+ },
555
569
  computed: {
556
570
  isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
557
571
  isAtMin: (ctx2) => ctx2.value === ctx2.min,
@@ -577,10 +591,7 @@ function machine(ctx = {}) {
577
591
  states: {
578
592
  unknown: {
579
593
  on: {
580
- SETUP: {
581
- target: "idle",
582
- actions: "setupDocument"
583
- }
594
+ SETUP: "idle"
584
595
  }
585
596
  },
586
597
  idle: {
@@ -679,16 +690,15 @@ function machine(ctx = {}) {
679
690
  }, {
680
691
  activities: {
681
692
  trackPointerMove: (ctx2, _evt, { send }) => {
682
- const el = dom.getDoc(ctx2).documentElement;
683
- return trackPointerMove({
684
- ctx: ctx2,
693
+ const doc = dom.getDoc(ctx2);
694
+ return trackPointerMove(doc, {
685
695
  onPointerMove(info) {
686
696
  send({ type: "POINTER_MOVE", point: info.point });
687
- el.style.cursor = dom.getCursor(ctx2);
697
+ doc.documentElement.style.cursor = dom.getCursor(ctx2);
688
698
  },
689
699
  onPointerUp() {
690
700
  send("POINTER_UP");
691
- el.style.cursor = "";
701
+ doc.documentElement.style.cursor = "";
692
702
  }
693
703
  });
694
704
  }
@@ -717,13 +727,6 @@ function machine(ctx = {}) {
717
727
  var _a;
718
728
  (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
719
729
  },
720
- setupDocument(ctx2, evt) {
721
- if (evt.doc)
722
- ctx2.doc = (0, import_core.ref)(evt.doc);
723
- if (evt.root)
724
- ctx2.rootNode = (0, import_core.ref)(evt.root);
725
- ctx2.uid = evt.id;
726
- },
727
730
  setToMin(ctx2) {
728
731
  ctx2.value = ctx2.min;
729
732
  },
@@ -743,11 +746,11 @@ function machine(ctx = {}) {
743
746
  });
744
747
  },
745
748
  setPointerValue(ctx2, evt) {
746
- const primaryPane = dom.getPrimaryPaneEl(ctx2);
747
- if (!primaryPane)
749
+ const el = dom.getPrimaryPaneEl(ctx2);
750
+ if (!el)
748
751
  return;
749
- const { point } = relativeToNode(evt.point, primaryPane);
750
- let currentPoint = ctx2.isHorizontal ? point.x : point.y;
752
+ const relativePoint = getPointRelativeToNode(evt.point, el);
753
+ let currentPoint = ctx2.isHorizontal ? relativePoint.x : relativePoint.y;
751
754
  let value = parseFloat(snapToStep(clamp(currentPoint, ctx2), ctx2.step));
752
755
  if (Math.abs(value - ctx2.min) <= ctx2.snapOffset) {
753
756
  value = ctx2.min;
@@ -759,3 +762,8 @@ function machine(ctx = {}) {
759
762
  }
760
763
  });
761
764
  }
765
+ // Annotate the CommonJS export names for ESM import in node:
766
+ 0 && (module.exports = {
767
+ connect,
768
+ machine
769
+ });
package/dist/index.mjs CHANGED
@@ -1,55 +1,132 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
4
- var __hasOwnProp = Object.prototype.hasOwnProperty;
5
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
6
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
7
- var __spreadValues = (a, b) => {
8
- for (var prop in b || (b = {}))
9
- if (__hasOwnProp.call(b, prop))
10
- __defNormalProp(a, prop, b[prop]);
11
- if (__getOwnPropSymbols)
12
- for (var prop of __getOwnPropSymbols(b)) {
13
- if (__propIsEnum.call(b, prop))
14
- __defNormalProp(a, prop, b[prop]);
15
- }
16
- return a;
17
- };
18
-
19
1
  // ../../utilities/dom/dist/index.mjs
20
- var __pow = Math.pow;
21
2
  var dataAttr = (guard) => {
22
3
  return guard ? "" : void 0;
23
4
  };
24
- var isDom = () => typeof window !== "undefined";
5
+ var runIfFn = (v, ...a) => {
6
+ const res = typeof v === "function" ? v(...a) : v;
7
+ return res ?? void 0;
8
+ };
9
+ var callAll = (...fns) => (...a) => {
10
+ fns.forEach(function(fn) {
11
+ fn == null ? void 0 : fn(...a);
12
+ });
13
+ };
25
14
  var isArray = (v) => Array.isArray(v);
26
15
  var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
27
16
  var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
17
+ var isDom = () => typeof window !== "undefined";
28
18
  function getPlatform() {
29
- var _a;
30
19
  const agent = navigator.userAgentData;
31
- return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
20
+ return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
32
21
  }
33
22
  var pt = (v) => isDom() && v.test(getPlatform());
34
23
  var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
35
24
  var isMac = () => pt(/^Mac/) && !isTouchDevice;
36
25
  var isApple = () => pt(/mac|iphone|ipad|ipod/i);
37
26
  var isIos = () => isApple() && !isMac();
27
+ function isDocument(el) {
28
+ return el.nodeType === Node.DOCUMENT_NODE;
29
+ }
30
+ function isWindow(value) {
31
+ return (value == null ? void 0 : value.toString()) === "[object Window]";
32
+ }
33
+ function getDocument(el) {
34
+ if (isWindow(el))
35
+ return el.document;
36
+ if (isDocument(el))
37
+ return el;
38
+ return (el == null ? void 0 : el.ownerDocument) ?? document;
39
+ }
40
+ function defineDomHelpers(helpers) {
41
+ const dom2 = {
42
+ getRootNode: (ctx) => {
43
+ var _a;
44
+ return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
45
+ },
46
+ getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
47
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
48
+ getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
49
+ getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
50
+ };
51
+ return {
52
+ ...dom2,
53
+ ...helpers
54
+ };
55
+ }
38
56
  var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
39
57
  var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
40
58
  var supportsMouseEvent = () => isDom() && window.onmousedown === null;
41
59
  var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
42
60
  var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
43
61
  var isLeftClick = (v) => v.button === 0;
44
- var runIfFn = (v, ...a) => {
45
- const res = typeof v === "function" ? v(...a) : v;
46
- return res != null ? res : void 0;
62
+ function getElementOffset(element) {
63
+ let left = 0;
64
+ let top = 0;
65
+ let el = element;
66
+ if (el.parentNode) {
67
+ do {
68
+ left += el.offsetLeft;
69
+ top += el.offsetTop;
70
+ } while ((el = el.offsetParent) && el.nodeType < 9);
71
+ el = element;
72
+ do {
73
+ left -= el.scrollLeft;
74
+ top -= el.scrollTop;
75
+ } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
76
+ }
77
+ return {
78
+ top,
79
+ right: innerWidth - left - element.offsetWidth,
80
+ bottom: innerHeight - top - element.offsetHeight,
81
+ left
82
+ };
83
+ }
84
+ function getPointRelativeToNode(point, element) {
85
+ const offset = getElementOffset(element);
86
+ const x = point.x - offset.left;
87
+ const y = point.y - offset.top;
88
+ return { x, y };
89
+ }
90
+ var rtlKeyMap = {
91
+ ArrowLeft: "ArrowRight",
92
+ ArrowRight: "ArrowLeft",
93
+ Home: "End",
94
+ End: "Home"
47
95
  };
48
- var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
96
+ var sameKeyMap = {
97
+ Up: "ArrowUp",
98
+ Down: "ArrowDown",
99
+ Esc: "Escape",
100
+ " ": "Space",
101
+ ",": "Comma",
102
+ Left: "ArrowLeft",
103
+ Right: "ArrowRight"
104
+ };
105
+ function getEventKey(event, options = {}) {
106
+ const { dir = "ltr", orientation = "horizontal" } = options;
107
+ let { key } = event;
108
+ key = sameKeyMap[key] ?? key;
109
+ const isRtl = dir === "rtl" && orientation === "horizontal";
110
+ if (isRtl && key in rtlKeyMap) {
111
+ key = rtlKeyMap[key];
112
+ }
113
+ return key;
114
+ }
115
+ var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
116
+ var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
117
+ function getEventStep(event) {
118
+ if (event.ctrlKey || event.metaKey) {
119
+ return 0.1;
120
+ } else {
121
+ const isPageKey = PAGE_KEYS.has(event.key);
122
+ const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
123
+ return isSkipKey ? 10 : 1;
124
+ }
125
+ }
49
126
  var isRef = (v) => hasProp(v, "current");
50
- var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
127
+ var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
51
128
  function extractInfo(event, type = "page") {
52
- const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
129
+ const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : event;
53
130
  return {
54
131
  point: {
55
132
  x: point[`${type}X`],
@@ -65,8 +142,7 @@ function addDomEvent(target, eventName, handler, options) {
65
142
  };
66
143
  }
67
144
  function addPointerEvent(target, event, listener, options) {
68
- var _a;
69
- const type = (_a = getEventName(event)) != null ? _a : event;
145
+ const type = getEventName(event) ?? event;
70
146
  return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
71
147
  }
72
148
  function wrapHandler(fn, filter = false) {
@@ -77,8 +153,7 @@ function wrapHandler(fn, filter = false) {
77
153
  }
78
154
  function filterPrimaryPointer(fn) {
79
155
  return (event) => {
80
- var _a;
81
- const win = (_a = event.view) != null ? _a : window;
156
+ const win = event.view ?? window;
82
157
  const isMouseEvent2 = event instanceof win.MouseEvent;
83
158
  const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
84
159
  if (isPrimary)
@@ -129,48 +204,11 @@ function raf(fn) {
129
204
  globalThis.cancelAnimationFrame(id);
130
205
  };
131
206
  }
132
- var rtlKeyMap = {
133
- ArrowLeft: "ArrowRight",
134
- ArrowRight: "ArrowLeft",
135
- Home: "End",
136
- End: "Home"
137
- };
138
- var sameKeyMap = {
139
- Up: "ArrowUp",
140
- Down: "ArrowDown",
141
- Esc: "Escape",
142
- " ": "Space",
143
- ",": "Comma",
144
- Left: "ArrowLeft",
145
- Right: "ArrowRight"
146
- };
147
- function getEventKey(event, options = {}) {
148
- var _a;
149
- const { dir = "ltr", orientation = "horizontal" } = options;
150
- let { key } = event;
151
- key = (_a = sameKeyMap[key]) != null ? _a : key;
152
- const isRtl = dir === "rtl" && orientation === "horizontal";
153
- if (isRtl && key in rtlKeyMap) {
154
- key = rtlKeyMap[key];
155
- }
156
- return key;
157
- }
158
- var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
159
- var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
160
- function getEventStep(event) {
161
- if (event.ctrlKey || event.metaKey) {
162
- return 0.1;
163
- } else {
164
- const isPageKey = PAGE_KEYS.has(event.key);
165
- const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
166
- return isSkipKey ? 10 : 1;
167
- }
168
- }
169
207
  var state = "default";
170
208
  var savedUserSelect = "";
171
209
  var modifiedElementMap = /* @__PURE__ */ new WeakMap();
172
210
  function disableTextSelection({ target, doc } = {}) {
173
- const _document = doc != null ? doc : document;
211
+ const _document = doc ?? document;
174
212
  if (isIos()) {
175
213
  if (state === "default") {
176
214
  savedUserSelect = _document.documentElement.style.webkitUserSelect;
@@ -184,7 +222,7 @@ function disableTextSelection({ target, doc } = {}) {
184
222
  return () => restoreTextSelection({ target, doc: _document });
185
223
  }
186
224
  function restoreTextSelection({ target, doc } = {}) {
187
- const _document = doc != null ? doc : document;
225
+ const _document = doc ?? document;
188
226
  if (isIos()) {
189
227
  if (state !== "disabled")
190
228
  return;
@@ -204,7 +242,7 @@ function restoreTextSelection({ target, doc } = {}) {
204
242
  if (target && modifiedElementMap.has(target)) {
205
243
  let targetOldUserSelect = modifiedElementMap.get(target);
206
244
  if (target.style.userSelect === "none") {
207
- target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
245
+ target.style.userSelect = targetOldUserSelect ?? "";
208
246
  }
209
247
  if (target.getAttribute("style") === "") {
210
248
  target.removeAttribute("style");
@@ -213,13 +251,13 @@ function restoreTextSelection({ target, doc } = {}) {
213
251
  }
214
252
  }
215
253
  }
216
- function trackPointerMove(opts) {
217
- const { onPointerMove, onPointerUp, ctx } = opts;
218
- const { doc = document, threshold = 5 } = ctx;
254
+ var THRESHOLD = 5;
255
+ function trackPointerMove(doc, opts) {
256
+ const { onPointerMove, onPointerUp } = opts;
219
257
  const handlePointerMove = (event, info) => {
220
258
  const { point: p } = info;
221
- const distance = Math.sqrt(__pow(p.x, 2) + __pow(p.y, 2));
222
- if (distance < threshold)
259
+ const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
260
+ if (distance < THRESHOLD)
223
261
  return;
224
262
  if (isMouseEvent(event) && isLeftClick(event)) {
225
263
  onPointerUp();
@@ -227,55 +265,37 @@ function trackPointerMove(opts) {
227
265
  }
228
266
  onPointerMove(info, event);
229
267
  };
230
- return pipe(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
268
+ return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
231
269
  }
232
270
 
233
- // ../../types/dist/index.mjs
234
- function createNormalizer(fn) {
235
- return new Proxy({}, {
236
- get() {
237
- return fn;
238
- }
239
- });
240
- }
241
- var normalizeProp = createNormalizer((v) => v);
242
-
243
271
  // src/splitter.dom.ts
244
- var dom = {
245
- getDoc: (ctx) => {
246
- var _a;
247
- return (_a = ctx.doc) != null ? _a : document;
248
- },
249
- getRootNode: (ctx) => {
250
- var _a;
251
- return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
252
- },
272
+ var dom = defineDomHelpers({
253
273
  getRootId: (ctx) => {
254
- var _a, _b;
255
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.uid}`;
274
+ var _a;
275
+ return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `splitter:${ctx.id}`;
256
276
  },
257
277
  getSplitterId: (ctx) => {
258
- var _a, _b;
259
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.uid}:splitter`;
278
+ var _a;
279
+ return ((_a = ctx.ids) == null ? void 0 : _a.splitter) ?? `splitter:${ctx.id}:splitter`;
260
280
  },
261
281
  getToggleButtonId: (ctx) => {
262
- var _a, _b;
263
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.uid}:toggle-btn`;
282
+ var _a;
283
+ return ((_a = ctx.ids) == null ? void 0 : _a.toggleBtn) ?? `splitter:${ctx.id}:toggle-btn`;
264
284
  },
265
285
  getLabelId: (ctx) => {
266
- var _a, _b;
267
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.uid}:label`;
286
+ var _a;
287
+ return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `splitter:${ctx.id}:label`;
268
288
  },
269
289
  getPrimaryPaneId: (ctx) => {
270
- var _a, _b;
271
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.uid}:primary`;
290
+ var _a;
291
+ return ((_a = ctx.ids) == null ? void 0 : _a.primaryPane) ?? `splitter:${ctx.id}:primary`;
272
292
  },
273
293
  getSecondaryPaneId: (ctx) => {
274
- var _a, _b;
275
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.uid}:secondary`;
294
+ var _a;
295
+ return ((_a = ctx.ids) == null ? void 0 : _a.secondaryPane) ?? `splitter:${ctx.id}:secondary`;
276
296
  },
277
- getSplitterEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getSplitterId(ctx)),
278
- getPrimaryPaneEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getPrimaryPaneId(ctx)),
297
+ getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
298
+ getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
279
299
  getCursor(ctx) {
280
300
  if (ctx.disabled || ctx.fixed)
281
301
  return "default";
@@ -287,10 +307,10 @@ var dom = {
287
307
  cursor = x ? "w-resize" : "n-resize";
288
308
  return cursor;
289
309
  }
290
- };
310
+ });
291
311
 
292
312
  // src/splitter.connect.ts
293
- function connect(state2, send, normalize = normalizeProp) {
313
+ function connect(state2, send, normalize) {
294
314
  const isHorizontal = state2.context.isHorizontal;
295
315
  const isDisabled = state2.context.disabled;
296
316
  const isFocused = state2.hasTag("focus");
@@ -345,12 +365,13 @@ function connect(state2, send, normalize = normalizeProp) {
345
365
  id: dom.getPrimaryPaneId(state2.context),
346
366
  "data-disabled": dataAttr(isDisabled),
347
367
  "data-state": isAtMax ? "at-max" : isAtMin ? "at-min" : "between",
348
- style: __spreadValues({
368
+ style: {
349
369
  visibility: "visible",
350
370
  flex: `0 0 ${value}px`,
351
371
  position: "relative",
352
- userSelect: isDragging ? "none" : "auto"
353
- }, isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` })
372
+ userSelect: isDragging ? "none" : "auto",
373
+ ...isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` }
374
+ }
354
375
  }),
355
376
  toggleButtonProps: normalize.element({
356
377
  "data-part": "toggle-button",
@@ -454,13 +475,12 @@ function connect(state2, send, normalize = normalizeProp) {
454
475
  }
455
476
 
456
477
  // src/splitter.machine.ts
457
- import { createMachine, guards, ref } from "@zag-js/core";
478
+ import { createMachine, guards } from "@zag-js/core";
458
479
 
459
480
  // ../../utilities/number/dist/index.mjs
460
- var __pow2 = Math.pow;
461
481
  function round(v, t) {
462
482
  let num = valueOf(v);
463
- const p = __pow2(10, t != null ? t : 10);
483
+ const p = 10 ** (t ?? 10);
464
484
  num = Math.round(num * p) / p;
465
485
  return t ? num.toFixed(t) : v.toString();
466
486
  }
@@ -494,7 +514,7 @@ function valueOf(v) {
494
514
  function decimalOperation(a, op, b) {
495
515
  let result = op === "+" ? a + b : a - b;
496
516
  if (a % 1 !== 0 || b % 1 !== 0) {
497
- const multiplier = __pow2(10, Math.max(countDecimals(a), countDecimals(b)));
517
+ const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
498
518
  a = Math.round(a * multiplier);
499
519
  b = Math.round(b * multiplier);
500
520
  result = op === "+" ? a + b : a - b;
@@ -504,31 +524,21 @@ function decimalOperation(a, op, b) {
504
524
  }
505
525
  var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
506
526
 
507
- // ../../utilities/rect/dist/index.mjs
508
- function relativeToNode(p, el) {
509
- const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
510
- const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
511
- return {
512
- point: { x: dx, y: dy },
513
- progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
514
- };
515
- }
516
-
517
527
  // src/splitter.machine.ts
518
528
  var { not } = guards;
519
- function machine(ctx = {}) {
529
+ function machine(ctx) {
520
530
  return createMachine({
521
531
  id: "splitter",
522
532
  initial: "unknown",
523
- context: __spreadValues({
524
- uid: "",
533
+ context: {
525
534
  orientation: "horizontal",
526
535
  min: 224,
527
536
  max: 340,
528
537
  step: 1,
529
538
  value: 256,
530
- snapOffset: 0
531
- }, ctx),
539
+ snapOffset: 0,
540
+ ...ctx
541
+ },
532
542
  computed: {
533
543
  isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
534
544
  isAtMin: (ctx2) => ctx2.value === ctx2.min,
@@ -554,10 +564,7 @@ function machine(ctx = {}) {
554
564
  states: {
555
565
  unknown: {
556
566
  on: {
557
- SETUP: {
558
- target: "idle",
559
- actions: "setupDocument"
560
- }
567
+ SETUP: "idle"
561
568
  }
562
569
  },
563
570
  idle: {
@@ -656,16 +663,15 @@ function machine(ctx = {}) {
656
663
  }, {
657
664
  activities: {
658
665
  trackPointerMove: (ctx2, _evt, { send }) => {
659
- const el = dom.getDoc(ctx2).documentElement;
660
- return trackPointerMove({
661
- ctx: ctx2,
666
+ const doc = dom.getDoc(ctx2);
667
+ return trackPointerMove(doc, {
662
668
  onPointerMove(info) {
663
669
  send({ type: "POINTER_MOVE", point: info.point });
664
- el.style.cursor = dom.getCursor(ctx2);
670
+ doc.documentElement.style.cursor = dom.getCursor(ctx2);
665
671
  },
666
672
  onPointerUp() {
667
673
  send("POINTER_UP");
668
- el.style.cursor = "";
674
+ doc.documentElement.style.cursor = "";
669
675
  }
670
676
  });
671
677
  }
@@ -694,13 +700,6 @@ function machine(ctx = {}) {
694
700
  var _a;
695
701
  (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
696
702
  },
697
- setupDocument(ctx2, evt) {
698
- if (evt.doc)
699
- ctx2.doc = ref(evt.doc);
700
- if (evt.root)
701
- ctx2.rootNode = ref(evt.root);
702
- ctx2.uid = evt.id;
703
- },
704
703
  setToMin(ctx2) {
705
704
  ctx2.value = ctx2.min;
706
705
  },
@@ -720,11 +719,11 @@ function machine(ctx = {}) {
720
719
  });
721
720
  },
722
721
  setPointerValue(ctx2, evt) {
723
- const primaryPane = dom.getPrimaryPaneEl(ctx2);
724
- if (!primaryPane)
722
+ const el = dom.getPrimaryPaneEl(ctx2);
723
+ if (!el)
725
724
  return;
726
- const { point } = relativeToNode(evt.point, primaryPane);
727
- let currentPoint = ctx2.isHorizontal ? point.x : point.y;
725
+ const relativePoint = getPointRelativeToNode(evt.point, el);
726
+ let currentPoint = ctx2.isHorizontal ? relativePoint.x : relativePoint.y;
728
727
  let value = parseFloat(snapToStep(clamp(currentPoint, ctx2), ctx2.step));
729
728
  if (Math.abs(value - ctx2.min) <= ctx2.snapOffset) {
730
729
  value = ctx2.min;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/splitter",
3
- "version": "0.1.8",
3
+ "version": "0.1.11",
4
4
  "description": "Core logic for the splitter widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -30,19 +30,21 @@
30
30
  "url": "https://github.com/chakra-ui/zag/issues"
31
31
  },
32
32
  "dependencies": {
33
- "@zag-js/core": "0.1.6",
34
- "@zag-js/dom-utils": "0.1.5",
35
- "@zag-js/number-utils": "0.1.2",
36
- "@zag-js/rect-utils": "0.1.2",
37
- "@zag-js/types": "0.2.0"
33
+ "@zag-js/core": "0.1.9",
34
+ "@zag-js/types": "0.2.3"
35
+ },
36
+ "devDependencies": {
37
+ "@zag-js/dom-utils": "0.1.8",
38
+ "@zag-js/number-utils": "0.1.3"
38
39
  },
39
40
  "scripts": {
40
- "build:fast": "zag build",
41
- "start": "zag build --watch",
42
- "build": "zag build --prod",
41
+ "build-fast": "tsup src/index.ts --format=esm,cjs",
42
+ "start": "pnpm build --watch",
43
+ "build": "tsup src/index.ts --format=esm,cjs --dts",
43
44
  "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
44
45
  "lint": "eslint src --ext .ts,.tsx",
45
- "test:ci": "yarn test --ci --runInBand",
46
- "test:watch": "yarn test --watch --updateSnapshot"
46
+ "test-ci": "pnpm test --ci --runInBand",
47
+ "test-watch": "pnpm test --watch -u",
48
+ "typecheck": "tsc --noEmit"
47
49
  }
48
- }
50
+ }
package/dist/splitter.connect.d.ts DELETED
@@ -1,19 +0,0 @@
1
- import { PropTypes, ReactPropTypes } from "@zag-js/types";
2
- import { Send, State } from "./splitter.types";
3
- export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
4
- isCollapsed: boolean;
5
- isExpanded: boolean;
6
- isFocused: boolean;
7
- isDragging: boolean;
8
- value: number;
9
- collapse(): void;
10
- expand(): void;
11
- toggle(): void;
12
- setSize(size: number): void;
13
- rootProps: T["element"];
14
- secondaryPaneProps: T["element"];
15
- primaryPaneProps: T["element"];
16
- toggleButtonProps: T["element"];
17
- labelProps: T["element"];
18
- splitterProps: T["element"];
19
- };
package/dist/splitter.dom.d.ts DELETED
@@ -1,14 +0,0 @@
1
- import { MachineContext as Ctx } from "./splitter.types";
2
- export declare const dom: {
3
- getDoc: (ctx: Ctx) => Document;
4
- getRootNode: (ctx: Ctx) => Document | ShadowRoot;
5
- getRootId: (ctx: Ctx) => string;
6
- getSplitterId: (ctx: Ctx) => string;
7
- getToggleButtonId: (ctx: Ctx) => string;
8
- getLabelId: (ctx: Ctx) => string;
9
- getPrimaryPaneId: (ctx: Ctx) => string;
10
- getSecondaryPaneId: (ctx: Ctx) => string;
11
- getSplitterEl: (ctx: Ctx) => HTMLElement;
12
- getPrimaryPaneEl: (ctx: Ctx) => HTMLElement;
13
- getCursor(ctx: Ctx): "default" | (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
14
- };
package/dist/splitter.machine.d.ts DELETED
@@ -1,2 +0,0 @@
1
- import { MachineContext, MachineState, UserDefinedContext } from "./splitter.types";
2
- export declare function machine(ctx?: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;
package/dist/splitter.types.d.ts DELETED
@@ -1,94 +0,0 @@
1
- import { StateMachine as S } from "@zag-js/core";
2
- import { Context, DirectionProperty } from "@zag-js/types";
3
- declare type ElementIds = Partial<{
4
- root: string;
5
- splitter: string;
6
- label: string;
7
- toggleBtn: string;
8
- primaryPane: string;
9
- secondaryPane: string;
10
- }>;
11
- declare type PublicContext = DirectionProperty & {
12
- /**
13
- * The ids of the elements in the splitter. Useful for composition.
14
- */
15
- ids?: ElementIds;
16
- /**
17
- * Whether to allow the separator to be dragged.
18
- */
19
- fixed?: boolean;
20
- /**
21
- * The orientation of the split view.
22
- */
23
- orientation: "horizontal" | "vertical";
24
- /**
25
- * The minimum size of the primary pane.
26
- */
27
- min: number;
28
- /**
29
- * The maximum size of the primary pane.
30
- */
31
- max: number;
32
- /**
33
- * The size of the primary pane.
34
- */
35
- value: number;
36
- /**
37
- * The step increments of the primary pane when it is dragged
38
- * or resized with keyboard.
39
- */
40
- step: number;
41
- /**
42
- * Callback to be invoked when the primary pane is resized.
43
- */
44
- onChange?: (details: {
45
- value: number;
46
- }) => void;
47
- /**
48
- * Callback to be invoked when the primary pane's resize session starts
49
- */
50
- onChangeStart?: (details: {
51
- value: number;
52
- }) => void;
53
- /**
54
- * Callback to be invoked when the primary pane's resize session ends
55
- */
56
- onChangeEnd?: (details: {
57
- value: number;
58
- }) => void;
59
- /**
60
- * Whether the primary pane is disabled.
61
- */
62
- disabled?: boolean;
63
- /**
64
- * The minimum offset needed to snap the primary pane to its minimum or maximum size.
65
- */
66
- snapOffset: number;
67
- };
68
- export declare type UserDefinedContext = Partial<PublicContext>;
69
- declare type ComputedContext = Readonly<{
70
- /**
71
- * @computed
72
- * Whether the primary pane is at its minimum size.
73
- */
74
- isAtMin: boolean;
75
- /**
76
- * @computed
77
- * Whether the primary pane is at its maximum size.
78
- */
79
- isAtMax: boolean;
80
- /**
81
- * @computed
82
- * Whether the orientation is horizontal.
83
- */
84
- isHorizontal: boolean;
85
- }>;
86
- declare type PrivateContext = Context<{}>;
87
- export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
88
- export declare type MachineState = {
89
- value: "unknown" | "idle" | "hover:temp" | "hover" | "dragging" | "focused";
90
- tags: "focus";
91
- };
92
- export declare type State = S.State<MachineContext, MachineState>;
93
- export declare type Send = S.Send<S.AnyEventObject>;
94
- export {};