@zag-js/toc 1.37.0

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/dist/index.d.mts

@@ -0,0 +1,8 @@
+export { anatomy } from './toc.anatomy.mjs';
+export { connect } from './toc.connect.mjs';
+export { machine } from './toc.machine.mjs';
+export { itemProps, props, splitItemProps, splitProps } from './toc.props.mjs';
+export { ActiveChangeDetails, TocApi as Api, ElementIds, ItemProps, ItemState, TocMachine as Machine, TocProps as Props, TocService as Service, TocItem } from './toc.types.mjs';
+import '@zag-js/anatomy';
+import '@zag-js/core';
+import '@zag-js/types';

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { anatomy } from './toc.anatomy.js';
+export { connect } from './toc.connect.js';
+export { machine } from './toc.machine.js';
+export { itemProps, props, splitItemProps, splitProps } from './toc.props.js';
+export { ActiveChangeDetails, TocApi as Api, ElementIds, ItemProps, ItemState, TocMachine as Machine, TocProps as Props, TocService as Service, TocItem } from './toc.types.js';
+import '@zag-js/anatomy';
+import '@zag-js/core';
+import '@zag-js/types';

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_toc.anatomy,
+  connect: () => import_toc2.connect,
+  machine: () => import_toc3.machine
+});
+module.exports = __toCommonJS(index_exports);
+var import_toc = require("./toc.anatomy.js");
+var import_toc2 = require("./toc.connect.js");
+var import_toc3 = require("./toc.machine.js");
+__reExport(index_exports, require("./toc.props.js"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  connect,
+  machine,
+  ...require("./toc.props.js")
+});

package/dist/index.mjs

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

package/dist/toc.anatomy.d.mts

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

package/dist/toc.anatomy.d.ts

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

package/dist/toc.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/toc.anatomy.ts
+var toc_anatomy_exports = {};
+__export(toc_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(toc_anatomy_exports);
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("toc").parts("root", "title", "list", "item", "link", "indicator");
+var parts = anatomy.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/toc.anatomy.mjs

@@ -0,0 +1,8 @@
+// src/toc.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("toc").parts("root", "title", "list", "item", "link", "indicator");
+var parts = anatomy.build();
+export {
+  anatomy,
+  parts
+};

package/dist/toc.connect.d.mts

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

package/dist/toc.connect.d.ts

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

package/dist/toc.connect.js

@@ -0,0 +1,139 @@
+"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/toc.connect.ts
+var toc_connect_exports = {};
+__export(toc_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(toc_connect_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var import_toc = require("./toc.anatomy.js");
+var dom = __toESM(require("./toc.dom.js"));
+function connect(service, normalize) {
+  const { send, context, scope, computed, prop } = service;
+  const items = prop("items");
+  const activeItems = computed("activeItems");
+  const activeIds = context.get("activeIds");
+  const firstActiveId = (0, import_utils.first)(activeIds);
+  const lastActiveId = (0, import_utils.last)(activeIds);
+  function getItemState(props) {
+    const { item } = props;
+    return {
+      active: activeIds.includes(item.value),
+      first: item.value === firstActiveId,
+      last: item.value === lastActiveId,
+      depth: item.depth
+    };
+  }
+  return {
+    activeIds,
+    activeItems,
+    items,
+    setActiveIds(value) {
+      send({ type: "ACTIVE_IDS.SET", value });
+    },
+    getItemState,
+    getRootProps() {
+      const rect = context.get("indicatorRect");
+      return normalize.element({
+        ...import_toc.parts.root.attrs,
+        id: dom.getRootId(scope),
+        dir: prop("dir"),
+        "aria-labelledby": dom.getTitleId(scope),
+        style: {
+          "--top": (0, import_utils.toPx)(rect?.y),
+          "--left": (0, import_utils.toPx)(rect?.x),
+          "--width": (0, import_utils.toPx)(rect?.width),
+          "--height": (0, import_utils.toPx)(rect?.height)
+        }
+      });
+    },
+    getTitleProps() {
+      return normalize.element({
+        ...import_toc.parts.title.attrs,
+        id: dom.getTitleId(scope),
+        dir: prop("dir")
+      });
+    },
+    getListProps() {
+      return normalize.element({
+        ...import_toc.parts.list.attrs,
+        id: dom.getListId(scope),
+        dir: prop("dir")
+      });
+    },
+    getItemProps(props) {
+      const { item } = props;
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...import_toc.parts.item.attrs,
+        id: dom.getItemId(scope, item.value),
+        dir: prop("dir"),
+        "data-value": item.value,
+        "data-depth": String(itemState.depth),
+        "data-active": (0, import_dom_query.dataAttr)(itemState.active),
+        "data-first": (0, import_dom_query.dataAttr)(itemState.first),
+        "data-last": (0, import_dom_query.dataAttr)(itemState.last),
+        style: {
+          "--depth": itemState.depth
+        }
+      });
+    },
+    getLinkProps(props) {
+      const { item } = props;
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...import_toc.parts.link.attrs,
+        id: dom.getLinkId(scope, item.value),
+        dir: prop("dir"),
+        "data-value": item.value,
+        "data-active": (0, import_dom_query.dataAttr)(itemState.active),
+        "aria-current": itemState.active ? "location" : void 0
+      });
+    },
+    getIndicatorProps() {
+      const rect = context.get("indicatorRect");
+      return normalize.element({
+        ...import_toc.parts.indicator.attrs,
+        id: dom.getIndicatorId(scope),
+        hidden: isRectEmpty(rect),
+        style: {
+          position: "absolute"
+        }
+      });
+    }
+  };
+}
+var isRectEmpty = (rect) => rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/toc.connect.mjs

