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

package/tabs/tab-list.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const tabsContext = require('./tabs-context.cjs');
 
 const TabList = react.forwardRef((props, ref) => {
-  const { tablistProps } = tabsContext.useTabsContext();
-  const mergedProps = react$1.mergeProps(tablistProps, props);
+  const api = tabsContext.useTabsContext();
+  const mergedProps = react$1.mergeProps(api.tablistProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 TabList.displayName = "TabList";

package/tabs/tab-list.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLDivElement>>;
+export interface TabListProps extends HTMLArkProps<'div'> {
+}
+export declare const TabList: ForwardRefExoticComponent<TabListProps & RefAttributes<HTMLDivElement>>;

package/tabs/tab-list.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useTabsContext } from './tabs-context.mjs';
 
 const TabList = forwardRef((props, ref) => {
-  const { tablistProps } = useTabsContext();
-  const mergedProps = mergeProps(tablistProps, props);
+  const api = useTabsContext();
+  const mergedProps = mergeProps(api.tablistProps, props);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 TabList.displayName = "TabList";

package/tabs/tab-presence.cjs

@@ -10,8 +10,8 @@ const tabsContext = require('./tabs-context.cjs');
 
 const TabPresence = (props) => {
   const { present, ...rest } = props;
-  const { value } = tabsContext.useTabsContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: present !== void 0 ? present : value === props.value, ...rest });
+  const api = tabsContext.useTabsContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: present !== void 0 ? present : api.value === props.value, ...rest });
 };
 
 exports.TabPresence = TabPresence;

package/tabs/tab-presence.d.ts

@@ -1,5 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import { type ContentProps } from '@zag-js/tabs';
 import { type PresenceProps } from '../presence';
-export type TabPresenceProps = PresenceProps & ContentProps;
+export interface TabPresenceProps extends PresenceProps, ContentProps {
+}
 export declare const TabPresence: (props: TabPresenceProps) => JSX.Element;

package/tabs/tab-presence.mjs

@@ -6,8 +6,8 @@ import { useTabsContext } from './tabs-context.mjs';
 
 const TabPresence = (props) => {
   const { present, ...rest } = props;
-  const { value } = useTabsContext();
-  return /* @__PURE__ */ jsx(Presence, { present: present !== void 0 ? present : value === props.value, ...rest });
+  const api = useTabsContext();
+  return /* @__PURE__ */ jsx(Presence, { present: present !== void 0 ? present : api.value === props.value, ...rest });
 };
 
 export { TabPresence };

package/tabs/tab-trigger.cjs

