@zag-js/tabs 0.0.0-dev-20221208133609 → 0.0.0-dev-20221208135830

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.
Files changed (4) hide show
  1. package/dist/index.d.ts +13 -15
  2. package/dist/index.js +11 -32
  3. package/dist/index.mjs +11 -32
  4. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -795,57 +795,57 @@ declare const anatomy: Omit<{
795
795
  }>;
796
796
  }, "parts">;
797
797
  extend: <V_20 extends string>(...parts: V_20[]) => Omit<any, "parts">;
798
- build: () => Record<"root" | "triggerGroup" | "trigger" | "contentGroup" | "content" | "deleteButton" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18 | V_19, {
798
+ build: () => Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18 | V_19, {
799
799
  selector: string;
800
800
  attrs: Record<"data-scope" | "data-part", string>;
801
801
  }>;
802
802
  }, "parts">;
803
- build: () => Record<"root" | "triggerGroup" | "trigger" | "contentGroup" | "content" | "deleteButton" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18, {
803
+ build: () => Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17 | V_18, {
804
804
  selector: string;
805
805
  attrs: Record<"data-scope" | "data-part", string>;
806
806
  }>;
807
807
  }, "parts">;
808
- build: () => Record<"root" | "triggerGroup" | "trigger" | "contentGroup" | "content" | "deleteButton" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17, {
808
+ build: () => Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16 | V_17, {
809
809
  selector: string;
810
810
  attrs: Record<"data-scope" | "data-part", string>;
811
811
  }>;
812
812
  }, "parts">;
813
- build: () => Record<"root" | "triggerGroup" | "trigger" | "contentGroup" | "content" | "deleteButton" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16, {
813
+ build: () => Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15 | V_16, {
814
814
  selector: string;
815
815
  attrs: Record<"data-scope" | "data-part", string>;
816
816
  }>;
817
817
  }, "parts">;
818
- build: () => Record<"root" | "triggerGroup" | "trigger" | "contentGroup" | "content" | "deleteButton" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15, {
818
+ build: () => Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14 | V_15, {
819
819
  selector: string;
820
820
  attrs: Record<"data-scope" | "data-part", string>;
821
821
  }>;
822
822
  }, "parts">;
823
- build: () => Record<"root" | "triggerGroup" | "trigger" | "contentGroup" | "content" | "deleteButton" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14, {
823
+ build: () => Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator" | V_10 | V_11 | V_12 | V_13 | V_14, {
824
824
  selector: string;
825
825
  attrs: Record<"data-scope" | "data-part", string>;
826
826
  }>;
827
827
  }, "parts">;
828
- build: () => Record<"root" | "triggerGroup" | "trigger" | "contentGroup" | "content" | "deleteButton" | "indicator" | V_10 | V_11 | V_12 | V_13, {
828
+ build: () => Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator" | V_10 | V_11 | V_12 | V_13, {
829
829
  selector: string;
830
830
  attrs: Record<"data-scope" | "data-part", string>;
831
831
  }>;
832
832
  }, "parts">;
833
- build: () => Record<"root" | "triggerGroup" | "trigger" | "contentGroup" | "content" | "deleteButton" | "indicator" | V_10 | V_11 | V_12, {
833
+ build: () => Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator" | V_10 | V_11 | V_12, {
834
834
  selector: string;
835
835
  attrs: Record<"data-scope" | "data-part", string>;
836
836
  }>;
837
837
  }, "parts">;
838
- build: () => Record<"root" | "triggerGroup" | "trigger" | "contentGroup" | "content" | "deleteButton" | "indicator" | V_10 | V_11, {
838
+ build: () => Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator" | V_10 | V_11, {
839
839
  selector: string;
840
840
  attrs: Record<"data-scope" | "data-part", string>;
841
841
  }>;
842
842
  }, "parts">;
843
- build: () => Record<"root" | "triggerGroup" | "trigger" | "contentGroup" | "content" | "deleteButton" | "indicator" | V_10, {
843
+ build: () => Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator" | V_10, {
844
844
  selector: string;
845
845
  attrs: Record<"data-scope" | "data-part", string>;
846
846
  }>;
847
847
  }, "parts">;