@@ -0,0 +1,104 @@
+// src/toc.connect.ts
+import { dataAttr } from "@zag-js/dom-query";
+import { first, last, toPx } from "@zag-js/utils";
+import { parts } from "./toc.anatomy.mjs";
+import * as dom from "./toc.dom.mjs";
+function connect(service, normalize) {
+  const { send, context, scope, computed, prop } = service;
+  const items = prop("items");
+  const activeItems = computed("activeItems");
+  const activeIds = context.get("activeIds");
+  const firstActiveId = first(activeIds);
+  const lastActiveId = last(activeIds);
+  function getItemState(props) {
+    const { item } = props;
+    return {
+      active: activeIds.includes(item.value),
+      first: item.value === firstActiveId,
+      last: item.value === lastActiveId,
+      depth: item.depth
+    };
+  }
+  return {
+    activeIds,
+    activeItems,
+    items,
+    setActiveIds(value) {
+      send({ type: "ACTIVE_IDS.SET", value });
+    },
+    getItemState,
+    getRootProps() {
+      const rect = context.get("indicatorRect");
+      return normalize.element({
+        ...parts.root.attrs,
+        id: dom.getRootId(scope),
+        dir: prop("dir"),
+        "aria-labelledby": dom.getTitleId(scope),
+        style: {
+          "--top": toPx(rect?.y),
+          "--left": toPx(rect?.x),
+          "--width": toPx(rect?.width),
+          "--height": toPx(rect?.height)
+        }
+      });
+    },
+    getTitleProps() {
+      return normalize.element({
+        ...parts.title.attrs,
+        id: dom.getTitleId(scope),
+        dir: prop("dir")
+      });
+    },
+    getListProps() {
+      return normalize.element({
+        ...parts.list.attrs,
+        id: dom.getListId(scope),
+        dir: prop("dir")
+      });
+    },
+    getItemProps(props) {
+      const { item } = props;
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...parts.item.attrs,
+        id: dom.getItemId(scope, item.value),
+        dir: prop("dir"),
+        "data-value": item.value,
+        "data-depth": String(itemState.depth),
+        "data-active": dataAttr(itemState.active),
+        "data-first": dataAttr(itemState.first),
+        "data-last": dataAttr(itemState.last),
+        style: {
+          "--depth": itemState.depth
+        }
+      });
+    },
+    getLinkProps(props) {
+      const { item } = props;
+      const itemState = getItemState(props);
+      return normalize.element({
+        ...parts.link.attrs,
+        id: dom.getLinkId(scope, item.value),
+        dir: prop("dir"),
+        "data-value": item.value,
+        "data-active": dataAttr(itemState.active),
+        "aria-current": itemState.active ? "location" : void 0
+      });
+    },
+    getIndicatorProps() {
+      const rect = context.get("indicatorRect");
+      return normalize.element({
+        ...parts.indicator.attrs,
+        id: dom.getIndicatorId(scope),
+        hidden: isRectEmpty(rect),
+        style: {
+          position: "absolute"
+        }
+      });
+    }
+  };
+}
+var isRectEmpty = (rect) => rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+export {
+  connect
+};

package/dist/toc.dom.d.mts

@@ -0,0 +1,19 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getTitleId: (ctx: Scope) => any;
+declare const getListId: (ctx: Scope) => any;
+declare const getItemId: (ctx: Scope, value: string) => any;
+declare const getLinkId: (ctx: Scope, value: string) => any;
+declare const getIndicatorId: (ctx: Scope) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getListEl: (ctx: Scope) => HTMLElement | null;
+declare const getItemEl: (ctx: Scope, value: string | undefined | null) => HTMLElement | null;
+declare const getIndicatorEl: (ctx: Scope) => HTMLElement | null;
+/**
+ * Get the heading element in the document by its slug/id.
+ * This queries the actual document, not the TOC container.
+ */
+declare const getHeadingEl: (ctx: Scope, value: string) => HTMLElement | null;
+
+export { getHeadingEl, getIndicatorEl, getIndicatorId, getItemEl, getItemId, getLinkId, getListEl, getListId, getRootEl, getRootId, getTitleId };

