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

package/tabs/tab-indicator.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type TabIndicatorProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const TabIndicator: 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 TabIndicatorProps = HTMLArkProps<'div'>;
+export declare const TabIndicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/tabs/tab-list.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type TabListProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const TabList: 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 TabListProps = HTMLArkProps<'div'>;
+export declare const TabList: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/tabs/tab-trigger.d.ts

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

package/tabs/tabs-context.d.ts

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

package/tabs/tabs.cjs

@@ -21,7 +21,6 @@ const Tabs = react.forwardRef((props, ref) => {
     "ids",
     "loop",
     "onChange",
-    "onDelete",
     "onFocus",
     "orientation",
     "translations",

package/tabs/tabs.d.ts

@@ -1,13 +1,7 @@
-import { Context } from '@zag-js/tabs';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, 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';
 import { type UseTabsProps } from './use-tabs';
-export type TabsProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, UseTabsProps>;
-export declare const Tabs: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, "value" | "getRootNode" | "id" | "ids" | "orientation" | "onFocus" | "onChange" | "defaultValue" | "dir" | "loop" | "translations" | "activationMode" | "onDelete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string | null | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export type TabsProps = Assign<HTMLArkProps<'div'>, UseTabsProps>;
+export declare const Tabs: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseTabsProps> & UseTabsProps & RefAttributes<HTMLDivElement>>;

package/tabs/tabs.mjs

@@ -17,7 +17,6 @@ const Tabs = forwardRef((props, ref) => {
     "ids",
     "loop",
     "onChange",
-    "onDelete",
     "onFocus",
     "orientation",
     "translations",

package/tabs/tabs.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Tabs } from '.';
+import { Tabs } from './';
 type TabsType = typeof Tabs;
 declare const meta: Meta<TabsType>;
 export default meta;

package/tabs/use-tabs.cjs

@@ -9,6 +9,25 @@ const react = require('react');
 require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const tabs__namespace = /*#__PURE__*/_interopNamespaceDefault(tabs);
+
 const useTabs = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
@@ -21,8 +40,8 @@ const useTabs = (props) => {
     ...initialContext,
     value: props.value
   };
-  const [state, send] = react$1.useMachine(tabs.machine(initialContext), { context });
-  return tabs.connect(state, send, react$1.normalizeProps);
+  const [state, send] = react$1.useMachine(tabs__namespace.machine(initialContext), { context });
+  return tabs__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useTabs = useTabs;

package/tabs/use-tabs.d.ts

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

package/tabs/use-tabs.mjs

@@ -1,6 +1,6 @@
 'use client';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import { machine, connect } from '@zag-js/tabs';
+import * as tabs from '@zag-js/tabs';
 import { useId } from 'react';
 import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
@@ -17,8 +17,8 @@ const useTabs = (props) => {
     ...initialContext,
     value: props.value
   };
-  const [state, send] = useMachine(machine(initialContext), { context });
-  return connect(state, send, normalizeProps);
+  const [state, send] = useMachine(tabs.machine(initialContext), { context });
+  return tabs.connect(state, send, normalizeProps);
 };
 
 export { useTabs };

package/tags-input/index.d.ts

@@ -1,56 +1,37 @@
 import { UseTagsInputProps } from './use-tags-input';
+import { HTMLArkProps } from '..';
 import { Assign } from '../types';
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, ReactNode, RefAttributes, ButtonHTMLAttributes, HTMLAttributes, LabelHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { Tag, type TagProps } from './tag';
 import { TagDeleteTrigger, type TagDeleteTriggerProps } from './tag-delete-trigger';
 import { TagInput, type TagInputProps } from './tag-input';
 import { type TagsInputProps } from './tags-input';
 import { TagsInputClearTrigger, type TagsInputClearTriggerProps } from './tags-input-clear-trigger';
-import { useTagsInputContext } from './tags-input-context';
+import { useTagsInputContext, type TagsInputContext } from './tags-input-context';
 import { TagsInputControl, type TagsInputControlProps } from './tags-input-control';
 import { TagsInputInput, type TagsInputInputProps } from './tags-input-field';
 import { TagsInputLabel, type TagsInputLabelProps } from './tags-input-label';
 import { tagsInputAnatomy } from './tags-input.anatomy';
-declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, UseTagsInputProps>, "children"> & {
-    children: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
+declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"input">, UseTagsInputProps>, "children"> & {
+    children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
 } & RefAttributes<HTMLInputElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, UseTagsInputProps>, "children"> & {
-        children: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
+    Root: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"input">, UseTagsInputProps>, "children"> & {
+        children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
     } & RefAttributes<HTMLInputElement>>;
-    ClearTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLButtonElement>>;
-    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    ClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLDivElement>>;
-    Input: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLButtonElement>>;
+    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLInputElement>>;
-    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    Input: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLLabelElement>>;
-    Tag: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-    } & {
+    } & RefAttributes<HTMLInputElement>>;
+    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, keyof {
+    } & RefAttributes<HTMLLabelElement>>;
+    Tag: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof {
         index: string | number;
         value: string;
         disabled?: boolean | undefined;
@@ -59,11 +40,7 @@ declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<Detaile
         value: string;
         disabled?: boolean | undefined;
     } & RefAttributes<HTMLDivElement>>;
-    TagInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, keyof {
+    TagInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"input">, keyof {
         index: string | number;
         value: string;
         disabled?: boolean | undefined;
@@ -72,11 +49,7 @@ declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<Detaile
         value: string;
         disabled?: boolean | undefined;
     } & RefAttributes<HTMLInputElement>>;
-    TagDeleteTrigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref">, keyof {
+    TagDeleteTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof {
         index: string | number;
         value: string;
         disabled?: boolean | undefined;
@@ -87,4 +60,4 @@ declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<Detaile
     } & RefAttributes<HTMLButtonElement>>;
 };
 export { Tag, TagDeleteTrigger, TagInput, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputLabel, tagsInputAnatomy, useTagsInputContext, };
-export type { TagDeleteTriggerProps, TagInputProps, TagProps, TagsInputClearTriggerProps, TagsInputControlProps, TagsInputInputProps, TagsInputLabelProps, TagsInputProps, };
+export type { TagDeleteTriggerProps, TagInputProps, TagProps, TagsInputClearTriggerProps, TagsInputContext, TagsInputControlProps, TagsInputInputProps, TagsInputLabelProps, TagsInputProps, };

package/tags-input/tag-delete-trigger.d.ts

@@ -1,15 +1,12 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, 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';
 type _TagProps = {
     index: string | number;
     value: string;
     disabled?: boolean;
 };
-export type TagDeleteTriggerProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, _TagProps>;
-export declare const TagDeleteTrigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof _TagProps> & _TagProps & RefAttributes<HTMLButtonElement>>;
+export type TagDeleteTriggerProps = Assign<HTMLArkProps<'button'>, _TagProps>;
+export declare const TagDeleteTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof _TagProps> & _TagProps & RefAttributes<HTMLButtonElement>>;
 export {};

package/tags-input/tag-input.d.ts

@@ -1,15 +1,12 @@
-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';
 type _TagProps = {
     index: string | number;
     value: string;
     disabled?: boolean;
 };
-export type TagInputProps = Assign<ComponentPropsWithoutRef<typeof ark.input>, _TagProps>;
-export declare const TagInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof _TagProps> & _TagProps & RefAttributes<HTMLInputElement>>;
+export type TagInputProps = Assign<HTMLArkProps<'input'>, _TagProps>;
+export declare const TagInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"input">, keyof _TagProps> & _TagProps & RefAttributes<HTMLInputElement>>;
 export {};

package/tags-input/tag.d.ts

@@ -1,15 +1,12 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, 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';
 type _TagProps = {
     index: string | number;
     value: string;
     disabled?: boolean;
 };
-export type TagProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, _TagProps>;
-export declare const Tag: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, keyof _TagProps> & _TagProps & RefAttributes<HTMLDivElement>>;
+export type TagProps = Assign<HTMLArkProps<'div'>, _TagProps>;
+export declare const Tag: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof _TagProps> & _TagProps & RefAttributes<HTMLDivElement>>;
 export {};

package/tags-input/tags-input-clear-trigger.d.ts

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type TagsInputClearTriggerProps = ComponentPropsWithoutRef<typeof ark.button>;
-export declare const TagsInputClearTrigger: 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 TagsInputClearTriggerProps = HTMLArkProps<'button'>;
+export declare const TagsInputClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLButtonElement>>;
+} & RefAttributes<HTMLButtonElement>>;

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

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

package/tags-input/tags-input-control.cjs

@@ -10,12 +10,9 @@ const factory = require('../factory.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputControl = react.forwardRef((props, ref) => {
-  const { controlProps, hiddenInputProps } = tagsInputContext.useTagsInputContext();
-  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 = tagsInputContext.useTagsInputContext();
+  const mergedProps = react$1.mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 TagsInputControl.displayName = "TagsInputControl";
 

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type TagsInputControlProps = ComponentPropsWithoutRef<typeof ark.div>;
-export declare const TagsInputControl: 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 TagsInputControlProps = HTMLArkProps<'div'>;
+export declare const TagsInputControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLDivElement>>;
+} & RefAttributes<HTMLDivElement>>;

package/tags-input/tags-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 { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagsInputControl = forwardRef((props, ref) => {
-  const { controlProps, hiddenInputProps } = useTagsInputContext();
-  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 = useTagsInputContext();
+  const mergedProps = mergeProps(api.controlProps, props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 TagsInputControl.displayName = "TagsInputControl";
 

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

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

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

@@ -1,8 +1,7 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
-export type TagsInputLabelProps = ComponentPropsWithoutRef<typeof ark.label>;
-export declare const TagsInputLabel: 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 TagsInputLabelProps = HTMLArkProps<'label'>;
+export declare const TagsInputLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     asChild?: boolean | undefined;
-}, "ref"> & RefAttributes<HTMLLabelElement>>;
+} & RefAttributes<HTMLLabelElement>>;

package/tags-input/tags-input.cjs

@@ -35,22 +35,24 @@ const TagsInput = react.forwardRef((props, ref) => {
       "maxLength",
       "name",
       "onChange",
+      "onFocusChange",
       "onFocusOutside",
-      "onHighlight",
       "onInteractOutside",
       "onInvalid",
       "onPointerDownOutside",
-      "onTagUpdate",
       "readOnly",
       "translations",
       "validate",
       "value"
     ]
   );
-  const tagsInput = useTagsInput.useTagsInput(useTagsInputProps);
-  const mergedProps = react$1.mergeProps(tagsInput.rootProps, inputProps);
-  const view = runIfFn.runIfFn(children, tagsInput);
-  return /* @__PURE__ */ jsxRuntime.jsx(tagsInputContext.TagsInputProvider, { value: tagsInput, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+  const api = useTagsInput.useTagsInput(useTagsInputProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, inputProps);
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsxs(tagsInputContext.TagsInputProvider, { value: api, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 TagsInput.displayName = "TagsInput";
 

package/tags-input/tags-input.d.ts

@@ -1,14 +1,10 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, 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 UseTagsInputProps } from './use-tags-input';
-export type TagsInputProps = Assign<Assign<ComponentPropsWithoutRef<typeof ark.input>, UseTagsInputProps>, {
-    children: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
+export type TagsInputProps = Assign<Assign<HTMLArkProps<'input'>, UseTagsInputProps>, {
+    children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
 }>;
-export declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "ref">, UseTagsInputProps>, "children"> & {
-    children: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
+export declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"input">, UseTagsInputProps>, "children"> & {
+    children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
 } & RefAttributes<HTMLInputElement>>;

package/tags-input/tags-input.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -31,22 +31,24 @@ const TagsInput = forwardRef((props, ref) => {
       "maxLength",
       "name",
       "onChange",
+      "onFocusChange",
       "onFocusOutside",
-      "onHighlight",
       "onInteractOutside",
       "onInvalid",
       "onPointerDownOutside",
-      "onTagUpdate",
       "readOnly",
       "translations",
       "validate",
       "value"
     ]
   );
-  const tagsInput = useTagsInput(useTagsInputProps);
-  const mergedProps = mergeProps(tagsInput.rootProps, inputProps);
-  const view = runIfFn(children, tagsInput);
-  return /* @__PURE__ */ jsx(TagsInputProvider, { value: tagsInput, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+  const api = useTagsInput(useTagsInputProps);
+  const mergedProps = mergeProps(api.rootProps, inputProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsxs(TagsInputProvider, { value: api, children: [
+    /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 TagsInput.displayName = "TagsInput";
 

package/tags-input/use-tags-input.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as tagsInput from '@zag-js/tags-input';
 import { type Optional } from '../types';
-export type UseTagsInputProps = Optional<tagsInput.Context, 'id'> & {
+export interface UseTagsInputProps extends Optional<tagsInput.Context, 'id'> {
     defaultValue?: tagsInput.Context['value'];
-};
-export declare const useTagsInput: (props: UseTagsInputProps) => tagsInput.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
-export type UseTagsInputReturn = ReturnType<typeof useTagsInput>;
+}
+export type UseTagsInputReturn = tagsInput.Api;
+export declare const useTagsInput: (props: UseTagsInputProps) => UseTagsInputReturn;