848
- build: () => Record<"root" | "triggerGroup" | "trigger" | "contentGroup" | "content" | "deleteButton" | "indicator", {
848
+ build: () => Record<"root" | "tablist" | "trigger" | "contentGroup" | "content" | "indicator", {
849
849
  selector: string;
850
850
  attrs: Record<"data-scope" | "data-part", string>;
851
851
  }>;
@@ -853,12 +853,11 @@ declare const anatomy: Omit<{
853
853
 
854
854
  declare type IntlTranslations = {
855
855
  tablistLabel?: string;
856
- deleteLabel?(value: string): string;
857
856
  };
858
857
  declare type ElementIds = Partial<{
859
858
  root: string;
860
859
  trigger: string;
861
- triggerGroup: string;
860
+ tablist: string;
862
861
  contentGroup: string;
863
862
  content: string;
864
863
  }>;
@@ -950,13 +949,12 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
950
949
  setValue(value: string): void;
951
950
  clearValue(): void;
952
951
  rootProps: T["element"];
953
- triggerGroupProps: T["element"];
952
+ tablistProps: T["element"];
954
953
  getTriggerProps(props: TabProps): T["button"];
955
954
  contentGroupProps: T["element"];
956
955
  getContentProps({ value }: {
957
956
  value: string;
958
957
  }): T["element"];
959
- getDeleteButtonProps({ value, disabled }: TabProps): T["button"];
960
958
  indicatorProps: T["element"];
961
959
  };
962
960
 
package/dist/index.js CHANGED
@@ -28,15 +28,7 @@ module.exports = __toCommonJS(src_exports);
28
28
 
29
29
  // src/tabs.anatomy.ts
30
30
  var import_anatomy = require("@zag-js/anatomy");
31
- var anatomy = (0, import_anatomy.createAnatomy)("tabs").parts(
32
- "root",
33
- "triggerGroup",
34
- "trigger",
35
- "contentGroup",
36
- "content",
37
- "deleteButton",
38
- "indicator"
39
- );
31
+ var anatomy = (0, import_anatomy.createAnatomy)("tabs").parts("root", "tablist", "trigger", "contentGroup", "content", "indicator");
40
32
  var parts = anatomy.build();
41
33
 
42
34
  // ../../utilities/dom/dist/index.mjs
@@ -224,9 +216,9 @@ var dom = defineDomHelpers({
224
216
  var _a, _b;
225
217
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
226
218
  },
227
- getTriggerGroupId: (ctx) => {
219
+ getTablistId: (ctx) => {
228
220
  var _a, _b;
229
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs:${ctx.id}:trigger-group`;
221
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
230
222
  },
231
223
  getContentId: (ctx, id) => {
232
224
  var _a, _b;
@@ -241,14 +233,14 @@ var dom = defineDomHelpers({
241
233
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
242
234
  },
243
235
  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
244
- getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
236
+ getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
245
237
  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
246
238
  getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
247
239
  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
248
240
  getElements: (ctx) => {
249
- const ownerId = CSS.escape(dom.getTriggerGroupId(ctx));
241
+ const ownerId = CSS.escape(dom.getTablistId(ctx));
250
242
  const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
251
- return queryAll(dom.getTriggerGroupEl(ctx), selector);
243
+ return queryAll(dom.getTablistEl(ctx), selector);
252
244
  },
253
245
  getFirstEl: (ctx) => first(dom.getElements(ctx)),
254
246
  getLastEl: (ctx) => last(dom.getElements(ctx)),
@@ -303,9 +295,9 @@ function connect(state, send, normalize) {
303
295
  "data-focus": dataAttr(isFocused),
304
296
  dir: state.context.dir
305
297
  }),
306
- triggerGroupProps: normalize.element({
307
- ...parts.triggerGroup.attrs,
308
- id: dom.getTriggerGroupId(state.context),
298
+ tablistProps: normalize.element({
299
+ ...parts.tablist.attrs,
300
+ id: dom.getTablistId(state.context),
309
301
  role: "tablist",
310
302
  "data-focus": dataAttr(isFocused),
311
303
  "aria-orientation": state.context.orientation,
@@ -358,7 +350,7 @@ function connect(state, send, normalize) {
358
350
  "aria-selected": selected,
359
351
  "data-selected": dataAttr(selected),
360
352
  "aria-controls": dom.getContentId(state.context, value),
361
- "data-ownedby": dom.getTriggerGroupId(state.context),
353
+ "data-ownedby": dom.getTablistId(state.context),
362
354
  id: dom.getTriggerId(state.context, value),
363
355
  tabIndex: selected ? 0 : -1,
364
356
  onFocus() {
@@ -393,23 +385,10 @@ function connect(state, send, normalize) {
393
385
  tabIndex: 0,
394
386
  "aria-labelledby": dom.getTriggerId(state.context, value),
395
387
  role: "tabpanel",
396
- "data-ownedby": dom.getTriggerGroupId(state.context),
388
+ "data-ownedby": dom.getTablistId(state.context),
397
389
  hidden: !selected
398
390
  });
399
391
  },
400
- getDeleteButtonProps({ value, disabled }) {
401
- var _a;
402
- return normalize.button({
403
- ...parts.deleteButton.attrs,
404
- type: "button",
405
- tabIndex: -1,
406
- "aria-label": (_a = translations.deleteLabel) == null ? void 0 : _a.call(translations, value),
407
- disabled,
408
- onClick() {
409
- send({ type: "DELETE", value });
410
- }
411
- });
412
- },
413
392
  indicatorProps: normalize.element({
414
393
  id: dom.getIndicatorId(state.context),
415
394
  ...parts.indicator.attrs,
package/dist/index.mjs CHANGED
@@ -1,14 +1,6 @@
1
1
  // src/tabs.anatomy.ts
2
2
  import { createAnatomy } from "@zag-js/anatomy";
3
- var anatomy = createAnatomy("tabs").parts(
4
- "root",
5
- "triggerGroup",
6
- "trigger",
7
- "contentGroup",
8
- "content",
9
- "deleteButton",
10
- "indicator"
11
- );
3
+ var anatomy = createAnatomy("tabs").parts("root", "tablist", "trigger", "contentGroup", "content", "indicator");
12
4
  var parts = anatomy.build();
13
5
 
14
6
  // ../../utilities/dom/dist/index.mjs
@@ -196,9 +188,9 @@ var dom = defineDomHelpers({
196
188
  var _a, _b;
197
189
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `tabs:${ctx.id}`;
198
190
  },
199
- getTriggerGroupId: (ctx) => {
191
+ getTablistId: (ctx) => {
200
192
  var _a, _b;
201
- return (_b = (_a = ctx.ids) == null ? void 0 : _a.triggerGroup) != null ? _b : `tabs:${ctx.id}:trigger-group`;
193
+ return (_b = (_a = ctx.ids) == null ? void 0 : _a.tablist) != null ? _b : `tabs:${ctx.id}:list`;
202
194
  },
203
195
  getContentId: (ctx, id) => {
204
196
  var _a, _b;
@@ -213,14 +205,14 @@ var dom = defineDomHelpers({
213
205
  return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tabs:${ctx.id}:trigger-${id}`;
214
206
  },
215
207
  getIndicatorId: (ctx) => `tabs:${ctx.id}:indicator`,
216
- getTriggerGroupEl: (ctx) => dom.getById(ctx, dom.getTriggerGroupId(ctx)),
208
+ getTablistEl: (ctx) => dom.getById(ctx, dom.getTablistId(ctx)),
217
209
  getContentEl: (ctx, id) => dom.getById(ctx, dom.getContentId(ctx, id)),
218
210
  getTriggerEl: (ctx, id) => dom.getById(ctx, dom.getTriggerId(ctx, id)),
219
211
  getIndicatorEl: (ctx) => dom.getById(ctx, dom.getIndicatorId(ctx)),
220
212
  getElements: (ctx) => {
221
- const ownerId = CSS.escape(dom.getTriggerGroupId(ctx));
213
+ const ownerId = CSS.escape(dom.getTablistId(ctx));
222
214
  const selector = `[role=tab][data-ownedby='${ownerId}']:not([disabled])`;
223
- return queryAll(dom.getTriggerGroupEl(ctx), selector);
215
+ return queryAll(dom.getTablistEl(ctx), selector);
224
216
  },
225
217
  getFirstEl: (ctx) => first(dom.getElements(ctx)),
226
218
  getLastEl: (ctx) => last(dom.getElements(ctx)),
@@ -275,9 +267,9 @@ function connect(state, send, normalize) {
275
267
  "data-focus": dataAttr(isFocused),
276
268
  dir: state.context.dir
277
269
  }),
278
- triggerGroupProps: normalize.element({
279
- ...parts.triggerGroup.attrs,
280
- id: dom.getTriggerGroupId(state.context),
270
+ tablistProps: normalize.element({
271
+ ...parts.tablist.attrs,
272
+ id: dom.getTablistId(state.context),
281
273
  role: "tablist",
282
274
  "data-focus": dataAttr(isFocused),
283
275
  "aria-orientation": state.context.orientation,
@@ -330,7 +322,7 @@ function connect(state, send, normalize) {
330
322
  "aria-selected": selected,
331
323
  "data-selected": dataAttr(selected),
332
324
  "aria-controls": dom.getContentId(state.context, value),
333
- "data-ownedby": dom.getTriggerGroupId(state.context),
325
+ "data-ownedby": dom.getTablistId(state.context),
334
326
  id: dom.getTriggerId(state.context, value),
335
327
  tabIndex: selected ? 0 : -1,
336
328
  onFocus() {
@@ -365,23 +357,10 @@ function connect(state, send, normalize) {
365
357
  tabIndex: 0,
366
358
  "aria-labelledby": dom.getTriggerId(state.context, value),
367
359
  role: "tabpanel",
368
- "data-ownedby": dom.getTriggerGroupId(state.context),
360
+ "data-ownedby": dom.getTablistId(state.context),
369
361
  hidden: !selected
370
362
  });
371
363
  },
372
- getDeleteButtonProps({ value, disabled }) {
373
- var _a;
374
- return normalize.button({
375
- ...parts.deleteButton.attrs,
376
- type: "button",
377
- tabIndex: -1,
378
- "aria-label": (_a = translations.deleteLabel) == null ? void 0 : _a.call(translations, value),
379
- disabled,
380
- onClick() {
381
- send({ type: "DELETE", value });
382
- }
383
- });
384
- },
385
364
  indicatorProps: normalize.element({
386
365
  id: dom.getIndicatorId(state.context),
387
366
  ...parts.indicator.attrs,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/tabs",
3
- "version": "0.0.0-dev-20221208133609",
3
+ "version": "0.0.0-dev-20221208135830",
4
4
  "description": "Core logic for the tabs widget implemented as a state machine",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",