@ark-ui/solid 1.3.0 → 2.0.1

package/source/file-upload/file-upload-root.jsx

@@ -0,0 +1,34 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { FileUploadProvider } from './file-upload-context';
+import { useFileUpload } from './use-file-upload';
+export const FileUploadRoot = (props) => {
+    const [fileUploadProps, localProps] = createSplitProps()(props, [
+        'accept',
+        'allowDrop',
+        'dir',
+        'disabled',
+        'files',
+        'getRootNode',
+        'id',
+        'ids',
+        'locale',
+        'maxFiles',
+        'maxFileSize',
+        'minFileSize',
+        'name',
+        'onFileAccept',
+        'onFileReject',
+        'onFilesChange',
+        'translations',
+        'validate',
+    ]);
+    const api = useFileUpload(fileUploadProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<FileUploadProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </FileUploadProvider>);
+};

package/source/file-upload/file-upload.jsx

@@ -1,34 +1,12 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { runIfFn } from '../run-if-fn';
-import { FileUploadProvider } from './file-upload-context';
-import { useFileUpload } from './use-file-upload';
-export const FileUpload = (props) => {
-    const [fileUploadProps, localProps] = createSplitProps()(props, [
-        'accept',
-        'allowDrop',
-        'dir',
-        'disabled',
-        'files',
-        'getRootNode',
-        'id',
-        'ids',
-        'locale',
-        'maxFiles',
-        'maxFileSize',
-        'minFileSize',
-        'name',
-        'onFileAccept',
-        'onFileReject',
-        'onFilesChange',
-        'translations',
-        'validate',
-    ]);
-    const api = useFileUpload(fileUploadProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    const getChildren = () => runIfFn(localProps.children, api);
-    return (<FileUploadProvider value={api}>
-      <ark.div {...mergedProps}>{getChildren()}</ark.div>
-    </FileUploadProvider>);
-};
+import { FileUploadDropzone as Dropzone } from './file-upload-dropzone';
+import { FileUploadItem as Item } from './file-upload-item';
+import { FileUploadItemDeleteTrigger as ItemDeleteTrigger } from './file-upload-item-delete-trigger';
+import { FileUploadItemGroup as ItemGroup } from './file-upload-item-group';
+import { FileUploadItemName as ItemName } from './file-upload-item-name';
+import { FileUploadItemPreview as ItemPreview } from './file-upload-item-preview';
+import { FileUploadItemPreviewImage as ItemPreviewImage } from './file-upload-item-preview-image';
+import { FileUploadItemSizeText as ItemSizeText } from './file-upload-item-size-text';
+import { FileUploadLabel as Label } from './file-upload-label';
+import { FileUploadRoot as Root } from './file-upload-root';
+import { FileUploadTrigger as Trigger } from './file-upload-trigger';
+export { Dropzone, Item, ItemDeleteTrigger, ItemGroup, ItemName, ItemPreview, ItemPreviewImage, ItemSizeText, Label, Root, Trigger, };

package/source/file-upload/index.js

@@ -1,4 +1,3 @@
-import { FileUpload as FileUploadRoot } from './file-upload';
 import { useFileUploadContext } from './file-upload-context';
 import { FileUploadDropzone } from './file-upload-dropzone';
 import { FileUploadItem } from './file-upload-item';
@@ -9,18 +8,7 @@ import { FileUploadItemPreview } from './file-upload-item-preview';
 import { FileUploadItemPreviewImage, } from './file-upload-item-preview-image';
 import { FileUploadItemSizeText, } from './file-upload-item-size-text';
 import { FileUploadLabel } from './file-upload-label';
+import { FileUploadRoot } from './file-upload-root';
 import { FileUploadTrigger } from './file-upload-trigger';
-const FileUpload = Object.assign(FileUploadRoot, {
-    Root: FileUploadRoot,
-    Dropzone: FileUploadDropzone,
-    Item: FileUploadItem,
-    ItemDeleteTrigger: FileUploadItemDeleteTrigger,
-    ItemGroup: FileUploadItemGroup,
-    ItemName: FileUploadItemName,
-    ItemPreview: FileUploadItemPreview,
-    ItemPreviewImage: FileUploadItemPreviewImage,
-    ItemSizeText: FileUploadItemSizeText,
-    Label: FileUploadLabel,
-    Trigger: FileUploadTrigger,
-});
-export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, useFileUploadContext, };
+export * as FileUpload from './file-upload';
+export { FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger, useFileUploadContext, };