package/dist/toc.dom.d.ts

@@ -0,0 +1,19 @@
+import { Scope } from '@zag-js/core';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getTitleId: (ctx: Scope) => any;
+declare const getListId: (ctx: Scope) => any;
+declare const getItemId: (ctx: Scope, value: string) => any;
+declare const getLinkId: (ctx: Scope, value: string) => any;
+declare const getIndicatorId: (ctx: Scope) => any;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getListEl: (ctx: Scope) => HTMLElement | null;
+declare const getItemEl: (ctx: Scope, value: string | undefined | null) => HTMLElement | null;
+declare const getIndicatorEl: (ctx: Scope) => HTMLElement | null;
+/**
+ * Get the heading element in the document by its slug/id.
+ * This queries the actual document, not the TOC container.
+ */
+declare const getHeadingEl: (ctx: Scope, value: string) => HTMLElement | null;
+
+export { getHeadingEl, getIndicatorEl, getIndicatorId, getItemEl, getItemId, getLinkId, getListEl, getListId, getRootEl, getRootId, getTitleId };

package/dist/toc.dom.js

@@ -0,0 +1,66 @@
+"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/toc.dom.ts
+var toc_dom_exports = {};
+__export(toc_dom_exports, {
+  getHeadingEl: () => getHeadingEl,
+  getIndicatorEl: () => getIndicatorEl,
+  getIndicatorId: () => getIndicatorId,
+  getItemEl: () => getItemEl,
+  getItemId: () => getItemId,
+  getLinkId: () => getLinkId,
+  getListEl: () => getListEl,
+  getListId: () => getListId,
+  getRootEl: () => getRootEl,
+  getRootId: () => getRootId,
+  getTitleId: () => getTitleId
+});
+module.exports = __toCommonJS(toc_dom_exports);
+var getRootId = (ctx) => ctx.ids?.root ?? `toc:${ctx.id}`;
+var getTitleId = (ctx) => ctx.ids?.title ?? `toc:${ctx.id}:title`;
+var getListId = (ctx) => ctx.ids?.list ?? `toc:${ctx.id}:list`;
+var getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `toc:${ctx.id}:item-${value}`;
+var getLinkId = (ctx, value) => ctx.ids?.link?.(value) ?? `toc:${ctx.id}:link-${value}`;
+var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `toc:${ctx.id}:indicator`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getListEl = (ctx) => ctx.getById(getListId(ctx));
+var getItemEl = (ctx, value) => {
+  if (value == null) return null;
+  return ctx.getById(getItemId(ctx, value));
+};
+var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+var getHeadingEl = (ctx, value) => {
+  const doc = ctx.getDoc();
+  return doc.getElementById(value);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getHeadingEl,
+  getIndicatorEl,
+  getIndicatorId,
+  getItemEl,
+  getItemId,
+  getLinkId,
+  getListEl,
+  getListId,
+  getRootEl,
+  getRootId,
+  getTitleId
+});

package/dist/toc.dom.mjs

@@ -0,0 +1,31 @@
+// src/toc.dom.ts
+var getRootId = (ctx) => ctx.ids?.root ?? `toc:${ctx.id}`;
+var getTitleId = (ctx) => ctx.ids?.title ?? `toc:${ctx.id}:title`;
+var getListId = (ctx) => ctx.ids?.list ?? `toc:${ctx.id}:list`;
+var getItemId = (ctx, value) => ctx.ids?.item?.(value) ?? `toc:${ctx.id}:item-${value}`;
+var getLinkId = (ctx, value) => ctx.ids?.link?.(value) ?? `toc:${ctx.id}:link-${value}`;
+var getIndicatorId = (ctx) => ctx.ids?.indicator ?? `toc:${ctx.id}:indicator`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getListEl = (ctx) => ctx.getById(getListId(ctx));
+var getItemEl = (ctx, value) => {
+  if (value == null) return null;
+  return ctx.getById(getItemId(ctx, value));
+};
+var getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+var getHeadingEl = (ctx, value) => {
+  const doc = ctx.getDoc();
+  return doc.getElementById(value);
+};
+export {
+  getHeadingEl,
+  getIndicatorEl,
+  getIndicatorId,
+  getItemEl,
+  getItemId,
+  getLinkId,
+  getListEl,
+  getListId,
+  getRootEl,
+  getRootId,
+  getTitleId
+};

package/dist/toc.machine.d.mts

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

package/dist/toc.machine.d.ts

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