feat: expose machine context props for better dx

.changeset/lucky-boxes-vanish.md

@@ -0,0 +1,10 @@
+---
+"@zag-js/accordion": minor
+"@zag-js/clipboard": minor
+"@zag-js/carousel": minor
+"@zag-js/checkbox": minor
+"@zag-js/avatar": minor
+"@zag-js/types": minor
+---
+
+Expose all machine context properties as array to improve DX of building design system components.

.changeset/pink-apes-applaud.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/splitter": patch
+---
+
+Remove support for `onSizeChangeStart`

.changeset/plenty-boxes-smash.md

@@ -0,0 +1,6 @@
+---
+"@zag-js/menu": minor
+---
+
+- Rename `GroupProps` to `ItemGroupProps`
+- Rename `LabelProps` to `ItemGroupLabelProps`

.xstate/splitter.js

@@ -53,18 +53,15 @@ const fetchMachine = createMachine({
       on: {
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setActiveHandleId", "invokeOnResizeStart"]
+          actions: ["setActiveHandleId"]
         },
         POINTER_LEAVE: "idle"
       }
     },
     hover: {
       tags: ["focus"],
       on: {
-        POINTER_DOWN: {
-          target: "dragging",
-          actions: ["invokeOnResizeStart"]
-        },
+        POINTER_DOWN: "dragging",
         POINTER_LEAVE: "idle"
       }
     },
