@ark-ui/solid 1.3.0 → 2.0.1

package/source/toggle-group/toggle-group-root.jsx

@@ -0,0 +1,25 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { ToggleGroupProvider } from './toggle-group-context';
+import { useToggleGroup } from './use-toggle-group';
+export const ToggleGroupRoot = (props) => {
+    const [groupParams, restProps] = createSplitProps()(props, [
+        'dir',
+        'disabled',
+        'getRootNode',
+        'id',
+        'ids',
+        'loop',
+        'multiple',
+        'onValueChange',
+        'orientation',
+        'rovingFocus',
+        'value',
+    ]);
+    const api = useToggleGroup(groupParams);
+    const mergedProps = mergeProps(() => api().rootProps, restProps);
+    return (<ToggleGroupProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </ToggleGroupProvider>);
+};

package/source/toggle-group/toggle-group.jsx

@@ -1,25 +1,3 @@
-import { mergeProps } from '@zag-js/solid';
-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) => {
-    const [groupParams, restProps] = createSplitProps()(props, [
-        'dir',
-        'disabled',
-        'getRootNode',
-        'id',
-        'ids',
-        'loop',
-        'multiple',
-        'onValueChange',
-        'orientation',
-        'rovingFocus',
-        'value',
-    ]);
-    const api = useToggleGroup(groupParams);
-    const mergedProps = mergeProps(() => api().rootProps, restProps);
-    return (<ToggleGroupProvider value={api}>
-      <ark.div {...mergedProps}/>
-    </ToggleGroupProvider>);
-};
+import { ToggleGroupItem as Item } from './toggle-group-item';
+import { ToggleGroupRoot as Root } from './toggle-group-root';
+export { Item, Root };

package/source/tooltip/index.js

@@ -1,16 +1,9 @@
-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, {
-    Root: TooltipRoot,
-    Arrow: TooltipArrow,
-    ArrowTip: TooltipArrowTip,
-    Content: TooltipContent,
-    Positioner: TooltipPositioner,
-    Trigger: TooltipTrigger,
-});
-export { Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, useTooltipContext, };
+export * as Tooltip from './tooltip';
+export { TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipRoot, TooltipTrigger, useTooltipContext, };

package/source/tooltip/tooltip-root.jsx

@@ -0,0 +1,31 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { runIfFn } from '../run-if-fn';
+import { TooltipProvider } from './tooltip-context';
+import { useTooltip } from './use-tooltip';
+export const TooltipRoot = (props) => {
+    const [presenceProps, tooltipProps] = splitPresenceProps(props);
+    const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, [
+        'aria-label',
+        'closeDelay',
+        'closeOnEsc',
+        'closeOnPointerDown',
+        'dir',
+        'disabled',
+        'getRootNode',
+        'id',
+        'ids',
+        'interactive',
+        'onOpenChange',
+        'open',
+        'openDelay',
+        'positioning',
+    ]);
+    const api = useTooltip(useTooltipProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<TooltipProvider value={api}>
+      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+    </TooltipProvider>);
+};

package/source/tooltip/tooltip.jsx

@@ -1,31 +1,7 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-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) => {
-    const [presenceProps, tooltipProps] = splitPresenceProps(props);
-    const [useTooltipProps, localProps] = createSplitProps()(tooltipProps, [
-        'aria-label',
-        'closeDelay',
-        'closeOnEsc',
-        'closeOnPointerDown',
-        'dir',
-        'disabled',
-        'getRootNode',
-        'id',
-        'ids',
-        'interactive',
-        'onOpenChange',
-        'open',
-        'openDelay',
-        'positioning',
-    ]);
-    const api = useTooltip(useTooltipProps);
-    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
-    const getChildren = () => runIfFn(localProps.children, api);
-    return (<TooltipProvider value={api}>
-      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
-    </TooltipProvider>);
-};
+import { TooltipArrow as Arrow } from './tooltip-arrow';
+import { TooltipArrowTip as ArrowTip } from './tooltip-arrow-tip';
+import { TooltipContent as Content } from './tooltip-content';
+import { TooltipPositioner as Positioner } from './tooltip-positioner';
+import { TooltipRoot as Root } from './tooltip-root';
+import { TooltipTrigger as Trigger } from './tooltip-trigger';
+export { Arrow, ArrowTip, Content, Positioner, Root, Trigger };

