@ark-ui/react 1.2.1 → 2.0.0

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/{tabs.stories.d.ts → 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,6 +1,6 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
-import { type TagsInputProps } from './tags-input';
+import type { HighlightChangeDetails as TagsInputHighlightChangeDetails, ValidityChangeDetails as TagsInputValidityChangeDetails, ValueChangeDetails as TagsInputValueChangeDetails } from '@zag-js/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';
@@ -9,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, TagsInputInputProps, TagsInputItemContext, TagsInputItemDeleteTriggerProps, TagsInputItemInputProps, TagsInputItemProps, TagsInputItemTextProps, TagsInputLabelProps, TagsInputProps, };
+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/{tags-input.stories.d.ts → 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-input.cjs

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

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

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useTagsInputContext } from './tags-input-context.mjs';
 
 const TagsInputInput = forwardRef((props, ref) => {
-  const { inputProps } = useTagsInputContext();
-  const mergedProps = mergeProps(inputProps, props);
+  const api = useTagsInputContext();
+  const mergedProps = mergeProps(api.inputProps, props);
   return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
 });
 TagsInputInput.displayName = "TagsInputInput";

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;

package/toast/index.cjs

@@ -4,23 +4,24 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const createToaster = require('./create-toaster.cjs');
-const toast = require('./toast.cjs');
 const toastCloseTrigger = require('./toast-close-trigger.cjs');
 const toastDescription = require('./toast-description.cjs');
 const toastGroup = require('./toast-group.cjs');
+const toastRoot = require('./toast-root.cjs');
 const toastTitle = require('./toast-title.cjs');
 
-const Toast = Object.assign(toast.Toast, {
-  Root: toast.Toast,
+const Toast = {
+  Root: toastRoot.ToastRoot,
   CloseTrigger: toastCloseTrigger.ToastCloseTrigger,
   Description: toastDescription.ToastDescription,
   Group: toastGroup.ToastGroup,
   Title: toastTitle.ToastTitle
-});
+};
 
 exports.createToaster = createToaster.createToaster;
 exports.ToastCloseTrigger = toastCloseTrigger.ToastCloseTrigger;
 exports.ToastDescription = toastDescription.ToastDescription;
 exports.ToastGroup = toastGroup.ToastGroup;
+exports.ToastRoot = toastRoot.ToastRoot;
 exports.ToastTitle = toastTitle.ToastTitle;
 exports.Toast = Toast;

package/toast/index.d.ts

@@ -1,17 +1,17 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
-import { type ToastProps } from './toast';
 import { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger';
 import { ToastDescription, type ToastDescriptionProps } from './toast-description';
 import { ToastGroup, type ToastGroupProps } from './toast-group';
+import { ToastRoot, type ToastRootProps } from './toast-root';
 import { ToastTitle, type ToastTitleProps } from './toast-title';
-declare const Toast: ForwardRefExoticComponent<ToastProps & RefAttributes<HTMLLIElement>> & {
-    Root: ForwardRefExoticComponent<ToastProps & RefAttributes<HTMLLIElement>>;
+export declare const Toast: {
+    Root: ForwardRefExoticComponent<ToastRootProps & RefAttributes<HTMLLIElement>>;
     CloseTrigger: ForwardRefExoticComponent<ToastCloseTriggerProps & RefAttributes<HTMLButtonElement>>;
     Description: ForwardRefExoticComponent<ToastDescriptionProps & RefAttributes<HTMLDivElement>>;
     Group: ForwardRefExoticComponent<ToastGroupProps & RefAttributes<HTMLOListElement>>;
     Title: ForwardRefExoticComponent<ToastTitleProps & RefAttributes<HTMLDivElement>>;
 };
-export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle };
-export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastProps, ToastTitleProps, };
+export { createToaster, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle };
+export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastRootProps, ToastTitleProps, };

package/toast/index.mjs

@@ -1,17 +1,17 @@
 'use client';
 export { createToaster } from './create-toaster.mjs';
-import { Toast as Toast$1 } from './toast.mjs';
 import { ToastCloseTrigger } from './toast-close-trigger.mjs';
 import { ToastDescription } from './toast-description.mjs';
 import { ToastGroup } from './toast-group.mjs';
+import { ToastRoot } from './toast-root.mjs';
 import { ToastTitle } from './toast-title.mjs';
 
-const Toast = Object.assign(Toast$1, {
-  Root: Toast$1,
+const Toast = {
+  Root: ToastRoot,
   CloseTrigger: ToastCloseTrigger,
   Description: ToastDescription,
   Group: ToastGroup,
   Title: ToastTitle
-});
+};
 
-export { Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle };
+export { Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle };

package/toast/{toast.stories.d.ts → stories/toast.stories.d.ts}

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

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

@@ -9,11 +9,11 @@ const react = require('react');
 const factory = require('../factory.cjs');
 const toastContext = require('./toast-context.cjs');
 
-const Toast = react.forwardRef((props, ref) => {
+const ToastRoot = react.forwardRef((props, ref) => {
   const api = toastContext.useToastContext();
   const mergedProps = react$1.mergeProps(api.rootProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.li, { ...mergedProps, ref });
 });
-Toast.displayName = "Toast";
+ToastRoot.displayName = "ToastRoot";
 
-exports.Toast = Toast;
+exports.ToastRoot = ToastRoot;

package/toast/toast-root.d.ts

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

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

@@ -5,11 +5,11 @@ import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
 import { useToastContext } from './toast-context.mjs';
 
-const Toast = forwardRef((props, ref) => {
+const ToastRoot = forwardRef((props, ref) => {
   const api = useToastContext();
   const mergedProps = mergeProps(api.rootProps, props);
   return /* @__PURE__ */ jsx(ark.li, { ...mergedProps, ref });
 });
-Toast.displayName = "Toast";
+ToastRoot.displayName = "ToastRoot";
 
-export { Toast };
+export { ToastRoot };

package/toggle-group/index.cjs

@@ -3,15 +3,16 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const toggleGroup = require('./toggle-group.cjs');
 const toggleGroupContext = require('./toggle-group-context.cjs');
 const toggleGroupItem = require('./toggle-group-item.cjs');
+const toggleGroupRoot = require('./toggle-group-root.cjs');
 
-const ToggleGroup = Object.assign(toggleGroup.ToggleGroup, {
-  Root: toggleGroup.ToggleGroup,
+const ToggleGroup = {
+  Root: toggleGroupRoot.ToggleGroupRoot,
   Item: toggleGroupItem.ToggleGroupItem
-});
+};
 
 exports.useToggleGroupContext = toggleGroupContext.useToggleGroupContext;
 exports.ToggleGroupItem = toggleGroupItem.ToggleGroupItem;
+exports.ToggleGroupRoot = toggleGroupRoot.ToggleGroupRoot;
 exports.ToggleGroup = ToggleGroup;