@zag-js/toolbar 2.0.0-next.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Chakra UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,19 @@
+# @zag-js/toolbar
+
+Core logic for the toolbar widget implemented as a state machine
+
+## Installation
+
+```sh
+yarn add @zag-js/toolbar
+# or
+npm i @zag-js/toolbar
+```
+
+## Contribution
+
+Yes please! See the [contributing guidelines](https://github.com/chakra-ui/zag/blob/main/CONTRIBUTING.md) for details.
+
+## Licence
+
+This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/zag/blob/main/LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,8 @@
+export { anatomy } from './toolbar.anatomy.mjs';
+export { connect } from './toolbar.connect.mjs';
+export { machine } from './toolbar.machine.mjs';
+export { itemProps, props, splitItemProps, splitProps } from './toolbar.props.mjs';
+export { ToolbarApi as Api, ElementIds, GroupProps, ItemProps, ItemState, LinkProps, ToolbarMachine as Machine, ToolbarProps as Props, ToolbarService as Service } from './toolbar.types.mjs';
+export { Orientation } from '@zag-js/types';
+import '@zag-js/anatomy';
+import '@zag-js/core';

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { anatomy } from './toolbar.anatomy.js';
+export { connect } from './toolbar.connect.js';
+export { machine } from './toolbar.machine.js';
+export { itemProps, props, splitItemProps, splitProps } from './toolbar.props.js';
+export { ToolbarApi as Api, ElementIds, GroupProps, ItemProps, ItemState, LinkProps, ToolbarMachine as Machine, ToolbarProps as Props, ToolbarService as Service } from './toolbar.types.js';
+export { Orientation } from '@zag-js/types';
+import '@zag-js/anatomy';
+import '@zag-js/core';

package/dist/index.js

@@ -0,0 +1,39 @@
+"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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  anatomy: () => import_toolbar.anatomy,
+  connect: () => import_toolbar2.connect,
+  machine: () => import_toolbar3.machine
+});
+module.exports = __toCommonJS(index_exports);
+var import_toolbar = require("./toolbar.anatomy.js");
+var import_toolbar2 = require("./toolbar.connect.js");
+var import_toolbar3 = require("./toolbar.machine.js");
+__reExport(index_exports, require("./toolbar.props.js"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  connect,
+  machine,
+  ...require("./toolbar.props.js")
+});

package/dist/index.mjs

@@ -0,0 +1,10 @@
+// src/index.ts
+import { anatomy } from "./toolbar.anatomy.mjs";
+import { connect } from "./toolbar.connect.mjs";
+import { machine } from "./toolbar.machine.mjs";
+export * from "./toolbar.props.mjs";
+export {
+  anatomy,
+  connect,
+  machine
+};

package/dist/toolbar.anatomy.d.mts

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

package/dist/toolbar.anatomy.d.ts

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

package/dist/toolbar.anatomy.js

