[pull] main from chakra-ui:main

packages/react/CHANGELOG.md

@@ -1,5 +1,14 @@
 ## [Unreleased]
 
+### Added
+
+- Added `mergeProps` utility for combining multiple props objects with proper event handler and className merging.
+- Added `createContext` utility for creating typed React contexts with improved DX.
+
+```tsx
+import { createContext } from '@ark-ui/react/utils'
+```
+
 ### Fixed
 
 - **AngleSlider**: Export `angleSliderAnatomy` from the anatomy exports

packages/react/clean-package.config.json

@@ -54,6 +54,16 @@
           "default": "./dist/providers/locale/index.cjs"
         }
       },
+      "./utils": {
+        "import": {
+          "types": "./dist/utils/index.d.ts",
+          "default": "./dist/utils/index.js"
+        },
+        "require": {
+          "types": "./dist/utils/index.d.cts",
+          "default": "./dist/utils/index.cjs"
+        }
+      },
       "./*": {
         "import": {
           "types": "./dist/components/*/index.d.ts",

packages/react/package.json

@@ -38,7 +38,6 @@
     "switch",
     "tabs",
     "tags input",
-    "time picker",
     "timer",
     "toast",
     "toggle group",

packages/react/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components'
 export * from './providers'
+export * from './utils'
 export type { Assign, Optional } from './types'

packages/react/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { createContext } from './create-context'
+export { mergeProps } from '@zag-js/core'

packages/solid/CHANGELOG.md

@@ -1,5 +1,14 @@
 ## [Unreleased]
 
+### Added
+
+- Added `mergeProps` utility for combining multiple props objects with proper event handler and className merging.
+- Added `createContext` utility for creating typed React contexts with improved DX.
+
+```tsx
+import { createContext } from '@ark-ui/solid/utils'
+```
+
 ### Fixed
 
 - **AngleSlider**: Export `angleSliderAnatomy` from the anatomy exports

packages/solid/clean-package.config.json

@@ -29,6 +29,11 @@
         "solid": "./dist/providers/locale/index.jsx",
         "default": "./dist/providers/locale/index.js"
       },
+      "./utils": {
+        "types": "./dist/utils/index.d.ts",
+        "solid": "./dist/utils/index.jsx",
+        "default": "./dist/utils/index.js"
+      },
       "./*": {
         "types": "./dist/components/*/index.d.ts",
         "solid": "./dist/components/*/index.jsx",

packages/solid/package.json

@@ -37,7 +37,6 @@
     "switch",
     "tabs",
     "tags input",
-    "time picker",
     "toast",
     "toggle group",
     "tooltip",

packages/solid/src/index.tsx

@@ -1,3 +1,4 @@
 export * from './components'
 export * from './providers'
+export * from './utils'
 export type { Assign, Optional } from './types'

packages/solid/src/utils/index.tsx

@@ -0,0 +1,2 @@
+export { createContext } from './create-context'
+export { mergeProps } from '@zag-js/core'

packages/svelte/CHANGELOG.md

@@ -6,6 +6,15 @@ description: All notable changes will be documented in this file.
 
 ## [Unreleased]
 
+### Added
+
+- Added `mergeProps` utility for combining multiple props objects with proper event handler and className merging.
+- Added `createContext` utility for creating typed React contexts with improved DX.
+
+```tsx
+import { createContext } from '@ark-ui/solid/utils'
+```
+
 ## [5.9.1] - 2025-09-14
 
 ### Fixed

packages/svelte/package.json

@@ -38,7 +38,6 @@
     "switch",
     "tabs",
     "tags input",
-    "time picker",
     "timer",
     "toast",
     "toggle group",
@@ -81,6 +80,10 @@
       "types": "./src/lib/providers/locale/index.ts",
       "svelte": "./src/lib/providers/locale/index.ts"
     },
+    "./utils": {
+      "types": "./src/lib/utils/index.ts",
+      "svelte": "./src/lib/utils/index.ts"
+    },
     "./*": {
       "types": "./src/lib/components/*/index.ts",
       "svelte": "./src/lib/components/*/index.ts"
@@ -110,6 +113,8 @@
       "exports.\\./locale.types": "./dist/providers/locale/index.d.ts",
       "exports.\\./environment.svelte": "./dist/providers/environment/index.js",
       "exports.\\./environment.types": "./dist/providers/environment/index.d.ts",
+      "exports.\\./utils.svelte": "./dist/utils/index.js",
+      "exports.\\./utils.types": "./dist/utils/index.d.ts",
       "exports.\\./*.svelte": "./dist/components/*/index.js",
       "exports.\\./*.types": "./dist/components/*/index.d.ts"
     }

packages/svelte/src/lib/index.ts

@@ -1,3 +1,4 @@
 export * from './components'
 export * from './providers'
+export * from './utils'
 export type { Assign, Optional } from './types'

packages/svelte/src/lib/utils/index.ts

@@ -0,0 +1,2 @@
+export { createContext } from './create-context'
+export { mergeProps } from '@zag-js/core'

packages/vue/CHANGELOG.md

@@ -1,5 +1,14 @@
 ## [Unreleased]
 
+### Added
+
+- Added `mergeProps` utility for combining multiple props objects with proper event handler and className merging.
+- Added `createContext` utility for creating typed React contexts with improved DX.
+
+```tsx
+import { createContext } from '@ark-ui/solid/utils'
+```
+
 ## [5.24.1] - 2025-09-14
 
 ### Fixed

packages/vue/clean-package.config.json

@@ -54,6 +54,16 @@
           "default": "./dist/providers/locale/index.cjs"
         }
       },
