@zag-js/splitter 0.2.4 → 0.2.6

package/dist/splitter.anatomy.d.ts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"splitter" | "root" | "secondaryPane" | "primaryPane" | "toggleButton" | "label">;
+declare const parts: Record<"splitter" | "root" | "secondaryPane" | "primaryPane" | "toggleButton" | "label", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/splitter.anatomy.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/splitter.anatomy.ts
+var splitter_anatomy_exports = {};
+__export(splitter_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(splitter_anatomy_exports);
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts(
+  "root",
+  "secondaryPane",
+  "primaryPane",
+  "toggleButton",
+  "label",
+  "splitter"
+);
+var parts = anatomy.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/splitter.anatomy.mjs

@@ -0,0 +1,8 @@
+import {
+  anatomy,
+  parts
+} from "./chunk-DX6NGFGC.mjs";
+export {
+  anatomy,
+  parts
+};

package/dist/splitter.connect.d.ts

@@ -0,0 +1,23 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { State, Send } from './splitter.types.js';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    isCollapsed: boolean;
+    isExpanded: boolean;
+    isFocused: boolean;
+    isDragging: boolean;
+    value: number;
+    collapse(): void;
+    expand(): void;
+    toggle(): void;
+    setSize(size: number): void;
+    rootProps: T["element"];
+    secondaryPaneProps: T["element"];
+    primaryPaneProps: T["element"];
+    toggleButtonProps: T["element"];
+    labelProps: T["element"];
+    splitterProps: T["element"];
+};
+
+export { connect };

package/dist/splitter.connect.js

