@ark-ui/react 1.3.0 → 2.0.1

package/splitter/splitter-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 { runIfFn } from '../run-if-fn.mjs';
+import { SplitterProvider } from './splitter-context.mjs';
+import { useSplitter } from './use-splitter.mjs';
+
+const SplitterRoot = forwardRef((props, ref) => {
+  const [useSplitterProps, { children, ...divProps }] = createSplitProps()(
+    props,
+    [
+      "defaultSize",
+      "dir",
+      "getRootNode",
+      "id",
+      "ids",
+      "onSizeChange",
+      "onSizeChangeEnd",
+      "onSizeChangeStart",
+      "orientation",
+      "size"
+    ]
+  );
+  const api = useSplitter(useSplitterProps);
+  const mergedProps = mergeProps(api.rootProps, divProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(SplitterProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+});
+SplitterRoot.displayName = "SplitterRoot";
+
+export { SplitterRoot };

package/splitter/splitter.cjs

@@ -1,38 +1,13 @@
-'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 splitterContext = require('./splitter-context.cjs');
-const useSplitter = require('./use-splitter.cjs');
+const splitterPanel = require('./splitter-panel.cjs');
+const splitterResizeTrigger = require('./splitter-resize-trigger.cjs');
+const splitterRoot = require('./splitter-root.cjs');
 
-const Splitter = react.forwardRef((props, ref) => {
-  const [useSplitterProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
-    props,
-    [
-      "defaultSize",
-      "dir",
-      "getRootNode",
-      "id",
-      "ids",
-      "onSizeChange",
-      "onSizeChangeEnd",
-      "onSizeChangeStart",
-      "orientation",
-      "size"
-    ]
-  );
-  const api = useSplitter.useSplitter(useSplitterProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, divProps);
-  const view = runIfFn.runIfFn(children, api);
-  return /* @__PURE__ */ jsxRuntime.jsx(splitterContext.SplitterProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
-});
-Splitter.displayName = "Splitter";
 
-exports.Splitter = Splitter;
+
+exports.Panel = splitterPanel.SplitterPanel;
+exports.ResizeTrigger = splitterResizeTrigger.SplitterResizeTrigger;
+exports.Root = splitterRoot.SplitterRoot;

package/splitter/splitter.d.ts

@@ -1,9 +1,4 @@
-import { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react';
-import { type HTMLArkProps } from '../factory';
-import type { Assign } from '../types';
-import { type UseSplitterProps, type UseSplitterReturn } from './use-splitter';
-export interface SplitterProps extends Assign<Assign<HTMLArkProps<'div'>, {
-    children?: ReactNode | ((api: UseSplitterReturn) => ReactNode);
-}>, UseSplitterProps> {
-}
-export declare const Splitter: ForwardRefExoticComponent<SplitterProps & RefAttributes<HTMLDivElement>>;
+import { SplitterPanel as Panel } from './splitter-panel';
+import { SplitterResizeTrigger as ResizeTrigger } from './splitter-resize-trigger';
+import { SplitterRoot as Root } from './splitter-root';
+export { Panel, ResizeTrigger, Root };

package/splitter/splitter.mjs

@@ -1,34 +1,3 @@
-'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 { runIfFn } from '../run-if-fn.mjs';
-import { SplitterProvider } from './splitter-context.mjs';
-import { useSplitter } from './use-splitter.mjs';
-
-const Splitter = forwardRef((props, ref) => {
-  const [useSplitterProps, { children, ...divProps }] = createSplitProps()(
-    props,
-    [
-      "defaultSize",
-      "dir",
-      "getRootNode",
-      "id",
-      "ids",
-      "onSizeChange",
-      "onSizeChangeEnd",
-      "onSizeChangeStart",
-      "orientation",
-      "size"
-    ]
-  );
-  const api = useSplitter(useSplitterProps);
-  const mergedProps = mergeProps(api.rootProps, divProps);
-  const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(SplitterProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
-});
-Splitter.displayName = "Splitter";
-
-export { Splitter };
+export { SplitterPanel as Panel } from './splitter-panel.mjs';
+export { SplitterResizeTrigger as ResizeTrigger } from './splitter-resize-trigger.mjs';
+export { SplitterRoot as Root } from './splitter-root.mjs';

package/splitter/use-splitter.cjs

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

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

package/switch/index.cjs

@@ -1,23 +1,19 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const _switch = require('./switch.cjs');
 const switchContext = require('./switch-context.cjs');
 const switchControl = require('./switch-control.cjs');
 const switchLabel = require('./switch-label.cjs');
+const switchRoot = require('./switch-root.cjs');
 const switchThumb = require('./switch-thumb.cjs');
+const _switch = require('./switch.cjs');
+
 
-const Switch = Object.assign(_switch.Switch, {
-  Root: _switch.Switch,
-  Control: switchControl.SwitchControl,
-  Label: switchLabel.SwitchLabel,
-  Thumb: switchThumb.SwitchThumb
-});
 
 exports.useSwitchContext = switchContext.useSwitchContext;
 exports.SwitchControl = switchControl.SwitchControl;
 exports.SwitchLabel = switchLabel.SwitchLabel;
+exports.SwitchRoot = switchRoot.SwitchRoot;
 exports.SwitchThumb = switchThumb.SwitchThumb;
-exports.Switch = Switch;
+exports.Switch = _switch;

package/switch/index.d.ts

@@ -1,16 +1,9 @@
-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>>;
-    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 * as Switch from './switch';
+export { SwitchControl, SwitchLabel, SwitchRoot, SwitchThumb, useSwitchContext };
+export type { SwitchCheckedChangeDetails, SwitchContext, SwitchControlProps, SwitchLabelProps, SwitchRootProps, SwitchThumbProps, };

package/switch/index.mjs

@@ -1,15 +1,7 @@
-'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 { SwitchThumb } from './switch-thumb.mjs';
-
-const Switch = Object.assign(Switch$1, {
-  Root: Switch$1,
-  Control: SwitchControl,
-  Label: SwitchLabel,
-  Thumb: SwitchThumb
-});
-
-export { Switch, SwitchControl, SwitchLabel, SwitchThumb };
+export { SwitchControl } from './switch-control.mjs';
+export { SwitchLabel } from './switch-label.mjs';
+export { SwitchRoot } from './switch-root.mjs';
+export { SwitchThumb } from './switch-thumb.mjs';
+import * as _switch from './switch.mjs';
+export { _switch as Switch };

package/switch/switch-root.cjs

@@ -0,0 +1,39 @@
+'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 switchContext = require('./switch-context.cjs');
+const useSwitch = require('./use-switch.cjs');
+
+const SwitchRoot = react.forwardRef((props, ref) => {
+  const [switchProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
+    "checked",
+    "defaultChecked",
+    "dir",
+    "disabled",
+    "form",
+    "getRootNode",
+    "id",
+    "ids",
+    "invalid",
+    "label",
+    "name",
+    "onCheckedChange",
+    "required",
+    "value"
+  ]);
+  const api = useSwitch.useSwitch(switchProps);
+  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
+  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 }) });
+});
+SwitchRoot.displayName = "SwitchRoot";
+
+exports.SwitchRoot = SwitchRoot;