package/source/hover-card/hover-card-root.jsx

@@ -0,0 +1,26 @@
+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 { HoverCardProvider } from './hover-card-context';
+import { useHoverCard } from './use-hover-card';
+export const HoverCardRoot = (props) => {
+    const [presenceProps, hoverCardProps] = splitPresenceProps(props);
+    const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, [
+        'closeDelay',
+        'dir',
+        'getRootNode',
+        'id',
+        'ids',
+        'onOpenChange',
+        'open',
+        'openDelay',
+        'positioning',
+    ]);
+    const api = useHoverCard(useHoverCardProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<HoverCardProvider value={api}>
+      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+    </HoverCardProvider>);
+};

package/source/hover-card/hover-card.jsx

@@ -1,26 +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 { HoverCardProvider } from './hover-card-context';
-import { useHoverCard } from './use-hover-card';
-export const HoverCard = (props) => {
-    const [presenceProps, hoverCardProps] = splitPresenceProps(props);
-    const [useHoverCardProps, localProps] = createSplitProps()(hoverCardProps, [
-        'closeDelay',
-        'dir',
-        'getRootNode',
-        'id',
-        'ids',
-        'onOpenChange',
-        'open',
-        'openDelay',
-        'positioning',
-    ]);
-    const api = useHoverCard(useHoverCardProps);
-    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().isOpen })));
-    const getChildren = () => runIfFn(localProps.children, api);
-    return (<HoverCardProvider value={api}>
-      <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
-    </HoverCardProvider>);
-};
+import { HoverCardArrow as Arrow } from './hover-card-arrow';
+import { HoverCardArrowTip as ArrowTip } from './hover-card-arrow-tip';
+import { HoverCardContent as Content } from './hover-card-content';
+import { HoverCardPositioner as Positioner } from './hover-card-positioner';
+import { HoverCardRoot as Root } from './hover-card-root';
+import { HoverCardTrigger as Trigger } from './hover-card-trigger';
+export { Arrow, ArrowTip, Content, Positioner, Root, Trigger };

package/source/hover-card/index.js

@@ -1,16 +1,9 @@
-import { HoverCard as HoverCardRoot } from './hover-card';
 import { HoverCardArrow } from './hover-card-arrow';
 import { HoverCardArrowTip } from './hover-card-arrow-tip';
 import { HoverCardContent } from './hover-card-content';
 import { useHoverCardContext } from './hover-card-context';
 import { HoverCardPositioner } from './hover-card-positioner';
+import { HoverCardRoot } from './hover-card-root';
 import { HoverCardTrigger } from './hover-card-trigger';
-const HoverCard = Object.assign(HoverCardRoot, {
-    Root: HoverCardRoot,
-    Arrow: HoverCardArrow,
-    ArrowTip: HoverCardArrowTip,
-    Content: HoverCardContent,
-    Positioner: HoverCardPositioner,
-    Trigger: HoverCardTrigger,
-});
-export { HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, useHoverCardContext, };
+export * as HoverCard from './hover-card';
+export { HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardRoot, HoverCardTrigger, useHoverCardContext, };

package/source/index.jsx

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

package/source/menu/index.js

@@ -1,4 +1,3 @@
-import { Menu as MenuRoot } from './menu';
 import { MenuArrow } from './menu-arrow';
 import { MenuArrowTip } from './menu-arrow-tip';
 import { MenuContent } from './menu-content';
