@ark-ui/solid 1.3.0 → 2.0.0

package/source/tooltip/{tooltip.jsx → tooltip-root.jsx}

@@ -4,7 +4,7 @@ import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence'
 import { runIfFn } from '../run-if-fn';
 import { TooltipProvider } from './tooltip-context';
 import { useTooltip } from './use-tooltip';
-export const Tooltip = (props) => {
+export const TooltipRoot = (props) => {
     const [presenceProps, tooltipProps] = splitPresenceProps(props);
     const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, [
         'aria-label',

package/source/tree-view/index.js

@@ -0,0 +1,26 @@
+import { TreeViewBranch } from './tree-view-branch';
+import { TreeViewBranchContent } from './tree-view-branch-content';
+import { TreeViewBranchControl } from './tree-view-branch-control';
+import { TreeViewBranchIndicator, } from './tree-view-branch-indicator';
+import { TreeViewBranchText } from './tree-view-branch-text';
+import { TreeViewBranchTrigger } from './tree-view-branch-trigger';
+import { useTreeViewContext } from './tree-view-context';
+import { TreeViewItem } from './tree-view-item';
+import { TreeViewItemText } from './tree-view-item-text';
+import { TreeViewLabel } from './tree-view-label';
+import { TreeViewRoot } from './tree-view-root';
+import { TreeViewTree } from './tree-view-tree';
+export const TreeView = {
+    Root: TreeViewRoot,
+    Label: TreeViewLabel,
+    Tree: TreeViewTree,
+    Branch: TreeViewBranch,
+    Item: TreeViewItem,
+    ItemText: TreeViewItemText,
+    BranchContent: TreeViewBranchContent,
+    BranchControl: TreeViewBranchControl,
+    BranchTrigger: TreeViewBranchTrigger,
+    BranchIndicator: TreeViewBranchIndicator,
+    BranchText: TreeViewBranchText,
+};
+export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemText, TreeViewLabel, TreeViewRoot, TreeViewTree, useTreeViewContext, };

package/source/tree-view/tree-view-branch-content.jsx

@@ -0,0 +1,15 @@
+// import type { BranchProps } from '@zag-js/tree-view'
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useTreeViewContext } from './tree-view-context';
+export const TreeViewBranchContent = (props) => {
+    const [branchProps, localProps] = createSplitProps()(props, [
+        'depth',
+        'id',
+        'disabled',
+    ]);
+    const api = useTreeViewContext();
+    const mergedProps = mergeProps(() => api().getBranchContentProps(branchProps), localProps);
+    return <ark.ul {...mergedProps}/>;
+};

package/source/tree-view/tree-view-branch-control.jsx

@@ -0,0 +1,15 @@
+// import type { BranchProps } from '@zag-js/tree-view'
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useTreeViewContext } from './tree-view-context';
+export const TreeViewBranchControl = (props) => {
+    const [branchProps, localProps] = createSplitProps()(props, [
+        'depth',
+        'id',
+        'disabled',
+    ]);
+    const api = useTreeViewContext();
+    const mergedProps = mergeProps(() => api().getBranchControlProps(branchProps), localProps);
+    return <ark.div {...mergedProps}/>;
+};

package/source/tree-view/tree-view-branch-indicator.jsx

@@ -0,0 +1,16 @@
+// import type { BranchProps } from '@zag-js/tree-view'
+import { treeViewAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useTreeViewContext } from './tree-view-context';
+export const TreeViewBranchIndicator = (props) => {
+    const [branchProps, localProps] = createSplitProps()(props, [
+        'depth',
+        'id',
+        'disabled',
+    ]);
+    const api = useTreeViewContext();
+    const mergedProps = mergeProps(() => api().getBranchProps(branchProps), treeViewAnatomy.build().branchIndicator.attrs, localProps);
+    return <ark.div {...mergedProps}/>;
+};

package/source/tree-view/tree-view-branch-text.jsx

@@ -0,0 +1,15 @@
+// import type { BranchProps } from '@zag-js/tree-view'
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useTreeViewContext } from './tree-view-context';
+export const TreeViewBranchText = (props) => {
+    const [branchProps, localProps] = createSplitProps()(props, [
+        'depth',
+        'id',
+        'disabled',
+    ]);
+    const api = useTreeViewContext();
+    const mergedProps = mergeProps(() => api().getBranchTextProps(branchProps), localProps);
+    return <ark.span {...mergedProps}/>;
+};

package/source/tree-view/tree-view-branch-trigger.jsx