@@ -0,0 +1,34 @@
+"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/toolbar.anatomy.ts
+var toolbar_anatomy_exports = {};
+__export(toolbar_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(toolbar_anatomy_exports);
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("toolbar").parts("root", "group", "separator", "item");
+var parts = anatomy.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/toolbar.anatomy.mjs

@@ -0,0 +1,8 @@
+// src/toolbar.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("toolbar").parts("root", "group", "separator", "item");
+var parts = anatomy.build();
+export {
+  anatomy,
+  parts
+};

package/dist/toolbar.connect.d.mts

@@ -0,0 +1,7 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { ToolbarService, ToolbarApi } from './toolbar.types.mjs';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(service: ToolbarService, normalize: NormalizeProps<T>): ToolbarApi<T>;
+
+export { connect };

package/dist/toolbar.connect.d.ts

@@ -0,0 +1,7 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { ToolbarService, ToolbarApi } from './toolbar.types.js';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(service: ToolbarService, normalize: NormalizeProps<T>): ToolbarApi<T>;
+
+export { connect };

package/dist/toolbar.connect.js

@@ -0,0 +1,229 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/toolbar.connect.ts
+var toolbar_connect_exports = {};
+__export(toolbar_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(toolbar_connect_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_toolbar = require("./toolbar.anatomy.js");
+var dom = __toESM(require("./toolbar.dom.js"));
+function connect(service, normalize) {
+  const { context, send, prop, scope } = service;
+  const orientation = prop("orientation");
+  const isHorizontal = orientation === "horizontal";
+  const rootDisabled = !!prop("disabled");
+  function getItemState(props) {
+    return {
+      id: dom.getItemId(scope, props.value),
+      disabled: Boolean(props.disabled || rootDisabled),
+      focusableWhenDisabled: props.focusableWhenDisabled ?? true,
+      focused: context.get("focusedValue") === props.value,
+      orientation
+    };
+  }
+  function getNavKeyMap() {
+    const map = {
+      Home() {
+        send({ type: "ITEM.FOCUS_FIRST" });
+      },
+      End() {
+        send({ type: "ITEM.FOCUS_LAST" });
+      }
+    };
+    if (isHorizontal) {
+      map.ArrowRight = () => send({ type: "ITEM.FOCUS_NEXT" });
+      map.ArrowLeft = () => send({ type: "ITEM.FOCUS_PREV" });
+    } else {
+      map.ArrowDown = () => send({ type: "ITEM.FOCUS_NEXT" });
+      map.ArrowUp = () => send({ type: "ITEM.FOCUS_PREV" });
+    }
+    return map;
+  }
+  return {
+    disabled: rootDisabled,
+    focusedValue: context.get("focusedValue"),
+    orientation,
+    getItemId(value) {
+      return dom.getItemId(scope, value);
+    },
+    getItemState,
+    getRootProps() {
+      return normalize.element({
+        ...import_toolbar.parts.root.attrs(scope.id),
+        id: dom.getRootId(scope),
+        role: "toolbar",
+        dir: prop("dir"),
+        "aria-orientation": orientation,
+        "data-orientation": orientation,
+        "aria-disabled": (0, import_dom_query.ariaAttr)(rootDisabled),
+        "data-disabled": (0, import_dom_query.dataAttr)(rootDisabled),
+        tabIndex: context.get("hasInteracted") ? -1 : 0,
+        style: { outline: "none" },
+        onMouseDown() {
+          if (rootDisabled) return;
+          send({ type: "ROOT.MOUSE_DOWN" });
+        },
+        onFocus(event) {
+          if (rootDisabled) return;
+          const target = (0, import_dom_query.getEventTarget)(event);
+          if (event.currentTarget !== target) {
+            if ((0, import_dom_query.contains)(event.currentTarget, target)) send({ type: "DESCENDANT.FOCUS" });
+            return;
+          }
+          if (context.get("isClickFocus")) return;
+          send({ type: "ROOT.FOCUS" });
+        },
+        onBlur(event) {
+          const relatedTarget = event.relatedTarget;
+          if ((0, import_dom_query.contains)(event.currentTarget, relatedTarget)) return;
+          if (rootDisabled) return;
+          send({ type: "ROOT.BLUR" });
+        },
+        onKeyDown(event) {
+          if (rootDisabled) return;
+          if (event.defaultPrevented) return;
+          const target = (0, import_dom_query.getEventTarget)(event);
+          if (!(0, import_dom_query.contains)(event.currentTarget, target)) return;
+          const keyMap = getNavKeyMap();
+          const exec = keyMap[(0, import_dom_query.getEventKey)(event, { dir: prop("dir"), orientation })];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        }
+      });
+    },
+    getGroupProps(props) {
+      return normalize.element({
+        ...import_toolbar.parts.group.attrs(scope.id),
+        id: dom.getGroupId(scope, props.value),
+        role: "group",
+        dir: prop("dir"),
+        "aria-disabled": (0, import_dom_query.ariaAttr)(!!props.disabled),
+        "data-disabled": (0, import_dom_query.dataAttr)(!!props.disabled),
+        "data-orientation": orientation
+      });
+    },
+    getSeparatorProps() {
+      const separatorOrientation = isHorizontal ? "vertical" : "horizontal";
+      return normalize.element({
+        ...import_toolbar.parts.separator.attrs(scope.id),
+        role: "separator",
+        dir: prop("dir"),
+        "aria-orientation": separatorOrientation,
+        "data-orientation": separatorOrientation
+      });
+    },
+    getItemProps(props) {
+      const itemState = getItemState(props);
+      const isNativelyDisabled = itemState.disabled && !itemState.focusableWhenDisabled;
+      return normalize.button({
+        ...import_toolbar.parts.item.attrs(scope.id),
+        id: itemState.id,
+        type: "button",
+        dir: prop("dir"),
+        disabled: isNativelyDisabled || void 0,
+        "aria-disabled": (0, import_dom_query.ariaAttr)(itemState.disabled),
+        "data-disabled": (0, import_dom_query.dataAttr)(itemState.disabled),
+        "data-focusable-when-disabled": (0, import_dom_query.dataAttr)(itemState.disabled && itemState.focusableWhenDisabled),
+        "data-orientation": orientation,
+        tabIndex: isNativelyDisabled ? void 0 : itemState.focused ? 0 : -1,
+        onFocus() {
+          send({ type: "ITEM.FOCUS", value: props.value });
+        }
+      });
+    },
+    getLinkProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...import_toolbar.parts.item.attrs(scope.id),
+        id: itemState.id,
+        dir: prop("dir"),
+        "data-orientation": itemState.orientation,
+        tabIndex: itemState.focused ? 0 : -1,
+        onFocus() {
+          send({ type: "ITEM.FOCUS", value: props.value });
+        }
+      });
+    },
+    getInputProps(props) {
+      const itemState = getItemState(props);
+      const isNativelyDisabled = itemState.disabled && !itemState.focusableWhenDisabled;
+      return normalize.input({
+        ...import_toolbar.parts.item.attrs(scope.id),
+        id: itemState.id,
+        dir: prop("dir"),
+        disabled: isNativelyDisabled || void 0,
+        readOnly: itemState.disabled && itemState.focusableWhenDisabled ? true : void 0,
+        "aria-disabled": (0, import_dom_query.ariaAttr)(itemState.disabled),
+        "data-disabled": (0, import_dom_query.dataAttr)(itemState.disabled),
+        "data-focusable-when-disabled": (0, import_dom_query.dataAttr)(itemState.disabled && itemState.focusableWhenDisabled),
+        "data-orientation": orientation,
+        tabIndex: isNativelyDisabled ? void 0 : itemState.focused ? 0 : -1,
+        onClick(event) {
+          if (itemState.disabled) event.preventDefault();
+        },
+        onPointerDown(event) {
+          if (itemState.disabled) event.preventDefault();
+        },
+        onFocus(event) {
+          send({ type: "ITEM.FOCUS", value: props.value });
+          event.currentTarget.select();
+        },
+        onKeyDown(event) {
+          const key = (0, import_dom_query.getEventKey)(event, { dir: prop("dir"), orientation });
+          if (key === "Home" || key === "End") {
+            event.stopPropagation();
+            return;
+          }
+          const isForward = isHorizontal ? key === "ArrowRight" : key === "ArrowDown";
+          const isBackward = isHorizontal ? key === "ArrowLeft" : key === "ArrowUp";
+          if (!isForward && !isBackward) return;
+          if (event.defaultPrevented) {
+            event.stopPropagation();
+            return;
+          }
+          const input = event.currentTarget;
+          const collapsed = input.selectionStart === input.selectionEnd;
+          const atBoundary = isForward ? (0, import_dom_query.isCaretAtEnd)(input) : (0, import_dom_query.isCaretAtStart)(input);
+          if (!collapsed || !atBoundary) {
+            event.stopPropagation();
+          }
+        }
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/toolbar.connect.mjs

@@ -0,0 +1,202 @@
+// src/toolbar.connect.ts
+import {
+  ariaAttr,
+  contains,
+  dataAttr,
+  getEventKey,
+  getEventTarget,
+  isCaretAtEnd,
+  isCaretAtStart
+} from "@zag-js/dom-query";
+import { parts } from "./toolbar.anatomy.mjs";
+import * as dom from "./toolbar.dom.mjs";
+function connect(service, normalize) {
+  const { context, send, prop, scope } = service;
+  const orientation = prop("orientation");
+  const isHorizontal = orientation === "horizontal";
+  const rootDisabled = !!prop("disabled");
+  function getItemState(props) {
+    return {
+      id: dom.getItemId(scope, props.value),
+      disabled: Boolean(props.disabled || rootDisabled),
+      focusableWhenDisabled: props.focusableWhenDisabled ?? true,
+      focused: context.get("focusedValue") === props.value,
+      orientation
+    };
+  }
+  function getNavKeyMap() {
+    const map = {
+      Home() {
+        send({ type: "ITEM.FOCUS_FIRST" });
+      },
+      End() {
+        send({ type: "ITEM.FOCUS_LAST" });
+      }
+    };
+    if (isHorizontal) {
+      map.ArrowRight = () => send({ type: "ITEM.FOCUS_NEXT" });
+      map.ArrowLeft = () => send({ type: "ITEM.FOCUS_PREV" });
+    } else {
+      map.ArrowDown = () => send({ type: "ITEM.FOCUS_NEXT" });
+      map.ArrowUp = () => send({ type: "ITEM.FOCUS_PREV" });
+    }
+    return map;
+  }
+  return {
+    disabled: rootDisabled,
+    focusedValue: context.get("focusedValue"),
+    orientation,
+    getItemId(value) {
+      return dom.getItemId(scope, value);
+    },
+    getItemState,
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs(scope.id),
+        id: dom.getRootId(scope),
+        role: "toolbar",
+        dir: prop("dir"),
+        "aria-orientation": orientation,
+        "data-orientation": orientation,
+        "aria-disabled": ariaAttr(rootDisabled),
+        "data-disabled": dataAttr(rootDisabled),
+        tabIndex: context.get("hasInteracted") ? -1 : 0,
+        style: { outline: "none" },
+        onMouseDown() {
+          if (rootDisabled) return;
+          send({ type: "ROOT.MOUSE_DOWN" });
+        },
+        onFocus(event) {
+          if (rootDisabled) return;
+          const target = getEventTarget(event);
+          if (event.currentTarget !== target) {
+            if (contains(event.currentTarget, target)) send({ type: "DESCENDANT.FOCUS" });
+            return;
+          }
+          if (context.get("isClickFocus")) return;
+          send({ type: "ROOT.FOCUS" });
+        },
+        onBlur(event) {
+          const relatedTarget = event.relatedTarget;
+          if (contains(event.currentTarget, relatedTarget)) return;
+          if (rootDisabled) return;
+          send({ type: "ROOT.BLUR" });
+        },
+        onKeyDown(event) {
+          if (rootDisabled) return;
+          if (event.defaultPrevented) return;
+          const target = getEventTarget(event);
+          if (!contains(event.currentTarget, target)) return;
+          const keyMap = getNavKeyMap();
+          const exec = keyMap[getEventKey(event, { dir: prop("dir"), orientation })];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        }
+      });
+    },
+    getGroupProps(props) {
+      return normalize.element({
+        ...parts.group.attrs(scope.id),
+        id: dom.getGroupId(scope, props.value),
+        role: "group",
+        dir: prop("dir"),
+        "aria-disabled": ariaAttr(!!props.disabled),
+        "data-disabled": dataAttr(!!props.disabled),
+        "data-orientation": orientation
+      });
+    },
+    getSeparatorProps() {
+      const separatorOrientation = isHorizontal ? "vertical" : "horizontal";
+      return normalize.element({
+        ...parts.separator.attrs(scope.id),
+        role: "separator",
+        dir: prop("dir"),
+        "aria-orientation": separatorOrientation,
+        "data-orientation": separatorOrientation
+      });
+    },
+    getItemProps(props) {
+      const itemState = getItemState(props);
+      const isNativelyDisabled = itemState.disabled && !itemState.focusableWhenDisabled;
+      return normalize.button({
+        ...parts.item.attrs(scope.id),
+        id: itemState.id,
+        type: "button",
+        dir: prop("dir"),
+        disabled: isNativelyDisabled || void 0,
+        "aria-disabled": ariaAttr(itemState.disabled),
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-focusable-when-disabled": dataAttr(itemState.disabled && itemState.focusableWhenDisabled),
+        "data-orientation": orientation,
+        tabIndex: isNativelyDisabled ? void 0 : itemState.focused ? 0 : -1,
+        onFocus() {
+          send({ type: "ITEM.FOCUS", value: props.value });
+        }
+      });
+    },
+    getLinkProps(props) {
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...parts.item.attrs(scope.id),
+        id: itemState.id,
+        dir: prop("dir"),
+        "data-orientation": itemState.orientation,
+        tabIndex: itemState.focused ? 0 : -1,
+        onFocus() {
+          send({ type: "ITEM.FOCUS", value: props.value });
+        }
+      });
+    },
+    getInputProps(props) {
+      const itemState = getItemState(props);
+      const isNativelyDisabled = itemState.disabled && !itemState.focusableWhenDisabled;
+      return normalize.input({
+        ...parts.item.attrs(scope.id),
+        id: itemState.id,
+        dir: prop("dir"),
+        disabled: isNativelyDisabled || void 0,
+        readOnly: itemState.disabled && itemState.focusableWhenDisabled ? true : void 0,
+        "aria-disabled": ariaAttr(itemState.disabled),
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-focusable-when-disabled": dataAttr(itemState.disabled && itemState.focusableWhenDisabled),
+        "data-orientation": orientation,
+        tabIndex: isNativelyDisabled ? void 0 : itemState.focused ? 0 : -1,
+        onClick(event) {
+          if (itemState.disabled) event.preventDefault();
+        },
+        onPointerDown(event) {
+          if (itemState.disabled) event.preventDefault();
+        },
+        onFocus(event) {
+          send({ type: "ITEM.FOCUS", value: props.value });
+          event.currentTarget.select();
+        },
+        onKeyDown(event) {
+          const key = getEventKey(event, { dir: prop("dir"), orientation });
+          if (key === "Home" || key === "End") {
+            event.stopPropagation();
+            return;
+          }
+          const isForward = isHorizontal ? key === "ArrowRight" : key === "ArrowDown";
+          const isBackward = isHorizontal ? key === "ArrowLeft" : key === "ArrowUp";
+          if (!isForward && !isBackward) return;
+          if (event.defaultPrevented) {
+            event.stopPropagation();
+            return;
+          }
+          const input = event.currentTarget;
+          const collapsed = input.selectionStart === input.selectionEnd;
+          const atBoundary = isForward ? isCaretAtEnd(input) : isCaretAtStart(input);
+          if (!collapsed || !atBoundary) {
+            event.stopPropagation();
+          }
+        }
+      });
+    }
+  };
+}
+export {
+  connect
+};