@@ -9,22 +8,9 @@ import { MenuItemGroup } from './menu-item-group';
 import { MenuItemGroupLabel } from './menu-item-group-label';
 import { MenuOptionItem } from './menu-option-item';
 import { MenuPositioner } from './menu-positioner';
+import { MenuRoot } from './menu-root';
 import { MenuSeparator } from './menu-separator';
 import { MenuTrigger } from './menu-trigger';
 import { MenuTriggerItem } from './menu-trigger-item';
-const Menu = Object.assign(MenuRoot, {
-    Root: MenuRoot,
-    Arrow: MenuArrow,
-    ArrowTip: MenuArrowTip,
-    Content: MenuContent,
-    ContextTrigger: MenuContextTrigger,
-    Item: MenuItem,
-    ItemGroup: MenuItemGroup,
-    ItemGroupLabel: MenuItemGroupLabel,
-    OptionItem: MenuOptionItem,
-    Positioner: MenuPositioner,
-    Separator: MenuSeparator,
-    Trigger: MenuTrigger,
-    TriggerItem: MenuTriggerItem,
-});
-export { Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, useMenuContext, };
+export * as Menu from './menu';
+export { MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, useMenuContext, };

package/source/menu/menu-root.jsx

@@ -0,0 +1,50 @@
+import { mergeProps } from '@zag-js/solid';
+import { createEffect, createMemo } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
+import { runIfFn } from '../run-if-fn';
+import { MenuMachineProvider, MenuProvider, MenuTriggerItemProvider, useMenuContext, useMenuMachineContext, } from './menu-context';
+import { useMenu } from './use-menu';
+export const MenuRoot = (props) => {
+    const [presenceProps, menuProps] = splitPresenceProps(props);
+    const [useMenuProps, localProps] = createSplitProps()(menuProps, [
+        'anchorPoint',
+        'aria-label',
+        'closeOnSelect',
+        'dir',
+        'getRootNode',
+        'highlightedId',
+        'id',
+        'ids',
+        'loop',
+        'onFocusOutside',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'onSelect',
+        'onValueChange',
+        'open',
+        'positioning',
+        'value',
+    ]);
+    const parentMenu = useMenuContext();
+    const parentMachine = useMenuMachineContext();
+    const menu = useMenu(useMenuProps);
+    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: menu().api().isOpen })));
+    createEffect(() => {
+        if (!parentMachine)
+            return;
+        parentMenu?.().setChild(menu().machine);
+        menu().api().setParent(parentMachine());
+    });
+    const triggerItemContext = createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
+    const machineContext = () => menu().machine;
+    const getChildren = () => runIfFn(localProps.children, menu().api);
+    return (<MenuTriggerItemProvider value={triggerItemContext}>
+      <MenuMachineProvider value={machineContext}>
+        <MenuProvider value={menu().api}>
+          <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
+        </MenuProvider>
+      </MenuMachineProvider>
+    </MenuTriggerItemProvider>);
+};

package/source/menu/menu-trigger.jsx

@@ -6,6 +6,5 @@ export const MenuTrigger = (props) => {
     const api = useMenuContext();
     const presenceApi = usePresenceContext();
     const mergedProps = mergeProps(() => api().triggerProps, () => ({ 'aria-controls': presenceApi().isUnmounted && null }), props);
-    // @ts-expect-error we want aria-controls to be null to remove them if the popover if lazy mounted
     return <ark.button {...mergedProps}/>;
 };

package/source/menu/menu.jsx

