@ark-ui/solid 1.2.0 → 2.0.0

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

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { PresencePropsProvider, splitPresenceProps } from '../presence';
 import { TabsProvider } from './tabs-context';
 import { useTabs } from './use-tabs';
-export const Tabs = (props) => {
+export const TabsRoot = (props) => {
     const [presenceProps, tabsProps] = splitPresenceProps(props);
     const [tabsParams, restProps] = createSplitProps()(tabsProps, [
         'activationMode',

package/source/tags-input/index.js

@@ -1,4 +1,3 @@
-import { TagsInput as TagsInputRoot } from './tags-input';
 import { TagsInputClearTrigger } from './tags-input-clear-trigger';
 import { useTagsInputContext } from './tags-input-context';
 import { TagsInputControl } from './tags-input-control';
@@ -7,17 +6,20 @@ import { TagsInputItem } from './tags-input-item';
 import { useTagsInputItemContext } from './tags-input-item-context';
 import { TagsInputItemDeleteTrigger, } from './tags-input-item-delete-trigger';
 import { TagsInputItemInput } from './tags-input-item-input';
+import { TagsInputItemPreview } from './tags-input-item-preview';
 import { TagsInputItemText } from './tags-input-item-text';
 import { TagsInputLabel } from './tags-input-label';
-const TagsInput = Object.assign(TagsInputRoot, {
+import { TagsInputRoot } from './tags-input-root';
+export const TagsInput = {
     Root: TagsInputRoot,
     ClearTrigger: TagsInputClearTrigger,
     Control: TagsInputControl,
     Input: TagsInputInput,
     Item: TagsInputItem,
+    ItemPreview: TagsInputItemPreview,
     ItemDeleteTrigger: TagsInputItemDeleteTrigger,
     ItemInput: TagsInputItemInput,
     ItemText: TagsInputItemText,
     Label: TagsInputLabel,
-});
-export { TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, useTagsInputContext, useTagsInputItemContext, };
+};
+export { TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, useTagsInputContext, useTagsInputItemContext, };

package/source/tags-input/tags-input-item-preview.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useTagsInputContext } from './tags-input-context';
+import { useTagsInputItemContext } from './tags-input-item-context';
+export const TagsInputItemPreview = (props) => {
+    const api = useTagsInputContext();
+    const itemProps = useTagsInputItemContext();
+    const mergedProps = mergeProps(() => api().getItemPreviewProps(itemProps), props);
+    return <ark.div {...mergedProps}/>;
+};

package/source/tags-input/{tags-input.jsx → tags-input-root.jsx}

@@ -4,7 +4,7 @@ import { ark } from '../factory';
 import { runIfFn } from '../run-if-fn';
 import { TagsInputProvider } from './tags-input-context';
 import { useTagsInput } from './use-tags-input';
-export const TagsInput = (props) => {
+export const TagsInputRoot = (props) => {
     const [tagsInputParams, restProps] = createSplitProps()(props, [
         'addOnPaste',
         'allowEditTag',

package/source/toast/index.js

@@ -1,14 +1,14 @@
 import { createToaster } from './create-toaster';
-import { Toast as ToastRoot } from './toast';
 import { ToastCloseTrigger } from './toast-close-trigger';
 import { ToastDescription } from './toast-description';
 import { ToastGroup } from './toast-group';
+import { ToastRoot } from './toast-root';
 import { ToastTitle } from './toast-title';
-const Toast = Object.assign(ToastRoot, {
+export const Toast = {
     Root: ToastRoot,
     CloseTrigger: ToastCloseTrigger,
     Description: ToastDescription,
     Group: ToastGroup,
     Title: ToastTitle,
-});
-export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle };
+};
+export { createToaster, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle };

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

@@ -1,7 +1,7 @@
 import { mergeProps } from '@zag-js/solid';
 import { ark } from '../factory';
 import { useToastContext } from './toast-context';
-export const Toast = (props) => {
+export const ToastRoot = (props) => {
     const api = useToastContext();
     const mergedProps = mergeProps(() => api().rootProps, props);
     return <ark.li {...mergedProps}/>;

package/source/toggle-group/index.js

@@ -1,8 +1,8 @@
-import { ToggleGroup as ToggleGroupRoot } from './toggle-group';
 import { useToggleGroupContext } from './toggle-group-context';
 import { ToggleGroupItem } from './toggle-group-item';
-const ToggleGroup = Object.assign(ToggleGroupRoot, {
+import { ToggleGroupRoot } from './toggle-group-root';
+export const ToggleGroup = {
     Root: ToggleGroupRoot,
     Item: ToggleGroupItem,
-});
-export { ToggleGroup, ToggleGroupItem, useToggleGroupContext };
+};
+export { ToggleGroupItem, ToggleGroupRoot, useToggleGroupContext };

package/source/toggle-group/{toggle-group.jsx → toggle-group-root.jsx}

@@ -3,7 +3,7 @@ import { createSplitProps } from '../create-split-props';
 import { ark } from '../factory';
 import { ToggleGroupProvider } from './toggle-group-context';
 import { useToggleGroup } from './use-toggle-group';
-export const ToggleGroup = (props) => {
+export const ToggleGroupRoot = (props) => {
     const [groupParams, restProps] = createSplitProps()(props, [
         'dir',
         'disabled',

package/source/tooltip/index.js

@@ -1,16 +1,16 @@
-import { Tooltip as TooltipRoot } from './tooltip';
 import { TooltipArrow } from './tooltip-arrow';
 import { TooltipArrowTip } from './tooltip-arrow-tip';
 import { TooltipContent } from './tooltip-content';
 import { useTooltipContext } from './tooltip-context';
 import { TooltipPositioner } from './tooltip-positioner';
+import { TooltipRoot } from './tooltip-root';
 import { TooltipTrigger } from './tooltip-trigger';
-const Tooltip = Object.assign(TooltipRoot, {
+export const Tooltip = {
     Root: TooltipRoot,
     Arrow: TooltipArrow,
     ArrowTip: TooltipArrowTip,
     Content: TooltipContent,
     Positioner: TooltipPositioner,
     Trigger: TooltipTrigger,
-});
-export { Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, useTooltipContext, };
+};
+export { TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipRoot, TooltipTrigger, useTooltipContext, };

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,11 +1,12 @@
-import { type AvatarProps } from './avatar';
+import type { StatusChangeDetails as AvatarStatusChangeDetails } from '@zag-js/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 };
+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'>;