+      "./utils": {
+        "import": {
+          "types": "./dist/utils/index.d.ts",
+          "default": "./dist/utils/index.js"
+        },
+        "require": {
+          "types": "./dist/utils/index.d.cts",
+          "default": "./dist/utils/index.cjs"
+        }
+      },
       "./*": {
         "import": {
           "types": "./dist/components/*/index.d.ts",

packages/vue/package.json

@@ -37,7 +37,6 @@
     "switch",
     "tabs",
     "tags input",
-    "time picker",
     "toast",
     "toggle group",
     "tooltip",

packages/vue/src/components/accordion/accordion-item-content.vue

@@ -19,7 +19,7 @@ interface VisibilityProps {
 <script setup lang="ts">
 import { computed } from 'vue'
 import { Collapsible } from '../..'
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 import { createSplitProps } from '../create-split-props'
 import { useAccordionContext } from './use-accordion-context'
 import { useAccordionItemPropsContext } from './use-accordion-item-props-context'

packages/vue/src/components/accordion/accordion-item-indicator.vue

@@ -12,7 +12,7 @@ export interface AccordionItemIndicatorProps
 </script>
 
 <script setup lang="ts">
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 import { ark } from '../factory'
 import { useAccordionContext } from './use-accordion-context'
 import { useAccordionItemPropsContext } from './use-accordion-item-props-context'

packages/vue/src/components/accordion/accordion-item-trigger.vue

@@ -13,7 +13,7 @@ export interface AccordionItemTriggerProps
 </script>
 
 <script setup lang="ts">
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 import { ark } from '../factory'
 import { computed } from 'vue'
 import { useAccordionContext } from './use-accordion-context'

packages/vue/src/components/accordion/accordion-item.vue

@@ -14,7 +14,8 @@ export interface AccordionItemProps
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useRenderStrategyProps, useForwardExpose } from '../../utils'
+import { useRenderStrategyProps } from '../../utils/use-render-strategy'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 import { Collapsible } from '../collapsible'
 import { useAccordionContext } from './use-accordion-context'
 import { AccordionItemProvider } from './use-accordion-item-context'

packages/vue/src/components/accordion/accordion-root-provider.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { HTMLAttributes, UnwrapRef } from 'vue'
-import type { RenderStrategyProps } from '../../utils'
+import type { RenderStrategyProps } from '../../utils/use-render-strategy'
 import type { PolymorphicProps } from '../factory'
 import type { UseAccordionReturn } from './use-accordion'
 
@@ -19,7 +19,8 @@ export interface AccordionRootProviderProps
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { RenderStrategyPropsProvider, useForwardExpose } from '../../utils'
+import { RenderStrategyPropsProvider } from '../../utils/use-render-strategy'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 import { ark } from '../factory'
 import { AccordionProvider } from './use-accordion-context'
 

packages/vue/src/components/accordion/accordion-root.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { HTMLAttributes } from 'vue'
 import type { BooleanDefaults } from '../../types'
-import type { RenderStrategyProps } from '../../utils'
+import type { RenderStrategyProps } from '../../utils/use-render-strategy'
 import type { PolymorphicProps } from '../factory'
 import type { RootEmits, RootProps } from './accordion.types'
 
@@ -17,7 +17,8 @@ export interface AccordionRootEmits extends RootEmits {}
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { RenderStrategyPropsProvider, useForwardExpose } from '../../utils'
+import { RenderStrategyPropsProvider } from '../../utils/use-render-strategy'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 import { ark } from '../factory'
 import { useAccordion } from './use-accordion'
 import { AccordionProvider } from './use-accordion-context'

packages/vue/src/components/accordion/tests/accordion.test.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { defineEmits, ref } from 'vue'
 import { Accordion, type AccordionRootEmits, type AccordionRootProps } from '../'
-import { useForwardPropsEmits } from '../../../utils'
+import { useForwardPropsEmits } from '../../../utils/use-forward-props-emits'
 
 const props = defineProps<AccordionRootProps>()
 const emits = defineEmits<AccordionRootEmits>()

packages/vue/src/components/accordion/use-accordion-context.ts

@@ -1,4 +1,4 @@
-import { createContext } from '../../utils'
+import { createContext } from '../../utils/create-context'
 import type { UsePresenceProps } from '../presence'
 import type { UseAccordionReturn } from './use-accordion'
 

packages/vue/src/components/accordion/use-accordion-item-context.ts

@@ -1,6 +1,6 @@
 import type { ItemState } from '@zag-js/accordion'
 import type { ComputedRef } from 'vue'
-import { createContext } from '../../utils'
+import { createContext } from '../../utils/create-context'
 
 export interface UseAccordionItemContext extends ComputedRef<ItemState> {}
 

packages/vue/src/components/accordion/use-accordion-item-props-context.ts

@@ -1,5 +1,5 @@
 import type { ItemProps } from '@zag-js/accordion'
-import { createContext } from '../../utils'
+import { createContext } from '../../utils/create-context'
 
 export interface UseAccordionItemPropsContext extends ItemProps {}
 

packages/vue/src/components/accordion/use-accordion.ts

@@ -3,7 +3,7 @@ import { type PropTypes, normalizeProps, useMachine } from '@zag-js/vue'
 import { type ComputedRef, type MaybeRef, computed, toValue, useId } from 'vue'
 import { DEFAULT_ENVIRONMENT, DEFAULT_LOCALE, useEnvironmentContext, useLocaleContext } from '../../providers'
 import type { EmitFn, Optional } from '../../types'
-import { cleanProps } from '../../utils'
+import { cleanProps } from '../../utils/clean-props'
 import type { RootEmits } from './accordion.types'
 
 export interface UseAccordionProps extends Optional<Omit<accordion.Props, 'dir' | 'getRootNode'>, 'id'> {

packages/vue/src/components/angle-slider/angle-slider-control.vue

@@ -14,7 +14,7 @@ export interface AngleSliderControlProps
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useAngleSliderContext } from './use-angle-slider-context'
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 
 defineProps<AngleSliderControlProps>()
 

packages/vue/src/components/angle-slider/angle-slider-hidden-input.vue

@@ -14,7 +14,7 @@ export interface AngleSliderHiddenInputProps
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useAngleSliderContext } from './use-angle-slider-context'
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 
 defineProps<AngleSliderHiddenInputProps>()
 

packages/vue/src/components/angle-slider/angle-slider-label.vue

@@ -12,7 +12,7 @@ export interface AngleSliderLabelProps
 </script>
 
 <script setup lang="ts">
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 import { ark } from '../factory'
 import { useAngleSliderContext } from './use-angle-slider-context'
 

packages/vue/src/components/angle-slider/angle-slider-marker-group.vue

@@ -14,7 +14,7 @@ export interface AngleSliderMarkerGroupProps
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useAngleSliderContext } from './use-angle-slider-context'
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 
 defineProps<AngleSliderMarkerGroupProps>()
 const angleSlider = useAngleSliderContext()

