@ark-ui/solid 1.3.0 → 2.0.0

package/types/editable/index.d.ts

@@ -1,5 +1,4 @@
 import type { ValueChangeDetails as EditableValueChangeDetails } from '@zag-js/editable';
-import { type EditableProps } from './editable';
 import { EditableArea, type EditableAreaProps } from './editable-area';
 import { EditableCancelTrigger, type EditableCancelTriggerProps } from './editable-cancel-trigger';
 import { useEditableContext, type EditableContext } from './editable-context';
@@ -8,17 +7,18 @@ import { EditableEditTrigger, type EditableEditTriggerProps } from './editable-e
 import { EditableInput, type EditableInputProps } from './editable-input';
 import { EditableLabel, type EditableLabelProps } from './editable-label';
 import { EditablePreview, type EditablePreviewProps } from './editable-preview';
+import { EditableRoot, type EditableRootProps } from './editable-root';
 import { EditableSubmitTrigger, type EditableSubmitTriggerProps } from './editable-submit-trigger';
-declare const Editable: ((props: EditableProps) => import("solid-js").JSX.Element) & {
-    Root: (props: EditableProps) => import("solid-js").JSX.Element;
-    Area: (props: EditableAreaProps) => import("solid-js").JSX.Element;
-    CancelTrigger: (props: EditableCancelTriggerProps) => import("solid-js").JSX.Element;
-    Control: (props: EditableControlProps) => import("solid-js").JSX.Element;
-    EditTrigger: (props: EditableEditTriggerProps) => import("solid-js").JSX.Element;
-    Input: (props: EditableInputProps) => import("solid-js").JSX.Element;
-    Label: (props: EditableLabelProps) => import("solid-js").JSX.Element;
-    Preview: (props: EditablePreviewProps) => import("solid-js").JSX.Element;
-    SubmitTrigger: (props: EditableSubmitTriggerProps) => import("solid-js").JSX.Element;
+export declare const Editable: {
+    Root: import("..").ArkComponent<"div", EditableRootProps>;
+    Area: import("..").ArkComponent<"div", object>;
+    CancelTrigger: import("..").ArkComponent<"button", object>;
+    Control: import("..").ArkComponent<"div", object>;
+    EditTrigger: import("..").ArkComponent<"button", object>;
+    Input: import("..").ArkComponent<"input", object>;
+    Label: import("..").ArkComponent<"label", object>;
+    Preview: import("..").ArkComponent<"span", object>;
+    SubmitTrigger: import("..").ArkComponent<"button", object>;
 };
-export { Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, useEditableContext, };
-export type { EditableAreaProps, EditableCancelTriggerProps, EditableContext, EditableControlProps, EditableEditTriggerProps, EditableInputProps, EditableLabelProps, EditablePreviewProps, EditableProps, EditableSubmitTriggerProps, EditableValueChangeDetails, };
+export { EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableSubmitTrigger, useEditableContext, };
+export type { EditableAreaProps, EditableCancelTriggerProps, EditableContext, EditableControlProps, EditableEditTriggerProps, EditableInputProps, EditableLabelProps, EditablePreviewProps, EditableRootProps, EditableSubmitTriggerProps, EditableValueChangeDetails, };

package/types/environment/index.d.ts

@@ -1,7 +1,4 @@
-import { type EnvironmentProps } from './environment';
+import { Environment, type EnvironmentProps } from './environment';
 import { useEnvironmentContext, type EnvironmentContext } from './environment-context';
-declare const Environment: ((props: EnvironmentProps) => import("solid-js").JSX.Element) & {
-    Root: (props: EnvironmentProps) => import("solid-js").JSX.Element;
-};
 export { Environment, useEnvironmentContext };
 export type { EnvironmentContext, EnvironmentProps };

package/types/factory.d.ts

@@ -1,13 +1,17 @@
-import { type Component, type ComponentProps, type JSX } from 'solid-js';
-type ElementType = keyof JSX.IntrinsicElements;
-type AsChildProps = {
-    asChild?: boolean;
+import { type ComponentProps, type JSX, type ValidComponent } from 'solid-js';
+import type { Assign } from './types';
+type AsProps<T extends ValidComponent = ValidComponent> = {
+    as?: T;
 };
 type JsxElements = {
-    [E in keyof JSX.IntrinsicElements]: AsChildForwardRefComponent<E>;
+    [E in keyof JSX.IntrinsicElements]: ArkComponent<E>;
+};
+type ElementType = keyof JSX.IntrinsicElements;
+export type HTMLArkProps<E extends ElementType> = JSX.IntrinsicElements[E] & AsProps;
+export type ArkComponentProps<E extends ElementType, K extends ValidComponent, P extends object> = Assign<Assign<ComponentProps<E>, ComponentProps<K>>, Assign<AsProps<K>, P>>;
+export type ArkComponent<E extends ElementType, P extends object = object> = {
+    <C extends ValidComponent = E>(props: ArkComponentProps<E, C, P>): JSX.Element;
 };
-type AsChildForwardRefComponent<E extends ElementType> = Component<AsChildComponentProps<E>>;
-type AsChildComponentProps<E extends ElementType> = ComponentProps<E> & AsChildProps;
-export type HTMLArkProps<T extends ElementType> = AsChildComponentProps<T>;
+export declare const withAsProp: <T extends keyof JSX.IntrinsicElements>(Component: T) => ArkComponent<T, object>;
 export declare const ark: JsxElements;
 export {};

package/types/file-upload/file-upload-dropzone.d.ts

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

package/types/file-upload/file-upload-item-delete-trigger.d.ts

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

package/types/file-upload/file-upload-item-group.d.ts

@@ -1,8 +1,10 @@
 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 FileUploadItemGroupProps extends Assign<HTMLArkProps<'ul'>, {
+interface ElementProps {
     children?: JSX.Element | ((state: Accessor<File[]>) => JSX.Element);
-}> {
 }
-export declare const FileUploadItemGroup: (props: FileUploadItemGroupProps) => JSX.Element;
+export interface FileUploadItemGroupProps extends Assign<HTMLArkProps<'ul'>, ElementProps> {
+}
+export declare const FileUploadItemGroup: ArkComponent<'ul', ElementProps>;
+export {};

package/types/file-upload/file-upload-item-name.d.ts

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

package/types/file-upload/file-upload-item-preview-image.d.ts

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

package/types/file-upload/file-upload-item-preview.d.ts

@@ -1,9 +1,12 @@
-import { type HTMLArkProps } from '../factory';
-export interface FileUploadItemPreviewProps extends HTMLArkProps<'div'> {
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+interface ElementProps {
     /**
      * The file type to match against. Matches all file types by default.
      * @default '.*'
      */
     type?: string;
 }
-export declare const FileUploadItemPreview: (props: FileUploadItemPreviewProps) => import("solid-js").JSX.Element;
+export interface FileUploadItemPreviewProps extends HTMLArkProps<'div'>, ElementProps {
+}
+export declare const FileUploadItemPreview: ArkComponent<'div', ElementProps>;
+export {};

package/types/file-upload/file-upload-item-size-text.d.ts

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

package/types/file-upload/file-upload-item.d.ts

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

package/types/file-upload/file-upload-label.d.ts

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

package/types/file-upload/file-upload-root.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from 'solid-js/jsx-runtime';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseFileUploadProps, type UseFileUploadReturn } from './use-file-upload';
+interface ElementProps extends UseFileUploadProps {
+    children?: JSX.Element | ((api: UseFileUploadReturn) => JSX.Element);
+}
+export interface FileUploadRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const FileUploadRoot: ArkComponent<'div', FileUploadRootProps>;
+export {};

package/types/file-upload/file-upload-trigger.d.ts

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

package/types/hover-card/hover-card-arrow-tip.d.ts

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

package/types/hover-card/hover-card-arrow.d.ts

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

package/types/hover-card/hover-card-content.d.ts

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

package/types/hover-card/hover-card-positioner.d.ts

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

package/types/hover-card/{hover-card.d.ts → hover-card-root.d.ts}

@@ -1,7 +1,7 @@
 import { type JSX } from 'solid-js';
 import { type UsePresenceProps } from '../presence';
 import { type UseHoverCardProps, type UseHoverCardReturn } from './use-hover-card';
-export interface HoverCardProps extends UseHoverCardProps, UsePresenceProps {
+export interface HoverCardRootProps extends UseHoverCardProps, UsePresenceProps {
     children?: JSX.Element | ((api: UseHoverCardReturn) => JSX.Element);
 }
-export declare const HoverCard: (props: HoverCardProps) => JSX.Element;
+export declare const HoverCardRoot: (props: HoverCardRootProps) => JSX.Element;

package/types/hover-card/hover-card-trigger.d.ts

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

package/types/hover-card/index.d.ts

@@ -1,18 +1,18 @@
-import type { OpenChangeDetails as HoverCardOpenChangeDetails } from '@zag-js/color-picker';
-import { type HoverCardProps } from './hover-card';
+import type { OpenChangeDetails as HoverCardOpenChangeDetails } from '@zag-js/hover-card';
 import { HoverCardArrow, type HoverCardArrowProps } from './hover-card-arrow';
 import { HoverCardArrowTip, type HoverCardArrowTipProps } from './hover-card-arrow-tip';
 import { HoverCardContent, type HoverCardContentProps } from './hover-card-content';
 import { useHoverCardContext, type HoverCardContext } from './hover-card-context';
 import { HoverCardPositioner, type HoverCardPositionerProps } from './hover-card-positioner';
+import { HoverCardRoot, type HoverCardRootProps } from './hover-card-root';
 import { HoverCardTrigger, type HoverCardTriggerProps } from './hover-card-trigger';
-declare const HoverCard: ((props: HoverCardProps) => import("solid-js").JSX.Element) & {
-    Root: (props: HoverCardProps) => import("solid-js").JSX.Element;
-    Arrow: (props: HoverCardArrowProps) => import("solid-js").JSX.Element;
-    ArrowTip: (props: HoverCardArrowTipProps) => import("solid-js").JSX.Element;
-    Content: (props: HoverCardContentProps) => import("solid-js").JSX.Element;
-    Positioner: (props: HoverCardPositionerProps) => import("solid-js").JSX.Element;
-    Trigger: (props: HoverCardTriggerProps) => import("solid-js").JSX.Element;
+export declare const HoverCard: {
+    Root: (props: HoverCardRootProps) => import("solid-js").JSX.Element;
+    Arrow: import("..").ArkComponent<"div", object>;
+    ArrowTip: import("..").ArkComponent<"div", object>;
+    Content: import("..").ArkComponent<"div", object>;
+    Positioner: import("..").ArkComponent<"div", object>;
+    Trigger: import("..").ArkComponent<"button", object>;
 };
-export { HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, useHoverCardContext, };
-export type { HoverCardArrowProps, HoverCardArrowTipProps, HoverCardContentProps, HoverCardContext, HoverCardOpenChangeDetails, HoverCardPositionerProps, HoverCardProps, HoverCardTriggerProps, };
+export { HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, useHoverCardContext, };
+export type { HoverCardArrowProps, HoverCardArrowTipProps, HoverCardContentProps, HoverCardContext, HoverCardOpenChangeDetails, HoverCardPositionerProps, HoverCardRootProps, HoverCardTriggerProps, };

package/types/index.d.ts

@@ -30,3 +30,4 @@ export * from './tags-input';
 export * from './toast';
 export * from './toggle-group';
 export * from './tooltip';
+export * from './tree-view';

package/types/menu/menu-arrow-tip.d.ts

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

package/types/menu/menu-arrow.d.ts

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

package/types/menu/menu-content.d.ts

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

package/types/menu/menu-context-trigger.d.ts

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

package/types/menu/menu-item-group-label.d.ts

@@ -1,9 +1,9 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 interface ItemGroupLabelProps {
     for: string;
 }
 export interface MenuItemGroupLabelProps extends Assign<HTMLArkProps<'div'>, ItemGroupLabelProps> {
 }
-export declare const MenuItemGroupLabel: (props: MenuItemGroupLabelProps) => import("solid-js").JSX.Element;
+export declare const MenuItemGroupLabel: ArkComponent<'div', ItemGroupLabelProps>;
 export {};

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

@@ -1,8 +1,8 @@
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseMenuReturn } from './use-menu';
 type MenuItemGroupParams = Parameters<ReturnType<ReturnType<UseMenuReturn>['api']>['getItemGroupProps']>[0];
 export interface MenuItemGroupProps extends Assign<HTMLArkProps<'div'>, MenuItemGroupParams> {
 }
-export declare const MenuItemGroup: (props: MenuItemGroupProps) => import("solid-js").JSX.Element;
+export declare const MenuItemGroup: ArkComponent<'div', MenuItemGroupParams>;
 export {};

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

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

package/types/menu/menu-option-item.d.ts

@@ -1,9 +1,11 @@
 import type { OptionItemProps, OptionItemState } from '@zag-js/menu';
 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 MenuOptionItemProps extends Assign<HTMLArkProps<'div'>, {
+interface ElementProps extends OptionItemProps {
     children?: JSX.Element | ((state: Accessor<OptionItemState>) => JSX.Element);
-}>, OptionItemProps {
 }
-export declare const MenuOptionItem: (props: MenuOptionItemProps) => JSX.Element;
+export interface MenuOptionItemProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const MenuOptionItem: ArkComponent<'div', MenuOptionItemProps>;
+export {};

package/types/menu/menu-positioner.d.ts

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

package/types/menu/{menu.d.ts → menu-root.d.ts}

@@ -3,7 +3,7 @@ import { type PropTypes } from '@zag-js/solid';
 import { type Accessor, type JSX } from 'solid-js';
 import { type UsePresenceProps } from '../presence';
 import { type UseMenuProps } from './use-menu';
-export interface MenuProps extends UseMenuProps, UsePresenceProps {
+export interface MenuRootProps extends UseMenuProps, UsePresenceProps {
     children?: JSX.Element | ((api: Accessor<menu.Api<PropTypes>>) => JSX.Element);
 }
-export declare const Menu: (props: MenuProps) => JSX.Element;
+export declare const MenuRoot: (props: MenuRootProps) => JSX.Element;

package/types/menu/menu-separator.d.ts

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

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

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

package/types/menu/menu-trigger.d.ts

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

package/types/number-input/number-input-control.d.ts

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

package/types/number-input/number-input-decrement-trigger.d.ts

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

package/types/number-input/number-input-increment-trigger.d.ts

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

package/types/number-input/number-input-input.d.ts

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

package/types/number-input/number-input-label.d.ts

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

package/types/number-input/number-input-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 UseNumberInputProps, type UseNumberInputReturn } from './use-number-input';
+interface ElementProps extends UseNumberInputProps {
+    children?: JSX.Element | ((api: UseNumberInputReturn) => JSX.Element);
+}
+export interface NumberInputRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const NumberInputRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/number-input/number-input-scrubber.d.ts

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

package/types/pagination/index.d.ts

@@ -1,16 +1,16 @@
 import type { ItemLabelDetails as PaginationItemLabelDetails, PageChangeDetails as PaginationPageChangeDetails } from '@zag-js/pagination';
-import { type PaginationProps } from './pagination';
 import { usePaginationContext, type PaginationContext } from './pagination-context';
 import { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
 import { PaginationItem, type PaginationItemProps } from './pagination-item';
 import { PaginationNextTrigger, type PaginationNextTriggerProps } from './pagination-next-trigger';
 import { PaginationPrevTrigger, type PaginationPrevTriggerProps } from './pagination-prev-trigger';
-declare const Pagination: ((props: PaginationProps) => import("solid-js").JSX.Element) & {
-    Root: (props: PaginationProps) => import("solid-js").JSX.Element;
-    Ellipsis: (props: PaginationEllipsisProps) => import("solid-js").JSX.Element;
-    Item: (props: PaginationItemProps) => import("solid-js").JSX.Element;
-    NextTrigger: (props: PaginationNextTriggerProps) => import("solid-js").JSX.Element;
-    PrevTrigger: (props: PaginationPrevTriggerProps) => import("solid-js").JSX.Element;
+import { PaginationRoot, type PaginationRootProps } from './pagination-root';
+export declare const Pagination: {
+    Root: import("..").ArkComponent<"nav", PaginationRootProps>;
+    Ellipsis: import("..").ArkComponent<"div", import("@zag-js/pagination").EllipsisProps>;
+    Item: import("..").ArkComponent<"button", import("@zag-js/pagination").ItemProps>;
+    NextTrigger: import("..").ArkComponent<"button", object>;
+    PrevTrigger: import("..").ArkComponent<"button", object>;
 };
-export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, usePaginationContext, };
-export type { PaginationContext, PaginationEllipsisProps, PaginationItemLabelDetails, PaginationItemProps, PaginationNextTriggerProps, PaginationPageChangeDetails, PaginationPrevTriggerProps, PaginationProps, };
+export { PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, usePaginationContext, };
+export type { PaginationContext, PaginationEllipsisProps, PaginationItemLabelDetails, PaginationItemProps, PaginationNextTriggerProps, PaginationPageChangeDetails, PaginationPrevTriggerProps, PaginationRootProps, };

package/types/pagination/pagination-ellipsis.d.ts

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

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

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

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

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

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

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

package/types/pagination/pagination-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 UsePaginationProps, type UsePaginationReturn } from './use-pagination';
+interface ElementProps extends UsePaginationProps {
+    children?: JSX.Element | ((api: UsePaginationReturn) => JSX.Element);
+}
+export interface PaginationRootProps extends Assign<HTMLArkProps<'nav'>, ElementProps> {
+}
+export declare const PaginationRoot: ArkComponent<'nav', PaginationRootProps>;
+export {};

package/types/pin-input/index.d.ts

@@ -1,14 +1,16 @@
 import type { ValueChangeDetails as PinInputValueChangeDetails, ValueInvalidDetails as PinInputValueInvalidDetails } from '@zag-js/pin-input';
-import { type PinInputProps } from './pin-input';
 import { usePinInputContext, type PinInputContext } from './pin-input-context';
 import { PinInputControl, type PinInputControlProps } from './pin-input-control';
 import { PinInputInput, type PinInputInputProps } from './pin-input-input';
 import { PinInputLabel, type PinInputLabelProps } from './pin-input-label';
-declare const PinInput: ((props: PinInputProps) => import("solid-js").JSX.Element) & {
-    Root: (props: PinInputProps) => import("solid-js").JSX.Element;
-    Control: (props: PinInputControlProps) => import("solid-js").JSX.Element;
-    Input: (props: PinInputInputProps) => import("solid-js").JSX.Element;
-    Label: (props: PinInputLabelProps) => import("solid-js").JSX.Element;
+import { PinInputRoot, type PinInputRootProps } from './pin-input-root';
+export declare const PinInput: {
+    Root: import("..").ArkComponent<"div", import("./use-pin-input").UsePinInputProps>;
+    Control: import("..").ArkComponent<"div", object>;
+    Input: import("..").ArkComponent<"input", {
+        index: number;
+    }>;
+    Label: import("..").ArkComponent<"label", object>;
 };
-export { PinInput, PinInputControl, PinInputInput, PinInputLabel, usePinInputContext };
-export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps, PinInputValueChangeDetails, PinInputValueInvalidDetails, };
+export { PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, usePinInputContext };
+export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputRootProps, PinInputValueChangeDetails, PinInputValueInvalidDetails, };

package/types/pin-input/pin-input-control.d.ts

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