package/dist/toolbar.dom.d.mts

@@ -0,0 +1,14 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getItemId: (ctx: Scope, value: string) => any;
+declare const getGroupId: (ctx: Scope, value: string) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getElements: (ctx: Scope) => HTMLElement[];
+declare const getFirstEl: (ctx: Scope) => HTMLElement | undefined;
+declare const getLastEl: (ctx: Scope) => HTMLElement | undefined;
+declare const hasFocusableItem: (ctx: Scope) => boolean;
+declare const getNextEl: (ctx: Scope, loopFocus: boolean) => HTMLElement | undefined;
+declare const getPrevEl: (ctx: Scope, loopFocus: boolean) => HTMLElement | null | undefined;
+
+export { getElements, getFirstEl, getGroupId, getItemId, getLastEl, getNextEl, getPrevEl, getRootEl, getRootId, hasFocusableItem };

package/dist/toolbar.dom.d.ts

@@ -0,0 +1,14 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getItemId: (ctx: Scope, value: string) => any;
+declare const getGroupId: (ctx: Scope, value: string) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getElements: (ctx: Scope) => HTMLElement[];
+declare const getFirstEl: (ctx: Scope) => HTMLElement | undefined;
+declare const getLastEl: (ctx: Scope) => HTMLElement | undefined;
+declare const hasFocusableItem: (ctx: Scope) => boolean;
+declare const getNextEl: (ctx: Scope, loopFocus: boolean) => HTMLElement | undefined;
+declare const getPrevEl: (ctx: Scope, loopFocus: boolean) => HTMLElement | null | undefined;
+
+export { getElements, getFirstEl, getGroupId, getItemId, getLastEl, getNextEl, getPrevEl, getRootEl, getRootId, hasFocusableItem };