@ark-ui/react 1.3.0 → 2.0.0

package/switch/index.d.ts

@@ -1,16 +1,16 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import type { CheckedChangeDetails as SwitchCheckedChangeDetails } from '@zag-js/switch';
-import { type SwitchProps } from './switch';
 import { useSwitchContext, type SwitchContext } from './switch-context';
 import { SwitchControl, type SwitchControlProps } from './switch-control';
 import { SwitchLabel, type SwitchLabelProps } from './switch-label';
+import { SwitchRoot, type SwitchRootProps } from './switch-root';
 import { SwitchThumb, type SwitchThumbProps } from './switch-thumb';
-declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLLabelElement>> & {
-    Root: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLLabelElement>>;
+export declare const Switch: {
+    Root: ForwardRefExoticComponent<SwitchRootProps & RefAttributes<HTMLLabelElement>>;
     Control: ForwardRefExoticComponent<SwitchControlProps & RefAttributes<HTMLSpanElement>>;
     Label: ForwardRefExoticComponent<SwitchLabelProps & RefAttributes<HTMLSpanElement>>;
     Thumb: ForwardRefExoticComponent<SwitchThumbProps & RefAttributes<HTMLSpanElement>>;
 };
-export { Switch, SwitchControl, SwitchLabel, SwitchThumb, useSwitchContext };
-export type { SwitchCheckedChangeDetails, SwitchContext, SwitchControlProps, SwitchLabelProps, SwitchProps, SwitchThumbProps, };
+export { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, useSwitchContext };
+export type { SwitchCheckedChangeDetails, SwitchContext, SwitchControlProps, SwitchLabelProps, SwitchRootProps, SwitchThumbProps, };

package/switch/index.mjs

@@ -1,15 +1,15 @@
 'use client';
-import { Switch as Switch$1 } from './switch.mjs';
 export { useSwitchContext } from './switch-context.mjs';
 import { SwitchControl } from './switch-control.mjs';
 import { SwitchLabel } from './switch-label.mjs';
+import { SwitchRoot } from './switch-root.mjs';
 import { SwitchThumb } from './switch-thumb.mjs';
 
-const Switch = Object.assign(Switch$1, {
-  Root: Switch$1,
+const Switch = {
+  Root: SwitchRoot,
   Control: SwitchControl,
   Label: SwitchLabel,
   Thumb: SwitchThumb
-});
+};
 
-export { Switch, SwitchControl, SwitchLabel, SwitchThumb };
+export { Switch, SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb };

package/switch/stories/switch.stories.d.ts

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Switch } from '../';
-type SwitchType = typeof Switch;
-declare const meta: Meta<SwitchType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const InitialValue: () => JSX.Element;

package/switch/{switch.cjs → switch-root.cjs}

@@ -12,7 +12,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const switchContext = require('./switch-context.cjs');
 const useSwitch = require('./use-switch.cjs');
 