@@ -1,50 +1,14 @@
-import { mergeProps } from '@zag-js/solid';
-import { createEffect, createMemo } from 'solid-js';
-import { createSplitProps } from '../create-split-props';
-import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
-import { runIfFn } from '../run-if-fn';
-import { MenuMachineProvider, MenuProvider, MenuTriggerItemProvider, useMenuContext, useMenuMachineContext, } from './menu-context';
-import { useMenu } from './use-menu';
-export const Menu = (props) => {
-    const [presenceProps, menuProps] = splitPresenceProps(props);
-    const [useMenuProps, localProps] = createSplitProps()(menuProps, [
-        'anchorPoint',
-        'aria-label',
-        'closeOnSelect',
-        'dir',
-        'getRootNode',
-        'highlightedId',
-        'id',
-        'ids',
-        'loop',
-        'onFocusOutside',
-        'onInteractOutside',
-        'onOpenChange',
-        'onPointerDownOutside',
-        'onSelect',
-        'onValueChange',
-        'open',
-        'positioning',
-        'value',
-    ]);
-    const parentMenu = useMenuContext();
-    const parentMachine = useMenuMachineContext();
-    const menu = useMenu(useMenuProps);
-    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: menu().api().isOpen })));
-    createEffect(() => {
-        if (!parentMachine)
-            return;
-        parentMenu?.().setChild(menu().machine);
-        menu().api().setParent(parentMachine());
-    });
-    const triggerItemContext = createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
-    const machineContext = () => menu().machine;
-    const getChildren = () => runIfFn(localProps.children, menu().api);
-    return (<MenuTriggerItemProvider value={triggerItemContext}>
-      <MenuMachineProvider value={machineContext}>
-        <MenuProvider value={menu().api}>
-          <PresenceProvider value={apiPresence}>{getChildren()}</PresenceProvider>
-        </MenuProvider>
-      </MenuMachineProvider>
-    </MenuTriggerItemProvider>);
-};
+import { MenuArrow as Arrow } from './menu-arrow';
+import { MenuArrowTip as ArrowTip } from './menu-arrow-tip';
+import { MenuContent as Content } from './menu-content';
+import { MenuContextTrigger as ContextTrigger } from './menu-context-trigger';
+import { MenuItem as Item } from './menu-item';
+import { MenuItemGroup as ItemGroup } from './menu-item-group';
+import { MenuItemGroupLabel as ItemGroupLabel } from './menu-item-group-label';
+import { MenuOptionItem as OptionItem } from './menu-option-item';
+import { MenuPositioner as Positioner } from './menu-positioner';
+import { MenuRoot as Root } from './menu-root';
+import { MenuSeparator as Separator } from './menu-separator';
+import { MenuTrigger as Trigger } from './menu-trigger';
+import { MenuTriggerItem as TriggerItem } from './menu-trigger-item';
+export { Arrow, ArrowTip, Content, ContextTrigger, Item, ItemGroup, ItemGroupLabel, OptionItem, Positioner, Root, Separator, Trigger, TriggerItem, };

package/source/number-input/index.js

@@ -1,18 +1,10 @@
-import { NumberInput as NumberInputRoot } from './number-input';
 import { useNumberInputContext } from './number-input-context';
 import { NumberInputControl } from './number-input-control';
 import { NumberInputDecrementTrigger, } from './number-input-decrement-trigger';
 import { NumberInputIncrementTrigger, } from './number-input-increment-trigger';
 import { NumberInputInput } from './number-input-input';
 import { NumberInputLabel } from './number-input-label';
+import { NumberInputRoot } from './number-input-root';
 import { NumberInputScrubber } from './number-input-scrubber';
-const NumberInput = Object.assign(NumberInputRoot, {
-    Root: NumberInputRoot,
-    Control: NumberInputControl,
-    DecrementTrigger: NumberInputDecrementTrigger,
-    Input: NumberInputInput,
-    IncrementTrigger: NumberInputIncrementTrigger,
-    Label: NumberInputLabel,
-    Scrubber: NumberInputScrubber,
-});
-export { NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, useNumberInputContext, };
+export * as NumberInput from './number-input';
+export { NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputRoot, NumberInputScrubber, useNumberInputContext, };

package/source/number-input/number-input-root.jsx

