[pull] main from chakra-ui:main

integrations/mcp/CHANGELOG.md

@@ -1,5 +1,13 @@
 ## [Unreleased]
 
+## [1.1.1] - 2025-09-01
+
+### Fixed
+
+Don't ship the `src` directory to the package.
+
+## [1.1.0] - 2025-09-01
+
 ### Added
 
 - Initial release of the official MCP server for Ark UI

integrations/mcp/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/mcp",
   "description": "The official MCP server for Ark UI",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "main": "dist/stdio.js",
   "type": "module",
   "license": "MIT",
@@ -27,6 +27,9 @@
     "chatgpt",
     "mcp"
   ],
+  "files": [
+    "dist"
+  ],
   "sideEffects": false,
   "publishConfig": {
     "access": "public"

packages/react/CHANGELOG.md

@@ -2,7 +2,17 @@
 
 ### Added
 
-- **Field**: Add `data-required` attribute to Field.Label part
+- **Field**: Add `data-required` attribute to `Field.Label`
+- **Select, Combobox, Listbox, TreeView**: Export `RootComponent` and `RootProviderComponent` types which are useful
+  when building compositions that wrap the `Root` and `RootProvider` components and you still want type-safety for the
+  collection.
+
+  ```tsx
+  import { Select } from '@ark-ui/react/select'
+  import { styled } from 'styling-lib'
+
+  const Root = styled(Select.Root) as Select.RootComponent<{}>
+  ```
 
 ## [5.22.0] - 2025-08-28
 

packages/react/src/components/combobox/combobox-root-provider.tsx

@@ -1,5 +1,6 @@
 import { mergeProps } from '@zag-js/react'
 import { type JSX, type Ref, type RefAttributes, forwardRef } from 'react'
+import type { Assign } from '../../types'
 import { createSplitProps } from '../../utils/create-split-props'
 import type { CollectionItem } from '../collection'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
@@ -33,8 +34,8 @@ const ComboboxImpl = <T extends CollectionItem>(props: ComboboxRootProviderProps
   )
 }
 
-export type ComboboxComponent = <T extends CollectionItem>(
-  props: ComboboxRootProviderProps<T> & RefAttributes<HTMLDivElement>,
+export type ComboboxRootProviderComponent<P = {}> = <T extends CollectionItem>(
+  props: Assign<ComboboxRootProviderProps<T>, P> & RefAttributes<HTMLDivElement>,
 ) => JSX.Element
 
-export const ComboboxRootProvider = forwardRef(ComboboxImpl) as ComboboxComponent
+export const ComboboxRootProvider = forwardRef(ComboboxImpl) as ComboboxRootProviderComponent

packages/react/src/components/combobox/combobox-root.tsx

@@ -74,8 +74,8 @@ const ComboboxImpl = <T extends CollectionItem>(props: ComboboxRootProps<T>, ref
   )
 }
 