@@ -12,8 +12,8 @@ const tabsContext = require('./tabs-context.cjs');
 
 const TabTrigger = react.forwardRef((props, ref) => {
   const [tabProps, buttonProps] = createSplitProps.createSplitProps()(props, ["disabled", "value"]);
-  const { getTriggerProps } = tabsContext.useTabsContext();
-  const mergedProps = react$1.mergeProps(getTriggerProps(tabProps), buttonProps);
+  const api = tabsContext.useTabsContext();
+  const mergedProps = react$1.mergeProps(api.getTriggerProps(tabProps), buttonProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 TabTrigger.displayName = "TabTrigger";

package/tabs/tab-trigger.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import type { TriggerProps } from '@zag-js/tabs';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-export type TabTriggerProps = Assign<HTMLArkProps<'button'>, TriggerProps>;
-export declare const TabTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof TriggerProps> & TriggerProps & RefAttributes<HTMLButtonElement>>;
+export interface TabTriggerProps extends Assign<HTMLArkProps<'button'>, TriggerProps> {
+}
+export declare const TabTrigger: ForwardRefExoticComponent<TabTriggerProps & RefAttributes<HTMLButtonElement>>;

package/tabs/tab-trigger.mjs

@@ -8,8 +8,8 @@ import { useTabsContext } from './tabs-context.mjs';
 
 const TabTrigger = forwardRef((props, ref) => {
   const [tabProps, buttonProps] = createSplitProps()(props, ["disabled", "value"]);
-  const { getTriggerProps } = useTabsContext();
-  const mergedProps = mergeProps(getTriggerProps(tabProps), buttonProps);
+  const api = useTabsContext();
+  const mergedProps = mergeProps(api.getTriggerProps(tabProps), buttonProps);
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 TabTrigger.displayName = "TabTrigger";

package/tabs/tabs-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseTabsReturn } from './use-tabs';
-export type TabsContext = UseTabsReturn;
-export declare const TabsProvider: Provider<UseTabsReturn>, useTabsContext: () => UseTabsReturn;
+export interface TabsContext extends UseTabsReturn {
+}
+export declare const TabsProvider: Provider<TabsContext>, useTabsContext: () => TabsContext;

package/tabs/tabs.cjs

@@ -20,15 +20,15 @@ const Tabs = react.forwardRef((props, ref) => {
     "id",
     "ids",
     "loop",
-    "onChange",
-    "onFocus",
+    "onFocusChange",
+    "onValueChange",
     "orientation",
     "translations",
     "value"
   ]);
-  const tabs = useTabs.useTabs(useTabsProps);
-  const mergedProps = react$1.mergeProps(tabs.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(tabsContext.TabsProvider, { value: tabs, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const api = useTabs.useTabs(useTabsProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(tabsContext.TabsProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
 });
 Tabs.displayName = "Tabs";
 

package/tabs/tabs.d.ts

@@ -3,5 +3,6 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
 import { type UseTabsProps } from './use-tabs';
-export type TabsProps = Assign<HTMLArkProps<'div'>, UseTabsProps>;
-export declare const Tabs: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseTabsProps> & UseTabsProps & RefAttributes<HTMLDivElement>>;
+export interface TabsProps extends Assign<HTMLArkProps<'div'>, UseTabsProps> {
+}
+export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;

package/tabs/tabs.mjs

@@ -16,15 +16,15 @@ const Tabs = forwardRef((props, ref) => {
     "id",
     "ids",
     "loop",
-    "onChange",
-    "onFocus",
+    "onFocusChange",
+    "onValueChange",
     "orientation",
     "translations",
     "value"
   ]);
-  const tabs = useTabs(useTabsProps);
-  const mergedProps = mergeProps(tabs.rootProps, divProps);
-  return /* @__PURE__ */ jsx(TabsProvider, { value: tabs, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  const api = useTabs(useTabsProps);
+  const mergedProps = mergeProps(api.rootProps, divProps);
+  return /* @__PURE__ */ jsx(TabsProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
 });
 Tabs.displayName = "Tabs";
 

package/tabs/use-tabs.cjs

@@ -7,6 +7,7 @@ const react$1 = require('@zag-js/react');
 const tabs = require('@zag-js/tabs');
 const react = require('react');
 require('../environment/index.cjs');
+const useEvent = require('../use-event.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
@@ -29,16 +30,17 @@ function _interopNamespaceDefault(e) {
 const tabs__namespace = /*#__PURE__*/_interopNamespaceDefault(tabs);
 
 const useTabs = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent.useEvent(props.onValueChange, { sync: true }),
+    onFocusChange: useEvent.useEvent(props.onFocusChange)
   };
   const [state, send] = react$1.useMachine(tabs__namespace.machine(initialContext), { context });
   return tabs__namespace.connect(state, send, react$1.normalizeProps);

package/tabs/use-tabs.d.ts

@@ -1,7 +1,12 @@
+import { type PropTypes } from '@zag-js/react';
 import * as tabs from '@zag-js/tabs';
 import { type Optional } from '../types';
 export interface UseTabsProps extends Optional<tabs.Context, 'id'> {
+    /**
+     * The initial value of the tabs.
+     */
     defaultValue?: tabs.Context['value'];
 }
-export type UseTabsReturn = tabs.Api;
+export interface UseTabsReturn extends tabs.Api<PropTypes> {
+}
 export declare const useTabs: (props: UseTabsProps) => UseTabsReturn;

package/tabs/use-tabs.mjs

@@ -3,19 +3,21 @@ import { useMachine, normalizeProps } from '@zag-js/react';
 import * as tabs from '@zag-js/tabs';
 import { useId } from 'react';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useTabs = (props) => {
-  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     ...props,
     value: props.defaultValue
   };
   const context = {
     ...initialContext,
-    value: props.value
+    value: props.value,
+    onValueChange: useEvent(props.onValueChange, { sync: true }),
+    onFocusChange: useEvent(props.onFocusChange)
   };
   const [state, send] = useMachine(tabs.machine(initialContext), { context });
   return tabs.connect(state, send, normalizeProps);

package/tags-input/index.cjs

@@ -3,38 +3,38 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const tag = require('./tag.cjs');
-const tagDeleteTrigger = require('./tag-delete-trigger.cjs');
-const tagInput = require('./tag-input.cjs');
-const tagsInput$1 = require('./tags-input.cjs');
+const tagsInput = require('./tags-input.cjs');
 const tagsInputClearTrigger = require('./tags-input-clear-trigger.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 const tagsInputControl = require('./tags-input-control.cjs');
-const tagsInputField = require('./tags-input-field.cjs');
+const tagsInputInput = require('./tags-input-input.cjs');
+const tagsInputItem = require('./tags-input-item.cjs');
+const tagsInputItemContext = require('./tags-input-item-context.cjs');
+const tagsInputItemDeleteTrigger = require('./tags-input-item-delete-trigger.cjs');
+const tagsInputItemInput = require('./tags-input-item-input.cjs');
+const tagsInputItemText = require('./tags-input-item-text.cjs');
 const tagsInputLabel = require('./tags-input-label.cjs');
-const tagsInput = require('@zag-js/tags-input');
 
-const TagsInput = Object.assign(tagsInput$1.TagsInput, {
-  Root: tagsInput$1.TagsInput,
+const TagsInput = Object.assign(tagsInput.TagsInput, {
+  Root: tagsInput.TagsInput,
   ClearTrigger: tagsInputClearTrigger.TagsInputClearTrigger,
   Control: tagsInputControl.TagsInputControl,
-  Input: tagsInputField.TagsInputInput,
-  Label: tagsInputLabel.TagsInputLabel,
-  Tag: tag.Tag,
-  TagInput: tagInput.TagInput,
-  TagDeleteTrigger: tagDeleteTrigger.TagDeleteTrigger
+  Input: tagsInputInput.TagsInputInput,
+  Item: tagsInputItem.TagsInputItem,
+  ItemDeleteTrigger: tagsInputItemDeleteTrigger.TagsInputItemDeleteTrigger,
+  ItemInput: tagsInputItemInput.TagsInputItemInput,
+  ItemText: tagsInputItemText.TagsInputItemText,
+  Label: tagsInputLabel.TagsInputLabel
 });
 
-exports.Tag = tag.Tag;
-exports.TagDeleteTrigger = tagDeleteTrigger.TagDeleteTrigger;
-exports.TagInput = tagInput.TagInput;
 exports.TagsInputClearTrigger = tagsInputClearTrigger.TagsInputClearTrigger;
 exports.useTagsInputContext = tagsInputContext.useTagsInputContext;
 exports.TagsInputControl = tagsInputControl.TagsInputControl;
-exports.TagsInputInput = tagsInputField.TagsInputInput;
+exports.TagsInputInput = tagsInputInput.TagsInputInput;
+exports.TagsInputItem = tagsInputItem.TagsInputItem;
+exports.useTagsInputItemContext = tagsInputItemContext.useTagsInputItemContext;
+exports.TagsInputItemDeleteTrigger = tagsInputItemDeleteTrigger.TagsInputItemDeleteTrigger;
+exports.TagsInputItemInput = tagsInputItemInput.TagsInputItemInput;
+exports.TagsInputItemText = tagsInputItemText.TagsInputItemText;
 exports.TagsInputLabel = tagsInputLabel.TagsInputLabel;
-Object.defineProperty(exports, 'tagsInputAnatomy', {
-  enumerable: true,
-  get: () => tagsInput.anatomy
-});
 exports.TagsInput = TagsInput;

package/tags-input/index.d.ts

@@ -1,63 +1,26 @@
-import { UseTagsInputProps } from './use-tags-input';
-import { HTMLArkProps } from '..';
-import { Assign } from '../types';
-import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, ButtonHTMLAttributes, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } 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, type TagsInputContext } from './tags-input-context';
 import { TagsInputControl, type TagsInputControlProps } from './tags-input-control';
-import { TagsInputInput, type TagsInputInputProps } from './tags-input-field';
+import { TagsInputInput, type TagsInputInputProps } from './tags-input-input';
+import { TagsInputItem, type TagsInputItemProps } from './tags-input-item';
+import { useTagsInputItemContext, type TagsInputItemContext } from './tags-input-item-context';
+import { TagsInputItemDeleteTrigger, type TagsInputItemDeleteTriggerProps } from './tags-input-item-delete-trigger';
+import { TagsInputItemInput, type TagsInputItemInputProps } from './tags-input-item-input';
+import { TagsInputItemText, type TagsInputItemTextProps } from './tags-input-item-text';
 import { TagsInputLabel, type TagsInputLabelProps } from './tags-input-label';
-import { tagsInputAnatomy } from './tags-input.anatomy';
-declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"input">, UseTagsInputProps>, "children"> & {
-    children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
-} & RefAttributes<HTMLInputElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"input">, UseTagsInputProps>, "children"> & {
-        children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
-    } & RefAttributes<HTMLInputElement>>;
-    ClearTrigger: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
-    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Input: ForwardRefExoticComponent<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLInputElement>>;
-    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLLabelElement>>;
-    Tag: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof {
-        index: string | number;
-        value: string;
-        disabled?: boolean | undefined;
-    }> & {
-        index: string | number;
-        value: string;
-        disabled?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    TagInput: ForwardRefExoticComponent<Omit<HTMLArkProps<"input">, keyof {
-        index: string | number;
-        value: string;
-        disabled?: boolean | undefined;
-    }> & {
-        index: string | number;
-        value: string;
-        disabled?: boolean | undefined;
-    } & RefAttributes<HTMLInputElement>>;
-    TagDeleteTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof {
-        index: string | number;
-        value: string;
-        disabled?: boolean | undefined;
-    }> & {
-        index: string | number;
-        value: string;
-        disabled?: boolean | undefined;
-    } & RefAttributes<HTMLButtonElement>>;
+declare const TagsInput: ForwardRefExoticComponent<TagsInputProps & RefAttributes<HTMLInputElement>> & {
+    Root: ForwardRefExoticComponent<TagsInputProps & RefAttributes<HTMLInputElement>>;
+    ClearTrigger: ForwardRefExoticComponent<TagsInputClearTriggerProps & RefAttributes<HTMLButtonElement>>;
+    Control: ForwardRefExoticComponent<TagsInputControlProps & RefAttributes<HTMLDivElement>>;
+    Input: ForwardRefExoticComponent<TagsInputInputProps & RefAttributes<HTMLInputElement>>;
+    Item: ForwardRefExoticComponent<TagsInputItemProps & RefAttributes<HTMLDivElement>>;
+    ItemDeleteTrigger: ForwardRefExoticComponent<TagsInputItemDeleteTriggerProps & RefAttributes<HTMLButtonElement>>;
+    ItemInput: ForwardRefExoticComponent<TagsInputItemInputProps & RefAttributes<HTMLInputElement>>;
+    ItemText: ForwardRefExoticComponent<TagsInputItemTextProps & RefAttributes<HTMLSpanElement>>;
+    Label: ForwardRefExoticComponent<TagsInputLabelProps & RefAttributes<HTMLLabelElement>>;
 };
-export { Tag, TagDeleteTrigger, TagInput, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputLabel, tagsInputAnatomy, useTagsInputContext, };
-export type { TagDeleteTriggerProps, TagInputProps, TagProps, TagsInputClearTriggerProps, TagsInputContext, TagsInputControlProps, TagsInputInputProps, TagsInputLabelProps, TagsInputProps, };
+export { TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, useTagsInputContext, useTagsInputItemContext, };
+export type { TagsInputClearTriggerProps, TagsInputContext, TagsInputControlProps, TagsInputInputProps, TagsInputItemContext, TagsInputItemDeleteTriggerProps, TagsInputItemInputProps, TagsInputItemProps, TagsInputItemTextProps, TagsInputLabelProps, TagsInputProps, };

package/tags-input/index.mjs

@@ -1,24 +1,26 @@
 'use client';
-import { Tag } from './tag.mjs';
-import { TagDeleteTrigger } from './tag-delete-trigger.mjs';
-import { TagInput } from './tag-input.mjs';
 import { TagsInput as TagsInput$1 } from './tags-input.mjs';
 import { TagsInputClearTrigger } from './tags-input-clear-trigger.mjs';
 export { useTagsInputContext } from './tags-input-context.mjs';
 import { TagsInputControl } from './tags-input-control.mjs';
-import { TagsInputInput } from './tags-input-field.mjs';
+import { TagsInputInput } from './tags-input-input.mjs';
+import { TagsInputItem } from './tags-input-item.mjs';
+export { useTagsInputItemContext } from './tags-input-item-context.mjs';
+import { TagsInputItemDeleteTrigger } from './tags-input-item-delete-trigger.mjs';
+import { TagsInputItemInput } from './tags-input-item-input.mjs';
+import { TagsInputItemText } from './tags-input-item-text.mjs';
 import { TagsInputLabel } from './tags-input-label.mjs';
-export { anatomy as tagsInputAnatomy } from '@zag-js/tags-input';
 
 const TagsInput = Object.assign(TagsInput$1, {
   Root: TagsInput$1,
   ClearTrigger: TagsInputClearTrigger,
   Control: TagsInputControl,
   Input: TagsInputInput,
-  Label: TagsInputLabel,
-  Tag,
-  TagInput,
-  TagDeleteTrigger
+  Item: TagsInputItem,
+  ItemDeleteTrigger: TagsInputItemDeleteTrigger,
+  ItemInput: TagsInputItemInput,
+  ItemText: TagsInputItemText,
+  Label: TagsInputLabel
 });
 
-export { Tag, TagDeleteTrigger, TagInput, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputLabel };
+export { TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel };

package/tags-input/tags-input-clear-trigger.cjs

@@ -11,8 +11,8 @@ const tagsInputContext = require('./tags-input-context.cjs');
 
 const TagsInputClearTrigger = react.forwardRef(
   (props, ref) => {
-    const { clearTriggerProps } = tagsInputContext.useTagsInputContext();
-    const mergedProps = react$1.mergeProps(clearTriggerProps, props);
+    const api = tagsInputContext.useTagsInputContext();
+    const mergedProps = react$1.mergeProps(api.clearTriggerProps, props);
     return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
   }
 );

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

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLButtonElement>>;
+export interface TagsInputClearTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const TagsInputClearTrigger: ForwardRefExoticComponent<TagsInputClearTriggerProps & RefAttributes<HTMLButtonElement>>;

package/tags-input/tags-input-clear-trigger.mjs

@@ -7,8 +7,8 @@ import { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagsInputClearTrigger = forwardRef(
   (props, ref) => {
-    const { clearTriggerProps } = useTagsInputContext();
-    const mergedProps = mergeProps(clearTriggerProps, props);
+    const api = useTagsInputContext();
+    const mergedProps = mergeProps(api.clearTriggerProps, props);
     return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
   }
 );

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

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseTagsInputReturn } from './use-tags-input';
-export type TagsInputContext = UseTagsInputReturn;
-export declare const TagsInputProvider: Provider<UseTagsInputReturn>, useTagsInputContext: () => UseTagsInputReturn;
+export interface TagsInputContext extends UseTagsInputReturn {
+}
+export declare const TagsInputProvider: Provider<TagsInputContext>, useTagsInputContext: () => TagsInputContext;

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

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, 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;
-} & RefAttributes<HTMLDivElement>>;
+export interface TagsInputControlProps extends HTMLArkProps<'div'> {
+}
+export declare const TagsInputControl: ForwardRefExoticComponent<TagsInputControlProps & RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface TagsInputInputProps extends HTMLArkProps<'input'> {
+}
+export declare const TagsInputInput: ForwardRefExoticComponent<TagsInputInputProps & RefAttributes<HTMLInputElement>>;

package/tags-input/tags-input-item-context.cjs

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../create-context.cjs');
+
+const [TagsInputItemProvider, useTagsInputItemContext] = createContext.createContext(
+  {
+    name: "TagsInputItemContext",
+    hookName: "useTagsInputItemContext",
+    providerName: "<TagsInputItemProvider />"
+  }
+);
+
+exports.TagsInputItemProvider = TagsInputItemProvider;
+exports.useTagsInputItemContext = useTagsInputItemContext;

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

@@ -0,0 +1,6 @@
+import { Provider } from 'react';
+/// <reference types="react" />
+import type { ItemProps } from '@zag-js/tags-input';
+export interface TagsInputItemContext extends ItemProps {
+}
+export declare const TagsInputItemProvider: Provider<TagsInputItemContext>, useTagsInputItemContext: () => TagsInputItemContext;

package/tags-input/tags-input-item-context.mjs

@@ -0,0 +1,12 @@
+'use client';
+import { createContext } from '../create-context.mjs';
+
+const [TagsInputItemProvider, useTagsInputItemContext] = createContext(
+  {
+    name: "TagsInputItemContext",
+    hookName: "useTagsInputItemContext",
+    providerName: "<TagsInputItemProvider />"
+  }
+);
+
+export { TagsInputItemProvider, useTagsInputItemContext };

package/tags-input/tags-input-item-delete-trigger.cjs

@@ -0,0 +1,21 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const tagsInputContext = require('./tags-input-context.cjs');
+const tagsInputItemContext = require('./tags-input-item-context.cjs');
+
+const TagsInputItemDeleteTrigger = react.forwardRef((props, ref) => {
+  const api = tagsInputContext.useTagsInputContext();
+  const itemProps = tagsInputItemContext.useTagsInputItemContext();
+  const mergedProps = react$1.mergeProps(api.getItemDeleteTriggerProps(itemProps), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
+});
+TagsInputItemDeleteTrigger.displayName = "TagsInputItemDeleteTrigger";
+
+exports.TagsInputItemDeleteTrigger = TagsInputItemDeleteTrigger;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface TagsInputItemDeleteTriggerProps extends HTMLArkProps<'button'> {
+}
+export declare const TagsInputItemDeleteTrigger: ForwardRefExoticComponent<TagsInputItemDeleteTriggerProps & RefAttributes<HTMLButtonElement>>;

package/tags-input/tags-input-item-delete-trigger.mjs

@@ -0,0 +1,17 @@
+'use client';
+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';
+import { useTagsInputItemContext } from './tags-input-item-context.mjs';
+
+const TagsInputItemDeleteTrigger = forwardRef((props, ref) => {
+  const api = useTagsInputContext();
+  const itemProps = useTagsInputItemContext();
+  const mergedProps = mergeProps(api.getItemDeleteTriggerProps(itemProps), props);
+  return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
+});
+TagsInputItemDeleteTrigger.displayName = "TagsInputItemDeleteTrigger";
+
+export { TagsInputItemDeleteTrigger };

package/tags-input/tags-input-item-input.cjs

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const tagsInputContext = require('./tags-input-context.cjs');
+const tagsInputItemContext = require('./tags-input-item-context.cjs');
+
+const TagsInputItemInput = react.forwardRef(
+  (props, ref) => {
+    const api = tagsInputContext.useTagsInputContext();
+    const itemProps = tagsInputItemContext.useTagsInputItemContext();
+    const mergedProps = react$1.mergeProps(api.getItemInputProps(itemProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+  }
+);
+TagsInputItemInput.displayName = "TagsInputItemInput";
+
+exports.TagsInputItemInput = TagsInputItemInput;

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

@@ -0,0 +1,6 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import { type HTMLArkProps } from '../factory';
+export interface TagsInputItemInputProps extends HTMLArkProps<'input'> {
+}
+export declare const TagsInputItemInput: ForwardRefExoticComponent<TagsInputItemInputProps & RefAttributes<HTMLInputElement>>;