[pull] main from chakra-ui:main

packages/react/CHANGELOG.md

@@ -12,11 +12,19 @@
 
 ```ts
 const service = useMachine(pagination.machine, {
-  type: "link",
+  type: 'link',
   getPageUrl: ({ page, pageSize }) => `/products?page=${page}&size=${pageSize}`,
 })
 ```
 
+- **Select**: Add `SelectRootComponentProps` type export for better component type composition.
+
+- **Listbox**: Add `ListboxRootComponentProps` type export for better component type composition.
+
+- **Combobox**: Add `ComboboxRootComponentProps` type export for better component type composition.
+
+- **TreeView**: Add `TreeViewRootComponentProps` type export for better component type composition.
+
 ### Fixed
 
 - **Scroll Area**: Fix RTL horizontal scrollbar positioning on Safari
@@ -90,6 +98,15 @@ import { createContext } from '@ark-ui/react/utils'
   - `openDelay`: from `1000ms` to `400ms`
   - `closeDelay`: from `500ms` to `150ms`
 
+### Removed
+
+- **TimePicker**: The TimePicker component has been removed from this release. This component was never part of the
+  public API and was considered experimental. It had significant bugs and usability issues across all frameworks and
+  locales, making it unsuitable for production use.
+
+  **Migration**: We recommend building a custom time picker using the Select component for simple use cases, or
+  implementing a time grid pattern for more complex scenarios.
+
 ### Fixed
 
 - **Editable**: Allow text selection in editable preview when `autoResize` is enabled

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

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

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