@@ -0,0 +1,42 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { NumberInputProvider } from './number-input-context';
+import { useNumberInput, } from './use-number-input';
+export const NumberInputRoot = (props) => {
+    const [useNumberInputProps, localProps] = createSplitProps()(props, [
+        'allowMouseWheel',
+        'allowOverflow',
+        'clampValueOnBlur',
+        'dir',
+        'disabled',
+        'focusInputOnChange',
+        'form',
+        'formatOptions',
+        'getRootNode',
+        'id',
+        'ids',
+        'inputMode',
+        'invalid',
+        'locale',
+        'max',
+        'min',
+        'name',
+        'onFocusChange',
+        'onValueChange',
+        'onValueInvalid',
+        'pattern',
+        'readOnly',
+        'spinOnPress',
+        'step',
+        'translations',
+        'value',
+    ]);
+    const api = useNumberInput(useNumberInputProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<NumberInputProvider value={api}>
+      <ark.div {...mergedProps}>{getChildren()}</ark.div>
+    </NumberInputProvider>);
+};

package/source/number-input/number-input.jsx

@@ -1,42 +1,8 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { runIfFn } from '../run-if-fn';
-import { NumberInputProvider } from './number-input-context';
-import { useNumberInput, } from './use-number-input';
-export const NumberInput = (props) => {
-    const [useNumberInputProps, localProps] = createSplitProps()(props, [
-        'allowMouseWheel',
-        'allowOverflow',
-        'clampValueOnBlur',
-        'dir',
-        'disabled',
-        'focusInputOnChange',
-        'form',
-        'formatOptions',
-        'getRootNode',
-        'id',
-        'ids',
-        'inputMode',
-        'invalid',
-        'locale',
-        'max',
-        'min',
-        'name',
-        'onFocusChange',
-        'onValueChange',
-        'onValueInvalid',
-        'pattern',
-        'readOnly',
-        'spinOnPress',
-        'step',
-        'translations',
-        'value',
-    ]);
-    const api = useNumberInput(useNumberInputProps);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    const getChildren = () => runIfFn(localProps.children, api);
-    return (<NumberInputProvider value={api}>
-      <ark.div {...mergedProps}>{getChildren()}</ark.div>
-    </NumberInputProvider>);
-};
+import { NumberInputControl as Control } from './number-input-control';
+import { NumberInputDecrementTrigger as DecrementTrigger } from './number-input-decrement-trigger';
+import { NumberInputIncrementTrigger as IncrementTrigger } from './number-input-increment-trigger';
+import { NumberInputInput as Input } from './number-input-input';
+import { NumberInputLabel as Label } from './number-input-label';
+import { NumberInputRoot as Root } from './number-input-root';
+import { NumberInputScrubber as Scrubber } from './number-input-scrubber';
+export { Control, DecrementTrigger, IncrementTrigger, Input, Label, Root, Scrubber };

package/source/pagination/index.js

@@ -1,14 +1,8 @@
-import { Pagination as PaginationRoot } from './pagination';
 import { usePaginationContext } from './pagination-context';
 import { PaginationEllipsis } from './pagination-ellipsis';
 import { PaginationItem } from './pagination-item';
 import { PaginationNextTrigger } from './pagination-next-trigger';
 import { PaginationPrevTrigger } from './pagination-prev-trigger';
-const Pagination = Object.assign(PaginationRoot, {
-    Root: PaginationRoot,
-    Ellipsis: PaginationEllipsis,
-    Item: PaginationItem,
-    NextTrigger: PaginationNextTrigger,
-    PrevTrigger: PaginationPrevTrigger,
-});
-export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, usePaginationContext, };
+import { PaginationRoot } from './pagination-root';
+export * as Pagination from './pagination';
+export { PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot, usePaginationContext, };

