@zag-js/toolbar 2.0.0-next.1

package/dist/toolbar.dom.js

@@ -0,0 +1,76 @@
+"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.dom.ts
+var toolbar_dom_exports = {};
+__export(toolbar_dom_exports, {
+  getElements: () => getElements,
+  getFirstEl: () => getFirstEl,
+  getGroupId: () => getGroupId,
+  getItemId: () => getItemId,
+  getLastEl: () => getLastEl,
+  getNextEl: () => getNextEl,
+  getPrevEl: () => getPrevEl,
+  getRootEl: () => getRootEl,
+  getRootId: () => getRootId,
+  hasFocusableItem: () => hasFocusableItem
+});
+module.exports = __toCommonJS(toolbar_dom_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var import_toolbar = require("./toolbar.anatomy.js");
+var getRootId = (ctx) => ctx.ids?.root ?? `toolbar:${ctx.id}`;
+var getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `toolbar:${ctx.id}:item:${value}`;
+var getGroupId = (ctx, value) => ctx.ids?.group?.(value) ?? `toolbar:${ctx.id}:group:${value}`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(import_toolbar.parts.root));
+var getElements = (ctx) => {
+  const root = getRootEl(ctx);
+  if (!root) return [];
+  const els = ctx.queryAll(`${ctx.selector(import_toolbar.parts.item)}, [data-toggle-group-item]`);
+  return els.filter((el) => {
+    if (el.closest(ctx.selector(import_toolbar.parts.root)) !== root) return false;
+    return !el.hasAttribute("data-disabled") || el.hasAttribute("data-focusable-when-disabled");
+  });
+};
+var getFirstEl = (ctx) => (0, import_utils.first)(getElements(ctx));
+var getLastEl = (ctx) => (0, import_utils.last)(getElements(ctx));
+var hasFocusableItem = (ctx) => getElements(ctx).some((el) => el.tabIndex === 0);
+var getNextEl = (ctx, loopFocus) => {
+  const id = ctx.getActiveElement()?.id;
+  const els = getElements(ctx);
+  return id ? (0, import_dom_query.nextById)(els, id, loopFocus) : (0, import_utils.first)(els);
+};
+var getPrevEl = (ctx, loopFocus) => {
+  const id = ctx.getActiveElement()?.id;
+  const els = getElements(ctx);
+  return id ? (0, import_dom_query.prevById)(els, id, loopFocus) : (0, import_utils.first)(els);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getElements,
+  getFirstEl,
+  getGroupId,
+  getItemId,
+  getLastEl,
+  getNextEl,
+  getPrevEl,
+  getRootEl,
+  getRootId,
+  hasFocusableItem
+});

package/dist/toolbar.dom.mjs

@@ -0,0 +1,42 @@
+// src/toolbar.dom.ts
+import { nextById, prevById } from "@zag-js/dom-query";
+import { first, last } from "@zag-js/utils";
+import { parts } from "./toolbar.anatomy.mjs";
+var getRootId = (ctx) => ctx.ids?.root ?? `toolbar:${ctx.id}`;
+var getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `toolbar:${ctx.id}:item:${value}`;
+var getGroupId = (ctx, value) => ctx.ids?.group?.(value) ?? `toolbar:${ctx.id}:group:${value}`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(parts.root));
+var getElements = (ctx) => {
+  const root = getRootEl(ctx);
+  if (!root) return [];
+  const els = ctx.queryAll(`${ctx.selector(parts.item)}, [data-toggle-group-item]`);
+  return els.filter((el) => {
+    if (el.closest(ctx.selector(parts.root)) !== root) return false;
+    return !el.hasAttribute("data-disabled") || el.hasAttribute("data-focusable-when-disabled");
+  });
+};
+var getFirstEl = (ctx) => first(getElements(ctx));
+var getLastEl = (ctx) => last(getElements(ctx));
+var hasFocusableItem = (ctx) => getElements(ctx).some((el) => el.tabIndex === 0);
+var getNextEl = (ctx, loopFocus) => {
+  const id = ctx.getActiveElement()?.id;
+  const els = getElements(ctx);
+  return id ? nextById(els, id, loopFocus) : first(els);
+};
+var getPrevEl = (ctx, loopFocus) => {
+  const id = ctx.getActiveElement()?.id;
+  const els = getElements(ctx);
+  return id ? prevById(els, id, loopFocus) : first(els);
+};
+export {
+  getElements,
+  getFirstEl,
+  getGroupId,
+  getItemId,
+  getLastEl,
+  getNextEl,
+  getPrevEl,
+  getRootEl,
+  getRootId,
+  hasFocusableItem
+};

