@ark-ui/react 0.13.1 → 0.15.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "0.13.1",
+  "version": "0.15.0-beta.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -32,6 +32,7 @@
     "tabs",
     "tags input",
     "toast",
+    "toggle group",
     "tooltip"
   ],
   "homepage": "https://ark-ui.com",
@@ -60,74 +61,76 @@
     "release-it": "release-it --config ../../release-it.json"
   },
   "dependencies": {
-    "@zag-js/accordion": "0.16.0",
-    "@zag-js/anatomy": "0.16.0",
-    "@zag-js/avatar": "0.16.0",
-    "@zag-js/carousel": "0.16.0",
-    "@zag-js/checkbox": "0.16.0",
-    "@zag-js/color-picker": "0.16.0",
-    "@zag-js/color-utils": "0.16.0",
-    "@zag-js/combobox": "0.16.0",
-    "@zag-js/date-picker": "0.16.0",
-    "@zag-js/date-utils": "0.16.0",
-    "@zag-js/dialog": "0.16.0",
-    "@zag-js/editable": "0.16.0",
-    "@zag-js/hover-card": "0.16.0",
-    "@zag-js/menu": "0.16.0",
-    "@zag-js/number-input": "0.16.0",
-    "@zag-js/pagination": "0.16.0",
-    "@zag-js/pin-input": "0.16.0",
-    "@zag-js/popover": "0.16.0",
-    "@zag-js/presence": "0.16.0",
-    "@zag-js/pressable": "0.16.0",
-    "@zag-js/radio-group": "0.16.0",
-    "@zag-js/range-slider": "0.16.0",
-    "@zag-js/rating-group": "0.16.0",
-    "@zag-js/react": "0.16.0",
-    "@zag-js/select": "0.16.0",
-    "@zag-js/slider": "0.16.0",
-    "@zag-js/splitter": "0.16.0",
-    "@zag-js/switch": "0.16.0",
-    "@zag-js/tabs": "0.16.0",
-    "@zag-js/tags-input": "0.16.0",
-    "@zag-js/toast": "0.16.0",
-    "@zag-js/tooltip": "0.16.0",
-    "@zag-js/types": "0.16.0"
+    "@zag-js/accordion": "0.19.1",
+    "@zag-js/anatomy": "0.19.1",
+    "@zag-js/avatar": "0.19.1",
+    "@zag-js/carousel": "0.19.1",
+    "@zag-js/checkbox": "0.19.1",
+    "@zag-js/color-picker": "0.19.1",
+    "@zag-js/color-utils": "0.19.1",
+    "@zag-js/combobox": "0.19.1",
+    "@zag-js/core": "0.19.1",
+    "@zag-js/date-picker": "0.19.1",
+    "@zag-js/date-utils": "0.19.1",
+    "@zag-js/dialog": "0.19.1",
+    "@zag-js/editable": "0.19.1",
+    "@zag-js/hover-card": "0.19.1",
+    "@zag-js/menu": "0.19.1",
+    "@zag-js/number-input": "0.19.1",
+    "@zag-js/pagination": "0.19.1",
+    "@zag-js/pin-input": "0.19.1",
+    "@zag-js/popover": "0.19.1",
+    "@zag-js/presence": "0.19.1",
+    "@zag-js/pressable": "0.19.1",
+    "@zag-js/radio-group": "0.19.1",
+    "@zag-js/range-slider": "0.19.1",
+    "@zag-js/rating-group": "0.19.1",
+    "@zag-js/react": "0.19.1",
+    "@zag-js/select": "0.19.1",
+    "@zag-js/slider": "0.19.1",
+    "@zag-js/splitter": "0.19.1",
+    "@zag-js/switch": "0.19.1",
+    "@zag-js/tabs": "0.19.1",
+    "@zag-js/tags-input": "0.19.1",
+    "@zag-js/toast": "0.19.1",
+    "@zag-js/toggle-group": "0.19.1",
+    "@zag-js/tooltip": "0.19.1",
+    "@zag-js/types": "0.19.1"
   },
   "devDependencies": {
     "@release-it/keep-a-changelog": "4.0.0",
-    "@storybook/addon-a11y": "7.2.2",
-    "@storybook/addon-essentials": "7.2.2",
-    "@storybook/addons": "7.2.2",
-    "@storybook/react": "7.2.2",
-    "@storybook/react-vite": "7.2.2",
+    "@storybook/addon-a11y": "7.4.1",
+    "@storybook/addon-essentials": "7.4.1",
+    "@storybook/addons": "7.4.1",
+    "@storybook/react": "7.4.1",
+    "@storybook/react-vite": "7.4.1",
     "@testing-library/dom": "9.3.1",
-    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/jest-dom": "6.1.3",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/jsdom": "21.1.1",
-    "@types/react": "18.2.17",
+    "@types/jsdom": "21.1.2",
+    "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
-    "@vitejs/plugin-react": "4.0.3",
-    "@vitest/coverage-v8": "0.34.1",
-    "eslint": "8.46.0",
-    "eslint-plugin-react": "7.33.1",
+    "@typescript-eslint/eslint-plugin": "6.7.0",
+    "@typescript-eslint/parser": "6.7.0",
+    "@vitejs/plugin-react": "4.0.4",
+    "@vitest/coverage-v8": "0.34.3",
+    "eslint": "8.49.0",
+    "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "globby": "13.2.2",
     "jsdom": "22.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
-    "release-it": "16.1.4",
+    "release-it": "16.1.5",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "7.2.2",
-    "typescript": "5.1.6",
+    "storybook": "7.4.1",
+    "typescript": "5.2.2",
     "vite": "4.4.9",
-    "vite-plugin-dts": "3.5.1",
-    "vitest": "0.34.1"
+    "vite-plugin-dts": "3.5.3",
+    "vitest": "0.34.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -290,6 +293,11 @@
       "import": "./toast/index.mjs",
       "require": "./toast/index.cjs"
     },
