@ark-ui/react 1.3.0 → 2.0.1

package/tabs/tabs-root.mjs

@@ -0,0 +1,34 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import { TabsProvider } from './tabs-context.mjs';
+import { useTabs } from './use-tabs.mjs';
+
+const TabsRoot = forwardRef((props, ref) => {
+  const [presenceProps, tabsProps] = splitPresenceProps(props);
+  const [useTabsProps, localprops] = createSplitProps()(tabsProps, [
+    "activationMode",
+    "defaultValue",
+    "dir",
+    "getRootNode",
+    "id",
+    "ids",
+    "loop",
+    "onFocusChange",
+    "onValueChange",
+    "orientation",
+    "translations",
+    "value"
+  ]);
+  const api = useTabs(useTabsProps);
+  const mergedProps = mergeProps(api.rootProps, localprops);
+  return /* @__PURE__ */ jsx(TabsProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
+});
+TabsRoot.displayName = "TabsRoot";
+
+export { TabsRoot };

package/tabs/tabs.cjs

@@ -1,39 +1,17 @@
-'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 createSplitProps = require('../create-split-props.cjs');
-const factory = require('../factory.cjs');
-require('../presence/index.cjs');
-const tabsContext = require('./tabs-context.cjs');
-const useTabs = require('./use-tabs.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
-const presencePropsContext = require('../presence/presence-props-context.cjs');
+const tabContent = require('./tab-content.cjs');
+const tabIndicator = require('./tab-indicator.cjs');
+const tabList = require('./tab-list.cjs');
+const tabTrigger = require('./tab-trigger.cjs');
+const tabsRoot = require('./tabs-root.cjs');
 
-const Tabs = react.forwardRef((props, ref) => {
-  const [presenceProps, tabsProps] = splitPresenceProps.splitPresenceProps(props);
-  const [useTabsProps, localprops] = createSplitProps.createSplitProps()(tabsProps, [
-    "activationMode",
-    "defaultValue",
-    "dir",
-    "getRootNode",
-    "id",
-    "ids",
-    "loop",
-    "onFocusChange",
-    "onValueChange",
-    "orientation",
-    "translations",
-    "value"
-  ]);
-  const api = useTabs.useTabs(useTabsProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, localprops);
-  return /* @__PURE__ */ jsxRuntime.jsx(tabsContext.TabsProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(presencePropsContext.PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) }) });
-});
-Tabs.displayName = "Tabs";
 
-exports.Tabs = Tabs;
+
+exports.Content = tabContent.TabContent;
+exports.Indicator = tabIndicator.TabIndicator;
+exports.List = tabList.TabList;
+exports.Trigger = tabTrigger.TabTrigger;
+exports.Root = tabsRoot.TabsRoot;

package/tabs/tabs.d.ts

@@ -1,9 +1,6 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
-import { type HTMLArkProps } from '../factory';
-import { type UsePresenceProps } from '../presence';
-import { type Assign } from '../types';
-import { type UseTabsProps } from './use-tabs';
-export interface TabsProps extends Assign<HTMLArkProps<'div'>, UseTabsProps>, UsePresenceProps {
-}
-export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
+import { TabContent as Content } from './tab-content';
+import { TabIndicator as Indicator } from './tab-indicator';
+import { TabList as List } from './tab-list';
+import { TabTrigger as Trigger } from './tab-trigger';
+import { TabsRoot as Root } from './tabs-root';
+export { Content, Indicator, List, Root, Trigger };

package/tabs/tabs.mjs

@@ -1,35 +1,5 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
-import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { TabsProvider } from './tabs-context.mjs';
-import { useTabs } from './use-tabs.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
-
-const Tabs = forwardRef((props, ref) => {
-  const [presenceProps, tabsProps] = splitPresenceProps(props);
-  const [useTabsProps, localprops] = createSplitProps()(tabsProps, [
-    "activationMode",
-    "defaultValue",
-    "dir",
-    "getRootNode",
-    "id",
-    "ids",
-    "loop",
-    "onFocusChange",
-    "onValueChange",
-    "orientation",
-    "translations",
-    "value"
-  ]);
-  const api = useTabs(useTabsProps);
-  const mergedProps = mergeProps(api.rootProps, localprops);
-  return /* @__PURE__ */ jsx(TabsProvider, { value: api, children: /* @__PURE__ */ jsx(PresencePropsProvider, { value: presenceProps, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) }) });
-});
-Tabs.displayName = "Tabs";
-
-export { Tabs };
+export { TabContent as Content } from './tab-content.mjs';
+export { TabIndicator as Indicator } from './tab-indicator.mjs';
+export { TabList as List } from './tab-list.mjs';
+export { TabTrigger as Trigger } from './tab-trigger.mjs';
+export { TabsRoot as Root } from './tabs-root.mjs';