package/switch/switch-root.d.ts

@@ -0,0 +1,9 @@
+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 SwitchRootProps extends Assign<Assign<HTMLArkProps<'label'>, {
+    children?: ReactNode | ((api: UseSwitchReturn) => ReactNode);
+}>, UseSwitchProps> {
+}
+export declare const SwitchRoot: ForwardRefExoticComponent<SwitchRootProps & RefAttributes<HTMLLabelElement>>;

package/switch/switch-root.mjs

@@ -0,0 +1,35 @@
+'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 { runIfFn } from '../run-if-fn.mjs';
+import { SwitchProvider } from './switch-context.mjs';
+import { useSwitch } from './use-switch.mjs';
+
+const SwitchRoot = forwardRef((props, ref) => {
+  const [switchProps, { children, ...localProps }] = createSplitProps()(props, [
+    "checked",
+    "defaultChecked",
+    "dir",
+    "disabled",
+    "form",
+    "getRootNode",
+    "id",
+    "ids",
+    "invalid",
+    "label",
+    "name",
+    "onCheckedChange",
+    "required",
+    "value"
+  ]);
+  const api = useSwitch(switchProps);
+  const mergedProps = mergeProps(api.rootProps, localProps);
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
+});
+SwitchRoot.displayName = "SwitchRoot";
+
+export { SwitchRoot };

package/switch/switch.cjs

@@ -1,39 +1,15 @@
-'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 switchContext = require('./switch-context.cjs');
-const useSwitch = require('./use-switch.cjs');
+const switchControl = require('./switch-control.cjs');
+const switchLabel = require('./switch-label.cjs');
+const switchRoot = require('./switch-root.cjs');
+const switchThumb = require('./switch-thumb.cjs');
 