@@ -0,0 +1,15 @@
+// import type { BranchProps } from '@zag-js/tree-view'
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useTreeViewContext } from './tree-view-context';
+export const TreeViewBranchTrigger = (props) => {
+    const [branchProps, localProps] = createSplitProps()(props, [
+        'depth',
+        'id',
+        'disabled',
+    ]);
+    const api = useTreeViewContext();
+    const mergedProps = mergeProps(() => api().getBranchTriggerProps(branchProps), localProps);
+    return <ark.button {...mergedProps}/>;
+};

package/source/tree-view/tree-view-branch.jsx

@@ -0,0 +1,17 @@
+// import type { BranchProps, BranchState } from '@zag-js/tree-view'
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useTreeViewContext } from './tree-view-context';
+export const TreeViewBranch = (props) => {
+    const [branchProps, localProps] = createSplitProps()(props, [
+        'depth',
+        'id',
+        'disabled',
+    ]);
+    const api = useTreeViewContext();
+    const mergedProps = mergeProps(() => api().getBranchProps(branchProps), localProps);
+    const getChildren = () => runIfFn(localProps.children, () => api().getBranchState(branchProps));
+    return <ark.li {...mergedProps}>{getChildren()}</ark.li>;
+};

package/source/tree-view/tree-view-context.js

@@ -0,0 +1,5 @@
+import { createContext } from '../create-context';
+export const [TreeViewProvider, useTreeViewContext] = createContext({
+    hookName: 'useTreeViewContext',
+    providerName: '<TreeViewProvider />',
+});

package/source/tree-view/tree-view-item-text.jsx

@@ -0,0 +1,12 @@
+// import type { ItemProps } from '@zag-js/tree-view'
+import { treeViewAnatomy } from '@ark-ui/anatomy';
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { useTreeViewContext } from './tree-view-context';
+export const TreeViewItemText = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+    const api = useTreeViewContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), treeViewAnatomy.build().itemText.attrs, localProps);
+    return <ark.span {...mergedProps}/>;
+};

package/source/tree-view/tree-view-item.jsx

@@ -0,0 +1,13 @@
+// import type { ItemProps, ItemState } from '@zag-js/tree-view'
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { useTreeViewContext } from './tree-view-context';
+export const TreeViewItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, ['depth', 'id', 'disabled']);
+    const api = useTreeViewContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+    const getChildren = () => runIfFn(localProps.children, () => api().getItemState(itemProps));
+    return <ark.li {...mergedProps}>{getChildren()}</ark.li>;
+};

package/source/tree-view/tree-view-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useTreeViewContext } from './tree-view-context';
+export const TreeViewLabel = (props) => {
+    const api = useTreeViewContext();
+    const mergedProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...mergedProps}/>;
+};

package/source/tree-view/tree-view-root.jsx

@@ -0,0 +1,27 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { TreeViewProvider } from './tree-view-context';
+import { useTreeView } from './use-tree-view';
+export const TreeViewRoot = (props) => {
+    const [useTreeViewProps, localProps] = createSplitProps()(props, [
+        'dir',
+        'expandedIds',
+        'focusedId',
+        'getRootNode',
+        'id',
+        'onExpandedChange',
+        'onFocusChange',
+        'onSelectionChange',
+        'openOnClick',
+        'selectedIds',
+        'selectionMode',
+    ]);
+    const api = useTreeView(useTreeViewProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<TreeViewProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </TreeViewProvider>);
+};

package/source/tree-view/tree-view-tree.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useTreeViewContext } from './tree-view-context';
+export const TreeViewTree = (props) => {
+    const api = useTreeViewContext();
+    const mergedProps = mergeProps(() => api().treeProps, props);
+    return <ark.ul {...mergedProps}/>;
+};

package/source/tree-view/use-tree-view.js

@@ -0,0 +1,10 @@
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import * as treeView from '@zag-js/tree-view';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useTreeView = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(treeView.machine(context), { context });
+    return createMemo(() => treeView.connect(state, send, normalizeProps));
+};

package/types/accordion/accordion-item-content.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface AccordionItemContentProps extends HTMLArkProps<'div'> {
 }
-export declare const AccordionItemContent: (props: AccordionItemContentProps) => import("solid-js").JSX.Element;
+export declare const AccordionItemContent: ArkComponent<'div'>;

package/types/accordion/accordion-item-indicator.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface AccordionItemIndicatorProps extends HTMLArkProps<'div'> {
 }
-export declare const AccordionItemIndicator: (props: AccordionItemIndicatorProps) => import("solid-js").JSX.Element;
+export declare const AccordionItemIndicator: ArkComponent<'div'>;

