@zag-js/tabs 0.2.4 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -31,10 +31,29 @@ var import_anatomy = require("@zag-js/anatomy");
31
31
  var anatomy = (0, import_anatomy.createAnatomy)("tabs").parts("root", "tablist", "trigger", "contentGroup", "content", "indicator");
32
32
  var parts = anatomy.build();
33
33
 
34
- // ../../utilities/dom/dist/index.mjs
34
+ // ../../utilities/dom/src/attrs.ts
35
35
  var dataAttr = (guard) => {
36
36
  return guard ? "" : void 0;
37
37
  };
38
+
39
+ // ../../utilities/core/src/array.ts
40
+ var first = (v) => v[0];
41
+ var last = (v) => v[v.length - 1];
42
+
43
+ // ../../utilities/core/src/guard.ts
44
+ var isArray = (v) => Array.isArray(v);
45
+ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
46
+
47
+ // ../../utilities/core/src/object.ts
48
+ function compact(obj) {
49
+ if (obj === void 0)
50
+ return obj;
51
+ return Object.fromEntries(
52
+ Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
53
+ );
54
+ }
55
+
56
+ // ../../utilities/dom/src/platform.ts
38
57
  var isDom = () => typeof window !== "undefined";
39
58
  function getPlatform() {
40
59
  var _a;
@@ -45,6 +64,8 @@ var pt = (v) => isDom() && v.test(getPlatform());
45
64
  var vn = (v) => isDom() && v.test(navigator.vendor);
46
65
  var isSafari = () => isApple() && vn(/apple/i);
47
66
  var isApple = () => pt(/mac|iphone|ipad|ipod/i);
67
+
68
+ // ../../utilities/dom/src/query.ts
48
69
  function isDocument(el) {
49
70
  return el.nodeType === Node.DOCUMENT_NODE;
50
71
  }
@@ -107,6 +128,8 @@ function isVisible(el) {
107
128
  return false;
108
129
  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
109
130
  }
131
+
132
+ // ../../utilities/dom/src/focusable.ts
110
133
  var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
111
134
  var getFocusables = (container, includeContainer = false) => {
112
135
  if (!container)
@@ -130,6 +153,8 @@ function isFocusable(element) {
130
153
  return false;
131
154
  return element.matches(focusableSelector) && isVisible(element);
132
155
  }
156
+
157
+ // ../../utilities/dom/src/keyboard-event.ts
133
158
  var rtlKeyMap = {
134
159
  ArrowLeft: "ArrowRight",
135
160
  ArrowRight: "ArrowLeft"
@@ -154,6 +179,8 @@ function getEventKey(event, options = {}) {
154
179
  }
155
180
  return key;
156
181
  }
182
+
183
+ // ../../utilities/dom/src/next-tick.ts
157
184
  function nextTick(fn) {
158
185
  const set = /* @__PURE__ */ new Set();
159
186
  function raf2(fn2) {
@@ -173,6 +200,8 @@ function raf(fn) {
173
200
  globalThis.cancelAnimationFrame(id);
174
201
  };
175
202
  }
203
+
204
+ // ../../utilities/dom/src/nodelist.ts
176
205
  function queryAll(root, selector) {
177
206
  var _a;
178
207
  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
@@ -197,19 +226,6 @@ function prevById(v, id, loop = true) {
197
226
  return v[idx];
198
227
  }
199
228
 
200
- // ../../utilities/core/dist/index.mjs
201
- var first = (v) => v[0];
202
- var last = (v) => v[v.length - 1];
203
- var isArray = (v) => Array.isArray(v);
204
- var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
205
- function compact(obj) {
206
- if (obj === void 0)
207
- return obj;
208
- return Object.fromEntries(
209
- Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
210
- );
211
- }
212
-
213
229
  // src/tabs.dom.ts
214
230
  var dom = defineDomHelpers({
215
231
  getRootId: (ctx) => {
package/dist/index.mjs CHANGED
@@ -1,597 +1,13 @@
1
- // src/tabs.anatomy.ts
2
- import { createAnatomy } from "@zag-js/anatomy";
3
- var anatomy = createAnatomy("tabs").parts("root", "tablist", "trigger", "contentGroup", "content", "indicator");
4
- var parts = anatomy.build();
5
-
6
- // ../../utilities/dom/dist/index.mjs
7
- var dataAttr = (guard) => {
8
- return guard ? "" : void 0;
9
- };
10
- var isDom = () => typeof window !== "undefined";
11
- function getPlatform() {
12
- var _a;
13
- const agent = navigator.userAgentData;
14
- return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
15
- }
16
- var pt = (v) => isDom() && v.test(getPlatform());
17
- var vn = (v) => isDom() && v.test(navigator.vendor);
18
- var isSafari = () => isApple() && vn(/apple/i);
19
- var isApple = () => pt(/mac|iphone|ipad|ipod/i);
20
- function isDocument(el) {
21
- return el.nodeType === Node.DOCUMENT_NODE;
22
- }
23
- function isWindow(value) {
24
- return (value == null ? void 0 : value.toString()) === "[object Window]";
25
- }
26
- function isFrame(element) {
27
- return element.localName === "iframe";
28
- }
29
- function getDocument(el) {
30
- var _a;
31
- if (isWindow(el))
32
- return el.document;
33
- if (isDocument(el))
34
- return el;
35
- return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
36
- }
37
- function defineDomHelpers(helpers) {
38
- const dom2 = {
39
- getRootNode: (ctx) => {
40
- var _a, _b;
41
- return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
42
- },
43
- getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
44
- getWin: (ctx) => {
45
- var _a;
46
- return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
47
- },
48
- getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
49
- getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
50
- createEmitter: (ctx, target) => {
51
- const win = dom2.getWin(ctx);
52
- return function emit(evt, detail, options) {
53
- const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
54
- const eventName = `zag:${evt}`;
55
- const init = { bubbles, cancelable, composed, detail };
56
- const event = new win.CustomEvent(eventName, init);
57
- target.dispatchEvent(event);
58
- };
59
- },
60
- createListener: (target) => {
61
- return function listen(evt, handler) {
62
- const eventName = `zag:${evt}`;
63
- const listener = (e) => handler(e);
64
- target.addEventListener(eventName, listener);
65
- return () => target.removeEventListener(eventName, listener);
66
- };
67
- }
68
- };
69
- return {
70
- ...dom2,
71
- ...helpers
72
- };
73
- }
74
- function isHTMLElement(v) {
75
- return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
76
- }
77
- function isVisible(el) {
78
- if (!isHTMLElement(el))
79
- return false;
80
- return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
81
- }
82
- var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
83
- var getFocusables = (container, includeContainer = false) => {
84
- if (!container)
85
- return [];
86
- const elements = Array.from(container.querySelectorAll(focusableSelector));
87
- const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
88
- if (include && isHTMLElement(container) && isFocusable(container)) {
89
- elements.unshift(container);
90
- }
91
- const focusableElements = elements.filter(isFocusable);
92
- focusableElements.forEach((element, i) => {
93
- if (isFrame(element) && element.contentDocument) {
94
- const frameBody = element.contentDocument.body;
95
- focusableElements.splice(i, 1, ...getFocusables(frameBody));
96
- }
97
- });
98
- return focusableElements;
99
- };
100
- function isFocusable(element) {
101
- if (!element)
102
- return false;
103
- return element.matches(focusableSelector) && isVisible(element);
104
- }
105
- var rtlKeyMap = {
106
- ArrowLeft: "ArrowRight",
107
- ArrowRight: "ArrowLeft"
108
- };
109
- var sameKeyMap = {
110
- Up: "ArrowUp",
111
- Down: "ArrowDown",
112
- Esc: "Escape",
113
- " ": "Space",
114
- ",": "Comma",
115
- Left: "ArrowLeft",
116
- Right: "ArrowRight"
117
- };
118
- function getEventKey(event, options = {}) {
119
- var _a;
120
- const { dir = "ltr", orientation = "horizontal" } = options;
121
- let { key } = event;
122
- key = (_a = sameKeyMap[key]) != null ? _a : key;
123
- const isRtl = dir === "rtl" && orientation === "horizontal";
124
- if (isRtl && key in rtlKeyMap) {
125
- key = rtlKeyMap[key];
126
- }
127
- return key;
128
- }
129
- function nextTick(fn) {
130
- const set = /* @__PURE__ */ new Set();
131
- function raf2(fn2) {
132
- const id = globalThis.requestAnimationFrame(fn2);
133
- set.add(() => globalThis.cancelAnimationFrame(id));
134
- }
135
- raf2(() => raf2(fn));
136
- return function cleanup() {
137
- set.forEach(function(fn2) {
138
- fn2();
139
- });
140
- };
141
- }
142
- function raf(fn) {
143
- const id = globalThis.requestAnimationFrame(fn);
144
- return function cleanup() {
145
- globalThis.cancelAnimationFrame(id);
146
- };
147
- }
148
- function queryAll(root, selector) {
149
- var _a;
150
- return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
151
- }
152
- function itemById(v, id) {
153
- return v.find((node) => node.id === id);
154
- }
155
- function indexOfId(v, id) {
156
- const item = itemById(v, id);
157
- return item ? v.indexOf(item) : -1;
158
- }
159
- function nextById(v, id, loop = true) {
160
- let idx = indexOfId(v, id);
161
- idx = loop ? (idx + 1) % v.length : Math.min(idx + 1, v.length - 1);
162
- return v[idx];
163
- }
164
- function prevById(v, id, loop = true) {
165
- let idx = indexOfId(v, id);
166
- if (idx === -1)
167
- return loop ? v[v.length - 1] : null;
168
- idx = loop ? (idx - 1 + v.length) % v.length : Math.max(0, idx - 1);
169
- return v[idx];
170
- }
171
-
172
- // ../../utilities/core/dist/index.mjs
173
- var first = (v) => v[0];
174
- var last = (v) => v[v.length - 1];
175
- var isArray = (v) => Array.isArray(v);
176
- var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
177
- function compact(obj) {
178
- if (obj === void 0)
179
- return obj;
180
- return Object.fromEntries(
181
- Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
182
- );
183
- }
184
-
185
- // src/tabs.dom.ts
186
- var dom = defineDomHelpers({
187
- getRootId: (ctx) => {
188
- var _a, _b;
189
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
190
- },
191
- getTablistId: (ctx) => {
192
- var _a, _b;
193
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
194
- },
195
- getContentId: (ctx, id) => {
196
- var _a, _b;
197
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tabs:${ctx.id}:content-${id}`;
198
- },
199
- getContentGroupId: (ctx) => {
200
- var _a, _b;
201
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
202
- },
203
- getTriggerId: (ctx, id) => {
204
- var _a, _b;
205
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
206
- },
207
- getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
208
- getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
209
- getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
210
- getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
211
- getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
212
- getElements: (ctx) => {
213
- const ownerId = CSS.escape(dom.getTablistId(ctx));
214
- const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
215
- return queryAll(dom.getTablistEl(ctx), selector);
216
- },
217
- getFirstEl: (ctx) => first(dom.getElements(ctx)),
218
- getLastEl: (ctx) => last(dom.getElements(ctx)),
219
- getNextEl: (ctx, id) => nextById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
220
- getPrevEl: (ctx, id) => prevById(dom.getElements(ctx), dom.getTriggerId(ctx, id), ctx.loop),
221
- getActiveContentEl: (ctx) => {
222
- if (!ctx.value)
223
- return;
224
- const id = dom.getContentId(ctx, ctx.value);
225
- return dom.getById(ctx, id);
226
- },
227
- getRectById: (ctx, id) => {
228
- var _a;
229
- const empty = {
230
- offsetLeft: 0,
231
- offsetTop: 0,
232
- offsetWidth: 0,
233
- offsetHeight: 0
234
- };
235
- const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
236
- if (ctx.isVertical) {
237
- return {
238
- top: `${tab.offsetTop}px`,
239
- height: `${tab.offsetHeight}px`
240
- };
241
- }
242
- return {
243
- left: `${tab.offsetLeft}px`,
244
- width: `${tab.offsetWidth}px`
245
- };
246
- }
247
- });
248
-
249
- // src/tabs.connect.ts
250
- function connect(state, send, normalize) {
251
- const translations = state.context.translations;
252
- const isFocused = state.matches("focused");
253
- return {
254
- value: state.context.value,
255
- focusedValue: state.context.focusedValue,
256
- previousValues: Array.from(state.context.previousValues),
257
- setValue(value) {
258
- send({ type: "SET_VALUE", value });
259
- },
260
- clearValue() {
261
- send({ type: "CLEAR_VALUE" });
262
- },
263
- rootProps: normalize.element({
264
- ...parts.root.attrs,
265
- id: dom.getRootId(state.context),
266
- "data-orientation": state.context.orientation,
267
- "data-focus": dataAttr(isFocused),
268
- dir: state.context.dir
269
- }),
270
- tablistProps: normalize.element({
271
- ...parts.tablist.attrs,
272
- id: dom.getTablistId(state.context),
273
- role: "tablist",
274
- "data-focus": dataAttr(isFocused),
275
- "aria-orientation": state.context.orientation,
276
- "data-orientation": state.context.orientation,
277
- "aria-label": translations.tablistLabel,
278
- onKeyDown(event) {
279
- const keyMap = {
280
- ArrowDown() {
281
- send("ARROW_DOWN");
282
- },
283
- ArrowUp() {
284
- send("ARROW_UP");
285
- },
286
- ArrowLeft() {
287
- send("ARROW_LEFT");
288
- },
289
- ArrowRight() {
290
- send("ARROW_RIGHT");
291
- },
292
- Home() {
293
- send("HOME");
294
- },
295
- End() {
296
- send("END");
297
- },
298
- Enter() {
299
- send({ type: "ENTER", value: state.context.focusedValue });
300
- }
301
- };
302
- let key = getEventKey(event, state.context);
303
- const exec = keyMap[key];
304
- if (exec) {
305
- event.preventDefault();
306
- exec(event);
307
- }
308
- }
309
- }),
310
- getTriggerProps(props) {
311
- const { value, disabled } = props;
312
- const selected = state.context.value === value;
313
- return normalize.button({
314
- ...parts.trigger.attrs,
315
- role: "tab",
316
- type: "button",
317
- disabled,
318
- "data-orientation": state.context.orientation,
319
- "data-disabled": dataAttr(disabled),
320
- "aria-disabled": disabled,
321
- "data-value": value,
322
- "aria-selected": selected,
323
- "data-selected": dataAttr(selected),
324
- "aria-controls": dom.getContentId(state.context, value),
325
- "data-ownedby": dom.getTablistId(state.context),
326
- id: dom.getTriggerId(state.context, value),
327
- tabIndex: selected ? 0 : -1,
328
- onFocus() {
329
- send({ type: "TAB_FOCUS", value });
330
- },
331
- onBlur(event) {
332
- const target = event.relatedTarget;
333
- if ((target == null ? void 0 : target.getAttribute("role")) !== "tab") {
334
- send({ type: "TAB_BLUR" });
335
- }
336
- },
337
- onClick(event) {
338
- if (disabled)
339
- return;
340
- if (isSafari()) {
341
- event.currentTarget.focus();
342
- }
343
- send({ type: "TAB_CLICK", value });
344
- }
345
- });
346
- },
347
- contentGroupProps: normalize.element({
348
- ...parts.contentGroup.attrs,
349
- id: dom.getContentGroupId(state.context),
350
- "data-orientation": state.context.orientation
351
- }),
352
- getContentProps({ value }) {
353
- const selected = state.context.value === value;
354
- return normalize.element({
355
- ...parts.content.attrs,
356
- id: dom.getContentId(state.context, value),
357
- tabIndex: 0,
358
- "aria-labelledby": dom.getTriggerId(state.context, value),
359
- role: "tabpanel",
360
- "data-ownedby": dom.getTablistId(state.context),
361
- hidden: !selected
362
- });
363
- },
364
- indicatorProps: normalize.element({
365
- id: dom.getIndicatorId(state.context),
366
- ...parts.indicator.attrs,
367
- "data-orientation": state.context.orientation,
368
- style: {
369
- "--transition-duration": "200ms",
370
- "--transition-property": "left, right, top, bottom, width, height",
371
- position: "absolute",
372
- willChange: "var(--transition-property)",
373
- transitionProperty: "var(--transition-property)",
374
- transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
375
- transitionTimingFunction: "var(--transition-timing-function)",
376
- ...state.context.indicatorRect
377
- }
378
- })
379
- };
380
- }
381
-
382
- // src/tabs.machine.ts
383
- import { createMachine, guards } from "@zag-js/core";
384
- var { not } = guards;
385
- function machine(userContext) {
386
- const ctx = compact(userContext);
387
- return createMachine(
388
- {
389
- initial: "unknown",
390
- context: {
391
- dir: "ltr",
392
- orientation: "horizontal",
393
- activationMode: "automatic",
394
- value: null,
395
- focusedValue: null,
396
- previousValues: [],
397
- indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
398
- hasMeasuredRect: false,
399
- isIndicatorRendered: false,
400
- loop: true,
401
- translations: {},
402
- ...ctx
403
- },
404
- computed: {
405
- isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
406
- isVertical: (ctx2) => ctx2.orientation === "vertical"
407
- },
408
- created: ["setPrevSelectedTabs"],
409
- watch: {
410
- focusedValue: "invokeOnFocus",
411
- value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
412
- dir: ["clearMeasured", "setIndicatorRect"]
413
- },
414
- on: {
415
- SET_VALUE: {
416
- actions: "setValue"
417
- },
418
- CLEAR_VALUE: {
419
- actions: "clearValue"
420
- }
421
- },
422
- states: {
423
- unknown: {
424
- on: {
425
- SETUP: {
426
- target: "idle",
427
- actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
428
- }
429
- }
430
- },
431
- idle: {
432
- on: {
433
- TAB_FOCUS: {
434
- guard: "selectOnFocus",
435
- target: "focused",
436
- actions: ["setFocusedValue", "setValue"]
437
- },
438
- TAB_CLICK: {
439
- target: "focused",
440
- actions: ["setFocusedValue", "setValue"]
441
- }
442
- }
443
- },
444
- focused: {
445
- on: {
446
- TAB_CLICK: {
447
- target: "focused",
448
- actions: ["setFocusedValue", "setValue"]
449
- },
450
- ARROW_LEFT: {
451
- guard: "isHorizontal",
452
- actions: "focusPrevTab"
453
- },
454
- ARROW_RIGHT: {
455
- guard: "isHorizontal",
456
- actions: "focusNextTab"
457
- },
458
- ARROW_UP: {
459
- guard: "isVertical",
460
- actions: "focusPrevTab"
461
- },
462
- ARROW_DOWN: {
463
- guard: "isVertical",
464
- actions: "focusNextTab"
465
- },
466
- HOME: {
467
- actions: "focusFirstTab"
468
- },
469
- END: {
470
- actions: "focusLastTab"
471
- },
472
- ENTER: {
473
- guard: not("selectOnFocus"),
474
- actions: "setValue"
475
- },
476
- TAB_FOCUS: [
477
- {
478
- guard: "selectOnFocus",
479
- actions: ["setFocusedValue", "setValue"]
480
- },
481
- { actions: "setFocusedValue" }
482
- ],
483
- TAB_BLUR: {
484
- target: "idle",
485
- actions: "clearFocusedValue"
486
- }
487
- }
488
- }
489
- }
490
- },
491
- {
492
- guards: {
493
- isVertical: (ctx2) => ctx2.isVertical,
494
- isHorizontal: (ctx2) => ctx2.isHorizontal,
495
- selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
496
- },
497
- actions: {
498
- setFocusedValue(ctx2, evt) {
499
- ctx2.focusedValue = evt.value;
500
- },
501
- clearFocusedValue(ctx2) {
502
- ctx2.focusedValue = null;
503
- },
504
- setValue(ctx2, evt) {
505
- ctx2.value = evt.value;
506
- },
507
- clearValue(ctx2) {
508
- ctx2.value = null;
509
- },
510
- invokeOnDelete(ctx2, evt) {
511
- var _a;
512
- (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
513
- },
514
- focusFirstTab(ctx2) {
515
- raf(() => {
516
- var _a;
517
- return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
518
- });
519
- },
520
- focusLastTab(ctx2) {
521
- raf(() => {
522
- var _a;
523
- return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
524
- });
525
- },
526
- focusNextTab(ctx2) {
527
- if (!ctx2.focusedValue)
528
- return;
529
- const next = dom.getNextEl(ctx2, ctx2.focusedValue);
530
- raf(() => next == null ? void 0 : next.focus());
531
- },
532
- focusPrevTab(ctx2) {
533
- if (!ctx2.focusedValue)
534
- return;
535
- const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
536
- raf(() => prev == null ? void 0 : prev.focus());
537
- },
538
- setIndicatorRect(ctx2) {
539
- nextTick(() => {
540
- if (!ctx2.isIndicatorRendered || !ctx2.value)
541
- return;
542
- ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
543
- if (ctx2.hasMeasuredRect)
544
- return;
545
- nextTick(() => {
546
- ctx2.hasMeasuredRect = true;
547
- });
548
- });
549
- },
550
- checkRenderedElements(ctx2) {
551
- ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
552
- },
553
- clearMeasured(ctx2) {
554
- ctx2.hasMeasuredRect = false;
555
- },
556
- invokeOnChange(ctx2) {
557
- var _a;
558
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
559
- },
560
- invokeOnFocus(ctx2) {
561
- var _a;
562
- (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
563
- },
564
- setPrevSelectedTabs(ctx2) {
565
- if (ctx2.value != null) {
566
- ctx2.previousValues = pushUnique(Array.from(ctx2.previousValues), ctx2.value);
567
- }
568
- },
569
- setContentTabIndex(ctx2) {
570
- raf(() => {
571
- const panel = dom.getActiveContentEl(ctx2);
572
- if (!panel)
573
- return;
574
- const focusables = getFocusables(panel);
575
- if (focusables.length > 0) {
576
- panel.removeAttribute("tabindex");
577
- } else {
578
- panel.setAttribute("tabindex", "0");
579
- }
580
- });
581
- }
582
- }
583
- }
584
- );
585
- }
586
- function pushUnique(arr, value) {
587
- const newArr = arr.slice();
588
- const index = newArr.indexOf(value);
589
- if (index > -1) {
590
- newArr.splice(index, 1);
591
- }
592
- newArr.push(value);
593
- return newArr;
594
- }
1
+ import {
2
+ connect
3
+ } from "./chunk-ISJ7TQVV.mjs";
4
+ import {
5
+ anatomy
6
+ } from "./chunk-S2KW2DT4.mjs";
7
+ import {
8
+ machine
9
+ } from "./chunk-7NYLYFDJ.mjs";
10
+ import "./chunk-7VZIDZFW.mjs";
595
11
  export {
596
12
  anatomy,
597
13
  connect,
@@ -0,0 +1,6 @@
1
+ import * as _zag_js_anatomy from '@zag-js/anatomy';
2
+
3
+ declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator">;
4
+ declare const parts: Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator", _zag_js_anatomy.AnatomyPart>;
5
+
6
+ export { anatomy, parts };