chakra-ui · segunadebayo · May 27, 2024 · May 26, 2024
diff --git a/.xstate/tour.js b/.xstate/tour.js
@@ -15,7 +15,7 @@ const fetchMachine = createMachine({
   context: {
     "isValidStep": false,
     "completeOnSkip": false,
-    "isLastStep": false
+    "lastStep": false
   },
   activities: ["trackBoundarySize"],
   exit: ["clearStep", "cleanupFns"],
@@ -80,7 +80,7 @@ const fetchMachine = createMachine({
           actions: ["invokeOnSkip", "setNextStep"]
         }],
         STOP: [{
-          cond: "isLastStep",
+          cond: "lastStep",
           target: "closed",
           actions: ["invokeOnStop", "invokeOnComplete", "clearStep"]
         }, {
@@ -101,6 +101,6 @@ const fetchMachine = createMachine({
   guards: {
     "isValidStep": ctx => ctx["isValidStep"],
     "completeOnSkip": ctx => ctx["completeOnSkip"],
-    "isLastStep": ctx => ctx["isLastStep"]
+    "lastStep": ctx => ctx["lastStep"]
   }
 });
diff --git a/examples/next-ts/pages/tour.tsx b/examples/next-ts/pages/tour.tsx
@@ -61,7 +61,7 @@ export default function Page() {
                 <div className="tour button__group">
                   <button {...api.prevTriggerProps}>Prev</button>
                   <button {...api.nextTriggerProps}>Next</button>
-                  {api.isLastStep && (
+                  {api.lastStep && (
                     <button {...api.closeTriggerProps} style={{ marginLeft: "auto" }}>
                       Close
                     </button>

diff --git a/examples/solid-ts/src/pages/tour.tsx b/examples/solid-ts/src/pages/tour.tsx
@@ -57,7 +57,7 @@ export default function Page() {
                 <div class="tour button__group">
                   <button {...api().prevTriggerProps}>Prev</button>
                   <button {...api().nextTriggerProps}>Next</button>
-                  {api().isLastStep && (
+                  {api().lastStep && (
                     <button {...api().closeTriggerProps} style={{ "margin-left": "auto" }}>
                       Close
                     </button>

diff --git a/examples/svelte-ts/src/routes/tour.svelte b/examples/svelte-ts/src/routes/tour.svelte
@@ -51,7 +51,7 @@
           <div class="tour button__group">
             <button {...api.prevTriggerProps}>Prev</button>
             <button {...api.nextTriggerProps}>Next</button>
-            {#if api.isLastStep}
+            {#if api.lastStep}
               <button {...api.closeTriggerProps} style="margin-left:auto;"> Close </button>
             {/if}
           </div>

diff --git a/examples/vue-ts/src/pages/tour.tsx b/examples/vue-ts/src/pages/tour.tsx
@@ -60,7 +60,7 @@ export default defineComponent({
                     <div class="tour button__group">
                       <button {...api.prevTriggerProps}>Prev</button>
                       <button {...api.nextTriggerProps}>Next</button>
-                      {api.isLastStep && (
+                      {api.lastStep && (
                         <button {...api.closeTriggerProps} style={{ marginLeft: "auto" }}>
                           Close
                         </button>

diff --git a/packages/docs/data/api.json b/packages/docs/data/api.json
@@ -3933,11 +3933,11 @@
         "type": "boolean",
         "description": "Whether there is a previous step"
       },
-      "isFirstStep": {
+      "firstStep": {
         "type": "boolean",
         "description": "Whether the current step is the first step"
       },
-      "isLastStep": {
+      "lastStep": {
         "type": "boolean",
         "description": "Whether the current step is the last step"
       },

diff --git a/packages/machines/tour/src/tour.connect.ts b/packages/machines/tour/src/tour.connect.ts
@@ -18,8 +18,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const hasNextStep = state.context.hasNextStep
   const hasPrevStep = state.context.hasPrevStep
 
-  const isFirstStep = state.context.isFirstStep
-  const isLastStep = state.context.isLastStep
+  const firstStep = state.context.firstStep
+  const lastStep = state.context.lastStep
 
   const popperStyles = getPlacementStyles({
     strategy: "absolute",
@@ -39,8 +39,8 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     currentStep: step,
     hasNextStep,
     hasPrevStep,
-    isFirstStep,
-    isLastStep,
+    firstStep,
+    lastStep,
     addStep(step) {
       const next = steps.concat(step)
       send({ type: "STEPS.SET", value: next, src: "addStep" })

diff --git a/packages/machines/tour/src/tour.machine.ts b/packages/machines/tour/src/tour.machine.ts
@@ -49,8 +49,8 @@ export function machine(userContext: UserDefinedContext) {
         },
         hasNextStep: (ctx) => ctx.currentStepIndex < ctx.steps.length - 1,
         hasPrevStep: (ctx) => ctx.currentStepIndex > 0,
-        isFirstStep: (ctx) => ctx.currentStepIndex === 0,
-        isLastStep: (ctx) => ctx.currentStepIndex === ctx.steps.length - 1,
+        firstStep: (ctx) => ctx.currentStepIndex === 0,
+        lastStep: (ctx) => ctx.currentStepIndex === ctx.steps.length - 1,
       },
 
       watch: {
@@ -122,7 +122,7 @@ export function machine(userContext: UserDefinedContext) {
             ],
             STOP: [
               {
-                guard: "isLastStep",
+                guard: "lastStep",
                 target: "closed",
                 actions: ["invokeOnStop", "invokeOnComplete", "clearStep"],
               },
@@ -137,7 +137,7 @@ export function machine(userContext: UserDefinedContext) {
     },
     {
       guards: {
-        isLastStep: (ctx) => ctx.isLastStep,
+        lastStep: (ctx) => ctx.lastStep,
         isValidStep: (ctx) => ctx.step != null,
         completeOnSkip: (ctx) => ctx.skipBehavior === "complete",
       },
@@ -340,7 +340,7 @@ export function machine(userContext: UserDefinedContext) {
 const invoke = {
   stepChange(ctx: MachineContext) {
     ctx.onStepChange?.({
-      complete: ctx.isLastStep,
+      complete: ctx.lastStep,
       step: ctx.step,
       count: ctx.steps.length,
       index: ctx.currentStepIndex,

diff --git a/packages/machines/tour/src/tour.types.ts b/packages/machines/tour/src/tour.types.ts
@@ -205,11 +205,11 @@ type ComputedContext = Readonly<{
   /**
    * Whether the current step is the first step
    */
-  isFirstStep: boolean
+  firstStep: boolean
   /**
    * Whether the current step is the last step
    */
-  isLastStep: boolean
+  lastStep: boolean
 }>
 
 export type UserDefinedContext = RequiredBy<PublicContext, "id">
@@ -249,11 +249,11 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   /**
    * Whether the current step is the first step
    */
-  isFirstStep: boolean
+  firstStep: boolean
   /**
    * Whether the current step is the last step
    */
-  isLastStep: boolean
+  lastStep: boolean
   /**
    * Add a new step to the tour
    */

diff --git a/website/data/overview/composition.mdx b/website/data/overview/composition.mdx
@@ -16,29 +16,31 @@ that, import the `mergeProps` utility provided by zag for your framework.
 ```jsx
 // 1. import mergeProps utility
 import { useMachine, mergeProps } from "@zag-js/react"
-import * as toggle from "@zag-js/toggle"
+import * as hoverCard from "@zag-js/hover-card"
 
 export function Toggle() {
   const [state, send] = useMachine(
-    toggle.machine({
+    hoverCard.machine({
       id: "1",
     }),
   )
-  const api = toggle.connect(state, send)
+  const api = hoverCard.connect(state, send)
 
   // 2. write your custom event handlers
-  const handleClick = () => {
+  const handleHover = () => {
     // do something
   }
 
   // 3. merge the props
-  const buttonProps = mergeProps(api.buttonProps, {
-    onClick: handleClick,
+  const triggerProps = mergeProps(api.triggerProps, {
+    onPointerEnter: handleHover,
   })
 
   return (
     // 4. spread the new props
-    <button {...buttonProps}>{api.isPressed ? "On" : "Off"}</button>
+    <a href="https://twitter.com/zag_js" target="_blank" {...api.triggerProps}>
+      {api.open ? "Open" : "Close"}
+    </a>
   )
 }
 ```

diff --git a/website/data/snippets/react/clipboard/usage.mdx b/website/data/snippets/react/clipboard/usage.mdx
@@ -20,7 +20,7 @@ function Clipboard() {
       <div {...api.controlProps}>
         <input {...api.inputProps} />
         <button {...api.triggerProps}>
-          {api.isCopied ? <ClipboardCheck /> : <ClipboardCopyIcon />}
+          {api.copied ? <ClipboardCheck /> : <ClipboardCopyIcon />}
         </button>
       </div>
     </div>

diff --git a/website/data/snippets/react/rating-group/usage.mdx b/website/data/snippets/react/rating-group/usage.mdx
@@ -16,7 +16,7 @@ function Rating() {
           const state = api.getItemState({ index })
           return (
             <span key={index} {...api.getItemProps({ index })}>
-              {state.isHalf ? <HalfStar /> : <Star />}
+              {state.half ? <HalfStar /> : <Star />}
             </span>
           )
         })}

diff --git a/website/data/snippets/solid/checkbox/usage.mdx b/website/data/snippets/solid/checkbox/usage.mdx
@@ -11,7 +11,7 @@ function Checkbox() {
   return (
     <label {...api().rootProps}>
       <span {...api().labelProps}>
-        Input is {api().isChecked ? "checked" : "unchecked"}
+        Input is {api().checked ? "checked" : "unchecked"}
       </span>
       <div {...api().controlProps} />
       <input {...api().hiddenInputProps} />

diff --git a/website/data/snippets/solid/clipboard/usage.mdx b/website/data/snippets/solid/clipboard/usage.mdx
@@ -20,7 +20,7 @@ function Clipboard() {
       <div {...api().controlProps}>
         <input {...api().inputProps} />
         <button {...api().triggerProps}>
-          <Show when={api().isCopied} fallback={<ClipboardCopyIcon />}>
+          <Show when={api().copied} fallback={<ClipboardCopyIcon />}>
             <ClipboardCheck />
           </Show>
         </button>

diff --git a/website/data/snippets/solid/rating-group/usage.mdx b/website/data/snippets/solid/rating-group/usage.mdx
@@ -17,7 +17,7 @@ function Rating() {
           const state = api().getItemState(index)
           return (
             <span key={index} {...api().getItemProps({ index })}>
-              {state.isHalf ? <HalfStar /> : <Star />}
+              {state.half ? <HalfStar /> : <Star />}
             </span>
           )
         })}

diff --git a/website/data/snippets/vue-jsx/clipboard/usage.mdx b/website/data/snippets/vue-jsx/clipboard/usage.mdx
@@ -25,7 +25,7 @@ export const Clipboard = defineComponent({
           <div {...api.controlProps}>
             <input {...api.inputProps} style={{ width: "100%" }} />
             <button {...api.triggerProps}>
-              {api.isCopied ? <ClipboardCheck /> : <ClipboardCopyIcon />}
+              {api.copied ? <ClipboardCheck /> : <ClipboardCopyIcon />}
             </button>
           </div>
         </div>

diff --git a/website/data/snippets/vue-jsx/rating-group/usage.mdx b/website/data/snippets/vue-jsx/rating-group/usage.mdx
@@ -23,7 +23,7 @@ export default function defineComponent({
               const state = api.getItemState({ index })
               return (
                 <span key={index} {...api.getItemProps({ index })}>
-                  {state.isHalf ? <HalfStar /> : <Star />}
+                  {state.half ? <HalfStar /> : <Star />}
                 </span>
               )
             })}

diff --git a/website/data/snippets/vue-sfc/clipboard/usage.mdx b/website/data/snippets/vue-sfc/clipboard/usage.mdx
@@ -23,7 +23,7 @@
     <div v-bind="api.controlProps">
       <input v-bind="api.inputProps" style="width: 100%" />
       <button v-bind="api.triggerProps">
-        <ClipboardCheck v-if="api.isCopied" />
+        <ClipboardCheck v-if="api.copied" />
         <ClipboardCopyIcon v-else />
       </button>
     </div>

diff --git a/website/data/snippets/vue-sfc/rating-group/usage.mdx b/website/data/snippets/vue-sfc/rating-group/usage.mdx
@@ -19,7 +19,7 @@
         :key="index"
         v-bind="api.getItemProps({ index })"
       >
-        <HalfStar v-if="api.getItemState({ index }).isHalf" />
+        <HalfStar v-if="api.getItemState({ index }).half" />
         <Star v-else />
       </span>
     </div>