-const Switch = react.forwardRef((props, ref) => {
+const SwitchRoot = react.forwardRef((props, ref) => {
   const [switchProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
     "checked",
     "defaultChecked",
@@ -34,6 +34,6 @@ const Switch = react.forwardRef((props, ref) => {
   const view = runIfFn.runIfFn(children, api);
   return /* @__PURE__ */ jsxRuntime.jsx(switchContext.SwitchProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
 });
-Switch.displayName = "Switch";
+SwitchRoot.displayName = "SwitchRoot";
 
-exports.Switch = Switch;
+exports.SwitchRoot = SwitchRoot;

package/switch/{switch.d.ts → switch-root.d.ts}

@@ -2,8 +2,8 @@ import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 import { type UseSwitchProps, type UseSwitchReturn } from './use-switch';
-export interface SwitchProps extends Assign<Assign<HTMLArkProps<'label'>, {
+export interface SwitchRootProps extends Assign<Assign<HTMLArkProps<'label'>, {
     children?: ReactNode | ((api: UseSwitchReturn) => ReactNode);
 }>, UseSwitchProps> {
 }
-export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLLabelElement>>;
+export declare const SwitchRoot: ForwardRefExoticComponent<SwitchRootProps & RefAttributes<HTMLLabelElement>>;

package/switch/{switch.mjs → switch-root.mjs}

@@ -8,7 +8,7 @@ import { runIfFn } from '../run-if-fn.mjs';
 import { SwitchProvider } from './switch-context.mjs';
 import { useSwitch } from './use-switch.mjs';
 
-const Switch = forwardRef((props, ref) => {
+const SwitchRoot = forwardRef((props, ref) => {
   const [switchProps, { children, ...localProps }] = createSplitProps()(props, [
     "checked",
     "defaultChecked",
@@ -30,6 +30,6 @@ const Switch = forwardRef((props, ref) => {
   const view = runIfFn(children, api);
   return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
 });
-Switch.displayName = "Switch";
+SwitchRoot.displayName = "SwitchRoot";
 
-export { Switch };
+export { SwitchRoot };

package/switch/tests/basic.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type SwitchRootProps } from '../';
+export declare const ComponentUnderTest: (props: SwitchRootProps) => JSX.Element;

package/switch/use-switch.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react$1 = require('@zag-js/react');
 const zagSwitch = require('@zag-js/switch');
 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/switch/use-switch.mjs

@@ -2,9 +2,8 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as zagSwitch from '@zag-js/switch';
 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 useSwitch = (props) => {
   const initialContext = {

package/tabs/index.cjs

@@ -7,20 +7,21 @@ 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 tabs = require('./tabs.cjs');
 const tabsContext = require('./tabs-context.cjs');
+const tabsRoot = require('./tabs-root.cjs');
 
-const Tabs = Object.assign(tabs.Tabs, {
-  Root: tabs.Tabs,
+const Tabs = {
+  Root: tabsRoot.TabsRoot,
   Content: tabContent.TabContent,
   Indicator: tabIndicator.TabIndicator,
   List: tabList.TabList,
   Trigger: tabTrigger.TabTrigger
-});
+};
 
 exports.TabContent = tabContent.TabContent;
 exports.TabIndicator = tabIndicator.TabIndicator;
 exports.TabList = tabList.TabList;
 exports.TabTrigger = tabTrigger.TabTrigger;
 exports.useTabsContext = tabsContext.useTabsContext;
+exports.TabsRoot = tabsRoot.TabsRoot;
 exports.Tabs = Tabs;

package/tabs/index.d.ts

@@ -5,14 +5,14 @@ import { TabContent, type TabContentProps } from './tab-content';
 import { TabIndicator, type TabIndicatorProps } from './tab-indicator';
 import { TabList, type TabListProps } from './tab-list';
 import { TabTrigger, type TabTriggerProps } from './tab-trigger';
-import { type TabsProps } from './tabs';
 import { useTabsContext, type TabsContext } from './tabs-context';
-declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
+import { TabsRoot, type TabsRootProps } from './tabs-root';
+export declare const Tabs: {
+    Root: ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;
     Content: ForwardRefExoticComponent<TabContentProps & RefAttributes<HTMLDivElement>>;
     Indicator: ForwardRefExoticComponent<TabIndicatorProps & RefAttributes<HTMLDivElement>>;
     List: ForwardRefExoticComponent<TabListProps & RefAttributes<HTMLDivElement>>;
     Trigger: ForwardRefExoticComponent<TabTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
-export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, useTabsContext };
-export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsContext, TabsFocusChangeDetails, TabsProps, TabsValueChangeDetails, };
+export { TabContent, TabIndicator, TabList, TabTrigger, TabsRoot, useTabsContext };
+export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsContext, TabsFocusChangeDetails, TabsRootProps, TabsValueChangeDetails, };

package/tabs/index.mjs

@@ -3,15 +3,15 @@ import { TabContent } from './tab-content.mjs';
 import { TabIndicator } from './tab-indicator.mjs';
 import { TabList } from './tab-list.mjs';
 import { TabTrigger } from './tab-trigger.mjs';
-import { Tabs as Tabs$1 } from './tabs.mjs';
 export { useTabsContext } from './tabs-context.mjs';
+import { TabsRoot } from './tabs-root.mjs';
 
-const Tabs = Object.assign(Tabs$1, {
-  Root: Tabs$1,
+const Tabs = {
+  Root: TabsRoot,
   Content: TabContent,
   Indicator: TabIndicator,
   List: TabList,
   Trigger: TabTrigger
-});
+};
 
-export { TabContent, TabIndicator, TabList, TabTrigger, Tabs };
+export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, TabsRoot };

package/tabs/stories/tabs.stories.d.ts

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

package/tabs/tab-content.cjs

@@ -9,11 +9,10 @@ require('@zag-js/tabs');
 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 presenceContext = require('../presence/presence-context.cjs');
 const presencePropsContext = require('../presence/presence-props-context.cjs');
 const usePresence = require('../presence/use-presence.cjs');
-const presenceContext = require('../presence/presence-context.cjs');
+const tabsContext = require('./tabs-context.cjs');
 
 const TabContent = react.forwardRef((props, ref) => {
   const [contentProps, localProps] = createSplitProps.createSplitProps()(props, ["value"]);

package/tabs/tab-content.mjs

@@ -5,11 +5,10 @@ import '@zag-js/tabs';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import '../presence/index.mjs';
-import { useTabsContext } from './tabs-context.mjs';
+import { PresenceProvider } from '../presence/presence-context.mjs';
 import { usePresencePropsContext } from '../presence/presence-props-context.mjs';
 import { usePresence } from '../presence/use-presence.mjs';
-import { PresenceProvider } from '../presence/presence-context.mjs';
+import { useTabsContext } from './tabs-context.mjs';
 
 const TabContent = forwardRef((props, ref) => {
   const [contentProps, localProps] = createSplitProps()(props, ["value"]);

package/tabs/{tabs.cjs → tabs-root.cjs}

@@ -8,13 +8,12 @@ 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 presencePropsContext = require('../presence/presence-props-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.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 Tabs = react.forwardRef((props, ref) => {
+const TabsRoot = react.forwardRef((props, ref) => {
   const [presenceProps, tabsProps] = splitPresenceProps.splitPresenceProps(props);
   const [useTabsProps, localprops] = createSplitProps.createSplitProps()(tabsProps, [
     "activationMode",
@@ -34,6 +33,6 @@ const Tabs = react.forwardRef((props, ref) => {
   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";
+TabsRoot.displayName = "TabsRoot";
 
-exports.Tabs = Tabs;
+exports.TabsRoot = TabsRoot;

package/tabs/{tabs.d.ts → tabs-root.d.ts}

@@ -4,6 +4,6 @@ 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 interface TabsRootProps extends Assign<HTMLArkProps<'div'>, UseTabsProps>, UsePresenceProps {
 }
-export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
+export declare const TabsRoot: ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;

package/tabs/{tabs.mjs → tabs-root.mjs}

@@ -4,13 +4,12 @@ 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 { 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';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
-import { PresencePropsProvider } from '../presence/presence-props-context.mjs';
 
-const Tabs = forwardRef((props, ref) => {
+const TabsRoot = forwardRef((props, ref) => {
   const [presenceProps, tabsProps] = splitPresenceProps(props);
   const [useTabsProps, localprops] = createSplitProps()(tabsProps, [
     "activationMode",
@@ -30,6 +29,6 @@ const Tabs = forwardRef((props, ref) => {
   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";
+TabsRoot.displayName = "TabsRoot";
 
-export { Tabs };
+export { TabsRoot };

package/tabs/tests/basic.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type TabsRootProps } from '../';
+export declare const ComponentUnderTest: (props: TabsRootProps) => JSX.Element;

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

@@ -3,7 +3,6 @@
 
 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 +11,23 @@ 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 = Object.assign(tagsInput.TagsInput, {
-  Root: tagsInput.TagsInput,
+const TagsInput = {
+  Root: tagsInputRoot.TagsInputRoot,
   ClearTrigger: tagsInputClearTrigger.TagsInputClearTrigger,
   Control: tagsInputControl.TagsInputControl,
   Input: tagsInputInput.TagsInputInput,
   Item: tagsInputItem.TagsInputItem,
+  ItemPreview: tagsInputItemPreview.TagsInputItemPreview,
   ItemDeleteTrigger: tagsInputItemDeleteTrigger.TagsInputItemDeleteTrigger,
   ItemInput: tagsInputItemInput.TagsInputItemInput,
   ItemText: tagsInputItemText.TagsInputItemText,
   Label: tagsInputLabel.TagsInputLabel
-});
+};
 
 exports.TagsInputClearTrigger = tagsInputClearTrigger.TagsInputClearTrigger;
 exports.useTagsInputContext = tagsInputContext.useTagsInputContext;
@@ -35,6 +37,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.TagsInputRoot = tagsInputRoot.TagsInputRoot;
 exports.TagsInput = TagsInput;

package/tags-input/index.d.ts

@@ -1,7 +1,6 @@
 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 +9,21 @@ 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>>;
+import { TagsInputRoot, type TagsInputRootProps } from './tags-input-root';
+export declare const TagsInput: {
+    Root: ForwardRefExoticComponent<TagsInputRootProps & RefAttributes<HTMLInputElement>>;
     ClearTrigger: ForwardRefExoticComponent<TagsInputClearTriggerProps & RefAttributes<HTMLButtonElement>>;
     Control: ForwardRefExoticComponent<TagsInputControlProps & RefAttributes<HTMLDivElement>>;
     Input: ForwardRefExoticComponent<TagsInputInputProps & RefAttributes<HTMLInputElement>>;
     Item: ForwardRefExoticComponent<TagsInputItemProps & RefAttributes<HTMLDivElement>>;
+    ItemPreview: ForwardRefExoticComponent<TagsInputItemPreviewProps & 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, };
+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,5 +1,4 @@
 'use client';
-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';
@@ -8,19 +7,22 @@ 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 { TagsInputItemPreview } from './tags-input-item-preview.mjs';
 import { TagsInputItemText } from './tags-input-item-text.mjs';
 import { TagsInputLabel } from './tags-input-label.mjs';
+import { TagsInputRoot } from './tags-input-root.mjs';
 
-const TagsInput = Object.assign(TagsInput$1, {
-  Root: TagsInput$1,
+const TagsInput = {
+  Root: TagsInputRoot,
   ClearTrigger: TagsInputClearTrigger,
   Control: TagsInputControl,
   Input: TagsInputInput,
   Item: TagsInputItem,
+  ItemPreview: TagsInputItemPreview,
   ItemDeleteTrigger: TagsInputItemDeleteTrigger,
   ItemInput: TagsInputItemInput,
   ItemText: TagsInputItemText,
   Label: TagsInputLabel
-});
+};
 
-export { TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel };
+export { TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItemText, TagsInputLabel, TagsInputRoot };

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

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { TagsInput } from '../';
-type TagsInputType = typeof TagsInput;
-declare const meta: Meta<TagsInputType>;
+declare const meta: Meta;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const InitialValue: () => JSX.Element;

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.cjs → tags-input-root.cjs}

@@ -12,7 +12,7 @@ const runIfFn = require('../run-if-fn.cjs');
 const tagsInputContext = require('./tags-input-context.cjs');
 const useTagsInput = require('./use-tags-input.cjs');
 
-const TagsInput = react.forwardRef((props, ref) => {
+const TagsInputRoot = react.forwardRef((props, ref) => {
   const [useTagsInputProps, { children, ...inputProps }] = createSplitProps.createSplitProps()(
     props,
     [
@@ -54,6 +54,6 @@ const TagsInput = react.forwardRef((props, ref) => {
     /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
   ] });
 });
-TagsInput.displayName = "TagsInput";
+TagsInputRoot.displayName = "TagsInputRoot";
 
-exports.TagsInput = TagsInput;
+exports.TagsInputRoot = TagsInputRoot;

package/tags-input/{tags-input.d.ts → tags-input-root.d.ts}

@@ -2,8 +2,8 @@ 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'>, {
+export interface TagsInputRootProps extends Assign<Assign<HTMLArkProps<'div'>, {
     children?: ReactNode | ((api: UseTagsInputReturn) => ReactNode);
 }>, UseTagsInputProps> {
 }
-export declare const TagsInput: ForwardRefExoticComponent<TagsInputProps & RefAttributes<HTMLInputElement>>;
+export declare const TagsInputRoot: ForwardRefExoticComponent<TagsInputRootProps & RefAttributes<HTMLInputElement>>;

package/tags-input/{tags-input.mjs → tags-input-root.mjs}

@@ -8,7 +8,7 @@ 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 TagsInputRoot = forwardRef((props, ref) => {
   const [useTagsInputProps, { children, ...inputProps }] = createSplitProps()(
     props,
     [
@@ -50,6 +50,6 @@ const TagsInput = forwardRef((props, ref) => {
     /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
   ] });
 });
-TagsInput.displayName = "TagsInput";
+TagsInputRoot.displayName = "TagsInputRoot";
 
-export { TagsInput };
+export { TagsInputRoot };

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

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import { type TagsInputRootProps } from '../';
+export declare const ComponentUnderTest: (props: TagsInputRootProps) => JSX.Element;

package/tags-input/use-tags-input.cjs

@@ -6,9 +6,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const react$1 = require('@zag-js/react');
 const tagsInput = require('@zag-js/tags-input');
 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/tags-input/use-tags-input.mjs

@@ -2,9 +2,8 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as tagsInput from '@zag-js/tags-input';
 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 useTagsInput = (props) => {
   const initialContext = {

package/toast/create-toaster.cjs

@@ -7,10 +7,9 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('@zag-js/react');
 const toast = require('@zag-js/toast');
 const react$1 = require('react');
-require('../environment/index.cjs');
+const environmentContext = require('../environment/environment-context.cjs');
 const toastContext = require('./toast-context.cjs');
 const toastGroup = require('./toast-group.cjs');
-const environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/toast/create-toaster.mjs

@@ -3,10 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { normalizeProps, useActor, mergeProps } from '@zag-js/react';
 import * as toast from '@zag-js/toast';
 import { forwardRef, useEffect } from 'react';
-import '../environment/index.mjs';
+import { useEnvironmentContext } from '../environment/environment-context.mjs';
 import { ToastProvider } from './toast-context.mjs';
 import { ToastGroup } from './toast-group.mjs';
-import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const createToaster = (props) => {
   const { placement, ...rest } = props;