@serendie/ui 0.1.12 → 0.1.13

package/dist/node_modules/@zag-js/tabs/dist/index.js

@@ -0,0 +1,475 @@
+import { createAnatomy as A } from "../../anatomy/dist/index.js";
+import { getEventKey as C, clickIfLink as F } from "../../dom-event/dist/index.js";
+import { createScope as S, queryAll as L, nextById as _, prevById as O, itemById as w, dataAttr as d, isSelfTarget as B, isComposingEvent as N, isSafari as P, raf as T, nextTick as V, getFocusables as k } from "../../dom-query/dist/index.js";
+import { first as U, last as $, compact as D, isEqual as h } from "../../utils/dist/index.js";
+import { createMachine as W, guards as M } from "../../core/dist/index.js";
+import { trackElementRect as X } from "../../element-rect/dist/index.js";
+import { createProps as E } from "../../types/dist/index.js";
+var H = A("tabs").parts("root", "list", "trigger", "content", "indicator"), v = H.build(), r = S({
+  getRootId: (e) => {
+    var o;
+    return ((o = e.ids) == null ? void 0 : o.root) ?? `tabs:${e.id}`;
+  },
+  getListId: (e) => {
+    var o;
+    return ((o = e.ids) == null ? void 0 : o.list) ?? `tabs:${e.id}:list`;
+  },
+  getContentId: (e, o) => {
+    var t;
+    return ((t = e.ids) == null ? void 0 : t.content) ?? `tabs:${e.id}:content-${o}`;
+  },
+  getTriggerId: (e, o) => {
+    var t;
+    return ((t = e.ids) == null ? void 0 : t.trigger) ?? `tabs:${e.id}:trigger-${o}`;
+  },
+  getIndicatorId: (e) => {
+    var o;
+    return ((o = e.ids) == null ? void 0 : o.indicator) ?? `tabs:${e.id}:indicator`;
+  },
+  getListEl: (e) => r.getById(e, r.getListId(e)),
+  getContentEl: (e, o) => r.getById(e, r.getContentId(e, o)),
+  getTriggerEl: (e, o) => r.getById(e, r.getTriggerId(e, o)),
+  getIndicatorEl: (e) => r.getById(e, r.getIndicatorId(e)),
+  getElements: (e) => {
+    const t = `[role=tab][data-ownedby='${CSS.escape(r.getListId(e))}']:not([disabled])`;
+    return L(r.getListEl(e), t);
+  },
+  getFirstTriggerEl: (e) => U(r.getElements(e)),
+  getLastTriggerEl: (e) => $(r.getElements(e)),
+  getNextTriggerEl: (e, o) => _(r.getElements(e), r.getTriggerId(e, o), e.loopFocus),
+  getPrevTriggerEl: (e, o) => O(r.getElements(e), r.getTriggerId(e, o), e.loopFocus),
+  getSelectedContentEl: (e) => {
+    if (e.value)
+      return r.getContentEl(e, e.value);
+  },
+  getSelectedTriggerEl: (e) => {
+    if (e.value)
+      return r.getTriggerEl(e, e.value);
+  },
+  getOffsetRect: (e) => ({
+    left: (e == null ? void 0 : e.offsetLeft) ?? 0,
+    top: (e == null ? void 0 : e.offsetTop) ?? 0,
+    width: (e == null ? void 0 : e.offsetWidth) ?? 0,
+    height: (e == null ? void 0 : e.offsetHeight) ?? 0
+  }),
+  getRectById: (e, o) => {
+    const t = w(r.getElements(e), r.getTriggerId(e, o));
+    return r.resolveRect(r.getOffsetRect(t));
+  },
+  resolveRect: (e) => ({
+    width: `${e.width}px`,
+    height: `${e.height}px`,
+    left: `${e.left}px`,
+    top: `${e.top}px`
+  })
+});
+function x(e, o, t) {
+  const n = e.context.translations, u = e.matches("focused"), f = e.context.orientation === "vertical", l = e.context.orientation === "horizontal", y = e.context.composite, p = e.context.indicatorState;
+  function R(a) {
+    return {
+      selected: e.context.value === a.value,
+      focused: e.context.focusedValue === a.value,
+      disabled: !!a.disabled
+    };
+  }
+  return {
+    value: e.context.value,
+    focusedValue: e.context.focusedValue,
+    setValue(a) {
+      o({ type: "SET_VALUE", value: a });
+    },
+    clearValue() {
+      o({ type: "CLEAR_VALUE" });
+    },
+    setIndicatorRect(a) {
+      const i = r.getTriggerId(e.context, a);
+      o({ type: "SET_INDICATOR_RECT", id: i });
+    },
+    syncTabIndex() {
+      o("SYNC_TAB_INDEX");
+    },
+    selectNext(a) {
+      o({ type: "TAB_FOCUS", value: a, src: "selectNext" }), o({ type: "ARROW_NEXT", src: "selectNext" });
+    },
+    selectPrev(a) {
+      o({ type: "TAB_FOCUS", value: a, src: "selectPrev" }), o({ type: "ARROW_PREV", src: "selectPrev" });
+    },
+    focus() {
+      var a;
+      (a = r.getSelectedTriggerEl(e.context)) == null || a.focus();
+    },
+    getRootProps() {
+      return t.element({
+        ...v.root.attrs,
+        id: r.getRootId(e.context),
+        "data-orientation": e.context.orientation,
+        "data-focus": d(u),
+        dir: e.context.dir
+      });
+    },
+    getListProps() {
+      return t.element({
+        ...v.list.attrs,
+        id: r.getListId(e.context),
+        role: "tablist",
+        dir: e.context.dir,
+        "data-focus": d(u),
+        "aria-orientation": e.context.orientation,
+        "data-orientation": e.context.orientation,
+        "aria-label": n == null ? void 0 : n.listLabel,
+        onKeyDown(a) {
+          if (a.defaultPrevented || !B(a) || N(a)) return;
+          const i = {
+            ArrowDown() {
+              l || o({ type: "ARROW_NEXT", key: "ArrowDown" });
+            },
+            ArrowUp() {
+              l || o({ type: "ARROW_PREV", key: "ArrowUp" });
+            },
+            ArrowLeft() {
+              f || o({ type: "ARROW_PREV", key: "ArrowLeft" });
+            },
+            ArrowRight() {
+              f || o({ type: "ARROW_NEXT", key: "ArrowRight" });
+            },
+            Home() {
+              o("HOME");
+            },
+            End() {
+              o("END");
+            },
+            Enter() {
+              o({ type: "ENTER" });
+            }
+          };
+          let s = C(a, e.context);
+          const c = i[s];
+          c && (a.preventDefault(), c(a));
+        }
+      });
+    },
+    getTriggerState: R,
+    getTriggerProps(a) {
+      const { value: i, disabled: s } = a, c = R(a);
+      return t.button({
+        ...v.trigger.attrs,
+        role: "tab",
+        type: "button",
+        disabled: s,
+        dir: e.context.dir,
+        "data-orientation": e.context.orientation,
+        "data-disabled": d(s),
+        "aria-disabled": s,
+        "data-value": i,
+        "aria-selected": c.selected,
+        "data-selected": d(c.selected),
+        "data-focus": d(c.focused),
+        "aria-controls": c.selected ? r.getContentId(e.context, i) : void 0,
+        "data-ownedby": r.getListId(e.context),
+        "data-ssr": d(e.context.ssr),
+        id: r.getTriggerId(e.context, i),
+        tabIndex: c.selected && y ? 0 : -1,
+        onFocus() {
+          o({ type: "TAB_FOCUS", value: i });
+        },
+        onBlur(I) {
+          const b = I.relatedTarget;
+          (b == null ? void 0 : b.getAttribute("role")) !== "tab" && o({ type: "TAB_BLUR" });
+        },
+        onClick(I) {
+          I.defaultPrevented || s || (P() && I.currentTarget.focus(), o({ type: "TAB_CLICK", value: i }));
+        }
+      });
+    },
+    getContentProps(a) {
+      const { value: i } = a, s = e.context.value === i;
+      return t.element({
+        ...v.content.attrs,
+        dir: e.context.dir,
+        id: r.getContentId(e.context, i),
+        tabIndex: y ? 0 : -1,
+        "aria-labelledby": r.getTriggerId(e.context, i),
+        role: "tabpanel",
+        "data-ownedby": r.getListId(e.context),
+        "data-selected": d(s),
+        "data-orientation": e.context.orientation,
+        hidden: !s
+      });
+    },
+    getIndicatorProps() {
+      var a, i, s, c;
+      return t.element({
+        id: r.getIndicatorId(e.context),
+        ...v.indicator.attrs,
+        dir: e.context.dir,
+        "data-orientation": e.context.orientation,
+        style: {
+          "--transition-property": "left, right, top, bottom, width, height",
+          "--left": (a = p.rect) == null ? void 0 : a.left,
+          "--top": (i = p.rect) == null ? void 0 : i.top,
+          "--width": (s = p.rect) == null ? void 0 : s.width,
+          "--height": (c = p.rect) == null ? void 0 : c.height,
+          position: "absolute",
+          willChange: "var(--transition-property)",
+          transitionProperty: "var(--transition-property)",
+          transitionDuration: p.transition ? "var(--transition-duration, 150ms)" : "0ms",
+          transitionTimingFunction: "var(--transition-timing-function)",
+          [l ? "left" : "top"]: l ? "var(--left)" : "var(--top)"
+        }
+      });
+    }
+  };
+}
+var { not: K } = M;
+function z(e) {
+  const o = D(e);
+  return W(
+    {
+      initial: "idle",
+      context: {
+        dir: "ltr",
+        orientation: "horizontal",
+        activationMode: "automatic",
+        value: null,
+        loopFocus: !0,
+        composite: !0,
+        ...o,
+        focusedValue: o.value ?? null,
+        ssr: !0,
+        indicatorState: {
+          rendered: !1,
+          transition: !1,
+          rect: { left: "0px", top: "0px", width: "0px", height: "0px" }
+        }
+      },
+      watch: {
+        value: ["allowIndicatorTransition", "syncIndicatorRect", "syncTabIndex", "clickIfLink"],
+        dir: ["syncIndicatorRect"],
+        orientation: ["syncIndicatorRect"]
+      },
+      on: {
+        SET_VALUE: {
+          actions: "setValue"
+        },
+        CLEAR_VALUE: {
+          actions: "clearValue"
+        },
+        SET_INDICATOR_RECT: {
+          actions: "setIndicatorRect"
+        },
+        SYNC_TAB_INDEX: {
+          actions: "syncTabIndex"
+        }
+      },
+      created: ["syncFocusedValue"],
+      entry: ["checkRenderedElements", "syncIndicatorRect", "syncTabIndex", "syncSsr"],
+      exit: ["cleanupObserver"],
+      states: {
+        idle: {
+          on: {
+            TAB_FOCUS: {
+              target: "focused",
+              actions: "setFocusedValue"
+            },
+            TAB_CLICK: {
+              target: "focused",
+              actions: ["setFocusedValue", "setValue"]
+            }
+          }
+        },
+        focused: {
+          on: {
+            TAB_CLICK: {
+              target: "focused",
+              actions: ["setFocusedValue", "setValue"]
+            },
+            ARROW_PREV: [
+              {
+                guard: "selectOnFocus",
+                actions: ["focusPrevTab", "selectFocusedTab"]
+              },
+              {
+                actions: "focusPrevTab"
+              }
+            ],
+            ARROW_NEXT: [
+              {
+                guard: "selectOnFocus",
+                actions: ["focusNextTab", "selectFocusedTab"]
+              },
+              {
+                actions: "focusNextTab"
+              }
+            ],
+            HOME: [
+              {
+                guard: "selectOnFocus",
+                actions: ["focusFirstTab", "selectFocusedTab"]
+              },
+              {
+                actions: "focusFirstTab"
+              }
+            ],
+            END: [
+              {
+                guard: "selectOnFocus",
+                actions: ["focusLastTab", "selectFocusedTab"]
+              },
+              {
+                actions: "focusLastTab"
+              }
+            ],
+            ENTER: {
+              guard: K("selectOnFocus"),
+              actions: "selectFocusedTab"
+            },
+            TAB_FOCUS: {
+              actions: ["setFocusedValue"]
+            },
+            TAB_BLUR: {
+              target: "idle",
+              actions: "clearFocusedValue"
+            }
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        selectOnFocus: (t) => t.activationMode === "automatic"
+      },
+      actions: {
+        syncFocusedValue(t) {
+          t.value != null && t.focusedValue == null && (t.focusedValue = t.value);
+        },
+        selectFocusedTab(t) {
+          T(() => {
+            g.value(t, t.focusedValue);
+          });
+        },
+        setFocusedValue(t, n) {
+          n.value != null && g.focusedValue(t, n.value);
+        },
+        clearFocusedValue(t) {
+          g.focusedValue(t, null);
+        },
+        setValue(t, n) {
+          g.value(t, n.value);
+        },
+        clearValue(t) {
+          g.value(t, null);
+        },
+        focusFirstTab(t) {
+          T(() => {
+            var n;
+            (n = r.getFirstTriggerEl(t)) == null || n.focus();
+          });
+        },
+        focusLastTab(t) {
+          T(() => {
+            var n;
+            (n = r.getLastTriggerEl(t)) == null || n.focus();
+          });
+        },
+        focusNextTab(t) {
+          if (!t.focusedValue) return;
+          const n = r.getNextTriggerEl(t, t.focusedValue);
+          T(() => {
+            t.composite ? n == null || n.focus() : (n == null ? void 0 : n.dataset.value) != null && g.focusedValue(t, n.dataset.value);
+          });
+        },
+        focusPrevTab(t) {
+          if (!t.focusedValue) return;
+          const n = r.getPrevTriggerEl(t, t.focusedValue);
+          T(() => {
+            t.composite ? n == null || n.focus() : (n == null ? void 0 : n.dataset.value) != null && g.focusedValue(t, n.dataset.value);
+          });
+        },
+        checkRenderedElements(t) {
+          t.indicatorState.rendered = !!r.getIndicatorEl(t);
+        },
+        syncTabIndex(t) {
+          T(() => {
+            const n = r.getSelectedContentEl(t);
+            if (!n) return;
+            k(n).length > 0 ? n.removeAttribute("tabindex") : n.setAttribute("tabindex", "0");
+          });
+        },
+        cleanupObserver(t) {
+          var n;
+          (n = t.indicatorCleanup) == null || n.call(t);
+        },
+        allowIndicatorTransition(t) {
+          t.indicatorState.transition = !0;
+        },
+        setIndicatorRect(t, n) {
+          const u = n.id ?? t.value;
+          !t.indicatorState.rendered || !u || !r.getTriggerEl(t, u) || (t.indicatorState.rect = r.getRectById(t, u), V(() => {
+            t.indicatorState.transition = !1;
+          }));
+        },
+        syncSsr(t) {
+          t.ssr = !1;
+        },
+        syncIndicatorRect(t) {
+          var f;
+          (f = t.indicatorCleanup) == null || f.call(t);
+          const n = t.value;
+          if (!t.indicatorState.rendered || !n) return;
+          const u = r.getSelectedTriggerEl(t);
+          u && (t.indicatorCleanup = X(u, {
+            getRect(l) {
+              return r.getOffsetRect(l);
+            },
+            onChange(l) {
+              t.indicatorState.rect = r.resolveRect(l), V(() => {
+                t.indicatorState.transition = !1;
+              });
+            }
+          }));
+        },
+        clickIfLink(t) {
+          F(r.getSelectedTriggerEl(t));
+        }
+      }
+    }
+  );
+}
+var m = {
+  change: (e) => {
+    var o;
+    e.value != null && ((o = e.onValueChange) == null || o.call(e, { value: e.value }));
+  },
+  focusChange: (e) => {
+    var o;
+    e.focusedValue != null && ((o = e.onFocusChange) == null || o.call(e, { focusedValue: e.focusedValue }));
+  }
+}, g = {
+  value: (e, o) => {
+    h(o, e.value) || (e.value = o, m.change(e));
+  },
+  focusedValue: (e, o) => {
+    h(o, e.focusedValue) || (e.focusedValue = o, m.focusChange(e));
+  }
+};
+E()([
+  "activationMode",
+  "composite",
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "loopFocus",
+  "onFocusChange",
+  "onValueChange",
+  "orientation",
+  "translations",
+  "value"
+]);
+E()(["disabled", "value"]);
+E()(["value"]);
+export {
+  H as anatomy,
+  x as connect,
+  z as machine
+};