package/tabs/use-tabs.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 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');
+const useEvent = require('../use-event.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/tabs/use-tabs.mjs

@@ -2,9 +2,8 @@
 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';
+import { useEvent } from '../use-event.mjs';
 
 const useTabs = (props) => {
   const initialContext = {

package/tags-input/index.cjs

@@ -1,9 +1,7 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-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');
@@ -12,20 +10,13 @@ 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 tagsInputItemPreview = require('./tags-input-item-preview.cjs');
 const tagsInputItemText = require('./tags-input-item-text.cjs');
 const tagsInputLabel = require('./tags-input-label.cjs');
+const tagsInputRoot = require('./tags-input-root.cjs');
+const tagsInput = require('./tags-input.cjs');
+
 
-const TagsInput = Object.assign(tagsInput.TagsInput, {
-  Root: tagsInput.TagsInput,
-  ClearTrigger: tagsInputClearTrigger.TagsInputClearTrigger,
-  Control: tagsInputControl.TagsInputControl,
-  Input: tagsInputInput.TagsInputInput,
-  Item: tagsInputItem.TagsInputItem,
-  ItemDeleteTrigger: tagsInputItemDeleteTrigger.TagsInputItemDeleteTrigger,
-  ItemInput: tagsInputItemInput.TagsInputItemInput,
-  ItemText: tagsInputItemText.TagsInputItemText,
-  Label: tagsInputLabel.TagsInputLabel
-});
 
 exports.TagsInputClearTrigger = tagsInputClearTrigger.TagsInputClearTrigger;
 exports.useTagsInputContext = tagsInputContext.useTagsInputContext;
@@ -35,6 +26,8 @@ exports.TagsInputItem = tagsInputItem.TagsInputItem;
 exports.useTagsInputItemContext = tagsInputItemContext.useTagsInputItemContext;
 exports.TagsInputItemDeleteTrigger = tagsInputItemDeleteTrigger.TagsInputItemDeleteTrigger;
 exports.TagsInputItemInput = tagsInputItemInput.TagsInputItemInput;
+exports.TagsInputItemPreview = tagsInputItemPreview.TagsInputItemPreview;
 exports.TagsInputItemText = tagsInputItemText.TagsInputItemText;
 exports.TagsInputLabel = tagsInputLabel.TagsInputLabel;
-exports.TagsInput = TagsInput;
+exports.TagsInputRoot = tagsInputRoot.TagsInputRoot;
+exports.TagsInput = tagsInput;

package/tags-input/index.d.ts

@@ -1,7 +1,4 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { HighlightChangeDetails as TagsInputHighlightChangeDetails, ValidityChangeDetails as TagsInputValidityChangeDetails, ValueChangeDetails as TagsInputValueChangeDetails } from '@zag-js/tags-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';
@@ -10,18 +7,10 @@ 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 { TagsInputItemPreview, type TagsInputItemPreviewProps } from './tags-input-item-preview';
 import { TagsInputItemText, type TagsInputItemTextProps } from './tags-input-item-text';
 import { TagsInputLabel, type TagsInputLabelProps } from './tags-input-label';
-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 { TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, useTagsInputContext, useTagsInputItemContext, };
-export type { TagsInputClearTriggerProps, TagsInputContext, TagsInputControlProps, TagsInputHighlightChangeDetails, TagsInputInputProps, TagsInputItemContext, TagsInputItemDeleteTriggerProps, TagsInputItemInputProps, TagsInputItemProps, TagsInputItemTextProps, TagsInputLabelProps, TagsInputProps, TagsInputValidityChangeDetails, TagsInputValueChangeDetails, };
+import { TagsInputRoot, type TagsInputRootProps } from './tags-input-root';
+export * as TagsInput from './tags-input';
+export { TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot, useTagsInputContext, useTagsInputItemContext, };
+export type { TagsInputClearTriggerProps, TagsInputContext, TagsInputControlProps, TagsInputHighlightChangeDetails, TagsInputInputProps, TagsInputItemContext, TagsInputItemDeleteTriggerProps, TagsInputItemInputProps, TagsInputItemPreviewProps, TagsInputItemProps, TagsInputItemTextProps, TagsInputLabelProps, TagsInputRootProps, TagsInputValidityChangeDetails, TagsInputValueChangeDetails, };

package/tags-input/index.mjs

@@ -1,26 +1,14 @@
-'use client';
-import { TagsInput as TagsInput$1 } from './tags-input.mjs';
-import { TagsInputClearTrigger } from './tags-input-clear-trigger.mjs';
+export { 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-input.mjs';
-import { TagsInputItem } from './tags-input-item.mjs';
+export { TagsInputControl } from './tags-input-control.mjs';
+export { TagsInputInput } from './tags-input-input.mjs';
+export { 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';
-
-const TagsInput = Object.assign(TagsInput$1, {
-  Root: TagsInput$1,
-  ClearTrigger: TagsInputClearTrigger,
-  Control: TagsInputControl,
-  Input: TagsInputInput,
-  Item: TagsInputItem,
-  ItemDeleteTrigger: TagsInputItemDeleteTrigger,
-  ItemInput: TagsInputItemInput,
-  ItemText: TagsInputItemText,
-  Label: TagsInputLabel
-});
-
-export { TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel };
+export { TagsInputItemDeleteTrigger } from './tags-input-item-delete-trigger.mjs';
+export { TagsInputItemInput } from './tags-input-item-input.mjs';
+export { TagsInputItemPreview } from './tags-input-item-preview.mjs';
+export { TagsInputItemText } from './tags-input-item-text.mjs';
+export { TagsInputLabel } from './tags-input-label.mjs';
+export { TagsInputRoot } from './tags-input-root.mjs';
+import * as tagsInput from './tags-input.mjs';
+export { tagsInput as TagsInput };

package/tags-input/tags-input-item-preview.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 TagsInputItemPreview = react.forwardRef(
+  (props, ref) => {
+    const api = tagsInputContext.useTagsInputContext();
+    const itemProps = tagsInputItemContext.useTagsInputItemContext();
+    const mergedProps = react$1.mergeProps(api.getItemPreviewProps(itemProps), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+  }
+);
+TagsInputItemPreview.displayName = "TagsInputItemPreview";
+
+exports.TagsInputItemPreview = TagsInputItemPreview;

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

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

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

@@ -0,0 +1,19 @@
+'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 TagsInputItemPreview = forwardRef(
+  (props, ref) => {
+    const api = useTagsInputContext();
+    const itemProps = useTagsInputItemContext();
+    const mergedProps = mergeProps(api.getItemPreviewProps(itemProps), props);
+    return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+  }
+);
+TagsInputItemPreview.displayName = "TagsInputItemPreview";
+
+export { TagsInputItemPreview };

package/tags-input/tags-input-root.cjs

@@ -0,0 +1,59 @@
+'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 createSplitProps = require('../create-split-props.cjs');
+const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
+const tagsInputContext = require('./tags-input-context.cjs');
+const useTagsInput = require('./use-tags-input.cjs');
+
+const TagsInputRoot = react.forwardRef((props, ref) => {
+  const [useTagsInputProps, { children, ...inputProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "addOnPaste",
+      "allowEditTag",
+      "allowOverflow",
+      "autoFocus",
+      "blurBehavior",
+      "defaultValue",
+      "delimiter",
+      "dir",
+      "disabled",
+      "form",
+      "getRootNode",
+      "id",
+      "ids",
+      "inputValue",
+      "invalid",
+      "max",
+      "maxLength",
+      "name",
+      "onFocusOutside",
+      "onHighlightChange",
+      "onInteractOutside",
+      "onPointerDownOutside",
+      "onValueChange",
+      "onValueInvalid",
+      "readOnly",
+      "translations",
+      "validate",
+      "value"
+    ]
+  );
+  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 })
+  ] });
+});
+TagsInputRoot.displayName = "TagsInputRoot";
+
+exports.TagsInputRoot = TagsInputRoot;

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