package/types/accordion/accordion-item-trigger.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface AccordionItemTriggerProps extends HTMLArkProps<'button'> {
 }
-export declare const AccordionItemTrigger: (props: AccordionItemTriggerProps) => import("solid-js").JSX.Element;
+export declare const AccordionItemTrigger: ArkComponent<'button'>;

package/types/accordion/accordion-item.d.ts

@@ -1,9 +1,11 @@
-import { type ItemProps, type ItemState } from '@zag-js/accordion';
+import type { ItemProps, ItemState } from '@zag-js/accordion';
 import { type Accessor, type JSX } from 'solid-js';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export interface AccordionItemProps extends Assign<HTMLArkProps<'div'>, {
+interface ElementProps extends ItemProps {
     children?: JSX.Element | ((state: Accessor<ItemState>) => JSX.Element);
-}>, ItemProps {
 }
-export declare const AccordionItem: (props: AccordionItemProps) => JSX.Element;
+export interface AccordionItemProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const AccordionItem: ArkComponent<'div', ElementProps>;
+export {};

package/types/accordion/accordion-root.d.ts

@@ -0,0 +1,10 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
+import type { Assign } from '../types';
+import { type UseAccordionProps } from './use-accordion';
+interface ElementProps extends UseAccordionProps, UsePresenceProps {
+}
+export interface AccordionRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const AccordionRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/avatar/avatar-fallback.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface AvatarFallbackProps extends HTMLArkProps<'span'> {
 }
-export declare const AvatarFallback: (props: AvatarFallbackProps) => import("solid-js").JSX.Element;
+export declare const AvatarFallback: ArkComponent<'span'>;

package/types/avatar/avatar-image.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface AvatarImageProps extends HTMLArkProps<'img'> {
 }
-export declare const AvatarImage: (props: AvatarImageProps) => import("solid-js").JSX.Element;
+export declare const AvatarImage: ArkComponent<'img'>;

package/types/avatar/avatar-root.d.ts

@@ -0,0 +1,6 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseAvatarProps } from './use-avatar';
+export interface AvatarRootProps extends Assign<HTMLArkProps<'div'>, UseAvatarProps> {
+}
+export declare const AvatarRoot: ArkComponent<'div', UseAvatarProps>;

package/types/avatar/index.d.ts

@@ -1,12 +1,12 @@
 import type { StatusChangeDetails as AvatarStatusChangeDetails } from '@zag-js/avatar';
-import { type AvatarProps } from './avatar';
 import { useAvatarContext, type AvatarContext } from './avatar-context';
 import { AvatarFallback, type AvatarFallbackProps } from './avatar-fallback';
 import { AvatarImage, type AvatarImageProps } from './avatar-image';
