@zag-js/tabs 0.1.10 → 0.1.13

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.mjs CHANGED
@@ -1,45 +1,11 @@
1
- var __defProp = Object.defineProperty;
2
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
3
- var __hasOwnProp = Object.prototype.hasOwnProperty;
4
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
5
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
- var __spreadValues = (a, b) => {
7
- for (var prop in b || (b = {}))
8
- if (__hasOwnProp.call(b, prop))
9
- __defNormalProp(a, prop, b[prop]);
10
- if (__getOwnPropSymbols)
11
- for (var prop of __getOwnPropSymbols(b)) {
12
- if (__propIsEnum.call(b, prop))
13
- __defNormalProp(a, prop, b[prop]);
14
- }
15
- return a;
16
- };
17
-
18
1
  // ../../utilities/dom/dist/index.mjs
19
- var __defProp2 = Object.defineProperty;
20
- var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
21
- var __hasOwnProp2 = Object.prototype.hasOwnProperty;
22
- var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
23
- var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
24
- var __spreadValues2 = (a, b) => {
25
- for (var prop in b || (b = {}))
26
- if (__hasOwnProp2.call(b, prop))
27
- __defNormalProp2(a, prop, b[prop]);
28
- if (__getOwnPropSymbols2)
29
- for (var prop of __getOwnPropSymbols2(b)) {
30
- if (__propIsEnum2.call(b, prop))
31
- __defNormalProp2(a, prop, b[prop]);
32
- }
33
- return a;
34
- };
35
2
  var dataAttr = (guard) => {
36
3
  return guard ? "" : void 0;
37
4
  };
38
5
  var isDom = () => typeof window !== "undefined";
39
6
  function getPlatform() {
40
- var _a;
41
7
  const agent = navigator.userAgentData;
42
- return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
8
+ return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
43
9
  }
44
10
  var pt = (v) => isDom() && v.test(getPlatform());
45
11
  var vn = (v) => isDom() && v.test(navigator.vendor);
@@ -55,28 +21,27 @@ function isFrame(element) {
55
21
  return element.localName === "iframe";
56
22
  }
57
23
  function getDocument(el) {
58
- var _a;
59
24
  if (isWindow(el))
60
25
  return el.document;
61
26
  if (isDocument(el))
62
27
  return el;
63
- return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
28
+ return (el == null ? void 0 : el.ownerDocument) ?? document;
64
29
  }
65
30
  function defineDomHelpers(helpers) {
66
31
  const dom2 = {
67
32
  getRootNode: (ctx) => {
68
- var _a, _b;
69
- return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
70
- },
71
- getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
72
- getWin: (ctx) => {
73
33
  var _a;
74
- return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
34
+ return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
75
35
  },
36
+ getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
37
+ getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
76
38
  getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
77
39
  getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
78
40
  };
79
- return __spreadValues2(__spreadValues2({}, dom2), helpers);
41
+ return {
42
+ ...dom2,
43
+ ...helpers
44
+ };
80
45
  }
