@ark-ui/react 0.10.0 → 0.11.0-beta.1

package/splitter/index.d.ts

@@ -1,5 +1,55 @@
-export { Splitter, type SplitterProps } from './splitter';
-export { useSplitterContext } from './splitter-context';
-export { SplitterPanel, type SplitterPanelProps } from './splitter-panel';
-export { SplitterResizeTrigger, type SplitterResizeTriggerProps } from './splitter-resize-trigger';
-export { splitterAnatomy } from './splitter.anatomy';
+import { Context, PublicApi, PanelProps, ResizeTriggerProps } from '@zag-js/splitter';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, ButtonHTMLAttributes } from 'react';
+/// <reference types="react" />
+import { type SplitterProps } from './splitter';
+import { useSplitterContext } from './splitter-context';
+import { SplitterPanel, type SplitterPanelProps } from './splitter-panel';
+import { SplitterResizeTrigger, type SplitterResizeTriggerProps } from './splitter-resize-trigger';
+import { splitterAnatomy } from './splitter.anatomy';
+declare const Splitter: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "children" | "getRootNode" | "id" | "ids" | "orientation" | "onResize" | "dir" | "size" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    defaultSize?: {
+        id: string | number;
+        size?: number | undefined;
+        minSize?: number | undefined;
+        maxSize?: number | undefined;
+    }[] | undefined;
+} & {
+    children?: ReactNode | ((state: PublicApi<JSX.IntrinsicElements & {
+        element: HTMLAttributes<HTMLElement>;
+        style: CSSProperties;
+    }>) => ReactNode);
+} & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, "children" | "getRootNode" | "id" | "ids" | "orientation" | "onResize" | "dir" | "size" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+        defaultSize?: {
+            id: string | number;
+            size?: number | undefined;
+            minSize?: number | undefined;
+            maxSize?: number | undefined;
+        }[] | undefined;
+    } & {
+        children?: ReactNode | ((state: PublicApi<JSX.IntrinsicElements & {
+            element: HTMLAttributes<HTMLElement>;
+            style: CSSProperties;
+        }>) => ReactNode);
+    } & RefAttributes<HTMLDivElement>>;
+    Panel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, keyof PanelProps> & PanelProps & RefAttributes<HTMLDivElement>>;
+    ResizeTrigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, keyof ResizeTriggerProps> & ResizeTriggerProps & RefAttributes<HTMLButtonElement>>;
+};
+export { Splitter, SplitterPanel, SplitterResizeTrigger, splitterAnatomy, useSplitterContext };
+export type { SplitterPanelProps, SplitterProps, SplitterResizeTriggerProps };

package/splitter/index.mjs

@@ -1,5 +1,13 @@
-export { Splitter } from './splitter.mjs';
+import { Splitter as Splitter$1 } from './splitter.mjs';
 export { useSplitterContext } from './splitter-context.mjs';
-export { SplitterPanel } from './splitter-panel.mjs';
-export { SplitterResizeTrigger } from './splitter-resize-trigger.mjs';
+import { SplitterPanel } from './splitter-panel.mjs';
+import { SplitterResizeTrigger } from './splitter-resize-trigger.mjs';
 export { anatomy as splitterAnatomy } from '@zag-js/splitter';
+
+const Splitter = Object.assign(Splitter$1, {
+  Root: Splitter$1,
+  Panel: SplitterPanel,
+  ResizeTrigger: SplitterResizeTrigger
+});
+
+export { Splitter, SplitterPanel, SplitterResizeTrigger };

package/splitter/splitter-context.d.ts