@@ -0,0 +1,342 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/splitter.connect.ts
+var splitter_connect_exports = {};
+__export(splitter_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(splitter_connect_exports);
+
+// ../../utilities/dom/src/attrs.ts
+var dataAttr = (guard) => {
+  return guard ? "" : void 0;
+};
+
+// ../../utilities/dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom2.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+
+// ../../utilities/dom/src/keyboard-event.ts
+var rtlKeyMap = {
+  ArrowLeft: "ArrowRight",
+  ArrowRight: "ArrowLeft"
+};
+var sameKeyMap = {
+  Up: "ArrowUp",
+  Down: "ArrowDown",
+  Esc: "Escape",
+  " ": "Space",
+  ",": "Comma",
+  Left: "ArrowLeft",
+  Right: "ArrowRight"
+};
+function getEventKey(event, options = {}) {
+  var _a;
+  const { dir = "ltr", orientation = "horizontal" } = options;
+  let { key } = event;
+  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  const isRtl = dir === "rtl" && orientation === "horizontal";
+  if (isRtl && key in rtlKeyMap) {
+    key = rtlKeyMap[key];
+  }
+  return key;
+}
+var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
+var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
+function getEventStep(event) {
+  if (event.ctrlKey || event.metaKey) {
+    return 0.1;
+  } else {
+    const isPageKey = PAGE_KEYS.has(event.key);
+    const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
+    return isSkipKey ? 10 : 1;
+  }
+}
+
+// src/splitter.anatomy.ts
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts(
+  "root",
+  "secondaryPane",
+  "primaryPane",
+  "toggleButton",
+  "label",
+  "splitter"
+);
+var parts = anatomy.build();
+
+// src/splitter.dom.ts
+var dom = defineDomHelpers({
+  getRootId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.id}`;
+  },
+  getSplitterId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.id}:splitter`;
+  },
+  getToggleButtonId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.id}:toggle-btn`;
+  },
+  getLabelId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.id}:label`;
+  },
+  getPrimaryPaneId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.id}:primary`;
+  },
+  getSecondaryPaneId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.id}:secondary`;
+  },
+  getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
+  getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
+  getCursor(ctx) {
+    if (ctx.disabled || ctx.fixed)
+      return "default";
+    const x = ctx.isHorizontal;
+    let cursor = x ? "col-resize" : "row-resize";
+    if (ctx.isAtMin)
+      cursor = x ? "e-resize" : "s-resize";
+    if (ctx.isAtMax)
+      cursor = x ? "w-resize" : "n-resize";
+    return cursor;
+  }
+});
+
+// src/splitter.connect.ts
+function connect(state, send, normalize) {
+  const isHorizontal = state.context.isHorizontal;
+  const isDisabled = state.context.disabled;
+  const isFocused = state.hasTag("focus");
+  const isDragging = state.matches("dragging");
+  const isAtMin = state.context.isAtMin;
+  const isAtMax = state.context.isAtMax;
+  const min = state.context.min;
+  const max = state.context.max;
+  const value = state.context.value;
+  return {
+    isCollapsed: isAtMin,
+    isExpanded: isAtMax,
+    isFocused,
+    isDragging,
+    value,
+    collapse() {
+      send("COLLAPSE");
+    },
+    expand() {
+      send("EXPAND");
+    },
+    toggle() {
+      send("TOGGLE");
+    },
+    setSize(size) {
+      send({ type: "SET_SIZE", size });
+    },
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      "data-orientation": state.context.orientation,
+      "data-disabled": dataAttr(isDisabled),
+      id: dom.getRootId(state.context),
+      style: {
+        display: "flex",
+        flex: "1 1 0%",
+        flexDirection: isHorizontal ? "row" : "column"
+      }
+    }),
+    secondaryPaneProps: normalize.element({
+      ...parts.secondaryPane.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      id: dom.getSecondaryPaneId(state.context),
+      style: {
+        height: isHorizontal ? "100%" : "auto",
+        width: isHorizontal ? "auto" : "100%",
+        flex: "1 1 auto",
+        position: "relative"
+      }
+    }),
+    primaryPaneProps: normalize.element({
+      ...parts.primaryPane.attrs,
+      id: dom.getPrimaryPaneId(state.context),
+      "data-disabled": dataAttr(isDisabled),
+      "data-state": isAtMax ? "at-max" : isAtMin ? "at-min" : "between",
+      style: {
+        visibility: "visible",
+        flex: `0 0 ${value}px`,
+        position: "relative",
+        userSelect: isDragging ? "none" : "auto",
+        ...isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` }
+      }
+    }),
+    toggleButtonProps: normalize.element({
+      ...parts.toggleButton.attrs,
+      id: dom.getToggleButtonId(state.context),
+      "aria-label": state.context.isAtMin ? "Expand Primary Pane" : "Collapse Primary Pane",
+      onClick() {
+        send("TOGGLE");
+      }
+    }),
+    labelProps: normalize.element({
+      ...parts.label.attrs,
+      id: dom.getLabelId(state.context)
+    }),
+    splitterProps: normalize.element({
+      ...parts.splitter.attrs,
+      id: dom.getSplitterId(state.context),
+      role: "separator",
+      tabIndex: isDisabled ? void 0 : 0,
+      "aria-valuenow": value,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-orientation": state.context.orientation,
+      "aria-labelledby": dom.getLabelId(state.context),
+      "aria-controls": dom.getPrimaryPaneId(state.context),
+      "data-orientation": state.context.orientation,
+      "data-focus": dataAttr(isFocused),
+      "data-disabled": dataAttr(isDisabled),
+      style: {
+        touchAction: "none",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        msUserSelect: "none",
+        flex: "0 0 auto",
+        cursor: dom.getCursor(state.context),
+        minHeight: isHorizontal ? "0px" : void 0,
+        minWidth: isHorizontal ? void 0 : "0px"
+      },
+      onPointerDown(event) {
+        if (isDisabled) {
+          event.preventDefault();
+          return;
+        }
+        send("POINTER_DOWN");
+        event.preventDefault();
+        event.stopPropagation();
+      },
+      onPointerOver() {
+        if (isDisabled)
+          return;
+        send("POINTER_OVER");
+      },
+      onPointerLeave() {
+        if (isDisabled)
+          return;
+        send("POINTER_LEAVE");
+      },
+      onBlur() {
+        send("BLUR");
+      },
+      onFocus() {
+        send("FOCUS");
+      },
+      onDoubleClick() {
+        if (isDisabled)
+          return;
+        send("DOUBLE_CLICK");
+      },
+      onKeyDown(event) {
+        if (isDisabled)
+          return;
+        const step = getEventStep(event) * state.context.step;
+        const keyMap = {
+          ArrowUp() {
+            send({ type: "ARROW_UP", step });
+          },
+          ArrowDown() {
+            send({ type: "ARROW_DOWN", step });
+          },
+          ArrowLeft() {
+            send({ type: "ARROW_LEFT", step });
+          },
+          ArrowRight() {
+            send({ type: "ARROW_RIGHT", step });
+          },
+          Home() {
+            send("HOME");
+          },
+          End() {
+            send("END");
+          }
+        };
+        const key = getEventKey(event, state.context);
+        const exec = keyMap[key];
+        if (exec) {
+          exec(event);
+          event.preventDefault();
+        }
+      }
+    })
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/splitter.connect.mjs

@@ -0,0 +1,8 @@
+import {
+  connect
+} from "./chunk-7IDNY7GP.mjs";
+import "./chunk-DX6NGFGC.mjs";
+import "./chunk-A3GF7W2N.mjs";
+export {
+  connect
+};

package/dist/splitter.dom.d.ts

@@ -0,0 +1,37 @@
+import { MachineContext } from './splitter.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const dom: {
+    getRootNode: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => HTMLElement | null;
+    getById: <T = HTMLElement>(ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }, id: string) => T | null;
+    createEmitter: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }, target: HTMLElement) => (evt: string, detail: Record<string, any>, options?: EventInit | undefined) => void;
+    createListener: (target: HTMLElement) => <T_1 = any>(evt: string, handler: (e: CustomEvent<T_1>) => void) => () => void;
+} & {
+    getRootId: (ctx: MachineContext) => string;
+    getSplitterId: (ctx: MachineContext) => string;
+    getToggleButtonId: (ctx: MachineContext) => string;
+    getLabelId: (ctx: MachineContext) => string;
+    getPrimaryPaneId: (ctx: MachineContext) => string;
+    getSecondaryPaneId: (ctx: MachineContext) => string;
+    getSplitterEl: (ctx: MachineContext) => HTMLElement | null;
+    getPrimaryPaneEl: (ctx: MachineContext) => HTMLElement | null;
+    getCursor(ctx: MachineContext): (string & {}) | "col-resize" | "default" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
+};
+
+export { dom };

package/dist/splitter.dom.js

@@ -0,0 +1,123 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/splitter.dom.ts
+var splitter_dom_exports = {};
+__export(splitter_dom_exports, {
+  dom: () => dom
+});
+module.exports = __toCommonJS(splitter_dom_exports);
+
+// ../../utilities/dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom2.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+
+// src/splitter.dom.ts
+var dom = defineDomHelpers({
+  getRootId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.id}`;
+  },
+  getSplitterId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.id}:splitter`;
+  },
+  getToggleButtonId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.id}:toggle-btn`;
+  },
+  getLabelId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.id}:label`;
+  },
+  getPrimaryPaneId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.id}:primary`;
+  },
+  getSecondaryPaneId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.id}:secondary`;
+  },
+  getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
+  getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
+  getCursor(ctx) {
+    if (ctx.disabled || ctx.fixed)
+      return "default";
+    const x = ctx.isHorizontal;
+    let cursor = x ? "col-resize" : "row-resize";
+    if (ctx.isAtMin)
+      cursor = x ? "e-resize" : "s-resize";
+    if (ctx.isAtMax)
+      cursor = x ? "w-resize" : "n-resize";
+    return cursor;
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dom
+});

package/dist/splitter.dom.mjs

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

package/dist/splitter.machine.d.ts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { UserDefinedContext, MachineContext, MachineState } from './splitter.types.js';
+import '@zag-js/types';
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { machine };