81
46
  function isHTMLElement(v) {
82
47
  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
@@ -111,9 +76,7 @@ function isFocusable(element) {
111
76
  }
112
77
  var rtlKeyMap = {
113
78
  ArrowLeft: "ArrowRight",
114
- ArrowRight: "ArrowLeft",
115
- Home: "End",
116
- End: "Home"
79
+ ArrowRight: "ArrowLeft"
117
80
  };
118
81
  var sameKeyMap = {
119
82
  Up: "ArrowUp",
@@ -125,10 +88,9 @@ var sameKeyMap = {
125
88
  Right: "ArrowRight"
126
89
  };
127
90
  function getEventKey(event, options = {}) {
128
- var _a;
129
91
  const { dir = "ltr", orientation = "horizontal" } = options;
130
92
  let { key } = event;
131
- key = (_a = sameKeyMap[key]) != null ? _a : key;
93
+ key = sameKeyMap[key] ?? key;
132
94
  const isRtl = dir === "rtl" && orientation === "horizontal";
133
95
  if (isRtl && key in rtlKeyMap) {
134
96
  key = rtlKeyMap[key];
@@ -155,8 +117,7 @@ function raf(fn) {
155
117
  };
156
118
  }
157
119
  function queryAll(root, selector) {
158
- var _a;
159
- return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
120
+ return Array.from((root == null ? void 0 : root.querySelectorAll(selector)) ?? []);
160
121
  }
161
122
  function itemById(v, id) {
162
123
  return v.find((node) => node.id === id);
@@ -185,24 +146,24 @@ var last = (v) => v[v.length - 1];
185
146
  // src/tabs.dom.ts
186
147
  var dom = defineDomHelpers({
187
148
  getRootId: (ctx) => {
188
- var _a, _b;
189
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
149
+ var _a;
150
+ return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `tabs:${ctx.id}`;
190
151
  },
191
152
  getTriggerGroupId: (ctx) => {
192
- var _a, _b;
193
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs:${ctx.id}:trigger-group`;
153
+ var _a;
154
+ return ((_a = ctx.ids) == null ? void 0 : _a.triggerGroup) ?? `tabs:${ctx.id}:trigger-group`;
194
155
  },
195
156
  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}`;
157
+ var _a;
158
+ return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tabs:${ctx.id}:content-${id}`;
198
159
  },
199
160
  getContentGroupId: (ctx) => {
200
- var _a, _b;
201
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.contentGroup) != null ? _b : `tabs:${ctx.id}:content-group`;
161
+ var _a;
162
+ return ((_a = ctx.ids) == null ? void 0 : _a.contentGroup) ?? `tabs:${ctx.id}:content-group`;
202
163
  },
203
164
  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}`;
165
+ var _a;
166
+ return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tabs:${ctx.id}:trigger-${id}`;
206
167
  },
207
168
  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
208
169
  getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
@@ -225,14 +186,13 @@ var dom = defineDomHelpers({
225
186
  return dom.getById(ctx, id);
226
187
  },
227
188
  getRectById: (ctx, id) => {
228
- var _a;
229
189
  const empty = {
230
190
  offsetLeft: 0,
231
191
  offsetTop: 0,
232
192
  offsetWidth: 0,
233
193
  offsetHeight: 0
234
194
  };
235
- const tab = (_a = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id))) != null ? _a : empty;
195
+ const tab = itemById(dom.getElements(ctx), dom.getTriggerId(ctx, id)) ?? empty;
236
196
  if (ctx.isVertical) {
237
197
  return {
238
198
  top: `${tab.offsetTop}px`,
@@ -375,15 +335,16 @@ function connect(state, send, normalize) {
375
335
  id: dom.getIndicatorId(state.context),
376
336
  "data-part": "indicator",
377
337
  "data-orientation": state.context.orientation,
378
- style: __spreadValues({
338
+ style: {
379
339
  "--transition-duration": "200ms",
380
340
  "--transition-property": "left, right, top, bottom, width, height",
381
341
  position: "absolute",
382
342
  willChange: "var(--transition-property)",
383
343
  transitionProperty: "var(--transition-property)",
384
344
  transitionDuration: state.context.hasMeasuredRect ? "var(--transition-duration)" : "0ms",
385
- transitionTimingFunction: "var(--transition-timing-function)"
386
- }, state.context.indicatorRect)
345
+ transitionTimingFunction: "var(--transition-timing-function)",
346
+ ...state.context.indicatorRect
347
+ }
387
348
  })
388
349
  };
389
350
  }
@@ -392,198 +353,202 @@ function connect(state, send, normalize) {
392
353
  import { createMachine, guards } from "@zag-js/core";
393
354
  var { not } = guards;
394
355
  function machine(ctx) {
395
- return createMachine({
396
- initial: "unknown",
397
- context: __spreadValues({
398
- dir: "ltr",
399
- orientation: "horizontal",
400
- activationMode: "automatic",
401
- value: null,
402
- focusedValue: null,
403
- previousValues: [],
404
- indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
405
- hasMeasuredRect: false,
406
- isIndicatorRendered: false,
407
- loop: true,
408
- messages: {}
409
- }, ctx),
410
- computed: {
411
- isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
412
- isVertical: (ctx2) => ctx2.orientation === "vertical"
413
- },
414
- created: ["setPrevSelectedTabs"],
415
- watch: {
416
- focusedValue: "invokeOnFocus",
417
- value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
418
- dir: ["clearMeasured", "setIndicatorRect"]
419
- },
420
- on: {
421
- SET_VALUE: {
422
- actions: "setValue"
356
+ return createMachine(
357
+ {
358
+ initial: "unknown",
359
+ context: {
360
+ dir: "ltr",
361
+ orientation: "horizontal",
362
+ activationMode: "automatic",
363
+ value: null,
364
+ focusedValue: null,
365
+ previousValues: [],
366
+ indicatorRect: { left: "0px", top: "0px", width: "0px", height: "0px" },
367
+ hasMeasuredRect: false,
368
+ isIndicatorRendered: false,
369
+ loop: true,
370
+ messages: {},
371
+ ...ctx
423
372
  },
424
- DELETE: {
425
- actions: "deleteValue"
426
- }
427
- },
428
- states: {
429
- unknown: {
430
- on: {
431
- SETUP: {
432
- target: "idle",
433
- actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
434
- }
435
- }
373
+ computed: {
374
+ isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
375
+ isVertical: (ctx2) => ctx2.orientation === "vertical"
436
376
  },
437
- idle: {
438
- on: {
439
- TAB_FOCUS: {
440
- guard: "selectOnFocus",
441
- target: "focused",
442
- actions: ["setFocusedValue", "setValue"]
443
- },
444
- TAB_CLICK: {
445
- target: "focused",
446
- actions: ["setFocusedValue", "setValue"]
447
- }
377
+ created: ["setPrevSelectedTabs"],
378
+ watch: {
379
+ focusedValue: "invokeOnFocus",
380
+ value: ["invokeOnChange", "setPrevSelectedTabs", "setIndicatorRect", "setContentTabIndex"],
381
+ dir: ["clearMeasured", "setIndicatorRect"]
382
+ },
383
+ on: {
384
+ SET_VALUE: {
385
+ actions: "setValue"
386
+ },
387
+ DELETE: {
388
+ actions: "deleteValue"
448
389
  }
449
390
  },
450
- focused: {
451
- on: {
452
- TAB_CLICK: {
453
- target: "focused",
454
- actions: ["setFocusedValue", "setValue"]
455
- },
456
- ARROW_LEFT: {
457
- guard: "isHorizontal",
458
- actions: "focusPrevTab"
459
- },
460
- ARROW_RIGHT: {
461
- guard: "isHorizontal",
462
- actions: "focusNextTab"
463
- },
464
- ARROW_UP: {
465
- guard: "isVertical",
466
- actions: "focusPrevTab"
467
- },
468
- ARROW_DOWN: {
469
- guard: "isVertical",
470
- actions: "focusNextTab"
471
- },
472
- HOME: {
473
- actions: "focusFirstTab"
474
- },
475
- END: {
476
- actions: "focusLastTab"
477
- },
478
- ENTER: {
479
- guard: not("selectOnFocus"),
480
- actions: "setValue"
481
- },
482
- TAB_FOCUS: [
483
- {
391
+ states: {
392
+ unknown: {
393
+ on: {
394
+ SETUP: {
395
+ target: "idle",
396
+ actions: ["checkRenderedElements", "setIndicatorRect", "setContentTabIndex"]
397
+ }
398
+ }
399
+ },
400
+ idle: {
401
+ on: {
402
+ TAB_FOCUS: {
484
403
  guard: "selectOnFocus",
404
+ target: "focused",
485
405
  actions: ["setFocusedValue", "setValue"]
486
406
  },
487
- { actions: "setFocusedValue" }
488
- ],
489
- TAB_BLUR: {
490
- target: "idle",
491
- actions: "clearFocusedValue"
407
+ TAB_CLICK: {
408
+ target: "focused",
409
+ actions: ["setFocusedValue", "setValue"]
410
+ }
411
+ }
412
+ },
413
+ focused: {
414
+ on: {
415
+ TAB_CLICK: {
416
+ target: "focused",
417
+ actions: ["setFocusedValue", "setValue"]
418
+ },
419
+ ARROW_LEFT: {
420
+ guard: "isHorizontal",
421
+ actions: "focusPrevTab"
422
+ },
423
+ ARROW_RIGHT: {
424
+ guard: "isHorizontal",
425
+ actions: "focusNextTab"
426
+ },
427
+ ARROW_UP: {
428
+ guard: "isVertical",
429
+ actions: "focusPrevTab"
430
+ },
431
+ ARROW_DOWN: {
432
+ guard: "isVertical",
433
+ actions: "focusNextTab"
434
+ },
435
+ HOME: {
436
+ actions: "focusFirstTab"
437
+ },
438
+ END: {
439
+ actions: "focusLastTab"
440
+ },
441
+ ENTER: {
442
+ guard: not("selectOnFocus"),
443
+ actions: "setValue"
444
+ },
445
+ TAB_FOCUS: [
446
+ {
447
+ guard: "selectOnFocus",
448
+ actions: ["setFocusedValue", "setValue"]
449
+ },
450
+ { actions: "setFocusedValue" }
451
+ ],
452
+ TAB_BLUR: {
453
+ target: "idle",
454
+ actions: "clearFocusedValue"
455
+ }
492
456
  }
493
457
  }
494
458
  }
495
- }
496
- }, {
497
- guards: {
498
- isVertical: (ctx2) => ctx2.isVertical,
499
- isHorizontal: (ctx2) => ctx2.isHorizontal,
500
- selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
501
459
  },
502
- actions: {
503
- setFocusedValue(ctx2, evt) {
504
- ctx2.focusedValue = evt.value;
505
- },
506
- clearFocusedValue(ctx2) {
507
- ctx2.focusedValue = null;
508
- },
509
- setValue(ctx2, evt) {
510
- ctx2.value = evt.value;
511
- },
512
- invokeOnDelete(ctx2, evt) {
513
- var _a;
514
- (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
515
- },
516
- focusFirstTab(ctx2) {
517
- raf(() => {
518
- var _a;
519
- return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
520
- });
460
+ {
461
+ guards: {
462
+ isVertical: (ctx2) => ctx2.isVertical,
463
+ isHorizontal: (ctx2) => ctx2.isHorizontal,
464
+ selectOnFocus: (ctx2) => ctx2.activationMode === "automatic"
521
465
  },
522
- focusLastTab(ctx2) {
523
- raf(() => {
466
+ actions: {
467
+ setFocusedValue(ctx2, evt) {
468
+ ctx2.focusedValue = evt.value;
469
+ },
470
+ clearFocusedValue(ctx2) {
471
+ ctx2.focusedValue = null;
472
+ },
473
+ setValue(ctx2, evt) {
474
+ ctx2.value = evt.value;
475
+ },
476
+ invokeOnDelete(ctx2, evt) {
524
477
  var _a;
525
- return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
526
- });
527
- },
528
- focusNextTab(ctx2) {
529
- if (!ctx2.focusedValue)
530
- return;
531
- const next = dom.getNextEl(ctx2, ctx2.focusedValue);
532
- raf(() => next == null ? void 0 : next.focus());
533
- },
534
- focusPrevTab(ctx2) {
535
- if (!ctx2.focusedValue)
536
- return;
537
- const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
538
- raf(() => prev == null ? void 0 : prev.focus());
539
- },
540
- setIndicatorRect(ctx2) {
541
- nextTick(() => {
542
- if (!ctx2.isIndicatorRendered || !ctx2.value)
478
+ (_a = ctx2.onDelete) == null ? void 0 : _a.call(ctx2, { value: evt.value });
479
+ },
480
+ focusFirstTab(ctx2) {
481
+ raf(() => {
482
+ var _a;
483
+ return (_a = dom.getFirstEl(ctx2)) == null ? void 0 : _a.focus();
484
+ });
485
+ },
486
+ focusLastTab(ctx2) {
487
+ raf(() => {
488
+ var _a;
489
+ return (_a = dom.getLastEl(ctx2)) == null ? void 0 : _a.focus();
490
+ });
491
+ },
492
+ focusNextTab(ctx2) {
493
+ if (!ctx2.focusedValue)
543
494
  return;
544
- ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
545
- if (ctx2.hasMeasuredRect)
495
+ const next = dom.getNextEl(ctx2, ctx2.focusedValue);
496
+ raf(() => next == null ? void 0 : next.focus());
497
+ },
498
+ focusPrevTab(ctx2) {
499
+ if (!ctx2.focusedValue)
546
500
  return;
501
+ const prev = dom.getPrevEl(ctx2, ctx2.focusedValue);
502
+ raf(() => prev == null ? void 0 : prev.focus());
503
+ },
504
+ setIndicatorRect(ctx2) {
547
505
  nextTick(() => {
548
- ctx2.hasMeasuredRect = true;
506
+ if (!ctx2.isIndicatorRendered || !ctx2.value)
507
+ return;
508
+ ctx2.indicatorRect = dom.getRectById(ctx2, ctx2.value);
509
+ if (ctx2.hasMeasuredRect)
510
+ return;
511
+ nextTick(() => {
512
+ ctx2.hasMeasuredRect = true;
513
+ });
549
514
  });
550
- });
551
- },
552
- checkRenderedElements(ctx2) {
553
- ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
554
- },
555
- clearMeasured(ctx2) {
556
- ctx2.hasMeasuredRect = false;
557
- },
558
- invokeOnChange(ctx2) {
559
- var _a;
560
- (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
561
- },
562
- invokeOnFocus(ctx2) {
563
- var _a;
564
- (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
565
- },
566
- setPrevSelectedTabs(ctx2) {
567
- if (ctx2.value != null) {
568
- const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
569
- ctx2.previousValues = Array.from(new Set(newSelected));
570
- }
571
- },
572
- setContentTabIndex(ctx2) {
573
- raf(() => {
574
- const panel = dom.getActiveContentEl(ctx2);
575
- if (!panel)
576
- return;
577
- const focusables = getFocusables(panel);
578
- if (focusables.length > 0) {
579
- panel.removeAttribute("tabindex");
580
- } else {
581
- panel.setAttribute("tabindex", "0");
515
+ },
516
+ checkRenderedElements(ctx2) {
517
+ ctx2.isIndicatorRendered = !!dom.getIndicatorEl(ctx2);
518
+ },
519
+ clearMeasured(ctx2) {
520
+ ctx2.hasMeasuredRect = false;
521
+ },
522
+ invokeOnChange(ctx2) {
523
+ var _a;
524
+ (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
525
+ },
526
+ invokeOnFocus(ctx2) {
527
+ var _a;
528
+ (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, { value: ctx2.focusedValue });
529
+ },
530
+ setPrevSelectedTabs(ctx2) {
531
+ if (ctx2.value != null) {
532
+ const newSelected = Array.from(ctx2.previousValues).concat(ctx2.value);
533
+ ctx2.previousValues = Array.from(new Set(newSelected));
582
534
  }
583
- });
535
+ },
536
+ setContentTabIndex(ctx2) {
537
+ raf(() => {
538
+ const panel = dom.getActiveContentEl(ctx2);
539
+ if (!panel)
540
+ return;
541
+ const focusables = getFocusables(panel);
542
+ if (focusables.length > 0) {
543
+ panel.removeAttribute("tabindex");
544
+ } else {
545
+ panel.setAttribute("tabindex", "0");
546
+ }
547
+ });
548
+ }
584
549
  }
585
550
  }
586
- });
551
+ );
587
552
  }
588
553
  export {
589
554
  connect,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/tabs",
3
- "version": "0.1.10",
3
+ "version": "0.1.13",
4
4
  "description": "Core logic for the tabs widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -29,20 +29,21 @@
29
29
  "url": "https://github.com/chakra-ui/zag/issues"
30
30
  },
31
31
  "dependencies": {
32
- "@zag-js/core": "0.1.8",
33
- "@zag-js/types": "0.2.2"
32
+ "@zag-js/core": "0.1.10",
33
+ "@zag-js/types": "0.2.5"
34
34
  },
35
35
  "devDependencies": {
36
- "@zag-js/dom-utils": "0.1.7",
37
- "@zag-js/utils": "0.1.2"
36
+ "@zag-js/dom-utils": "0.1.11",
37
+ "@zag-js/utils": "0.1.4"
38
38
  },
39
39
  "scripts": {
40
- "build:fast": "zag build",
41
- "start": "zag build --watch",
42
- "build": "zag build --prod",
40
+ "build-fast": "tsup src/index.ts --format=esm,cjs",
41
+ "start": "pnpm build --watch",
42
+ "build": "tsup src/index.ts --format=esm,cjs --dts",
43
43
  "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
44
44
  "lint": "eslint src --ext .ts,.tsx",
45
- "test:ci": "yarn test --ci --runInBand",
46
- "test:watch": "yarn test --watch --updateSnapshot"
45
+ "test-ci": "pnpm test --ci --runInBand",
46
+ "test-watch": "pnpm test --watch -u",
47
+ "typecheck": "tsc --noEmit"
47
48
  }
48
- }
49
+ }
@@ -1,17 +0,0 @@
1
- import type { NormalizeProps, PropTypes } from "@zag-js/types";
2
- import type { Send, State, TabProps } from "./tabs.types";
3
- export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
4
- value: string;
5
- focusedValue: string;
6
- previousValues: string[];
7
- setValue(value: string): void;
8
- rootProps: T["element"];
9
- triggerGroupProps: T["element"];
10
- getTriggerProps(props: TabProps): T["button"];
11
- contentGroupProps: T["element"];
12
- getContentProps({ value }: {
13
- value: string;
14
- }): T["element"];
15
- getDeleteButtonProps({ value, disabled }: TabProps): T["button"];
16
- indicatorProps: T["element"];
17
- };
@@ -1,46 +0,0 @@
1
- import type { MachineContext as Ctx } from "./tabs.types";
2
- export declare const dom: {
3
- getRootNode: (ctx: {
4
- getRootNode?: () => Node | Document | ShadowRoot;
5
- }) => Document | ShadowRoot;
6
- getDoc: (ctx: {
7
- getRootNode?: () => Node | Document | ShadowRoot;
8
- }) => Document;
9
- getWin: (ctx: {
10
- getRootNode?: () => Node | Document | ShadowRoot;
11
- }) => Window & typeof globalThis;
12
- getActiveElement: (ctx: {
13
- getRootNode?: () => Node | Document | ShadowRoot;
14
- }) => HTMLElement;
15
- getById: <T_1 = HTMLElement>(ctx: {
16
- getRootNode?: () => Node | Document | ShadowRoot;
17
- }, id: string) => T_1;
18
- } & {
19
- getRootId: (ctx: Ctx) => string;
20
- getTriggerGroupId: (ctx: Ctx) => string;
21
- getContentId: (ctx: Ctx, id: string) => string;
22
- getContentGroupId: (ctx: Ctx) => string;
23
- getTriggerId: (ctx: Ctx, id: string) => string;
24
- getIndicatorId: (ctx: Ctx) => string;
25
- getTriggerGroupEl: (ctx: Ctx) => HTMLElement;
26
- getContentEl: (ctx: Ctx, id: string) => HTMLElement;
27
- getTriggerEl: (ctx: Ctx, id: string) => HTMLElement;
28
- getIndicatorEl: (ctx: Ctx) => HTMLElement;
29
- getElements: (ctx: Ctx) => HTMLElement[];
30
- getFirstEl: (ctx: Ctx) => HTMLElement;
31
- getLastEl: (ctx: Ctx) => HTMLElement;
32
- getNextEl: (ctx: Ctx, id: string) => HTMLElement;
33
- getPrevEl: (ctx: Ctx, id: string) => HTMLElement;
34
- getActiveContentEl: (ctx: Ctx) => HTMLElement;
35
- getRectById: (ctx: Ctx, id: string) => {
36
- top: string;
37
- height: string;
38
- left?: undefined;
39
- width?: undefined;
40
- } | {
41
- left: string;
42
- width: string;
43
- top?: undefined;
44
- height?: undefined;
45
- };
46
- };
@@ -1,2 +0,0 @@
1
- import type { MachineContext, MachineState, UserDefinedContext } from "./tabs.types";
2
- export declare function machine(ctx: UserDefinedContext): import("@zag-js/core").Machine<MachineContext, MachineState, import("@zag-js/core").StateMachine.AnyEventObject>;