@@ -1,5 +1,6 @@
-import type { PublicApi } from '@zag-js/splitter';
-import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { PublicApi } from '@zag-js/splitter';
+import { Provider, HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import { type UseSplitterReturn } from './use-splitter';
 export type SplitterContext = UseSplitterReturn;
 export declare const SplitterProvider: Provider<PublicApi<JSX.IntrinsicElements & {

package/splitter/splitter-panel.d.ts

@@ -1,5 +1,5 @@
 import { type PanelProps } from '@zag-js/splitter';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
 export type SplitterPanelProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, PanelProps>;

package/splitter/splitter-resize-trigger.d.ts

@@ -1,5 +1,5 @@
 import { type ResizeTriggerProps } from '@zag-js/splitter';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
 export type SplitterResizeTriggerProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, ResizeTriggerProps>;

package/splitter/splitter.d.ts

@@ -1,5 +1,5 @@
-import type { Context } from '@zag-js/splitter';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ReactNode } from 'react';
+import { Context } from '@zag-js/splitter';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ReactNode } from 'react';
 import { type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';
@@ -11,7 +11,7 @@ export declare const Splitter: ForwardRefExoticComponent<Omit<Omit<Omit<Detailed
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "children" | "id" | "orientation" | "onResize" | "dir" | "size" | "getRootNode" | "ids" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "children" | "getRootNode" | "id" | "ids" | "orientation" | "onResize" | "dir" | "size" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultSize?: {
         id: string | number;
         size?: number | undefined;

package/splitter/splitter.stories.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'react/jsx-runtime';
+import type { Meta } from '@storybook/react';
+import { Splitter } from '.';
+type SplitterType = typeof Splitter;
+declare const meta: Meta<SplitterType>;
+export default meta;
+export declare const Basic: () => JSX.Element;
+export declare const RenderProp: () => JSX.Element;
+export declare const Events: () => JSX.Element;
+export declare const Vertical: () => JSX.Element;

package/splitter/splitter.test.d.ts

@@ -0,0 +1 @@
+export {};

package/splitter/use-splitter.cjs

@@ -6,6 +6,7 @@ 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 environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/splitter/use-splitter.d.ts

@@ -1,4 +1,5 @@
-import type { HTMLAttributes, CSSProperties } from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import * as splitter from '@zag-js/splitter';
 import { type Optional } from '../types';
 export type UseSplitterProps = Optional<splitter.Context, 'id'> & {

package/splitter/use-splitter.mjs

@@ -2,6 +2,7 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as splitter from '@zag-js/splitter';
 import { useId } from 'react';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSplitter = (props) => {

package/switch/index.cjs

@@ -10,15 +10,21 @@ 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,
+  Control: switchControl.SwitchControl,
+  Input: switchInput.SwitchInput,
+  Label: switchLabel.SwitchLabel,
+  Thumb: switchThumb.SwitchThumb
+});
 
-
-exports.Switch = _switch.Switch;
 exports.useSwitchContext = switchContext.useSwitchContext;
 exports.SwitchControl = switchControl.SwitchControl;
 exports.SwitchInput = switchInput.SwitchInput;
 exports.SwitchLabel = switchLabel.SwitchLabel;
 exports.SwitchThumb = switchThumb.SwitchThumb;
 Object.defineProperty(exports, 'switchAnatomy', {
-	enumerable: true,
-	get: () => zagSwitch.anatomy
+  enumerable: true,
+  get: () => zagSwitch.anatomy
 });
+exports.Switch = Switch;

package/switch/index.d.ts

@@ -1,7 +1,55 @@
-export { Switch, type SwitchProps } from './switch';
-export { useSwitchContext } from './switch-context';
-export { SwitchControl, type SwitchControlProps } from './switch-control';
-export { SwitchInput, type SwitchInputProps } from './switch-input';
-export { SwitchLabel, type SwitchLabelProps } from './switch-label';
-export { SwitchThumb, type SwitchThumbProps } from './switch-thumb';
-export { switchAnatomy } from './switch.anatomy';
+import { PublicApi } from '@zag-js/switch';
+import { UseSwitchProps } from './use-switch';
+import { Assign } from '../types';
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, ReactNode, HTMLAttributes, CSSProperties, RefAttributes, InputHTMLAttributes } from 'react';
+/// <reference types="react" />
+import { type SwitchProps } from './switch';
+import { useSwitchContext } from './switch-context';
+import { SwitchControl, type SwitchControlProps } from './switch-control';
+import { SwitchInput, type SwitchInputProps } from './switch-input';
+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<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+    ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, UseSwitchProps>, "children"> & {
+    children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
+        element: HTMLAttributes<HTMLElement>;
+        style: CSSProperties;
+    }>) => ReactNode);
+} & RefAttributes<HTMLLabelElement>> & {
+    Root: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
+        ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, UseSwitchProps>, "children"> & {
+        children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
+            element: HTMLAttributes<HTMLElement>;
+            style: CSSProperties;
+        }>) => ReactNode);
+    } & RefAttributes<HTMLLabelElement>>;
+    Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLSpanElement>>;
+    Input: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+        ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLInputElement>>;
+    Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLSpanElement>>;
+    Thumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLSpanElement>>;
+};
+export { Switch, SwitchControl, SwitchInput, SwitchLabel, SwitchThumb, switchAnatomy, useSwitchContext, };
+export type { SwitchControlProps, SwitchInputProps, SwitchLabelProps, SwitchProps, SwitchThumbProps, };

package/switch/index.mjs

@@ -1,7 +1,17 @@
-export { Switch } from './switch.mjs';
+import { Switch as Switch$1 } from './switch.mjs';
 export { useSwitchContext } from './switch-context.mjs';