@@ -2,8 +2,8 @@ export type {
   HighlightChangeDetails,
   InputValueChangeDetails,
   OpenChangeDetails,
-  ValueChangeDetails,
   SelectionDetails,
+  ValueChangeDetails,
 } from '@zag-js/combobox'
 export type { CollectionItem } from '../collection'
 export {
@@ -16,17 +16,17 @@ export {
   type ComboboxContentBaseProps as ContentBaseProps,
   type ComboboxContentProps as ContentProps,
 } from './combobox-content'
-export {
-  ComboboxEmpty as Empty,
-  type ComboboxEmptyBaseProps as EmptyBaseProps,
-  type ComboboxEmptyProps as EmptyProps,
-} from './combobox-empty'
 export { ComboboxContext as Context, type ComboboxContextProps as ContextProps } from './combobox-context'
 export {
   ComboboxControl as Control,
   type ComboboxControlBaseProps as ControlBaseProps,
   type ComboboxControlProps as ControlProps,
 } from './combobox-control'
+export {
+  ComboboxEmpty as Empty,
+  type ComboboxEmptyBaseProps as EmptyBaseProps,
+  type ComboboxEmptyProps as EmptyProps,
+} from './combobox-empty'
 export {
   ComboboxInput as Input,
   type ComboboxInputBaseProps as InputBaseProps,
@@ -79,14 +79,15 @@ export {
 export {
   ComboboxRoot as Root,
   type ComboboxRootBaseProps as RootBaseProps,
-  type ComboboxRootProps as RootProps,
   type ComboboxRootComponent as RootComponent,
+  type ComboboxRootComponentProps as RootComponentProps,
+  type ComboboxRootProps as RootProps,
 } from './combobox-root'
 export {
   ComboboxRootProvider as RootProvider,
   type ComboboxRootProviderBaseProps as RootProviderBaseProps,
-  type ComboboxRootProviderProps as RootProviderProps,
   type ComboboxRootProviderComponent as RootProviderComponent,
+  type ComboboxRootProviderProps as RootProviderProps,
 } from './combobox-root-provider'
 export {
   ComboboxTrigger as Trigger,

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

@@ -48,6 +48,7 @@ export {
   type ComboboxRootBaseProps,
   type ComboboxRootProps,
   type ComboboxRootComponent,
+  type ComboboxRootComponentProps,
 } from './combobox-root'
 export {
   ComboboxRootProvider,

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

@@ -30,6 +30,7 @@ export {
   type ListboxRootBaseProps,
   type ListboxRootProps,
   type ListboxRootComponent,
+  type ListboxRootComponentProps,
 } from './listbox-root'
 export {
   ListboxRootProvider,

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

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

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

@@ -60,6 +60,7 @@ export {
   type ListboxRootBaseProps as RootBaseProps,
   type ListboxRootProps as RootProps,
   type ListboxRootComponent as RootComponent,
+  type ListboxRootComponentProps as RootComponentProps,
 } from './listbox-root'
 export {
   ListboxRootProvider as RootProvider,

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

@@ -41,7 +41,13 @@ 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, type SelectRootComponent } from './select-root'
+export {
+  SelectRoot,
+  type SelectRootBaseProps,
+  type SelectRootProps,
+  type SelectRootComponent,
+  type SelectRootComponentProps,
+} from './select-root'
 export {
   SelectRootProvider,
   type SelectRootProviderBaseProps,

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

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

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

@@ -75,6 +75,7 @@ export {
   type SelectRootBaseProps as RootBaseProps,
   type SelectRootProps as RootProps,
   type SelectRootComponent as RootComponent,
+  type SelectRootComponentProps as RootComponentProps,
 } from './select-root'
 export {
   SelectRootProvider as RootProvider,

packages/react/src/components/tree-view/examples/links.tsx

@@ -6,7 +6,9 @@ export const Links = () => {
     <TreeView.Root collection={collection}>
       <TreeView.Label>Docs</TreeView.Label>
       <TreeView.Tree>
-        {collection.rootNode.children?.map((node, index) => <TreeNode key={node.id} node={node} indexPath={[index]} />)}
+        {collection.rootNode.children?.map((node, index) => (
+          <TreeNode key={node.id} node={node} indexPath={[index]} />
+        ))}
       </TreeView.Tree>
     </TreeView.Root>
   )

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

@@ -58,6 +58,7 @@ export {
   TreeViewRoot,
   type TreeViewRootBaseProps,
   type TreeViewRootComponent,
+  type TreeViewRootComponentProps,
   type TreeViewRootProps,
 } from './tree-view-root'
 export {

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

@@ -56,8 +56,9 @@ const TreeViewImpl = <T extends TreeNode>(props: TreeViewRootProps<T>, ref: Reac
   )
 }
 
-export type TreeViewRootComponent<P = {}> = <T extends TreeNode>(
-  props: Assign<TreeViewRootProps<T>, P> & React.RefAttributes<HTMLDivElement>,
-) => JSX.Element
+export type TreeViewRootComponentProps<T extends TreeNode = TreeNode, P = {}> = Assign<TreeViewRootProps<T>, P> &
+  React.RefAttributes<HTMLDivElement>
+
+export type TreeViewRootComponent<P = {}> = <T extends TreeNode>(props: TreeViewRootComponentProps<T, P>) => JSX.Element
 
 export const TreeViewRoot = forwardRef(TreeViewImpl) as TreeViewRootComponent

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

@@ -76,6 +76,7 @@ export {
   TreeViewRoot as Root,
   type TreeViewRootBaseProps as RootBaseProps,
   type TreeViewRootComponent as RootComponent,
+  type TreeViewRootComponentProps as RootComponentProps,
   type TreeViewRootProps as RootProps,
 } from './tree-view-root'
 export {

packages/solid/CHANGELOG.md

@@ -12,11 +12,19 @@
 
 ```ts
 const service = useMachine(pagination.machine, {
-  type: "link",
+  type: 'link',
   getPageUrl: ({ page, pageSize }) => `/products?page=${page}&size=${pageSize}`,
 })
 ```
 
+- **Select**: Add `SelectRootComponentProps` type export for better component type composition.
+
+- **Listbox**: Add `ListboxRootComponentProps` type export for better component type composition.
+
+- **Combobox**: Add `ComboboxRootComponentProps` type export for better component type composition.
+
+- **TreeView**: Add `TreeViewRootComponentProps` type export for better component type composition.
+
 ### Fixed
 
 - **Listbox**: Fixed type signature of `useListbox` to accept `MaybeAccessor<UseListboxProps>` instead of just
@@ -71,6 +79,15 @@ import { createContext } from '@ark-ui/solid/utils'
 
 ## [5.24.0] - 2025-09-14
 
+### Removed
+
+- **TimePicker**: The TimePicker component has been removed from this release. This component was never part of the
+  public API and was considered experimental. It had significant bugs and usability issues across all frameworks and
+  locales, making it unsuitable for production use.
+
+  **Migration**: We recommend building a custom time picker using the Select component for simple use cases, or
+  implementing a time grid pattern for more complex scenarios.
+
 ### Added
 
 - **Combobox**: Add `alwaysSubmitOnEnter` prop to allow bypassing the default two-step behavior (Enter to close

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

@@ -77,6 +77,11 @@ export const ComboboxRoot = <T extends CollectionItem>(props: ComboboxRootProps<
   )
 }
 
+export type ComboboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<
+  ComboboxRootProps<T>,
+  P
+>
+
 export type ComboboxRootComponent<P = {}> = <T extends CollectionItem>(
-  props: Assign<ComboboxRootProps<T>, P>,
+  props: ComboboxRootComponentProps<T, P>,
 ) => JSX.Element

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

@@ -81,6 +81,7 @@ export {
   type ComboboxRootBaseProps as RootBaseProps,
   type ComboboxRootProps as RootProps,
   type ComboboxRootComponent as RootComponent,
+  type ComboboxRootComponentProps as RootComponentProps,
 } from './combobox-root'
 export {
   ComboboxRootProvider as RootProvider,

packages/solid/src/components/combobox/index.tsx

@@ -48,6 +48,7 @@ export {
   type ComboboxRootBaseProps,
   type ComboboxRootProps,
   type ComboboxRootComponent,
+  type ComboboxRootComponentProps,
 } from './combobox-root'
 export {
   ComboboxRootProvider,

packages/solid/src/components/listbox/index.tsx

@@ -30,6 +30,7 @@ export {
   type ListboxRootBaseProps,
   type ListboxRootProps,
   type ListboxRootComponent,
+  type ListboxRootComponentProps,
 } from './listbox-root'
 export {
   ListboxRootProvider,

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

@@ -42,4 +42,9 @@ export const ListboxRoot = <T extends CollectionItem>(props: ListboxRootProps<T>
   )
 }
 
-export type ListboxRootComponent<P = {}> = <T extends CollectionItem>(props: Assign<ListboxRootProps<T>, P>) => any
+export type ListboxRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<
+  ListboxRootProps<T>,
+  P
+>
+
+export type ListboxRootComponent<P = {}> = <T extends CollectionItem>(props: ListboxRootComponentProps<T, P>) => any

packages/solid/src/components/listbox/listbox.ts

@@ -60,6 +60,7 @@ export {
   type ListboxRootBaseProps as RootBaseProps,
   type ListboxRootProps as RootProps,
   type ListboxRootComponent as RootComponent,
+  type ListboxRootComponentProps as RootComponentProps,
 } from './listbox-root'
 export {
   ListboxRootProvider as RootProvider,

packages/solid/src/components/select/index.tsx

@@ -41,7 +41,13 @@ 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, type SelectRootComponent } from './select-root'
+export {
+  SelectRoot,
+  type SelectRootBaseProps,
+  type SelectRootProps,
+  type SelectRootComponent,
+  type SelectRootComponentProps,
+} from './select-root'
 export {
   SelectRootProvider,
   type SelectRootProviderBaseProps,

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

@@ -1,5 +1,5 @@
 import { mergeProps } from '@zag-js/solid'
-import type { JSX } from 'solid-js/jsx-runtime'
+import type { JSX } from 'solid-js'
 import type { Assign, CollectionItem } from '../../types'
 import { createSplitProps } from '../../utils/create-split-props'
 import { type HTMLProps, type PolymorphicProps, ark } from '../factory'
@@ -60,6 +60,8 @@ export const SelectRoot = <T extends CollectionItem>(props: SelectRootProps<T>)
   )
 }
 
+export type SelectRootComponentProps<T extends CollectionItem = CollectionItem, P = {}> = Assign<SelectRootProps<T>, P>
+
 export type SelectRootComponent<P = {}> = <T extends CollectionItem>(
-  props: Assign<SelectRootProps<T>, P>,
+  props: SelectRootComponentProps<T, P>,
 ) => JSX.Element

packages/solid/src/components/select/select.ts

@@ -75,6 +75,7 @@ export {
   type SelectRootBaseProps as RootBaseProps,
   type SelectRootProps as RootProps,
   type SelectRootComponent as RootComponent,
+  type SelectRootComponentProps as RootComponentProps,
 } from './select-root'
 export {
   SelectRootProvider as RootProvider,

packages/solid/src/components/tree-view/index.tsx

@@ -68,6 +68,7 @@ export {
   TreeViewRoot,
   type TreeViewRootBaseProps,
   type TreeViewRootComponent,
+  type TreeViewRootComponentProps,
   type TreeViewRootProps,
 } from './tree-view-root'
 export {

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

@@ -51,4 +51,6 @@ export const TreeViewRoot = <T extends TreeNode>(props: TreeViewRootProps<T>) =>
   )
 }
 
-export type TreeViewRootComponent<P = {}> = <T extends TreeNode>(props: Assign<TreeViewRootProps<T>, P>) => JSX.Element
+export type TreeViewRootComponentProps<T extends TreeNode = TreeNode, P = {}> = Assign<TreeViewRootProps<T>, P>
+
+export type TreeViewRootComponent<P = {}> = <T extends TreeNode>(props: TreeViewRootComponentProps<T, P>) => JSX.Element

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

@@ -86,6 +86,7 @@ export {
   TreeViewRoot as Root,
   type TreeViewRootBaseProps as RootBaseProps,
   type TreeViewRootComponent as RootComponent,
+  type TreeViewRootComponentProps as RootComponentProps,
   type TreeViewRootProps as RootProps,
 } from './tree-view-root'
 export {