fix(tabs): id composition

Author: segunadebayo

.changeset/ripe-coats-retire.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/tabs": patch
+---
+
+Fix issue where ids for item and content could not be customized.

packages/machines/tabs/src/tabs.dom.ts

@@ -4,8 +4,8 @@ import { first, last } from "@zag-js/utils"
 
 export const getRootId = (ctx: Scope) => ctx.ids?.root ?? `tabs:${ctx.id}`
 export const getListId = (ctx: Scope) => ctx.ids?.list ?? `tabs:${ctx.id}:list`
-export const getContentId = (ctx: Scope, id: string) => ctx.ids?.content ?? `tabs:${ctx.id}:content-${id}`
-export const getTriggerId = (ctx: Scope, id: string) => ctx.ids?.trigger ?? `tabs:${ctx.id}:trigger-${id}`
+export const getContentId = (ctx: Scope, id: string) => ctx.ids?.content?.(id) ?? `tabs:${ctx.id}:content-${id}`
+export const getTriggerId = (ctx: Scope, id: string) => ctx.ids?.trigger?.(id) ?? `tabs:${ctx.id}:trigger-${id}`
 export const getIndicatorId = (ctx: Scope) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`
 
 export const getListEl = (ctx: Scope) => ctx.getById(getListId(ctx))

packages/machines/tabs/src/tabs.types.ts

@@ -29,9 +29,9 @@ export interface IntlTranslations {
 
 export type ElementIds = Partial<{
   root: string
-  trigger: string
+  trigger: (value: string) => string
   list: string
-  content: string
+  content: (value: string) => string
   indicator: string
 }>