-export { SwitchControl } from './switch-control.mjs';
-export { SwitchInput } from './switch-input.mjs';
-export { SwitchLabel } from './switch-label.mjs';
-export { SwitchThumb } from './switch-thumb.mjs';
+import { SwitchControl } from './switch-control.mjs';
+import { SwitchInput } from './switch-input.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,
+  Control: SwitchControl,
+  Input: SwitchInput,
+  Label: SwitchLabel,
+  Thumb: SwitchThumb
+});
+
+export { Switch, SwitchControl, SwitchInput, SwitchLabel, SwitchThumb };

package/switch/switch-context.d.ts

@@ -1,5 +1,6 @@
-import type { PublicApi } from '@zag-js/switch';
-import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { PublicApi } from '@zag-js/switch';
+import { Provider, HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import { type UseSwitchReturn } from './use-switch';
 export type SwitchContext = UseSwitchReturn;
 export declare const SwitchProvider: Provider<PublicApi<JSX.IntrinsicElements & {

package/switch/switch-control.d.ts

@@ -1,8 +1,8 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type SwitchControlProps = ComponentPropsWithoutRef<typeof ark.span>;
 export declare const SwitchControl: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined;
+    ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref"> & RefAttributes<HTMLSpanElement>>;

package/switch/switch-input.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, InputHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type SwitchInputProps = ComponentPropsWithoutRef<typeof ark.input>;
 export declare const SwitchInput: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {

package/switch/switch-label.d.ts

@@ -1,8 +1,8 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type SwitchLabelProps = ComponentPropsWithoutRef<typeof ark.span>;
 export declare const SwitchLabel: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined;
+    ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref"> & RefAttributes<HTMLSpanElement>>;

package/switch/switch-thumb.d.ts

@@ -1,8 +1,8 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type SwitchThumbProps = ComponentPropsWithoutRef<typeof ark.span>;
 export declare const SwitchThumb: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined;
+    ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref"> & RefAttributes<HTMLSpanElement>>;

package/switch/switch.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, ReactNode } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, ReactNode } from 'react';
 import { type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import type { Assign } from '../types';

package/switch/switch.stories.d.ts

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

package/switch/use-switch.cjs

@@ -6,6 +6,7 @@ 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 environmentContext = require('../environment/environment-context.cjs');
 
 function _interopNamespaceDefault(e) {

package/switch/use-switch.d.ts

@@ -1,4 +1,5 @@
-import type { HTMLAttributes, CSSProperties } from 'react';
+import { HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import * as zagSwitch from '@zag-js/switch';
 import { type Optional } from '../types';
 export type UseSwitchProps = Optional<zagSwitch.Context, 'id'>;

package/switch/use-switch.mjs

@@ -2,6 +2,7 @@
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as zagSwitch from '@zag-js/switch';
 import { useId } from 'react';
+import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSwitch = (props) => {

package/tabs/index.cjs

@@ -6,19 +6,25 @@ 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 tabs$1 = require('./tabs.cjs');
 const tabsContext = require('./tabs-context.cjs');
-const tabs$1 = require('@zag-js/tabs');
-
+const tabs = require('@zag-js/tabs');
 
+const Tabs = Object.assign(tabs$1.Tabs, {
+  Root: tabs$1.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.Tabs = tabs.Tabs;
 exports.useTabsContext = tabsContext.useTabsContext;
 Object.defineProperty(exports, 'tabsAnatomy', {
-	enumerable: true,
-	get: () => tabs$1.anatomy
+  enumerable: true,
+  get: () => tabs.anatomy
 });
+exports.Tabs = Tabs;

package/tabs/index.d.ts

@@ -1,7 +1,48 @@
-export { TabContent, type TabContentProps } from './tab-content';
-export { TabIndicator, type TabIndicatorProps } from './tab-indicator';
-export { TabList, type TabListProps } from './tab-list';
-export { TabTrigger, type TabTriggerProps } from './tab-trigger';
-export { Tabs, type TabsProps } from './tabs';
-export { useTabsContext } from './tabs-context';
-export { tabsAnatomy } from './tabs.anatomy';
+import { TabPresenceProps } from './tab-presence';
+import { Context, ContentProps, TriggerProps } from '@zag-js/tabs';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ButtonHTMLAttributes } from 'react';
+/// <reference types="react" />
+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 } from './tabs-context';
+import { tabsAnatomy } from './tabs.anatomy';
+declare const Tabs: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+} & {
+    asChild?: boolean | undefined;
+}, "ref">, "value" | "getRootNode" | "id" | "ids" | "orientation" | "onFocus" | "onChange" | "defaultValue" | "dir" | "loop" | "translations" | "activationMode" | "onDelete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    defaultValue?: string | null | undefined;
+} & RefAttributes<HTMLDivElement>> & {
+    Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, "value" | "getRootNode" | "id" | "ids" | "orientation" | "onFocus" | "onChange" | "defaultValue" | "dir" | "loop" | "translations" | "activationMode" | "onDelete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+        defaultValue?: string | null | undefined;
+    } & RefAttributes<HTMLDivElement>>;
+    Content: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & ContentProps & Omit<TabPresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+    Indicator: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    List: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref"> & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;
+    } & {
+        asChild?: boolean | undefined;
+    }, "ref">, keyof TriggerProps> & TriggerProps & RefAttributes<HTMLButtonElement>>;
+};
+export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, tabsAnatomy, useTabsContext };
+export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsProps };

package/tabs/index.mjs

@@ -1,7 +1,17 @@
-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 { Tabs } from './tabs.mjs';
+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';
 export { anatomy as tabsAnatomy } from '@zag-js/tabs';
+
+const Tabs = Object.assign(Tabs$1, {
+  Root: Tabs$1,
+  Content: TabContent,
+  Indicator: TabIndicator,
+  List: TabList,
+  Trigger: TabTrigger
+});
+
+export { TabContent, TabIndicator, TabList, TabTrigger, Tabs };

package/tabs/tab-content.cjs

@@ -9,9 +9,10 @@ require('@zag-js/tabs');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
-const splitPresenceProps = require('../presence/split-presence-props.cjs');
+require('../presence/index.cjs');
 const tabPresence = require('./tab-presence.cjs');
 const tabsContext = require('./tabs-context.cjs');
+const splitPresenceProps = require('../presence/split-presence-props.cjs');
 
 const TabContent = react.forwardRef((props, ref) => {
   const [presenceProps, tabContentProps] = splitPresenceProps.splitPresenceProps(props);

package/tabs/tab-content.d.ts

@@ -1,5 +1,5 @@
 import { type ContentProps } from '@zag-js/tabs';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import { type TabPresenceProps } from './tab-presence';
 export type TabContentProps = InnerTabContentProps & Omit<TabPresenceProps, 'children'>;

package/tabs/tab-content.mjs

@@ -5,9 +5,10 @@ import '@zag-js/tabs';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
-import { splitPresenceProps } from '../presence/split-presence-props.mjs';
+import '../presence/index.mjs';
 import { TabPresence } from './tab-presence.mjs';
 import { useTabsContext } from './tabs-context.mjs';
+import { splitPresenceProps } from '../presence/split-presence-props.mjs';
 
 const TabContent = forwardRef((props, ref) => {
   const [presenceProps, tabContentProps] = splitPresenceProps(props);

package/tabs/tab-indicator.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type TabIndicatorProps = ComponentPropsWithoutRef<typeof ark.div>;
 export declare const TabIndicator: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/tabs/tab-list.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 export type TabListProps = ComponentPropsWithoutRef<typeof ark.div>;
 export declare const TabList: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/tabs/tab-presence.cjs

@@ -5,13 +5,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 require('@zag-js/tabs');
-const presence = require('../presence/presence.cjs');
+const index = require('../presence/index.cjs');
 const tabsContext = require('./tabs-context.cjs');
 
 const TabPresence = (props) => {
   const { present, ...rest } = props;
   const { value } = tabsContext.useTabsContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(presence.Presence, { present: present !== void 0 ? present : value === props.value, ...rest });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Presence, { present: present !== void 0 ? present : value === props.value, ...rest });
 };
 
 exports.TabPresence = TabPresence;

package/tabs/tab-presence.d.ts

@@ -1,4 +1,4 @@
-import type { JSX } from 'react/jsx-runtime';
+import { JSX } from 'react/jsx-runtime';
 import { type ContentProps } from '@zag-js/tabs';
 import { type PresenceProps } from '../presence';
 export type TabPresenceProps = PresenceProps & ContentProps;

package/tabs/tab-presence.mjs

@@ -1,7 +1,7 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import '@zag-js/tabs';
-import { Presence } from '../presence/presence.mjs';
+import { Presence } from '../presence/index.mjs';
 import { useTabsContext } from './tabs-context.mjs';
 
 const TabPresence = (props) => {

package/tabs/tab-trigger.d.ts

@@ -1,5 +1,5 @@
 import type { TriggerProps } from '@zag-js/tabs';
-import type { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
 import { ark } from '../factory';
 import { type Assign } from '../types';
 export type TabTriggerProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, TriggerProps>;

package/tabs/tabs-context.d.ts

@@ -1,5 +1,6 @@
-import type { PublicApi } from '@zag-js/tabs';
-import type { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { PublicApi } from '@zag-js/tabs';
+import { Provider, HTMLAttributes, CSSProperties } from 'react';
+/// <reference types="react" />
 import { type UseTabsReturn } from './use-tabs';
 export type TabsContext = UseTabsReturn;
 export declare const TabsProvider: Provider<PublicApi<JSX.IntrinsicElements & {