-declare const Avatar: ((props: AvatarProps) => import("solid-js").JSX.Element) & {
-    Root: (props: AvatarProps) => import("solid-js").JSX.Element;
-    Fallback: (props: AvatarFallbackProps) => import("solid-js").JSX.Element;
-    Image: (props: AvatarImageProps) => import("solid-js").JSX.Element;
+import { AvatarRoot, type AvatarRootProps } from './avatar-root';
+export declare const Avatar: {
+    Root: import("..").ArkComponent<"div", import("./use-avatar").UseAvatarProps>;
+    Fallback: import("..").ArkComponent<"span", object>;
+    Image: import("..").ArkComponent<"img", object>;
 };
-export { Avatar, AvatarFallback, AvatarImage, useAvatarContext };
-export type { AvatarContext, AvatarFallbackProps, AvatarImageProps, AvatarProps, AvatarStatusChangeDetails, };
+export { AvatarFallback, AvatarImage, AvatarRoot, useAvatarContext };
+export type { AvatarContext, AvatarFallbackProps, AvatarImageProps, AvatarRootProps, AvatarStatusChangeDetails, };

package/types/carousel/carousel-control.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface CarouselControlProps extends HTMLArkProps<'div'> {
 }
-export declare const CarouselControl: (props: CarouselControlProps) => import("solid-js").JSX.Element;
+export declare const CarouselControl: ArkComponent<'div'>;

package/types/carousel/carousel-indicator-group.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface CarouselIndicatorGroupProps extends HTMLArkProps<'div'> {
 }
-export declare const CarouselIndicatorGroup: (props: CarouselIndicatorGroupProps) => import("solid-js").JSX.Element;
+export declare const CarouselIndicatorGroup: ArkComponent<'div'>;

package/types/carousel/carousel-indicator.d.ts

@@ -1,6 +1,6 @@
 import type { IndicatorProps } from '@zag-js/carousel';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface CarouselIndicatorProps extends Assign<HTMLArkProps<'button'>, IndicatorProps> {
 }
-export declare const CarouselIndicator: (props: CarouselIndicatorProps) => import("solid-js").JSX.Element;
+export declare const CarouselIndicator: ArkComponent<'button', IndicatorProps>;

package/types/carousel/carousel-item-group.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface CarouselItemGroupProps extends HTMLArkProps<'div'> {
+}
+export declare const CarouselItemGroup: ArkComponent<'div'>;

package/types/carousel/{carousel-slide.d.ts → carousel-item.d.ts}

@@ -1,6 +1,6 @@
 import type { ItemProps } from '@zag-js/carousel';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface CarouselItemProps extends Assign<HTMLArkProps<'div'>, ItemProps> {
 }
-export declare const CarouselItem: (props: CarouselItemProps) => import("solid-js").JSX.Element;
+export declare const CarouselItem: ArkComponent<'div', ItemProps>;

package/types/carousel/carousel-next-trigger.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface CarouselNextTriggerProps extends HTMLArkProps<'button'> {
 }
-export declare const CarouselNextTrigger: (props: CarouselNextTriggerProps) => import("solid-js").JSX.Element;
+export declare const CarouselNextTrigger: ArkComponent<'button'>;

package/types/carousel/carousel-prev-trigger.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface CarouselPrevTriggerProps extends HTMLArkProps<'button'> {
 }
-export declare const CarouselPrevTrigger: (props: CarouselPrevTriggerProps) => import("solid-js").JSX.Element;
+export declare const CarouselPrevTrigger: ArkComponent<'button'>;

package/types/carousel/carousel-root.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseCarouselProps, type UseCarouselReturn } from './use-carousel';
+interface ElementProps extends UseCarouselProps {
+    children?: JSX.Element | ((api: UseCarouselReturn) => JSX.Element);
+}
+export interface CarouselRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const CarouselRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/carousel/carousel-viewport.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface CarouselViewportProps extends HTMLArkProps<'span'> {
 }
-export declare const CarouselViewport: (props: CarouselViewportProps) => import("solid-js").JSX.Element;
+export declare const CarouselViewport: ArkComponent<'span'>;

package/types/checkbox/checkbox-control.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface CheckboxControlProps extends HTMLArkProps<'div'> {
 }
-export declare const CheckboxControl: (props: CheckboxControlProps) => import("solid-js").JSX.Element;
+export declare const CheckboxControl: ArkComponent<'div'>;

package/types/checkbox/checkbox-indicator.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface CheckboxIndicatorProps extends HTMLArkProps<'div'> {
 }
-export declare const CheckboxIndicator: (props: CheckboxIndicatorProps) => import("solid-js").JSX.Element;
+export declare const CheckboxIndicator: ArkComponent<'div'>;

package/types/checkbox/checkbox-label.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface CheckboxLabelProps extends HTMLArkProps<'span'> {
 }
-export declare const CheckboxLabel: (props: CheckboxLabelProps) => import("solid-js").JSX.Element;
+export declare const CheckboxLabel: ArkComponent<'span'>;

package/types/checkbox/checkbox-root.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
+interface ElementProps extends UseCheckboxProps {
+    children?: JSX.Element | ((api: UseCheckboxReturn) => JSX.Element);
+}
+export interface CheckboxRootProps extends Assign<HTMLArkProps<'label'>, ElementProps> {
+}
+export declare const CheckboxRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/color-picker/color-picker-area-background.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerAreaBackgroundProps extends HTMLArkProps<'div'> {
 }