-const Switch = react.forwardRef((props, ref) => {
-  const [switchProps, { children, ...localProps }] = createSplitProps.createSplitProps()(props, [
-    "checked",
-    "defaultChecked",
-    "dir",
-    "disabled",
-    "form",
-    "getRootNode",
-    "id",
-    "ids",
-    "invalid",
-    "label",
-    "name",
-    "onCheckedChange",
-    "required",
-    "value"
-  ]);
-  const api = useSwitch.useSwitch(switchProps);
-  const mergedProps = react$1.mergeProps(api.rootProps, localProps);
-  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";
 
-exports.Switch = Switch;
+
+exports.Control = switchControl.SwitchControl;
+exports.Label = switchLabel.SwitchLabel;
+exports.Root = switchRoot.SwitchRoot;
+exports.Thumb = switchThumb.SwitchThumb;

package/switch/switch.d.ts

@@ -1,9 +1,5 @@
-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'>, {
-    children?: ReactNode | ((api: UseSwitchReturn) => ReactNode);
-}>, UseSwitchProps> {
-}
-export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLLabelElement>>;
+import { SwitchControl as Control } from './switch-control';
+import { SwitchLabel as Label } from './switch-label';
+import { SwitchRoot as Root } from './switch-root';
+import { SwitchThumb as Thumb } from './switch-thumb';
+export { Control, Label, Root, Thumb };

package/switch/switch.mjs

@@ -1,35 +1,4 @@
-'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 { runIfFn } from '../run-if-fn.mjs';
-import { SwitchProvider } from './switch-context.mjs';
-import { useSwitch } from './use-switch.mjs';
-
-const Switch = forwardRef((props, ref) => {
-  const [switchProps, { children, ...localProps }] = createSplitProps()(props, [
-    "checked",
-    "defaultChecked",
-    "dir",
-    "disabled",
-    "form",
-    "getRootNode",
-    "id",
-    "ids",
-    "invalid",
-    "label",
-    "name",
-    "onCheckedChange",
-    "required",
-    "value"
-  ]);
-  const api = useSwitch(switchProps);
-  const mergedProps = mergeProps(api.rootProps, localProps);
-  const view = runIfFn(children, api);
-  return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
-});
-Switch.displayName = "Switch";
-
-export { Switch };
+export { SwitchControl as Control } from './switch-control.mjs';
+export { SwitchLabel as Label } from './switch-label.mjs';
+export { SwitchRoot as Root } from './switch-root.mjs';
+export { SwitchThumb as Thumb } from './switch-thumb.mjs';

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

@@ -1,4 +1,3 @@
-'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -7,20 +6,16 @@ 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 = require('./tabs.cjs');
+
 
-const Tabs = Object.assign(tabs.Tabs, {
-  Root: tabs.Tabs,
-  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.Tabs = Tabs;
+exports.TabsRoot = tabsRoot.TabsRoot;
+exports.Tabs = tabs;

package/tabs/index.d.ts

@@ -1,18 +1,10 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
 import type { FocusChangeDetails as TabsFocusChangeDetails, ValueChangeDetails as TabsValueChangeDetails } from '@zag-js/tabs';
 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>>;
-    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, };
+import { TabsRoot, type TabsRootProps } from './tabs-root';
+export * as Tabs from './tabs';
+export { TabContent, TabIndicator, TabList, TabTrigger, TabsRoot, useTabsContext };
+export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsContext, TabsFocusChangeDetails, TabsRootProps, TabsValueChangeDetails, };

package/tabs/index.mjs

@@ -1,17 +1,8 @@
-'use client';
-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 { TabContent } from './tab-content.mjs';
+export { TabIndicator } from './tab-indicator.mjs';
+export { TabList } from './tab-list.mjs';
+export { TabTrigger } from './tab-trigger.mjs';
 export { useTabsContext } from './tabs-context.mjs';
-
-const Tabs = Object.assign(Tabs$1, {
-  Root: Tabs$1,
-  Content: TabContent,
-  Indicator: TabIndicator,
-  List: TabList,
-  Trigger: TabTrigger
-});
-
-export { TabContent, TabIndicator, TabList, TabTrigger, Tabs };
+export { TabsRoot } from './tabs-root.mjs';
+import * as tabs from './tabs.mjs';
+export { tabs as Tabs };

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-root.cjs

@@ -0,0 +1,38 @@
+'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 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 TabsRoot = 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 }) }) });
+});
+TabsRoot.displayName = "TabsRoot";
+
+exports.TabsRoot = TabsRoot;

package/tabs/tabs-root.d.ts

@@ -0,0 +1,9 @@
+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 TabsRootProps extends Assign<HTMLArkProps<'div'>, UseTabsProps>, UsePresenceProps {
+}
+export declare const TabsRoot: ForwardRefExoticComponent<TabsRootProps & RefAttributes<HTMLDivElement>>;