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

package/splitter/splitter.cjs

@@ -21,17 +21,17 @@ const Splitter = react.forwardRef((props, ref) => {
       "getRootNode",
       "id",
       "ids",
-      "onResize",
-      "onResizeEnd",
-      "onResizeStart",
+      "onSizeChange",
+      "onSizeChangeEnd",
+      "onSizeChangeStart",
       "orientation",
       "size"
     ]
   );
-  const splitter = useSplitter.useSplitter(useSplitterProps);
-  const mergedProps = react$1.mergeProps(splitter.rootProps, divProps);
-  const view = runIfFn.runIfFn(children, splitter);
-  return /* @__PURE__ */ jsxRuntime.jsx(splitterContext.SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
+  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";
 

package/splitter/splitter.d.ts

@@ -2,9 +2,8 @@ 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 type SplitterProps = Assign<HTMLArkProps<'div'>, UseSplitterProps & {
+export interface SplitterProps extends Assign<HTMLArkProps<'div'>, UseSplitterProps & {
     children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
-}>;
-export declare const Splitter: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseSplitterProps> & UseSplitterProps & {
-    children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
-} & RefAttributes<HTMLDivElement>>;
+}> {
+}
+export declare const Splitter: ForwardRefExoticComponent<SplitterProps & RefAttributes<HTMLDivElement>>;

package/splitter/splitter.mjs

@@ -17,17 +17,17 @@ const Splitter = forwardRef((props, ref) => {
       "getRootNode",
       "id",
       "ids",
-      "onResize",
-      "onResizeEnd",
-      "onResizeStart",
+      "onSizeChange",
+      "onSizeChangeEnd",
+      "onSizeChangeStart",
       "orientation",
       "size"
     ]
   );
-  const splitter = useSplitter(useSplitterProps);
-  const mergedProps = mergeProps(splitter.rootProps, divProps);
-  const view = runIfFn(children, splitter);
-  return /* @__PURE__ */ jsx(SplitterProvider, { value: splitter, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
+  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";
 

package/splitter/use-splitter.cjs

@@ -7,6 +7,7 @@ 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');
 
 function _interopNamespaceDefault(e) {
@@ -29,16 +30,18 @@ function _interopNamespaceDefault(e) {
 const splitter__namespace = /*#__PURE__*/_interopNamespaceDefault(splitter);
 
 const useSplitter = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
     size: props.defaultSize
   };
   const context = {
     ...initialContext,
-    size: props.size
+    size: props.size,
+    onSizeChange: useEvent.useEvent(props.onSizeChange, { sync: true }),
+    onSizeChangeEnd: useEvent.useEvent(props.onSizeChangeEnd),
+    onSizeChangeStart: useEvent.useEvent(props.onSizeChangeStart)
   };
   const [state, send] = react$1.useMachine(splitter__namespace.machine(initialContext), { context });
   return splitter__namespace.connect(state, send, react$1.normalizeProps);

package/splitter/use-splitter.d.ts

@@ -1,7 +1,12 @@
+import { type PropTypes } from '@zag-js/react';
 import * as splitter from '@zag-js/splitter';
 import { type Optional } from '../types';
 export interface UseSplitterProps extends Optional<splitter.Context, 'id'> {
+    /**
+     * The initial size of the splitter.
+     */
     defaultSize?: splitter.Context['size'];
 }
-export type UseSplitterReturn = splitter.Api;
+export interface UseSplitterReturn extends splitter.Api<PropTypes> {
+}
 export declare const useSplitter: (props: UseSplitterProps) => UseSplitterReturn;

package/splitter/use-splitter.mjs

@@ -3,19 +3,22 @@ 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';
 
 const useSplitter = (props) => {
-  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     ...props,
     size: props.defaultSize
   };
   const context = {
     ...initialContext,
-    size: props.size
+    size: props.size,
+    onSizeChange: useEvent(props.onSizeChange, { sync: true }),
+    onSizeChangeEnd: useEvent(props.onSizeChangeEnd),
+    onSizeChangeStart: useEvent(props.onSizeChangeStart)
   };
   const [state, send] = useMachine(splitter.machine(initialContext), { context });
   return splitter.connect(state, send, normalizeProps);

package/switch/index.cjs

@@ -8,7 +8,6 @@ const switchContext = require('./switch-context.cjs');
 const switchControl = require('./switch-control.cjs');
 const switchLabel = require('./switch-label.cjs');
 const switchThumb = require('./switch-thumb.cjs');
-const zagSwitch = require('@zag-js/switch');
 
 const Switch = Object.assign(_switch.Switch, {
   Root: _switch.Switch,
@@ -21,8 +20,4 @@ exports.useSwitchContext = switchContext.useSwitchContext;
 exports.SwitchControl = switchControl.SwitchControl;
 exports.SwitchLabel = switchLabel.SwitchLabel;
 exports.SwitchThumb = switchThumb.SwitchThumb;
-Object.defineProperty(exports, 'switchAnatomy', {
-  enumerable: true,
-  get: () => zagSwitch.anatomy
-});
 exports.Switch = Switch;

package/switch/index.d.ts

@@ -1,29 +1,15 @@
-import { UseSwitchProps, UseSwitchReturn } from './use-switch';
-import { HTMLArkProps } from '..';
-import { Assign } from '../types';
-import { ForwardRefExoticComponent, ReactNode, RefAttributes, DetailedHTMLProps, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 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 { SwitchThumb, type SwitchThumbProps } from './switch-thumb';
-import { switchAnatomy } from './switch.anatomy';
-declare const Switch: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"label">, UseSwitchProps>, "children"> & {
-    children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
-} & RefAttributes<HTMLLabelElement>> & {
-    Root: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"label">, UseSwitchProps>, "children"> & {
-        children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
-    } & RefAttributes<HTMLLabelElement>>;
-    Control: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLSpanElement>>;
-    Label: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLSpanElement>>;
-    Thumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLSpanElement>>;
+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, switchAnatomy, useSwitchContext };
+export { Switch, SwitchControl, SwitchLabel, SwitchThumb, useSwitchContext };
 export type { SwitchContext, SwitchControlProps, SwitchLabelProps, SwitchProps, SwitchThumbProps };

package/switch/index.mjs

@@ -4,7 +4,6 @@ export { useSwitchContext } from './switch-context.mjs';
 import { SwitchControl } from './switch-control.mjs';
 import { SwitchLabel } from './switch-label.mjs';
 import { SwitchThumb } from './switch-thumb.mjs';
-export { anatomy as switchAnatomy } from '@zag-js/switch';
 
 const Switch = Object.assign(Switch$1, {
   Root: Switch$1,

package/switch/switch-context.d.ts

@@ -1,5 +1,6 @@
 import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseSwitchReturn } from './use-switch';
-export type SwitchContext = UseSwitchReturn;
-export declare const SwitchProvider: Provider<UseSwitchReturn>, useSwitchContext: () => UseSwitchReturn;
+export interface SwitchContext extends UseSwitchReturn {
+}
+export declare const SwitchProvider: Provider<SwitchContext>, useSwitchContext: () => SwitchContext;

package/switch/switch-control.cjs

@@ -12,7 +12,10 @@ const switchContext = require('./switch-context.cjs');
 const SwitchControl = react.forwardRef((props, ref) => {
   const api = switchContext.useSwitchContext();
   const mergedProps = react$1.mergeProps(api.controlProps, props);
-  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 SwitchControl.displayName = "SwitchControl";
 

package/switch/switch-control.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type SwitchControlProps = HTMLArkProps<'span'>;
-export declare const SwitchControl: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLSpanElement>>;
+export interface SwitchControlProps extends HTMLArkProps<'span'> {
+}
+export declare const SwitchControl: ForwardRefExoticComponent<SwitchControlProps & RefAttributes<HTMLSpanElement>>;

package/switch/switch-control.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
@@ -8,7 +8,10 @@ import { useSwitchContext } from './switch-context.mjs';
 const SwitchControl = forwardRef((props, ref) => {
   const api = useSwitchContext();
   const mergedProps = mergeProps(api.controlProps, props);
-  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 SwitchControl.displayName = "SwitchControl";
 

package/switch/switch-label.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const switchContext = require('./switch-context.cjs');
 
 const SwitchLabel = react.forwardRef((props, ref) => {
-  const { labelProps } = switchContext.useSwitchContext();
-  const mergedProps = react$1.mergeProps(labelProps, props);
+  const api = switchContext.useSwitchContext();
+  const mergedProps = react$1.mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
 SwitchLabel.displayName = "SwitchLabel";

package/switch/switch-label.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type SwitchLabelProps = HTMLArkProps<'span'>;
-export declare const SwitchLabel: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLSpanElement>>;
+export interface SwitchLabelProps extends HTMLArkProps<'span'> {
+}
+export declare const SwitchLabel: ForwardRefExoticComponent<SwitchLabelProps & RefAttributes<HTMLSpanElement>>;

package/switch/switch-label.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useSwitchContext } from './switch-context.mjs';
 
 const SwitchLabel = forwardRef((props, ref) => {
-  const { labelProps } = useSwitchContext();
-  const mergedProps = mergeProps(labelProps, props);
+  const api = useSwitchContext();
+  const mergedProps = mergeProps(api.labelProps, props);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 SwitchLabel.displayName = "SwitchLabel";

package/switch/switch-thumb.cjs

@@ -10,8 +10,8 @@ const factory = require('../factory.cjs');
 const switchContext = require('./switch-context.cjs');
 
 const SwitchThumb = react.forwardRef((props, ref) => {
-  const { thumbProps } = switchContext.useSwitchContext();
-  const mergedProps = react$1.mergeProps(thumbProps, props);
+  const api = switchContext.useSwitchContext();
+  const mergedProps = react$1.mergeProps(api.thumbProps, props);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref });
 });
 SwitchThumb.displayName = "SwitchThumb";

package/switch/switch-thumb.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type SwitchThumbProps = HTMLArkProps<'span'>;
-export declare const SwitchThumb: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLSpanElement>>;
+export interface SwitchThumbProps extends HTMLArkProps<'span'> {
+}
+export declare const SwitchThumb: ForwardRefExoticComponent<SwitchThumbProps & RefAttributes<HTMLSpanElement>>;

package/switch/switch-thumb.mjs

@@ -6,8 +6,8 @@ import { ark } from '../factory.mjs';
 import { useSwitchContext } from './switch-context.mjs';
 
 const SwitchThumb = forwardRef((props, ref) => {
-  const { thumbProps } = useSwitchContext();
-  const mergedProps = mergeProps(thumbProps, props);
+  const api = useSwitchContext();
+  const mergedProps = mergeProps(api.thumbProps, props);
   return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
 });
 SwitchThumb.displayName = "SwitchThumb";

package/switch/switch.cjs

@@ -25,18 +25,14 @@ const Switch = react.forwardRef((props, ref) => {
     "invalid",
     "label",
     "name",
-    "onChange",
-    "readOnly",
+    "onCheckedChange",
     "required",
     "value"
   ]);
   const api = useSwitch.useSwitch(switchProps);
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, labelProps);
-  return /* @__PURE__ */ jsxRuntime.jsxs(switchContext.SwitchProvider, { value: api, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }),
-    /* @__PURE__ */ jsxRuntime.jsx("input", { ...api.hiddenInputProps })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(switchContext.SwitchProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
 });
 Switch.displayName = "Switch";
 

package/switch/switch.d.ts

@@ -2,9 +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 type SwitchProps = Assign<Assign<HTMLArkProps<'label'>, UseSwitchProps>, {
+export interface SwitchProps extends Assign<Assign<HTMLArkProps<'label'>, UseSwitchProps>, {
     children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
-}>;
-export declare const Switch: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"label">, UseSwitchProps>, "children"> & {
-    children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
-} & RefAttributes<HTMLLabelElement>>;
+}> {
+}
+export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLLabelElement>>;

package/switch/switch.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -21,18 +21,14 @@ const Switch = forwardRef((props, ref) => {
     "invalid",
     "label",
     "name",
-    "onChange",
-    "readOnly",
+    "onCheckedChange",
     "required",
     "value"
   ]);
   const api = useSwitch(switchProps);
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, labelProps);
-  return /* @__PURE__ */ jsxs(SwitchProvider, { value: api, children: [
-    /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }),
-    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
-  ] });
+  return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
 });
 Switch.displayName = "Switch";
 

package/switch/use-switch.cjs

@@ -7,6 +7,7 @@ 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');
 
 function _interopNamespaceDefault(e) {
@@ -29,16 +30,16 @@ function _interopNamespaceDefault(e) {
 const zagSwitch__namespace = /*#__PURE__*/_interopNamespaceDefault(zagSwitch);
 
 const useSwitch = (props) => {
-  const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
     id: react.useId(),
-    getRootNode,
+    getRootNode: environmentContext.useEnvironmentContext(),
     ...props,
     checked: props.defaultChecked
   };
   const context = {
     ...initialContext,
-    checked: props.checked
+    checked: props.checked,
+    onCheckedChange: useEvent.useEvent(props.onCheckedChange, { sync: true })
   };
   const [state, send] = react$1.useMachine(zagSwitch__namespace.machine(initialContext), { context });
   return zagSwitch__namespace.connect(state, send, react$1.normalizeProps);

package/switch/use-switch.d.ts

@@ -1,7 +1,12 @@
+import { type PropTypes } from '@zag-js/react';
 import * as zagSwitch from '@zag-js/switch';
 import { type Optional } from '../types';
 export interface UseSwitchProps extends Optional<zagSwitch.Context, 'id'> {
+    /**
+     * The initial checked state of the switch.
+     */
     defaultChecked?: zagSwitch.Context['checked'];
 }
-export type UseSwitchReturn = zagSwitch.Api;
+export interface UseSwitchReturn extends zagSwitch.Api<PropTypes> {
+}
 export declare const useSwitch: (props: UseSwitchProps) => UseSwitchReturn;

package/switch/use-switch.mjs

@@ -3,19 +3,20 @@ 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';
 
 const useSwitch = (props) => {
-  const getRootNode = useEnvironmentContext();
   const initialContext = {
     id: useId(),
-    getRootNode,
+    getRootNode: useEnvironmentContext(),
     ...props,
     checked: props.defaultChecked
   };
   const context = {
     ...initialContext,
-    checked: props.checked
+    checked: props.checked,
+    onCheckedChange: useEvent(props.onCheckedChange, { sync: true })
   };
   const [state, send] = useMachine(zagSwitch.machine(initialContext), { context });
   return zagSwitch.connect(state, send, normalizeProps);

package/tabs/index.cjs

@@ -7,12 +7,11 @@ 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$1 = require('./tabs.cjs');
+const tabs = require('./tabs.cjs');
 const tabsContext = require('./tabs-context.cjs');
-const tabs = require('@zag-js/tabs');
 
-const Tabs = Object.assign(tabs$1.Tabs, {
-  Root: tabs$1.Tabs,
+const Tabs = Object.assign(tabs.Tabs, {
+  Root: tabs.Tabs,
   Content: tabContent.TabContent,
   Indicator: tabIndicator.TabIndicator,
   List: tabList.TabList,
@@ -24,8 +23,4 @@ exports.TabIndicator = tabIndicator.TabIndicator;
 exports.TabList = tabList.TabList;
 exports.TabTrigger = tabTrigger.TabTrigger;
 exports.useTabsContext = tabsContext.useTabsContext;
-Object.defineProperty(exports, 'tabsAnatomy', {
-  enumerable: true,
-  get: () => tabs.anatomy
-});
 exports.Tabs = Tabs;

package/tabs/index.d.ts

@@ -1,8 +1,4 @@
-import { TabPresenceProps } from './tab-presence';
-import { ContentProps, TriggerProps } from '@zag-js/tabs';
-import { UseTabsProps } from './use-tabs';
-import { HTMLArkProps } from '..';
-import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { TabContent, type TabContentProps } from './tab-content';
 import { TabIndicator, type TabIndicatorProps } from './tab-indicator';
@@ -10,19 +6,12 @@ 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';
-import { tabsAnatomy } from './tabs.anatomy';
-declare const Tabs: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseTabsProps> & UseTabsProps & RefAttributes<HTMLDivElement>> & {
-    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof UseTabsProps> & UseTabsProps & RefAttributes<HTMLDivElement>>;
-    Content: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & ContentProps & Omit<TabPresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
-    Indicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    List: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        asChild?: boolean | undefined;
-    } & RefAttributes<HTMLDivElement>>;
-    Trigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof TriggerProps> & TriggerProps & RefAttributes<HTMLButtonElement>>;
+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, tabsAnatomy, useTabsContext };
+export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, useTabsContext };
 export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsContext, TabsProps, };

package/tabs/index.mjs

@@ -5,7 +5,6 @@ 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';
-export { anatomy as tabsAnatomy } from '@zag-js/tabs';
 
 const Tabs = Object.assign(Tabs$1, {
   Root: Tabs$1,

package/tabs/tab-content.cjs

@@ -22,8 +22,8 @@ const TabContent = react.forwardRef((props, ref) => {
 TabContent.displayName = "TabContent";
 const InnerTabContent = react.forwardRef((props, ref) => {
   const [tabContentProps, divProps] = createSplitProps.createSplitProps()(props, ["value"]);
-  const { getContentProps } = tabsContext.useTabsContext();
-  const mergedProps = react$1.mergeProps(getContentProps(tabContentProps), divProps);
+  const api = tabsContext.useTabsContext();
+  const mergedProps = react$1.mergeProps(api.getContentProps(tabContentProps), divProps);
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 InnerTabContent.displayName = "InnerTabContent";

package/tabs/tab-content.d.ts

@@ -1,11 +1,10 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type ContentProps } from '@zag-js/tabs';
 import { type HTMLArkProps } from '../factory';
 import { type TabPresenceProps } from './tab-presence';
-export type TabContentProps = InnerTabContentProps & Omit<TabPresenceProps, 'children'>;
-export declare const TabContent: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & ContentProps & Omit<TabPresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+export interface TabContentProps extends InnerTabContentProps, Omit<TabPresenceProps, 'children'> {
+}
+export declare const TabContent: ForwardRefExoticComponent<TabContentProps & RefAttributes<HTMLDivElement>>;
 type InnerTabContentProps = HTMLArkProps<'div'> & ContentProps;
 export {};

package/tabs/tab-content.mjs

@@ -18,8 +18,8 @@ const TabContent = forwardRef((props, ref) => {
 TabContent.displayName = "TabContent";
 const InnerTabContent = forwardRef((props, ref) => {
   const [tabContentProps, divProps] = createSplitProps()(props, ["value"]);
-  const { getContentProps } = useTabsContext();
-  const mergedProps = mergeProps(getContentProps(tabContentProps), divProps);
+  const api = useTabsContext();
+  const mergedProps = mergeProps(api.getContentProps(tabContentProps), divProps);
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 InnerTabContent.displayName = "InnerTabContent";

package/tabs/tab-indicator.cjs

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

package/tabs/tab-indicator.d.ts

@@ -1,7 +1,6 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefAttributes } from 'react';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type HTMLArkProps } from '../factory';
-export type TabIndicatorProps = HTMLArkProps<'div'>;
-export declare const TabIndicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    asChild?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
+export interface TabIndicatorProps extends HTMLArkProps<'div'> {
+}
+export declare const TabIndicator: ForwardRefExoticComponent<TabIndicatorProps & RefAttributes<HTMLDivElement>>;

package/tabs/tab-indicator.mjs

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