-export type ComboboxComponent = <T extends CollectionItem>(
-  props: ComboboxRootProps<T> & RefAttributes<HTMLDivElement>,
+export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(
+  props: Assign<ComboboxRootProps<T>, P> & RefAttributes<HTMLDivElement>,
 ) => JSX.Element
 
-export const ComboboxRoot = forwardRef(ComboboxImpl) as ComboboxComponent
+export const ComboboxRoot = forwardRef(ComboboxImpl) as ComboboxRootComponent

packages/react/src/components/combobox/combobox.ts

@@ -80,11 +80,13 @@ export {
   ComboboxRoot as Root,
   type ComboboxRootBaseProps as RootBaseProps,
   type ComboboxRootProps as RootProps,
+  type ComboboxRootComponent as RootComponent,
 } from './combobox-root'
 export {
   ComboboxRootProvider as RootProvider,
   type ComboboxRootProviderBaseProps as RootProviderBaseProps,
   type ComboboxRootProviderProps as RootProviderProps,
+  type ComboboxRootProviderComponent as RootProviderComponent,
 } from './combobox-root-provider'
 export {
   ComboboxTrigger as Trigger,

packages/react/src/components/combobox/index.ts

@@ -43,11 +43,17 @@ export {
   type ComboboxPositionerBaseProps,
   type ComboboxPositionerProps,
 } from './combobox-positioner'
-export { ComboboxRoot, type ComboboxRootBaseProps, type ComboboxRootProps } from './combobox-root'
+export {
+  ComboboxRoot,
+  type ComboboxRootBaseProps,
+  type ComboboxRootProps,
+  type ComboboxRootComponent,
+} from './combobox-root'
 export {
   ComboboxRootProvider,
   type ComboboxRootProviderBaseProps,
   type ComboboxRootProviderProps,
+  type ComboboxRootProviderComponent,
 } from './combobox-root-provider'
 export { ComboboxTrigger, type ComboboxTriggerBaseProps, type ComboboxTriggerProps } from './combobox-trigger'
 export { comboboxAnatomy } from './combobox.anatomy'

packages/react/src/components/listbox/index.ts

@@ -25,11 +25,17 @@ export {
 } from './listbox-item-indicator'
 export { ListboxItemText, type ListboxItemTextBaseProps, type ListboxItemTextProps } from './listbox-item-text'
 export { ListboxLabel, type ListboxLabelBaseProps, type ListboxLabelProps } from './listbox-label'
-export { ListboxRoot, type ListboxRootBaseProps, type ListboxRootProps } from './listbox-root'
+export {
+  ListboxRoot,
+  type ListboxRootBaseProps,
+  type ListboxRootProps,
+  type ListboxRootComponent,
+} from './listbox-root'
 export {
   ListboxRootProvider,
   type ListboxRootProviderBaseProps,
   type ListboxRootProviderProps,
+  type ListboxRootProviderComponent,
 } from './listbox-root-provider'
 export { ListboxValueText, type ListboxValueTextBaseProps, type ListboxValueTextProps } from './listbox-value-text'
 export { listboxAnatomy } from './listbox.anatomy'

packages/react/src/components/listbox/listbox-root-provider.tsx

@@ -1,5 +1,6 @@
 import { mergeProps } from '@zag-js/react'
 import { type JSX, forwardRef } from 'react'
+import type { Assign } from '../../types'
 import { createSplitProps } from '../../utils/create-split-props'
 import type { CollectionItem } from '../collection'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
@@ -27,8 +28,8 @@ const ListboxImpl = <T extends CollectionItem>(props: ListboxRootProviderProps<T
   )
 }
 
-export type ListboxComponent = <T extends CollectionItem>(
-  props: ListboxRootProviderProps<T> & React.RefAttributes<HTMLDivElement>,
+export type ListboxRootProviderComponent<P = {}> = <T extends CollectionItem>(
+  props: Assign<ListboxRootProviderProps<T>, P> & React.RefAttributes<HTMLDivElement>,
 ) => JSX.Element
 
-export const ListboxRootProvider = forwardRef(ListboxImpl) as ListboxComponent
+export const ListboxRootProvider = forwardRef(ListboxImpl) as ListboxRootProviderComponent

packages/react/src/components/listbox/listbox-root.tsx

@@ -42,8 +42,8 @@ const ListboxImpl = <T extends CollectionItem>(props: ListboxRootProps<T>, ref:
   )
 }
 
-export type ListboxComponent = <T extends CollectionItem>(
-  props: ListboxRootProps<T> & React.RefAttributes<HTMLDivElement>,
+export type ListboxRootComponent<P = {}> = <T extends CollectionItem>(
+  props: Assign<ListboxRootProps<T>, P> & React.RefAttributes<HTMLDivElement>,
 ) => JSX.Element
 
-export const ListboxRoot = forwardRef(ListboxImpl) as ListboxComponent
+export const ListboxRoot = forwardRef(ListboxImpl) as ListboxRootComponent

packages/react/src/components/listbox/listbox.ts

@@ -59,11 +59,13 @@ export {
   ListboxRoot as Root,
   type ListboxRootBaseProps as RootBaseProps,
   type ListboxRootProps as RootProps,
+  type ListboxRootComponent as RootComponent,
 } from './listbox-root'
 export {
   ListboxRootProvider as RootProvider,
   type ListboxRootProviderBaseProps as RootProviderBaseProps,
   type ListboxRootProviderProps as RootProviderProps,
+  type ListboxRootProviderComponent as RootProviderComponent,
 } from './listbox-root-provider'
 export {
   ListboxValueText as ValueText,

packages/react/src/components/select/index.ts

@@ -41,11 +41,12 @@ export { SelectItemText, type SelectItemTextBaseProps, type SelectItemTextProps
 export { SelectLabel, type SelectLabelBaseProps, type SelectLabelProps } from './select-label'
 export { SelectList, type SelectListBaseProps, type SelectListProps } from './select-list'
 export { SelectPositioner, type SelectPositionerBaseProps, type SelectPositionerProps } from './select-positioner'
-export { SelectRoot, type SelectRootBaseProps, type SelectRootProps } from './select-root'
+export { SelectRoot, type SelectRootBaseProps, type SelectRootProps, type SelectRootComponent } from './select-root'
 export {
   SelectRootProvider,
   type SelectRootProviderBaseProps,
   type SelectRootProviderProps,
+  type SelectRootProviderComponent,
 } from './select-root-provider'
 export { SelectTrigger, type SelectTriggerBaseProps, type SelectTriggerProps } from './select-trigger'
 export { SelectValueText, type SelectValueTextBaseProps, type SelectValueTextProps } from './select-value-text'

packages/react/src/components/select/select-root-provider.tsx

@@ -1,5 +1,6 @@
 import { mergeProps } from '@zag-js/react'
 import { type JSX, forwardRef } from 'react'
+import type { Assign } from '../../types'
 import { createSplitProps } from '../../utils/create-split-props'
 import type { CollectionItem } from '../collection'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
@@ -33,8 +34,8 @@ const SelectImpl = <T extends CollectionItem>(props: SelectRootProviderProps<T>,
   )
 }
 
-export type SelectComponent = <T extends CollectionItem>(
-  props: SelectRootProviderProps<T> & React.RefAttributes<HTMLDivElement>,
+export type SelectRootProviderComponent<P = {}> = <T extends CollectionItem>(
+  props: Assign<SelectRootProviderProps<T>, P> & React.RefAttributes<HTMLDivElement>,
 ) => JSX.Element
 
-export const SelectRootProvider = forwardRef(SelectImpl) as SelectComponent
+export const SelectRootProvider = forwardRef(SelectImpl) as SelectRootProviderComponent

packages/react/src/components/select/select-root.tsx

@@ -60,8 +60,8 @@ const SelectImpl = <T extends CollectionItem>(props: SelectRootProps<T>, ref: Re
   )
 }
 
-export type SelectComponent = <T extends CollectionItem>(
-  props: SelectRootProps<T> & React.RefAttributes<HTMLDivElement>,
+export type SelectRootComponent<P = {}> = <T extends CollectionItem>(
+  props: Assign<SelectRootProps<T>, P> & React.RefAttributes<HTMLDivElement>,
 ) => JSX.Element
 
-export const SelectRoot = forwardRef(SelectImpl) as SelectComponent
+export const SelectRoot = forwardRef(SelectImpl) as SelectRootComponent

packages/react/src/components/select/select.ts

@@ -74,11 +74,13 @@ export {
   SelectRoot as Root,
   type SelectRootBaseProps as RootBaseProps,
   type SelectRootProps as RootProps,
+  type SelectRootComponent as RootComponent,
 } from './select-root'
 export {
   SelectRootProvider as RootProvider,
   type SelectRootProviderBaseProps as RootProviderBaseProps,
   type SelectRootProviderProps as RootProviderProps,
+  type SelectRootProviderComponent as RootProviderComponent,
 } from './select-root-provider'
 export {
   SelectTrigger as Trigger,

packages/react/src/components/tree-view/index.ts

@@ -54,10 +54,16 @@ export {
   type TreeViewNodeProviderBaseProps,
   type TreeViewNodeProviderProps,
 } from './tree-view-node-provider'
-export { TreeViewRoot, type TreeViewRootBaseProps, type TreeViewRootProps } from './tree-view-root'
+export {
+  TreeViewRoot,
+  type TreeViewRootBaseProps,
+  type TreeViewRootComponent,
+  type TreeViewRootProps,
+} from './tree-view-root'
 export {
   TreeViewRootProvider,
   type TreeViewRootProviderBaseProps,
+  type TreeViewRootProviderComponent,
   type TreeViewRootProviderProps,
 } from './tree-view-root-provider'
 export { TreeViewTree, type TreeViewTreeBaseProps, type TreeViewTreeProps } from './tree-view-tree'

packages/react/src/components/tree-view/tree-view-root-provider.tsx

@@ -1,5 +1,6 @@
 import { mergeProps } from '@zag-js/react'
 import { type JSX, forwardRef } from 'react'
+import type { Assign } from '../../types'
 import { createSplitProps } from '../../utils/create-split-props'
 import {
   type RenderStrategyProps,
@@ -36,8 +37,8 @@ const TreeViewImpl = <T extends TreeNode>(props: TreeViewRootProviderProps<T>, r
   )
 }
 
-export type TreeViewComponent = <T extends TreeNode>(
-  props: TreeViewRootProviderProps<T> & React.RefAttributes<HTMLDivElement>,
+export type TreeViewRootProviderComponent<P = {}> = <T extends TreeNode>(
+  props: Assign<TreeViewRootProviderProps<T>, P> & React.RefAttributes<HTMLDivElement>,
 ) => JSX.Element
 
-export const TreeViewRootProvider = forwardRef(TreeViewImpl) as TreeViewComponent
+export const TreeViewRootProvider = forwardRef(TreeViewImpl) as TreeViewRootProviderComponent

packages/react/src/components/tree-view/tree-view-root.tsx

@@ -1,5 +1,6 @@
 import { mergeProps } from '@zag-js/react'
 import { type JSX, forwardRef } from 'react'
+import type { Assign } from '../../types'
 import { createSplitProps } from '../../utils/create-split-props'
 import {
   type RenderStrategyProps,
@@ -55,8 +56,8 @@ const TreeViewImpl = <T extends TreeNode>(props: TreeViewRootProps<T>, ref: Reac
   )
 }
 
-export type TreeViewComponent = <T extends TreeNode>(
-  props: TreeViewRootProps<T> & React.RefAttributes<HTMLDivElement>,
+export type TreeViewRootComponent<P = {}> = <T extends TreeNode>(
+  props: Assign<TreeViewRootProps<T>, P> & React.RefAttributes<HTMLDivElement>,
 ) => JSX.Element
 
-export const TreeViewRoot = forwardRef(TreeViewImpl) as TreeViewComponent
+export const TreeViewRoot = forwardRef(TreeViewImpl) as TreeViewRootComponent

packages/react/src/components/tree-view/tree-view.ts

@@ -75,11 +75,13 @@ export {
 export {
   TreeViewRoot as Root,
   type TreeViewRootBaseProps as RootBaseProps,
+  type TreeViewRootComponent as RootComponent,
   type TreeViewRootProps as RootProps,
 } from './tree-view-root'
 export {
   TreeViewRootProvider as RootProvider,
   type TreeViewRootProviderBaseProps as RootProviderBaseProps,
+  type TreeViewRootProviderComponent as RootProviderComponent,
   type TreeViewRootProviderProps as RootProviderProps,
 } from './tree-view-root-provider'
 export {

packages/solid/CHANGELOG.md

@@ -2,7 +2,17 @@
 
 ### Added
 
-- **Field**: Add `data-required` attribute to Field.Label part
+- **Field**: Add `data-required` attribute to `Field.Label`
+- **Select, Combobox, Listbox, TreeView**: Export `RootComponent` and `RootProviderComponent` types which are useful
+  when building compositions that wrap the `Root` and `RootProvider` components and you still want type-safety for the
+  collection.
+
+  ```tsx
+  import { Select } from '@ark-ui/solid/select'
+  import { styled } from 'styling-lib'
+
+  const Root = styled(Select.Root) as Select.RootComponent<{}>
+  ```
 
 ## [5.22.0] - 2025-08-28
 

packages/solid/src/components/combobox/combobox-root-provider.tsx

@@ -1,5 +1,6 @@
 import { mergeProps } from '@zag-js/solid'
-import type { CollectionItem } from '../../types'
+import type { JSX } from 'solid-js/jsx-runtime'
+import type { Assign, CollectionItem } from '../../types'
 import { createSplitProps } from '../../utils/create-split-props'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { PresenceProvider, type UsePresenceProps, splitPresenceProps, usePresence } from '../presence'
@@ -32,3 +33,7 @@ export const ComboboxRootProvider = <T extends CollectionItem>(props: ComboboxRo
     </ComboboxProvider>
   )
 }
+
+export type ComboboxRootProviderComponent<P = {}> = <T extends CollectionItem>(
+  props: Assign<ComboboxRootProviderProps<T>, P>,
+) => JSX.Element

packages/solid/src/components/combobox/combobox-root.tsx

@@ -1,5 +1,6 @@
 import { mergeProps } from '@zag-js/solid'
-import type { CollectionItem } from '../../types'
+import type { JSX } from 'solid-js/jsx-runtime'
+import type { Assign, CollectionItem } from '../../types'
 import { createSplitProps } from '../../utils/create-split-props'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
 import { PresenceProvider, type UsePresenceProps, splitPresenceProps, usePresence } from '../presence'
@@ -74,3 +75,7 @@ export const ComboboxRoot = <T extends CollectionItem>(props: ComboboxRootProps<
     </ComboboxProvider>
   )
 }
+
+export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(
+  props: Assign<ComboboxRootProps<T>, P>,
+) => JSX.Element

packages/solid/src/components/combobox/combobox.ts

@@ -80,11 +80,13 @@ export {
   ComboboxRoot as Root,
   type ComboboxRootBaseProps as RootBaseProps,
   type ComboboxRootProps as RootProps,
+  type ComboboxRootComponent as RootComponent,
 } from './combobox-root'
 export {
   ComboboxRootProvider as RootProvider,
   type ComboboxRootProviderBaseProps as RootProviderBaseProps,
   type ComboboxRootProviderProps as RootProviderProps,
+  type ComboboxRootProviderComponent as RootProviderComponent,
 } from './combobox-root-provider'
 export {
   ComboboxTrigger as Trigger,