package/dist/toolbar.machine.d.mts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { ToolbarSchema } from './toolbar.types.mjs';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<ToolbarSchema>;
+
+export { machine };

package/dist/toolbar.machine.d.ts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { ToolbarSchema } from './toolbar.types.js';
+import '@zag-js/types';
+
+declare const machine: _zag_js_core.Machine<ToolbarSchema>;
+
+export { machine };

package/dist/toolbar.machine.js

@@ -0,0 +1,190 @@
+"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.machine.ts
+var toolbar_machine_exports = {};
+__export(toolbar_machine_exports, {
+  machine: () => machine
+});
+module.exports = __toCommonJS(toolbar_machine_exports);
+var import_core = require("@zag-js/core");
+var import_dom_query = require("@zag-js/dom-query");
+var dom = __toESM(require("./toolbar.dom.js"));
+var { not } = (0, import_core.createGuards)();
+var machine = (0, import_core.createMachine)({
+  props({ props }) {
+    return {
+      orientation: "horizontal",
+      loopFocus: true,
+      ...props
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  effects: ["trackItemMutations"],
+  context({ bindable }) {
+    return {
+      focusedValue: bindable(() => ({
+        defaultValue: null
+      })),
+      hasInteracted: bindable(() => ({
+        defaultValue: false
+      })),
+      isClickFocus: bindable(() => ({
+        defaultValue: false
+      }))
+    };
+  },
+  on: {
+    "ROOT.MOUSE_DOWN": {
+      actions: ["setClickFocus"]
+    },
+    "ROOT.BLUR": {
+      actions: ["clearClickFocus"]
+    },
+    // A nested composite's own item was focused directly, bypassing ITEM.FOCUS.
+    "DESCENDANT.FOCUS": {
+      target: "focused",
+      actions: ["setHasInteracted"]
+    },
+    "ITEMS.CHANGE": {
+      actions: ["syncHasInteracted"]
+    }
+  },
+  states: {
+    // Active only before the first successful focus — the root then permanently cedes its tabindex.
+    idle: {
+      on: {
+        "ROOT.FOCUS": {
+          target: "focused",
+          guard: not("isClickFocus"),
+          actions: ["focusFirstItem", "setHasInteracted", "clearClickFocus"]
+        },
+        "ITEM.FOCUS": {
+          target: "focused",
+          actions: ["setFocusedValue", "setHasInteracted"]
+        }
+      }
+    },
+    focused: {
+      on: {
+        "ROOT.FOCUS": {
+          guard: not("isClickFocus"),
+          actions: ["focusFirstItem", "clearClickFocus"]
+        },
+        "ITEM.FOCUS": {
+          actions: ["setFocusedValue"]
+        },
+        "ITEM.FOCUS_NEXT": {
+          actions: ["focusNextItem"]
+        },
+        "ITEM.FOCUS_PREV": {
+          actions: ["focusPrevItem"]
+        },
+        "ITEM.FOCUS_FIRST": {
+          actions: ["focusFirstItem"]
+        },
+        "ITEM.FOCUS_LAST": {
+          actions: ["focusLastItem"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      isClickFocus: ({ context }) => context.get("isClickFocus")
+    },
+    actions: {
+      setClickFocus({ context }) {
+        context.set("isClickFocus", true);
+      },
+      clearClickFocus({ context }) {
+        context.set("isClickFocus", false);
+      },
+      setHasInteracted({ context }) {
+        context.set("hasInteracted", true);
+      },
+      syncHasInteracted({ context, scope }) {
+        if (!context.get("hasInteracted")) return;
+        if (dom.hasFocusableItem(scope)) return;
+        context.set("hasInteracted", false);
+        context.set("focusedValue", null);
+      },
+      setFocusedValue({ context, event }) {
+        context.set("focusedValue", event.value);
+      },
+      focusNextItem({ scope, prop }) {
+        const before = scope.getActiveElement();
+        (0, import_dom_query.raf)(() => {
+          if (scope.getActiveElement() !== before) return;
+          dom.getNextEl(scope, prop("loopFocus"))?.focus({ preventScroll: true });
+        });
+      },
+      focusPrevItem({ scope, prop }) {
+        const before = scope.getActiveElement();
+        (0, import_dom_query.raf)(() => {
+          if (scope.getActiveElement() !== before) return;
+          dom.getPrevEl(scope, prop("loopFocus"))?.focus({ preventScroll: true });
+        });
+      },
+      focusFirstItem({ scope }) {
+        const before = scope.getActiveElement();
+        (0, import_dom_query.raf)(() => {
+          if (scope.getActiveElement() !== before) return;
+          dom.getFirstEl(scope)?.focus({ preventScroll: true });
+        });
+      },
+      focusLastItem({ scope }) {
+        const before = scope.getActiveElement();
+        (0, import_dom_query.raf)(() => {
+          if (scope.getActiveElement() !== before) return;
+          dom.getLastEl(scope)?.focus({ preventScroll: true });
+        });
+      }
+    },
+    effects: {
+      trackItemMutations({ scope, send }) {
+        const root = dom.getRootEl(scope);
+        if (!root) return;
+        return (0, import_dom_query.observeChildren)(root, {
+          attributes: true,
+          attributeFilter: ["disabled", "data-disabled"],
+          callback() {
+            send({ type: "ITEMS.CHANGE" });
+          }
+        });
+      }
+    }
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  machine
+});

package/dist/toolbar.machine.mjs

@@ -0,0 +1,155 @@
+// src/toolbar.machine.ts
+import { createGuards, createMachine } from "@zag-js/core";
+import { observeChildren, raf } from "@zag-js/dom-query";
+import * as dom from "./toolbar.dom.mjs";
+var { not } = createGuards();
+var machine = createMachine({
+  props({ props }) {
+    return {
+      orientation: "horizontal",
+      loopFocus: true,
+      ...props
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  effects: ["trackItemMutations"],
+  context({ bindable }) {
+    return {
+      focusedValue: bindable(() => ({
+        defaultValue: null
+      })),
+      hasInteracted: bindable(() => ({
+        defaultValue: false
+      })),
+      isClickFocus: bindable(() => ({
+        defaultValue: false
+      }))
+    };
+  },
+  on: {
+    "ROOT.MOUSE_DOWN": {
+      actions: ["setClickFocus"]
+    },
+    "ROOT.BLUR": {
+      actions: ["clearClickFocus"]
+    },
+    // A nested composite's own item was focused directly, bypassing ITEM.FOCUS.
+    "DESCENDANT.FOCUS": {
+      target: "focused",
+      actions: ["setHasInteracted"]
+    },
+    "ITEMS.CHANGE": {
+      actions: ["syncHasInteracted"]
+    }
+  },
+  states: {
+    // Active only before the first successful focus — the root then permanently cedes its tabindex.
+    idle: {
+      on: {
+        "ROOT.FOCUS": {
+          target: "focused",
+          guard: not("isClickFocus"),
+          actions: ["focusFirstItem", "setHasInteracted", "clearClickFocus"]
+        },
+        "ITEM.FOCUS": {
+          target: "focused",
+          actions: ["setFocusedValue", "setHasInteracted"]
+        }
+      }
+    },
+    focused: {
+      on: {
+        "ROOT.FOCUS": {
+          guard: not("isClickFocus"),
+          actions: ["focusFirstItem", "clearClickFocus"]
+        },
+        "ITEM.FOCUS": {
+          actions: ["setFocusedValue"]
+        },
+        "ITEM.FOCUS_NEXT": {
+          actions: ["focusNextItem"]
+        },
+        "ITEM.FOCUS_PREV": {
+          actions: ["focusPrevItem"]
+        },
+        "ITEM.FOCUS_FIRST": {
+          actions: ["focusFirstItem"]
+        },
+        "ITEM.FOCUS_LAST": {
+          actions: ["focusLastItem"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      isClickFocus: ({ context }) => context.get("isClickFocus")
+    },
+    actions: {
+      setClickFocus({ context }) {
+        context.set("isClickFocus", true);
+      },
+      clearClickFocus({ context }) {
+        context.set("isClickFocus", false);
+      },
+      setHasInteracted({ context }) {
+        context.set("hasInteracted", true);
+      },
+      syncHasInteracted({ context, scope }) {
+        if (!context.get("hasInteracted")) return;
+        if (dom.hasFocusableItem(scope)) return;
+        context.set("hasInteracted", false);
+        context.set("focusedValue", null);
+      },
+      setFocusedValue({ context, event }) {
+        context.set("focusedValue", event.value);
+      },
+      focusNextItem({ scope, prop }) {
+        const before = scope.getActiveElement();
+        raf(() => {
+          if (scope.getActiveElement() !== before) return;
+          dom.getNextEl(scope, prop("loopFocus"))?.focus({ preventScroll: true });
+        });
+      },
+      focusPrevItem({ scope, prop }) {
+        const before = scope.getActiveElement();
+        raf(() => {
+          if (scope.getActiveElement() !== before) return;
+          dom.getPrevEl(scope, prop("loopFocus"))?.focus({ preventScroll: true });
+        });
+      },
+      focusFirstItem({ scope }) {
+        const before = scope.getActiveElement();
+        raf(() => {
+          if (scope.getActiveElement() !== before) return;
+          dom.getFirstEl(scope)?.focus({ preventScroll: true });
+        });
+      },
+      focusLastItem({ scope }) {
+        const before = scope.getActiveElement();
+        raf(() => {
+          if (scope.getActiveElement() !== before) return;
+          dom.getLastEl(scope)?.focus({ preventScroll: true });
+        });
+      }
+    },
+    effects: {
+      trackItemMutations({ scope, send }) {
+        const root = dom.getRootEl(scope);
+        if (!root) return;
+        return observeChildren(root, {
+          attributes: true,
+          attributeFilter: ["disabled", "data-disabled"],
+          callback() {
+            send({ type: "ITEMS.CHANGE" });
+          }
+        });
+      }
+    }
+  }
+});
+export {
+  machine
+};

package/dist/toolbar.props.d.mts

@@ -0,0 +1,10 @@
+import { ItemProps, ToolbarProps } from './toolbar.types.mjs';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof ToolbarProps)[];
+declare const splitProps: <Props extends Partial<ToolbarProps>>(props: Props) => [Partial<ToolbarProps>, Omit<Props, keyof ToolbarProps>];
+declare const itemProps: (keyof ItemProps)[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+
+export { itemProps, props, splitItemProps, splitProps };

package/dist/toolbar.props.d.ts

@@ -0,0 +1,10 @@
+import { ItemProps, ToolbarProps } from './toolbar.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof ToolbarProps)[];
+declare const splitProps: <Props extends Partial<ToolbarProps>>(props: Props) => [Partial<ToolbarProps>, Omit<Props, keyof ToolbarProps>];
+declare const itemProps: (keyof ItemProps)[];
+declare const splitItemProps: <Props extends ItemProps>(props: Props) => [ItemProps, Omit<Props, keyof ItemProps>];
+
+export { itemProps, props, splitItemProps, splitProps };

package/dist/toolbar.props.js

@@ -0,0 +1,49 @@
+"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.props.ts
+var toolbar_props_exports = {};
+__export(toolbar_props_exports, {
+  itemProps: () => itemProps,
+  props: () => props,
+  splitItemProps: () => splitItemProps,
+  splitProps: () => splitProps
+});
+module.exports = __toCommonJS(toolbar_props_exports);
+var import_types = require("@zag-js/types");
+var import_utils = require("@zag-js/utils");
+var props = (0, import_types.createProps)()([
+  "dir",
+  "disabled",
+  "getRootNode",
+  "id",
+  "ids",
+  "loopFocus",
+  "orientation"
+]);
+var splitProps = (0, import_utils.createSplitProps)(props);
+var itemProps = (0, import_types.createProps)()(["value", "disabled", "focusableWhenDisabled"]);
+var splitItemProps = (0, import_utils.createSplitProps)(itemProps);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  itemProps,
+  props,
+  splitItemProps,
+  splitProps
+});

package/dist/toolbar.props.mjs

@@ -0,0 +1,21 @@
+// src/toolbar.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = createProps()([
+  "dir",
+  "disabled",
+  "getRootNode",
+  "id",
+  "ids",
+  "loopFocus",
+  "orientation"
+]);
+var splitProps = createSplitProps(props);
+var itemProps = createProps()(["value", "disabled", "focusableWhenDisabled"]);
+var splitItemProps = createSplitProps(itemProps);
+export {
+  itemProps,
+  props,
+  splitItemProps,
+  splitProps
+};