package/source/pagination/pagination-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 { PaginationProvider } from './pagination-context';
+import { usePagination } from './use-pagination';
+export const PaginationRoot = (props) => {
+    const [paginationParams, localProps] = createSplitProps()(props, [
+        'count',
+        'dir',
+        'getRootNode',
+        'id',
+        'ids',
+        'onPageChange',
+        'page',
+        'pageSize',
+        'siblingCount',
+        'translations',
+        'type',
+    ]);
+    const api = usePagination(paginationParams);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    const getChildren = () => runIfFn(localProps.children, api);
+    return (<PaginationProvider value={api}>
+      <ark.nav {...mergedProps}>{getChildren()}</ark.nav>
+    </PaginationProvider>);
+};

package/source/pagination/pagination.jsx

@@ -1,27 +1,6 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../create-split-props';
-import { ark } from '../factory';
-import { runIfFn } from '../run-if-fn';
-import { PaginationProvider } from './pagination-context';
-import { usePagination } from './use-pagination';
-export const Pagination = (props) => {
-    const [paginationParams, localProps] = createSplitProps()(props, [
-        'count',
-        'dir',
-        'getRootNode',
-        'id',
-        'ids',
-        'onPageChange',
-        'page',
-        'pageSize',
-        'siblingCount',
-        'translations',
-        'type',
-    ]);
-    const api = usePagination(paginationParams);
-    const mergedProps = mergeProps(() => api().rootProps, localProps);
-    const getChildren = () => runIfFn(localProps.children, api);
-    return (<PaginationProvider value={api}>
-      <ark.nav {...mergedProps}>{getChildren()}</ark.nav>
-    </PaginationProvider>);
-};
+import { PaginationEllipsis as Ellipsis } from './pagination-ellipsis';
+import { PaginationItem as Item } from './pagination-item';
+import { PaginationNextTrigger as NextTrigger } from './pagination-next-trigger';
+import { PaginationPrevTrigger as PrevTrigger } from './pagination-prev-trigger';
+import { PaginationRoot as Root } from './pagination-root';
+export { Ellipsis, Item, NextTrigger, PrevTrigger, Root };

package/source/pin-input/index.js

@@ -1,12 +1,7 @@
-import { PinInput as PinInputRoot } from './pin-input';
 import { usePinInputContext } from './pin-input-context';
 import { PinInputControl } from './pin-input-control';
 import { PinInputInput } from './pin-input-input';
 import { PinInputLabel } from './pin-input-label';
-const PinInput = Object.assign(PinInputRoot, {
-    Root: PinInputRoot,
-    Control: PinInputControl,
-    Input: PinInputInput,
-    Label: PinInputLabel,
-});
-export { PinInput, PinInputControl, PinInputInput, PinInputLabel, usePinInputContext };
+import { PinInputRoot } from './pin-input-root';
+export * as PinInput from './pin-input';
+export { PinInputControl, PinInputInput, PinInputLabel, PinInputRoot, usePinInputContext };

package/source/pin-input/pin-input-root.jsx

@@ -0,0 +1,36 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { PinInputProvider } from './pin-input-context';
+import { usePinInput } from './use-pin-input';
+export const PinInputRoot = (props) => {
+    const [usePinInputProps, localProps] = createSplitProps()(props, [
+        'autoFocus',
+        'blurOnComplete',
+        'dir',
+        'disabled',
+        'form',
+        'getRootNode',
+        'id',
+        'ids',
+        'invalid',
+        'mask',
+        'name',
+        'onValueChange',
+        'onValueComplete',
+        'onValueInvalid',
+        'otp',
+        'pattern',
+        'placeholder',
+        'selectOnFocus',
+        'translations',
+        'type',
+        'value',
+    ]);
+    const api = usePinInput(usePinInputProps);
+    const mergedProps = mergeProps(() => api().rootProps, localProps);
+    return (<PinInputProvider value={api}>
+      <ark.div {...mergedProps}/>
+      <input {...api().hiddenInputProps}/>
+    </PinInputProvider>);
+};