+    "./toggle-group": {
+      "types": "./toggle-group/index.d.ts",
+      "import": "./toggle-group/index.mjs",
+      "require": "./toggle-group/index.cjs"
+    },
     "./tooltip": {
       "types": "./tooltip/index.d.ts",
       "import": "./tooltip/index.mjs",

package/pagination/index.d.ts

@@ -1,10 +1,11 @@
-import { PublicApi, EllipsisProps, PageTriggerProps } from '@zag-js/pagination';
-import { UsePaginationProps } from './use-pagination';
+import { EllipsisProps, PageTriggerProps } from '@zag-js/pagination';
+import { UsePaginationProps, UsePaginationReturn } from './use-pagination';
+import { HTMLArkProps } from '..';
 import { Assign } from '../types';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, LiHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, HTMLAttributes, LiHTMLAttributes, ButtonHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type PaginationProps } from './pagination';
-import { usePaginationContext } from './pagination-context';
+import { usePaginationContext, type PaginationContext } from './pagination-context';
 import { PaginationEllipsis, type PaginationEllipsisProps } from './pagination-ellipsis';
 import { PaginationList, type PaginationListProps } from './pagination-list';
 import { PaginationListItem, type PaginationListItemProps } from './pagination-list-item';
@@ -12,56 +13,26 @@ import { PaginationNextPageTrigger, type PaginationNextPageTriggerProps } from '
 import { PaginationPageTrigger, type PaginationPageTriggerProps } from './pagination-page-trigger';
 import { PaginationPrevPageTrigger, type PaginationPrevPageTriggerProps } from './pagination-prev-page-trigger';
 import { paginationAnatomy } from './pagination.anatomy';
-declare const Pagination: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | RefObject<HTMLElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, UsePaginationProps>, "children"> & {
-    children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
+declare const Pagination: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"nav">, UsePaginationProps>, "children"> & {
+    children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
 } & RefAttributes<HTMLElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-        ref?: ((instance: HTMLElement | null) => void) | RefObject<HTMLElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, UsePaginationProps>, "children"> & {
-        children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+    Root: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"nav">, UsePaginationProps>, "children"> & {
+        children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
     } & RefAttributes<HTMLElement>>;
-    Ellipsis: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "index"> & EllipsisProps & RefAttributes<HTMLDivElement>>;
-    List: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-        ref?: ((instance: HTMLUListElement | null) => void) | RefObject<HTMLUListElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLUListElement>>;
-    ListItem: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-        ref?: ((instance: HTMLLIElement | null) => void) | RefObject<HTMLLIElement> | null | undefined;
-    } & {
+    Ellipsis: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "index"> & EllipsisProps & RefAttributes<HTMLDivElement>>;
+    List: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLIElement>>;
-    NextPageTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLUListElement>>;
+    ListItem: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    PageTrigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLLIElement>>;
+    NextPageTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, keyof PageTriggerProps> & PageTriggerProps & RefAttributes<HTMLButtonElement>>;
-    PrevPageTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    PageTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof PageTriggerProps> & PageTriggerProps & RefAttributes<HTMLButtonElement>>;
+    PrevPageTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
+    } & RefAttributes<HTMLButtonElement>>;
 };
 export { Pagination, PaginationEllipsis, PaginationList, PaginationListItem, PaginationNextPageTrigger, PaginationPageTrigger, PaginationPrevPageTrigger, paginationAnatomy, usePaginationContext, };