package/source/tree-view/index.js

@@ -0,0 +1,14 @@
+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 * as TreeView from './tree-view';
+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/tree-view.jsx

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

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/accordion/accordion.d.ts

@@ -1,7 +1,6 @@
-import { type HTMLArkProps } from '../factory';
-import { type UsePresenceProps } from '../presence';
-import type { Assign } from '../types';
-import { type UseAccordionProps } from './use-accordion';
-export interface AccordionProps extends Assign<HTMLArkProps<'div'>, UseAccordionProps>, UsePresenceProps {
-}
-export declare const Accordion: (props: AccordionProps) => import("solid-js").JSX.Element;
+import { AccordionItem as Item } from './accordion-item';
+import { AccordionItemContent as ItemContent } from './accordion-item-content';
+import { AccordionItemIndicator as ItemIndicator } from './accordion-item-indicator';
+import { AccordionItemTrigger as ItemTrigger } from './accordion-item-trigger';
+import { AccordionRoot as Root } from './accordion-root';
+export { Item, ItemContent, ItemIndicator, ItemTrigger, Root };

package/types/accordion/index.d.ts

@@ -1,17 +1,11 @@
 import type { FocusChangeDetails as AccordionFocusChangeDetails, ValueChangeDetails as AccordionValueChangeDetails } from '@zag-js/accordion';
-import { type AccordionProps } from './accordion';
 import { useAccordionContext, type AccordionContext } from './accordion-context';
 import { AccordionItem, type AccordionItemProps } from './accordion-item';
 import { AccordionItemContent, type AccordionItemContentProps } from './accordion-item-content';
 import { useAccordionItemContext, type AccordionItemContext } from './accordion-item-context';
 import { AccordionItemIndicator, type AccordionItemIndicatorProps } from './accordion-item-indicator';
 import { AccordionItemTrigger, type AccordionItemTriggerProps } from './accordion-item-trigger';
-declare const Accordion: ((props: AccordionProps) => import("solid-js").JSX.Element) & {
-    Root: (props: AccordionProps) => import("solid-js").JSX.Element;
-    Item: (props: AccordionItemProps) => import("solid-js").JSX.Element;
-    ItemContent: (props: AccordionItemContentProps) => import("solid-js").JSX.Element;
-    ItemIndicator: (props: AccordionItemIndicatorProps) => import("solid-js").JSX.Element;
-    ItemTrigger: (props: AccordionItemTriggerProps) => import("solid-js").JSX.Element;
-};
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, useAccordionContext, useAccordionItemContext, };
-export type { AccordionContext, AccordionFocusChangeDetails, AccordionItemContentProps, AccordionItemContext, AccordionItemIndicatorProps, AccordionItemProps, AccordionItemTriggerProps, AccordionProps, AccordionValueChangeDetails, };
+import { AccordionRoot, type AccordionRootProps } from './accordion-root';
+export * as Accordion from './accordion';
+export { AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, AccordionRoot, useAccordionContext, useAccordionItemContext, };
+export type { AccordionContext, AccordionFocusChangeDetails, AccordionItemContentProps, AccordionItemContext, AccordionItemIndicatorProps, AccordionItemProps, AccordionItemTriggerProps, AccordionRootProps, AccordionValueChangeDetails, };

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/avatar.d.ts

@@ -1,6 +1,4 @@
-import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
-import { type UseAvatarProps } from './use-avatar';
-export interface AvatarProps extends Assign<HTMLArkProps<'div'>, UseAvatarProps> {
-}
-export declare const Avatar: (props: AvatarProps) => import("solid-js").JSX.Element;
+import { AvatarFallback as Fallback } from './avatar-fallback';
+import { AvatarImage as Image } from './avatar-image';
+import { AvatarRoot as Root } from './avatar-root';
+export { Fallback, Image, Root };

package/types/avatar/index.d.ts

@@ -1,12 +1,8 @@
 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;
-};
-export { Avatar, AvatarFallback, AvatarImage, useAvatarContext };
-export type { AvatarContext, AvatarFallbackProps, AvatarImageProps, AvatarProps, AvatarStatusChangeDetails, };
+import { AvatarRoot, type AvatarRootProps } from './avatar-root';
+export * as Avatar from './avatar';
+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'>;