-export declare const ColorPickerAreaBackground: (props: ColorPickerAreaBackgroundProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerAreaBackground: ArkComponent<'div'>;

package/types/color-picker/color-picker-area-thumb.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerAreaThumbProps extends HTMLArkProps<'div'> {
 }
-export declare const ColorPickerAreaThumb: (props: ColorPickerAreaThumbProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerAreaThumb: ArkComponent<'div'>;

package/types/color-picker/color-picker-area.d.ts

@@ -1,6 +1,6 @@
 import type { AreaProps } from '@zag-js/color-picker';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface ColorPickerAreaProps extends Assign<HTMLArkProps<'div'>, AreaProps> {
 }
-export declare const ColorPickerArea: (props: ColorPickerAreaProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerArea: ArkComponent<'div', AreaProps>;

package/types/color-picker/color-picker-channel-input.d.ts

@@ -1,6 +1,6 @@
 import type { ChannelInputProps } from '@zag-js/color-picker';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export interface ColorPickerChannelInputProps extends Assign<ChannelInputProps, HTMLArkProps<'input'>> {
+export interface ColorPickerChannelInputProps extends Assign<HTMLArkProps<'input'>, ChannelInputProps> {
 }
-export declare const ColorPickerChannelInput: (props: ColorPickerChannelInputProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerChannelInput: ArkComponent<'input', ChannelInputProps>;

package/types/color-picker/color-picker-channel-slider-thumb.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerChannelSliderThumbProps extends HTMLArkProps<'div'> {
 }
-export declare const ColorPickerChannelSliderThumb: (props: ColorPickerChannelSliderThumbProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerChannelSliderThumb: ArkComponent<'div'>;

package/types/color-picker/color-picker-channel-slider-track.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerChannelSliderTrackProps extends HTMLArkProps<'div'> {
 }
-export declare const ColorPickerChannelSliderTrack: (props: ColorPickerChannelSliderTrackProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerChannelSliderTrack: ArkComponent<'div'>;

package/types/color-picker/color-picker-channel-slider.d.ts

@@ -1,6 +1,6 @@
 import type { ChannelProps } from '@zag-js/color-picker';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface ColorPickerChannelSliderProps extends Assign<HTMLArkProps<'div'>, ChannelProps> {
 }
-export declare const ColorPickerChannelSlider: (props: ColorPickerChannelSliderProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerChannelSlider: ArkComponent<'div', ChannelProps>;

package/types/color-picker/color-picker-content.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerContentProps extends HTMLArkProps<'div'> {
 }
-export declare const ColorPickerContent: (props: ColorPickerContentProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerContent: ArkComponent<'div'>;

package/types/color-picker/color-picker-control.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerControlProps extends HTMLArkProps<'div'> {
 }
-export declare const ColorPickerControl: (props: ColorPickerControlProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerControl: ArkComponent<'div'>;

package/types/color-picker/color-picker-eye-dropper-trigger.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerEyeDropperTriggerProps extends HTMLArkProps<'button'> {
 }
-export declare const ColorPickerEyeDropperTrigger: (props: ColorPickerEyeDropperTriggerProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerEyeDropperTrigger: ArkComponent<'button'>;

package/types/color-picker/color-picker-format-select.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerFormatSelectProps extends HTMLArkProps<'select'> {
 }
-export declare const ColorPickerFormatSelect: (props: ColorPickerFormatSelectProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerFormatSelect: ArkComponent<'select'>;

package/types/color-picker/color-picker-format-trigger.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerFormatTriggerProps extends HTMLArkProps<'button'> {
 }
-export declare const ColorPickerFormatTrigger: (props: ColorPickerFormatTriggerProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerFormatTrigger: ArkComponent<'button'>;

package/types/color-picker/color-picker-label.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerLabelProps extends HTMLArkProps<'label'> {
 }
-export declare const ColorPickerLabel: (props: ColorPickerLabelProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerLabel: ArkComponent<'label'>;

package/types/color-picker/color-picker-positioner.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerPositionerProps extends HTMLArkProps<'div'> {
 }
-export declare const ColorPickerPositioner: (props: ColorPickerPositionerProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerPositioner: ArkComponent<'div'>;

package/types/color-picker/color-picker-root.d.ts

@@ -0,0 +1,12 @@
+import { type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import { type UsePresenceProps } from '../presence';
+import { type Assign } from '../types';
+import { type UseColorPickerProps, type UseColorPickerReturn } from './use-color-picker';
+interface ElementProps extends UseColorPickerProps, UsePresenceProps {
+    children?: JSX.Element | ((api: UseColorPickerReturn) => JSX.Element);
+}
+export interface ColorPickerRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const ColorPickerRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/color-picker/color-picker-swatch-group.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerSwatchGroupProps extends HTMLArkProps<'div'> {
 }
-export declare const ColorPickerSwatchGroup: (props: ColorPickerSwatchGroupProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerSwatchGroup: ArkComponent<'div'>;

package/types/color-picker/color-picker-swatch-indicator.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 export interface ColorPickerSwatchIndicatorProps extends HTMLArkProps<'div'> {
 }
-export declare const ColorPickerSwatchIndicator: (props: ColorPickerSwatchIndicatorProps) => import("solid-js").JSX.Element;
+export declare const ColorPickerSwatchIndicator: ArkComponent<'div'>;