packages/vue/src/components/angle-slider/angle-slider-marker.vue

@@ -15,7 +15,7 @@ export interface AngleSliderMarkerProps
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useAngleSliderContext } from './use-angle-slider-context'
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 
 const props = defineProps<AngleSliderMarkerProps>()
 

packages/vue/src/components/angle-slider/angle-slider-root-provider.vue

@@ -18,7 +18,7 @@ export interface AngleSliderRootProviderProps
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 import { ark } from '../factory'
 import { AngleSliderProvider } from './use-angle-slider-context'
 

packages/vue/src/components/angle-slider/angle-slider-root.vue

@@ -18,7 +18,7 @@ export interface AngleSliderRootEmits extends RootEmits {}
 import { ark } from '../factory'
 import { useAngleSlider } from './use-angle-slider'
 import { AngleSliderProvider } from './use-angle-slider-context'
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 
 const props = withDefaults(defineProps<AngleSliderRootProps>(), {
   disabled: undefined,

packages/vue/src/components/angle-slider/angle-slider-thumb.vue

@@ -14,7 +14,7 @@ export interface AngleSliderThumbProps
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useAngleSliderContext } from './use-angle-slider-context'
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 
 defineProps<AngleSliderThumbProps>()
 

packages/vue/src/components/angle-slider/angle-slider-value-text.vue

@@ -14,7 +14,7 @@ export interface AngleSliderValueTextProps
 <script setup lang="ts">
 import { ark } from '../factory'
 import { useAngleSliderContext } from './use-angle-slider-context'
-import { useForwardExpose } from '../../utils'
+import { useForwardExpose } from '../../utils/use-forward-expose'
 
 defineProps<AngleSliderValueTextProps>()
 const angleSlider = useAngleSliderContext()

packages/vue/src/components/angle-slider/use-angle-slider-context.ts

@@ -1,4 +1,4 @@
-import { createContext } from '../../utils'
+import { createContext } from '../../utils/create-context'
 import type { UseAngleSliderReturn } from './use-angle-slider'
 
 export interface UseAngleSliderContext extends UseAngleSliderReturn {}

packages/vue/src/components/angle-slider/use-angle-slider.ts

@@ -3,7 +3,7 @@ import { type PropTypes, normalizeProps, useMachine } from '@zag-js/vue'
 import { type ComputedRef, type EmitFn, type MaybeRef, computed, toValue, useId } from 'vue'
 import { DEFAULT_ENVIRONMENT, DEFAULT_LOCALE, useEnvironmentContext, useLocaleContext } from '../../providers'
 import type { Optional } from '../../types'
-import { cleanProps } from '../../utils'
+import { cleanProps } from '../../utils/clean-props'
 import type { RootEmits } from './angle-slider.types'
 
 export interface UseAngleSliderProps extends Optional<angleSlider.Props, 'id'> {