-export type { PaginationEllipsisProps, PaginationListItemProps, PaginationListProps, PaginationNextPageTriggerProps, PaginationPageTriggerProps, PaginationPrevPageTriggerProps, PaginationProps, };
+export type { PaginationContext, PaginationEllipsisProps, PaginationListItemProps, PaginationListProps, PaginationNextPageTriggerProps, PaginationPageTriggerProps, PaginationPrevPageTriggerProps, PaginationProps, };

package/pagination/pagination-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/pagination';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UsePaginationReturn } from './use-pagination';
 export type PaginationContext = UsePaginationReturn;
-export declare const PaginationProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, usePaginationContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const PaginationProvider: Provider<UsePaginationReturn>, usePaginationContext: () => UsePaginationReturn;

package/pagination/pagination-ellipsis.d.ts

@@ -1,10 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
 import type { EllipsisProps } from '@zag-js/pagination';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-export type PaginationEllipsisProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, EllipsisProps>;
-export declare const PaginationEllipsis: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "index"> & EllipsisProps & RefAttributes<HTMLDivElement>>;
+export type PaginationEllipsisProps = Assign<HTMLArkProps<'div'>, EllipsisProps>;
+export declare const PaginationEllipsis: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "index"> & EllipsisProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LiHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type PaginationListItemProps = ComponentPropsWithoutRef<typeof ark.li>;
-export declare const PaginationListItem: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | RefObject<HTMLLIElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, LiHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type PaginationListItemProps = HTMLArkProps<'li'>;
+export declare const PaginationListItem: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLLIElement>>;
+} & RefAttributes<HTMLLIElement>>;

package/pagination/pagination-list.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type PaginationListProps = ComponentPropsWithoutRef<typeof ark.ul>;
-export declare const PaginationList: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
-    ref?: ((instance: HTMLUListElement | null) => void) | RefObject<HTMLUListElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type PaginationListProps = HTMLArkProps<'ul'>;
+export declare const PaginationList: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLUListElement>>;
+} & RefAttributes<HTMLUListElement>>;

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type PaginationNextPageTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
-export declare const PaginationNextPageTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type PaginationNextPageTriggerProps = HTMLArkProps<'button'>;
+export declare const PaginationNextPageTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLButtonElement>>;
+} & RefAttributes<HTMLButtonElement>>;

package/pagination/pagination-page-trigger.d.ts

@@ -1,10 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
 import type { PageTriggerProps } from '@zag-js/pagination';
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type PaginationPageTriggerProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, PageTriggerProps>;
-export declare const PaginationPageTrigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof PageTriggerProps> & PageTriggerProps & RefAttributes<HTMLButtonElement>>;
+export type PaginationPageTriggerProps = Assign<HTMLArkProps<'button'>, PageTriggerProps>;
+export declare const PaginationPageTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof PageTriggerProps> & PageTriggerProps & RefAttributes<HTMLButtonElement>>;

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type PaginationPrevPageTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
-export declare const PaginationPrevPageTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type PaginationPrevPageTriggerProps = HTMLArkProps<'button'>;
+export declare const PaginationPrevPageTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLButtonElement>>;
+} & RefAttributes<HTMLButtonElement>>;

package/pagination/pagination.d.ts

