Merge branch 'main' of github.com:chakra-ui/zag

.changeset/weak-guests-remain.md

@@ -0,0 +1,7 @@
+---
+"@zag-js/carousel": minor
+---
+
+## Breaking Changes
+
+Rename nextTrigger, prevTrigger to nextSlideTrigger and prevSlideTrigger to be more explicit.

examples/next-ts/pages/carousel.tsx

@@ -27,8 +27,8 @@ export default function Page() {
     <>
       <main className="carousel">
         <div {...api.rootProps}>
-          <button {...api.prevTriggerProps}>Prev</button>
-          <button {...api.nextTriggerProps}>Next</button>
+          <button {...api.prevSlideTriggerProps}>Prev</button>
+          <button {...api.nextSlideTriggerProps}>Next</button>
           <div {...api.viewportProps}>
             <div {...api.slideGroupProps}>
               {carouselData.map((image, index) => (

examples/solid-ts/src/pages/carousel.tsx

@@ -19,8 +19,8 @@ export default function Page() {
     <>
       <main class="carousel">
         <div {...api().rootProps}>
-          <button {...api().prevTriggerProps}>Prev</button>
-          <button {...api().nextTriggerProps}>Next</button>
+          <button {...api().prevSlideTriggerProps}>Prev</button>
+          <button {...api().nextSlideTriggerProps}>Next</button>
           <div {...api().viewportProps}>
             <div {...api().slideGroupProps}>
               <For each={carouselData}>

examples/vue-ts/src/pages/carousel.tsx

@@ -24,8 +24,8 @@ export default defineComponent({
         <>
           <main class="carousel">
             <div {...api.rootProps}>
-              <button {...api.prevTriggerProps}>Prev</button>
-              <button {...api.nextTriggerProps}>Next</button>
+              <button {...api.prevSlideTriggerProps}>Prev</button>
+              <button {...api.nextSlideTriggerProps}>Next</button>
               <div {...api.viewportProps}>
                 <div {...api.slideGroupProps}>
                   {carouselData.map((image, index) => (

package.json

@@ -71,7 +71,7 @@
     "@internationalized/date": "^3.3.0",
     "@octokit/rest": "20.0.1",
     "@playwright/test": "1.36.2",
-    "@swc/core": "1.3.71",
+    "@swc/core": "1.3.74",
     "@types/babel__traverse": "^7.20.1",
     "@types/babel__generator": "^7.6.4",
     "@types/node": "^20.4.4",
@@ -104,5 +104,5 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "packageManager": "[email protected].0"
+  "packageManager": "[email protected].11"
 }

packages/machines/carousel/src/carousel.anatomy.ts

@@ -5,8 +5,8 @@ export const anatomy = createAnatomy("carousel").parts(
   "viewport",
   "slideGroup",
   "slide",
-  "previousTrigger",
-  "nextTrigger",
+  "nextSlideTrigger",
+  "prevSlideTrigger",
   "indicatorGroup",
   "indicator",
 )

packages/machines/carousel/src/carousel.connect.ts

@@ -111,9 +111,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       })
     },
 
-    prevTriggerProps: normalize.button({
-      ...parts.previousTrigger.attrs,
-      id: dom.getPrevTriggerId(state.context),
+    prevSlideTriggerProps: normalize.button({
+      ...parts.prevSlideTrigger.attrs,
+      id: dom.getPrevSliderTriggerId(state.context),
       type: "button",
       tabIndex: -1,
       disabled: !canScrollPrev,
@@ -125,9 +125,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       },
     }),
 
-    nextTriggerProps: normalize.button({
-      ...parts.nextTrigger.attrs,
-      id: dom.getNextTriggerId(state.context),
+    nextSlideTriggerProps: normalize.button({
+      ...parts.nextSlideTrigger.attrs,
+      id: dom.getNextSliderTriggerId(state.context),
       type: "button",
       tabIndex: -1,
       "aria-label": "Next Slide",

packages/machines/carousel/src/carousel.dom.ts

@@ -6,8 +6,8 @@ export const dom = createScope({
   getViewportId: (ctx: Ctx) => ctx.ids?.viewport ?? `carousel:${ctx.id}:viewport`,
   getSlideId: (ctx: Ctx, index: number) => ctx.ids?.slide?.(index) ?? `carousel:${ctx.id}:slide:${index}`,
   getSlideGroupId: (ctx: Ctx) => ctx.ids?.slideGroup ?? `carousel:${ctx.id}:slide-group`,
-  getNextTriggerId: (ctx: Ctx) => ctx.ids?.nextTrigger ?? `carousel:${ctx.id}:next-trigger`,
-  getPrevTriggerId: (ctx: Ctx) => ctx.ids?.prevTrigger ?? `carousel:${ctx.id}:prev-trigger`,
+  getNextSliderTriggerId: (ctx: Ctx) => ctx.ids?.nextSlideTrigger ?? `carousel:${ctx.id}:next-slide-trigger`,
+  getPrevSliderTriggerId: (ctx: Ctx) => ctx.ids?.prevSlideTrigger ?? `carousel:${ctx.id}:prev-slide-trigger`,
   getIndicatorGroupId: (ctx: Ctx) => ctx.ids?.indicatorGroup ?? `carousel:${ctx.id}:indicator-group`,
   getIndicatorId: (ctx: Ctx, index: number) => ctx.ids?.indicator?.(index) ?? `carousel:${ctx.id}:indicator:${index}`,
 

packages/machines/carousel/src/carousel.types.ts

@@ -15,8 +15,8 @@ type ElementIds = Partial<{
   viewport: string
   slide(index: number): string
   slideGroup: string
-  nextTrigger: string
-  prevTrigger: string
+  nextSlideTrigger: string
+  prevSlideTrigger: string
   indicatorGroup: string
   indicator(index: number): string
 }>
@@ -115,8 +115,8 @@ export type PublicApi<T extends PropTypes = PropTypes> = {
   viewportProps: T["element"]
   slideGroupProps: T["element"]
   getSlideProps(props: SlideProps): T["element"]
-  prevTriggerProps: T["button"]
-  nextTriggerProps: T["button"]
+  prevSlideTriggerProps: T["button"]
+  nextSlideTriggerProps: T["button"]
   indicatorGroupProps: T["element"]
   getIndicatorProps(props: SlideIndicatorProps): T["button"]
 }

packages/utilities/popper/package.json

@@ -26,7 +26,7 @@
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/element-rect": "workspace:*",
     "@zag-js/utils": "workspace:*",
-    "@floating-ui/dom": "1.4.5"
+    "@floating-ui/dom": "1.5.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"