@@ -74,7 +71,7 @@ const fetchMachine = createMachine({
         BLUR: "idle",
         POINTER_DOWN: {
           target: "dragging",
-          actions: ["setActiveHandleId", "invokeOnResizeStart"]
+          actions: ["setActiveHandleId"]
         },
         ARROW_LEFT: {
           cond: "isHorizontal",

packages/machines/accordion/src/accordion.props.ts

@@ -0,0 +1,18 @@
+import { createProps } from "@zag-js/types"
+import type { ItemProps, UserDefinedContext } from "./accordion.types"
+
+export const props = createProps<UserDefinedContext>()([
+  "collapsible",
+  "dir",
+  "disabled",
+  "getRootNode",
+  "id",
+  "ids",
+  "multiple",
+  "onFocusChange",
+  "onValueChange",
+  "orientation",
+  "value",
+])
+
+export const itemProps = createProps<ItemProps>()(["value", "disabled"])

packages/machines/accordion/src/index.ts

@@ -1,6 +1,7 @@
 export { anatomy } from "./accordion.anatomy"
 export { connect } from "./accordion.connect"
 export { machine } from "./accordion.machine"
+export * from "./accordion.props"
 export type {
   MachineApi as Api,
   UserDefinedContext as Context,

packages/machines/avatar/src/avatar.props.ts

@@ -0,0 +1,4 @@
+import { createProps } from "@zag-js/types"
+import type { UserDefinedContext } from "./avatar.types"
+
+export const props = createProps<UserDefinedContext>()(["dir", "id", "onLoadingStatusChange", "getRootNode"])

packages/machines/avatar/src/index.ts

@@ -1,4 +1,5 @@
 export { anatomy } from "./avatar.anatomy"
 export { connect } from "./avatar.connect"
 export { machine } from "./avatar.machine"
-export type { UserDefinedContext as Context, MachineApi as Api, StatusChangeDetails } from "./avatar.types"
+export * from "./avatar.props"
+export type { MachineApi as Api, UserDefinedContext as Context, StatusChangeDetails } from "./avatar.types"

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

@@ -14,7 +14,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const activeSnap = state.context.scrollSnaps[state.context.index]
   const slidesInView = isDom() ? getSlidesInView(state.context)(activeSnap) : []
 
-  function getItemStateState(props: ItemProps): ItemState {
+  function getItemState(props: ItemProps): ItemState {
     const { index } = props
     return {
       valueText: `Slide ${index + 1}`,
@@ -44,7 +44,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       send("PREV")
     },
 
-    getItemState: getItemStateState,
+    getItemState: getItemState,
 
     play() {
       send("PLAY")
@@ -95,7 +95,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
     getItemProps(props) {
       const { index } = props
-      const sliderState = getItemStateState(props)
+      const sliderState = getItemState(props)
 
       return normalize.element({
         ...parts.item.attrs,

packages/machines/carousel/src/carousel.props.ts

@@ -0,0 +1,18 @@
+import { createProps } from "@zag-js/types"
+import type { IndicatorProps, UserDefinedContext } from "./carousel.types"
+
+export const props = createProps<UserDefinedContext>()([
+  "align",
+  "dir",
+  "getRootNode",
+  "id",
+  "ids",
+  "index",
+  "loop",
+  "onIndexChange",
+  "orientation",
+  "slidesPerView",
+  "spacing",
+])
+
+export const indicatorProps = createProps<IndicatorProps>()(["index", "readOnly"])

packages/machines/carousel/src/index.ts

@@ -1,6 +1,7 @@
 export { anatomy } from "./carousel.anatomy"
 export { connect } from "./carousel.connect"
 export { machine } from "./carousel.machine"
+export * from "./carousel.props"
 export type {
   MachineApi as Api,
   UserDefinedContext as Context,

packages/machines/checkbox/src/checkbox.props.ts

@@ -0,0 +1,17 @@
+import { createProps } from "@zag-js/types"
+import type { UserDefinedContext } from "./checkbox.types"
+
+export const props = createProps<UserDefinedContext>()([
+  "checked",
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "id",
+  "ids",
+  "invalid",
+  "name",
+  "onCheckedChange",
+  "required",
+  "value",
+])

packages/machines/checkbox/src/index.ts

@@ -1,6 +1,7 @@
 export { anatomy } from "./checkbox.anatomy"
 export { connect } from "./checkbox.connect"
 export { machine } from "./checkbox.machine"
+export * from "./checkbox.props"
 export type {
   MachineApi as Api,
   CheckedChangeDetails,

packages/machines/clipboard/src/clipboard.props.ts

@@ -0,0 +1,13 @@
+import { createProps } from "@zag-js/types"
+import type { IndicatorProps, UserDefinedContext } from "./clipboard.types"
+
+export const props = createProps<UserDefinedContext>()([
+  "getRootNode",
+  "id",
+  "ids",
+  "value",
+  "timeout",
+  "onCopyStatusChange",
+])
+
+export const indicatorProps = createProps<IndicatorProps>()(["copied"])

packages/machines/clipboard/src/index.ts

@@ -1,10 +1,11 @@
 export { anatomy } from "./clipboard.anatomy"
 export { connect } from "./clipboard.connect"
 export { machine } from "./clipboard.machine"
+export * from "./clipboard.props"
 export type {
   MachineApi as Api,
   UserDefinedContext as Context,
-  ElementIds,
   CopyStatusDetails,
+  ElementIds,
   IndicatorProps,
 } from "./clipboard.types"

packages/machines/collapsible/src/collapsible.props.ts

@@ -0,0 +1,13 @@
+import { createProps } from "@zag-js/types"
+import type { UserDefinedContext } from "./collapsible.types"
+
+export const props = createProps<UserDefinedContext>()([
+  "dir",
+  "disabled",
+  "getRootNode",
+  "id",
+  "ids",
+  "onOpenChange",
+  "open.controlled",
+  "open",
+])

packages/machines/color-picker/src/color-picker.props.ts

@@ -0,0 +1,44 @@
+import { createProps } from "@zag-js/types"
+import type {
+  AreaProps,
+  ChannelProps,
+  SwatchProps,
+  SwatchTriggerProps,
+  TransparencyGridProps,
+  UserDefinedContext,
+} from "./color-picker.types"
+
+export const props = createProps<UserDefinedContext>()([
+  "closeOnSelect",
+  "dir",
+  "disabled",
+  "format",
+  "getRootNode",
+  "id",
+  "ids",
+  "initialFocusEl",
+  "name",
+  "name",
+  "onFocusOutside",
+  "onFormatChange",
+  "onInteractOutside",
+  "onOpenChange",
+  "onPointerDownOutside",
+  "onValueChange",
+  "onValueChangeEnd",
+  "open.controlled",
+  "open",
+  "positioning",
+  "readOnly",
+  "value",
+])
+
+export const areaProps = createProps<AreaProps>()(["xChannel", "yChannel"])
+
+export const channelProps = createProps<ChannelProps>()(["channel", "orientation"])
+
+export const swatchTriggerProps = createProps<SwatchTriggerProps>()(["value", "disabled"])
+
+export const swatchProps = createProps<SwatchProps>()(["value", "respectAlpha"])
+
+export const transparencyGridProps = createProps<TransparencyGridProps>()(["size"])

packages/machines/combobox/src/combobox.props.ts

@@ -0,0 +1,44 @@
+import { createProps } from "@zag-js/types"
+import type { ItemGroupLabelProps, ItemGroupProps, ItemProps, UserDefinedContext } from "./combobox.types"
+
+export const props = createProps<UserDefinedContext>()([
+  "allowCustomValue",
+  "autoFocus",
+  "closeOnSelect",
+  "dir",
+  "disabled",
+  "form",
+  "getRootNode",
+  "highlightedValue",
+  "id",
+  "ids",
+  "inputBehavior",
+  "collection",
+  "inputValue",
+  "invalid",
+  "loop",
+  "multiple",
+  "name",
+  "onFocusOutside",
+  "onHighlightChange",
+  "onInputValueChange",
+  "onInteractOutside",
+  "onOpenChange",
+  "onOpenChange",
+  "onPointerDownOutside",
+  "onValueChange",
+  "openOnClick",
+  "placeholder",
+  "positioning",
+  "readOnly",
+  "selectionBehavior",
+  "selectOnBlur",
+  "translations",
+  "value",
+])
+
+export const itemGroupLabelProps = createProps<ItemGroupLabelProps>()(["htmlFor"])
+
+export const itemGroupProps = createProps<ItemGroupProps>()(["id"])
+
+export const itemProps = createProps<ItemProps>()(["item"])

packages/machines/date-picker/src/date-picker.props.ts

@@ -0,0 +1,54 @@
+import { createProps } from "@zag-js/types"
+import type {
+  InputProps,
+  PresetTriggerProps,
+  TableCellProps,
+  TableProps,
+  UserDefinedContext,
+  ViewProps,
+} from "./date-picker.types"
+
+export const props = createProps<UserDefinedContext>()([
+  "closeOnSelect",
+  "dir",
+  "disabled",
+  "fixedWeeks",
+  "focusedValue",
+  "format",
+  "getRootNode",
+  "id",
+  "ids",
+  "isDateUnavailable",
+  "isDateUnavailable",
+  "locale",
+  "max",
+  "min",
+  "modal",
+  "name",
+  "numOfMonths",
+  "onFocusChange",
+  "onOpenChange",
+  "onValueChange",
+  "onViewChange",
+  "open",
+  "open.controlled",
+  "parse",
+  "positioning",
+  "readOnly",
+  "selectionMode",
+  "startOfWeek",
+  "timeZone",
+  "translations",
+  "value",
+  "view",
+])
+
+export const inputProps = createProps<InputProps>()(["index"])
+
+export const presetTriggerProps = createProps<PresetTriggerProps>()(["value"])
+
+export const tableProps = createProps<TableProps>()(["columns", "id", "view"])
+
+export const tableCellProps = createProps<TableCellProps>()(["disabled", "value", "columns"])
+
+export const viewProps = createProps<ViewProps>()(["view"])

packages/machines/date-picker/src/index.ts

@@ -2,6 +2,7 @@ export { anatomy } from "./date-picker.anatomy"
 export { connect } from "./date-picker.connect"
 export { machine } from "./date-picker.machine"
 export { parse } from "./date-picker.parse"
+export * from "./date-picker.props"
 export type {
   MachineApi as Api,
   Calendar,

packages/machines/dialog/src/dialog.props.ts

@@ -0,0 +1,28 @@
+import { createProps } from "@zag-js/types"
+import type { UserDefinedContext } from "./dialog.types"
+
+export const props = createProps<UserDefinedContext>()([
+  "aria-label",
+  "closeOnEscapeKeyDown",
+  "closeOnInteractOutside",
+  "dir",
+  "finalFocusEl",
+  "getRootNode",
+  "getRootNode",
+  "id",
+  "id",
+  "ids",
+  "initialFocusEl",
+  "modal",
+  "onEscapeKeyDown",
+  "onFocusOutside",
+  "onInteractOutside",
+  "onOpenChange",
+  "onPointerDownOutside",
+  "open.controlled",
+  "open",
+  "preventScroll",
+  "restoreFocus",
+  "role",
+  "trapFocus",
+])