@@ -1,14 +1,10 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UsePaginationProps, type UsePaginationReturn } from './use-pagination';
-export type PaginationProps = Assign<Assign<ComponentPropsWithoutRef<typeof ark.nav>, UsePaginationProps>, {
-    children: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
+export type PaginationProps = Assign<Assign<HTMLArkProps<'nav'>, UsePaginationProps>, {
+    children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
 }>;
-export declare const Pagination: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | RefObject<HTMLElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, UsePaginationProps>, "children"> & {
-    children: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
+export declare const Pagination: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"nav">, UsePaginationProps>, "children"> & {
+    children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
 } & RefAttributes<HTMLElement>>;

package/pagination/use-pagination.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as pagination from '@zag-js/pagination';
 import { type Optional } from '../types';
-export type UsePaginationProps = Optional<pagination.Context, 'id'> & {
+export interface UsePaginationProps extends Optional<pagination.Context, 'id'> {
     defaultPage?: pagination.Context['page'];
-};
-export declare const usePagination: (props: UsePaginationProps) => pagination.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
-export type UsePaginationReturn = ReturnType<typeof usePagination>;
+}
+export type UsePaginationReturn = pagination.Api;
+export declare const usePagination: (props: UsePaginationProps) => UsePaginationReturn;

package/pin-input/index.d.ts

@@ -1,43 +1,24 @@
-import { Context } from '@zag-js/pin-input';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { UsePinInputProps } from './use-pin-input';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type PinInputProps } from './pin-input';
-import { usePinInputContext } from './pin-input-context';
+import { usePinInputContext, type PinInputContext } from './pin-input-context';
 import { PinInputControl, type PinInputControlProps } from './pin-input-control';
 import { PinInputInput, type PinInputInputProps } from './pin-input-field';
 import { PinInputLabel, type PinInputLabelProps } from './pin-input-label';
 import { pinInputAnatomy } from './pin-input.anatomy';
-declare const PinInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "onChange" | "onInvalid" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string[] | undefined;
-} & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+declare const PinInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UsePinInputProps> & UsePinInputProps & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UsePinInputProps> & UsePinInputProps & RefAttributes<HTMLDivElement>>;
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "onChange" | "onInvalid" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        defaultValue?: string[] | undefined;
     } & RefAttributes<HTMLDivElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Input: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, "index"> & {
+    Input: ForwardRefExoticComponent<Omit<HTMLArkProps<"input">, "index"> & {
         index: number;
     } & RefAttributes<HTMLInputElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLabelElement>>;
+    } & RefAttributes<HTMLLabelElement>>;
 };
 export { PinInput, PinInputControl, PinInputInput, PinInputLabel, pinInputAnatomy, usePinInputContext, };
-export type { PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps };
+export type { PinInputContext, PinInputControlProps, PinInputInputProps, PinInputLabelProps, PinInputProps, };

package/pin-input/pin-input-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/pin-input';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UsePinInputReturn } from './use-pin-input';
 export type PinInputContext = UsePinInputReturn;
-export declare const PinInputProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, usePinInputContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const PinInputProvider: Provider<UsePinInputReturn>, usePinInputContext: () => UsePinInputReturn;

package/pin-input/pin-input-control.cjs

@@ -10,12 +10,9 @@ const factory = require('../factory.cjs');
 const pinInputContext = require('./pin-input-context.cjs');
 
 const PinInputControl = react.forwardRef((props, ref) => {
-  const { controlProps, hiddenInputProps } = pinInputContext.usePinInputContext();
-  const mergedProps = react$1.mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: props.children }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...hiddenInputProps })
-  ] });
+  const api = pinInputContext.usePinInputContext();
+  const mergedProps = react$1.mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 PinInputControl.displayName = "PinInputControl";
 

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type PinInputControlProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const PinInputControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type PinInputControlProps = HTMLArkProps<'div'>;
+export declare const PinInputControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/pin-input/pin-input-control.mjs

@@ -1,17 +1,14 @@
 'use client';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { usePinInputContext } from './pin-input-context.mjs';
 
 const PinInputControl = forwardRef((props, ref) => {
-  const { controlProps, hiddenInputProps } = usePinInputContext();
-  const mergedProps = mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: props.children }),
-    /* @__PURE__ */ jsx("input", { ...hiddenInputProps })
-  ] });
+  const api = usePinInputContext();
+  const mergedProps = mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 PinInputControl.displayName = "PinInputControl";
 

package/pin-input/pin-input-field.d.ts

@@ -1,13 +1,10 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type PinInputInputProps = Assign<ComponentPropsWithoutRef<typeof ark.input>, {
+export type PinInputInputProps = Assign<HTMLArkProps<'input'>, {
     index: number;
 }>;
-export declare const PinInputInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "index"> & {
+export declare const PinInputInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"input">, "index"> & {
     index: number;
 } & RefAttributes<HTMLInputElement>>;

package/pin-input/pin-input-label.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type PinInputLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
-export declare const PinInputLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export type PinInputLabelProps = HTMLArkProps<'label'>;
+export declare const PinInputLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLLabelElement>>;
+} & RefAttributes<HTMLLabelElement>>;

package/pin-input/pin-input.cjs

@@ -36,9 +36,12 @@ const PinInput = react.forwardRef((props, ref) => {
     "type",
     "value"
   ]);
-  const pinInput = usePinInput.usePinInput(usePinInputProps);
-  const mergedProps = react$1.mergeProps(pinInput.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(pinInputContext.PinInputProvider, { value: pinInput, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const api = usePinInput.usePinInput(usePinInputProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  return /* @__PURE__ */ jsxRuntime.jsxs(pinInputContext.PinInputProvider, { value: api, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 PinInput.displayName = "PinInput";