@@ -0,0 +1,9 @@
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
+import { type HTMLArkProps } from '../factory';
+import { type Assign } from '../types';
+import { type UseTagsInputProps, type UseTagsInputReturn } from './use-tags-input';
+export interface TagsInputRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseTagsInputReturn) => ReactNode);
+}>, UseTagsInputProps> {
+}
+export declare const TagsInputRoot: ForwardRefExoticComponent<TagsInputRootProps & RefAttributes<HTMLInputElement>>;

package/tags-input/tags-input-root.mjs

@@ -0,0 +1,55 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../create-split-props.mjs';
+import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
+import { TagsInputProvider } from './tags-input-context.mjs';
+import { useTagsInput } from './use-tags-input.mjs';
+
+const TagsInputRoot = forwardRef((props, ref) => {
+  const [useTagsInputProps, { children, ...inputProps }] = createSplitProps()(
+    props,
+    [
+      "addOnPaste",
+      "allowEditTag",
+      "allowOverflow",
+      "autoFocus",
+      "blurBehavior",
+      "defaultValue",
+      "delimiter",
+      "dir",
+      "disabled",
+      "form",
+      "getRootNode",
+      "id",
+      "ids",
+      "inputValue",
+      "invalid",
+      "max",
+      "maxLength",
+      "name",
+      "onFocusOutside",
+      "onHighlightChange",
+      "onInteractOutside",
+      "onPointerDownOutside",
+      "onValueChange",
+      "onValueInvalid",
+      "readOnly",
+      "translations",
+      "validate",
+      "value"
+    ]
+  );
+  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 })
+  ] });
+});
+TagsInputRoot.displayName = "TagsInputRoot";
+
+export { TagsInputRoot };

package/tags-input/tags-input.cjs

@@ -1,59 +1,27 @@
-'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 createSplitProps = require('../create-split-props.cjs');
-const factory = require('../factory.cjs');
-const runIfFn = require('../run-if-fn.cjs');
-const tagsInputContext = require('./tags-input-context.cjs');
-const useTagsInput = require('./use-tags-input.cjs');
+const tagsInputClearTrigger = require('./tags-input-clear-trigger.cjs');
+const tagsInputControl = require('./tags-input-control.cjs');
+const tagsInputInput = require('./tags-input-input.cjs');
+const tagsInputItem = require('./tags-input-item.cjs');
+const tagsInputItemDeleteTrigger = require('./tags-input-item-delete-trigger.cjs');
+const tagsInputItemInput = require('./tags-input-item-input.cjs');
+const tagsInputItemPreview = require('./tags-input-item-preview.cjs');
+const tagsInputItemText = require('./tags-input-item-text.cjs');
+const tagsInputLabel = require('./tags-input-label.cjs');
+const tagsInputRoot = require('./tags-input-root.cjs');
 
-const TagsInput = react.forwardRef((props, ref) => {
-  const [useTagsInputProps, { children, ...inputProps }] = createSplitProps.createSplitProps()(
-    props,
-    [
-      "addOnPaste",
-      "allowEditTag",
-      "allowOverflow",
-      "autoFocus",
-      "blurBehavior",
-      "defaultValue",
-      "delimiter",
-      "dir",
-      "disabled",
-      "form",
-      "getRootNode",
-      "id",
-      "ids",
-      "inputValue",
-      "invalid",
-      "max",
-      "maxLength",
-      "name",
-      "onFocusOutside",
-      "onHighlightChange",
-      "onInteractOutside",
-      "onPointerDownOutside",
-      "onValueChange",
-      "onValueInvalid",
-      "readOnly",
-      "translations",
-      "validate",
-      "value"
-    ]
-  );
-  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";
 
-exports.TagsInput = TagsInput;
+
+exports.ClearTrigger = tagsInputClearTrigger.TagsInputClearTrigger;
+exports.Control = tagsInputControl.TagsInputControl;
+exports.Input = tagsInputInput.TagsInputInput;
+exports.Item = tagsInputItem.TagsInputItem;
+exports.ItemDeleteTrigger = tagsInputItemDeleteTrigger.TagsInputItemDeleteTrigger;
+exports.ItemInput = tagsInputItemInput.TagsInputItemInput;
+exports.ItemPreview = tagsInputItemPreview.TagsInputItemPreview;
+exports.ItemText = tagsInputItemText.TagsInputItemText;
+exports.Label = tagsInputLabel.TagsInputLabel;
+exports.Root = tagsInputRoot.TagsInputRoot;

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

@@ -1,9 +1,11 @@
-import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
-import { type HTMLArkProps } from '../factory';
-import { type Assign } from '../types';
-import { type UseTagsInputProps, type UseTagsInputReturn } from './use-tags-input';
-export interface TagsInputProps extends Assign<Assign<HTMLArkProps<'div'>, {
-    children?: ReactNode | ((api: UseTagsInputReturn) => ReactNode);
-}>, UseTagsInputProps> {
-}
-export declare const TagsInput: ForwardRefExoticComponent<TagsInputProps & RefAttributes<HTMLInputElement>>;
+import { TagsInputClearTrigger as ClearTrigger } from './tags-input-clear-trigger';
+import { TagsInputControl as Control } from './tags-input-control';
+import { TagsInputInput as Input } from './tags-input-input';
+import { TagsInputItem as Item } from './tags-input-item';
+import { TagsInputItemDeleteTrigger as ItemDeleteTrigger } from './tags-input-item-delete-trigger';
+import { TagsInputItemInput as ItemInput } from './tags-input-item-input';
+import { TagsInputItemPreview as ItemPreview } from './tags-input-item-preview';
+import { TagsInputItemText as ItemText } from './tags-input-item-text';
+import { TagsInputLabel as Label } from './tags-input-label';
+import { TagsInputRoot as Root } from './tags-input-root';
+export { ClearTrigger, Control, Input, Item, ItemDeleteTrigger, ItemInput, ItemPreview, ItemText, Label, Root, };

package/tags-input/tags-input.mjs

@@ -1,55 +1,10 @@
-'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { mergeProps } from '@zag-js/react';
-import { forwardRef } from 'react';
-import { createSplitProps } from '../create-split-props.mjs';
-import { ark } from '../factory.mjs';
-import { runIfFn } from '../run-if-fn.mjs';
-import { TagsInputProvider } from './tags-input-context.mjs';
-import { useTagsInput } from './use-tags-input.mjs';
-
-const TagsInput = forwardRef((props, ref) => {
-  const [useTagsInputProps, { children, ...inputProps }] = createSplitProps()(
-    props,
-    [
-      "addOnPaste",
-      "allowEditTag",
-      "allowOverflow",
-      "autoFocus",
-      "blurBehavior",
-      "defaultValue",
-      "delimiter",
-      "dir",
-      "disabled",
-      "form",
-      "getRootNode",
-      "id",
-      "ids",
-      "inputValue",
-      "invalid",
-      "max",
-      "maxLength",
-      "name",
-      "onFocusOutside",
-      "onHighlightChange",
-      "onInteractOutside",
-      "onPointerDownOutside",
-      "onValueChange",
-      "onValueInvalid",
-      "readOnly",
-      "translations",
-      "validate",
-      "value"
-    ]
-  );
-  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";
-
-export { TagsInput };
+export { TagsInputClearTrigger as ClearTrigger } from './tags-input-clear-trigger.mjs';
+export { TagsInputControl as Control } from './tags-input-control.mjs';
+export { TagsInputInput as Input } from './tags-input-input.mjs';
+export { TagsInputItem as Item } from './tags-input-item.mjs';
+export { TagsInputItemDeleteTrigger as ItemDeleteTrigger } from './tags-input-item-delete-trigger.mjs';
+export { TagsInputItemInput as ItemInput } from './tags-input-item-input.mjs';
+export { TagsInputItemPreview as ItemPreview } from './tags-input-item-preview.mjs';
+export { TagsInputItemText as ItemText } from './tags-input-item-text.mjs';
+export { TagsInputLabel as Label } from './tags-input-label.mjs';
+export { TagsInputRoot as Root } from './tags-input-root.mjs';