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

package/slider/use-slider.mjs

@@ -1,9 +1,9 @@
 'use client';
 import { useMachine, normalizeProps } from '@zag-js/react';
 import * as slider from '@zag-js/slider';
-import { useId, useCallback } from 'react';
-import { flushSync } from 'react-dom';
+import { useId } from 'react';
 import '../environment/index.mjs';
+import { useEvent } from '../use-event.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
 
 const useSlider = (props) => {
@@ -14,15 +14,10 @@ const useSlider = (props) => {
     ...props,
     value: props.defaultValue ?? props.value
   };
-  const onChange = props.onChange;
-  const onChangeWithFlushSync = useCallback(
-    (e) => flushSync(() => onChange?.(e)),
-    [onChange]
-  );
   const context = {
     ...initialContext,
     value: props.value,
-    onChange: onChangeWithFlushSync
+    onChange: useEvent(props.onChange, { sync: true })
   };
   const [state, send] = useMachine(slider.machine(initialContext), { context });
   return slider.connect(state, send, normalizeProps);

package/splitter/index.d.ts

@@ -1,55 +1,21 @@
-import { Context, PublicApi, PanelProps, ResizeTriggerProps } from '@zag-js/splitter';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, ButtonHTMLAttributes } from 'react';
+import { PanelProps, ResizeTriggerProps } from '@zag-js/splitter';
+import { UseSplitterProps, UseSplitterReturn } from './use-splitter';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 /// <reference types="react" />
 import { type SplitterProps } from './splitter';
-import { useSplitterContext } from './splitter-context';
+import { useSplitterContext, type SplitterContext } 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);
+declare const Splitter: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseSplitterProps> & UseSplitterProps & {
+    children?: ReactNode | ((state: UseSplitterReturn) => 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);
+    Root: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseSplitterProps> & UseSplitterProps & {
+        children?: ReactNode | ((state: UseSplitterReturn) => 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>>;
+    Panel: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof PanelProps> & PanelProps & RefAttributes<HTMLDivElement>>;
+    ResizeTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof ResizeTriggerProps> & ResizeTriggerProps & RefAttributes<HTMLButtonElement>>;
 };
 export { Splitter, SplitterPanel, SplitterResizeTrigger, splitterAnatomy, useSplitterContext };
-export type { SplitterPanelProps, SplitterProps, SplitterResizeTriggerProps };
+export type { SplitterContext, SplitterPanelProps, SplitterProps, SplitterResizeTriggerProps };

package/splitter/splitter-context.d.ts

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

package/splitter/splitter-panel.d.ts

@@ -1,10 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
 import { type PanelProps } from '@zag-js/splitter';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type SplitterPanelProps = Assign<ComponentPropsWithoutRef<typeof ark.div>, PanelProps>;
-export declare const SplitterPanel: 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>>;
+export type SplitterPanelProps = Assign<HTMLArkProps<'div'>, PanelProps>;
+export declare const SplitterPanel: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, keyof PanelProps> & PanelProps & RefAttributes<HTMLDivElement>>;

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

@@ -1,10 +1,7 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
 import { type ResizeTriggerProps } from '@zag-js/splitter';
-import { ForwardRefExoticComponent, DetailedHTMLProps, ButtonHTMLAttributes, RefObject, RefAttributes, type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+import { type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
-export type SplitterResizeTriggerProps = Assign<ComponentPropsWithoutRef<typeof ark.button>, ResizeTriggerProps>;
-export declare const SplitterResizeTrigger: 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 type SplitterResizeTriggerProps = Assign<HTMLArkProps<'button'>, ResizeTriggerProps>;
+export declare const SplitterResizeTrigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof ResizeTriggerProps> & ResizeTriggerProps & RefAttributes<HTMLButtonElement>>;

package/splitter/splitter.d.ts

@@ -1,23 +1,10 @@
-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 { 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<ComponentPropsWithoutRef<typeof ark.div>, UseSplitterProps & {
+export type SplitterProps = Assign<HTMLArkProps<'div'>, UseSplitterProps & {
     children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
 }>;
-export 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;
-} & {
+export declare const Splitter: ForwardRefExoticComponent<Omit<HTMLArkProps<"div">, "children" | keyof UseSplitterProps> & UseSplitterProps & {
     children?: ReactNode | ((state: UseSplitterReturn) => ReactNode);
 } & RefAttributes<HTMLDivElement>>;

package/splitter/splitter.stories.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 import type { Meta } from '@storybook/react';
-import { Splitter } from '.';
+import { Splitter } from './';
 type SplitterType = typeof Splitter;
 declare const meta: Meta<SplitterType>;
 export default meta;

package/splitter/use-splitter.d.ts

@@ -1,12 +1,7 @@
-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'> & {
+export interface UseSplitterProps extends Optional<splitter.Context, 'id'> {
     defaultSize?: splitter.Context['size'];
-};
-export type UseSplitterReturn = ReturnType<typeof useSplitter>;
-export declare const useSplitter: (props: UseSplitterProps) => splitter.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+}
+export type UseSplitterReturn = splitter.Api;
+export declare const useSplitter: (props: UseSplitterProps) => UseSplitterReturn;

package/switch/index.cjs

@@ -6,7 +6,6 @@ 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 switchInput = require('./switch-input.cjs');
 const switchLabel = require('./switch-label.cjs');
 const switchThumb = require('./switch-thumb.cjs');
 const zagSwitch = require('@zag-js/switch');
@@ -14,14 +13,12 @@ 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.useSwitchContext = switchContext.useSwitchContext;
 exports.SwitchControl = switchControl.SwitchControl;
-exports.SwitchInput = switchInput.SwitchInput;
 exports.SwitchLabel = switchLabel.SwitchLabel;
 exports.SwitchThumb = switchThumb.SwitchThumb;
 Object.defineProperty(exports, 'switchAnatomy', {

package/switch/index.d.ts

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

package/switch/index.mjs

@@ -2,7 +2,6 @@
 import { Switch as Switch$1 } from './switch.mjs';
 export { useSwitchContext } from './switch-context.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';
@@ -10,9 +9,8 @@ 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 };
+export { Switch, SwitchControl, SwitchLabel, SwitchThumb };

package/switch/switch-context.d.ts

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

package/switch/switch-control.cjs

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

package/switch/switch-control.d.ts

@@ -1,8 +1,7 @@
-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?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, 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;
-}, "ref"> & RefAttributes<HTMLSpanElement>>;
+} & RefAttributes<HTMLSpanElement>>;

package/switch/switch-control.mjs

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

package/switch/switch-label.d.ts

@@ -1,8 +1,7 @@
-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?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, 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;
-}, "ref"> & RefAttributes<HTMLSpanElement>>;
+} & RefAttributes<HTMLSpanElement>>;

package/switch/switch-thumb.d.ts

@@ -1,8 +1,7 @@
-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?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
-} & {
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, 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;
-}, "ref"> & RefAttributes<HTMLSpanElement>>;
+} & RefAttributes<HTMLSpanElement>>;

package/switch/switch.cjs

@@ -18,7 +18,6 @@ const Switch = react.forwardRef((props, ref) => {
     "defaultChecked",
     "dir",
     "disabled",
-    "focusable",
     "form",
     "getRootNode",
     "id",
@@ -34,7 +33,10 @@ const Switch = react.forwardRef((props, ref) => {
   const api = useSwitch.useSwitch(switchProps);
   const view = runIfFn.runIfFn(children, api);
   const mergedProps = react$1.mergeProps(api.rootProps, labelProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(switchContext.SwitchProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.label, { ...mergedProps, ref, children: view }) });
+  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 })
+  ] });
 });
 Switch.displayName = "Switch";
 

package/switch/switch.d.ts

@@ -1,15 +1,10 @@
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, RefAttributes, ReactNode } from 'react';
-import { type ComponentPropsWithoutRef } from 'react';
-import { ark } from '../factory';
+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<ComponentPropsWithoutRef<typeof ark.label>, UseSwitchProps>, {
-    children: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
+export type SwitchProps = Assign<Assign<HTMLArkProps<'label'>, UseSwitchProps>, {
+    children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
 }>;
-export 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: UseSwitchReturn) => ReactNode);
+export declare const Switch: ForwardRefExoticComponent<Omit<Assign<HTMLArkProps<"label">, UseSwitchProps>, "children"> & {
+    children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
 } & RefAttributes<HTMLLabelElement>>;

package/switch/switch.mjs

@@ -1,5 +1,5 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
@@ -14,7 +14,6 @@ const Switch = forwardRef((props, ref) => {
     "defaultChecked",
     "dir",
     "disabled",
-    "focusable",
     "form",
     "getRootNode",
     "id",
@@ -30,7 +29,10 @@ const Switch = forwardRef((props, ref) => {
   const api = useSwitch(switchProps);
   const view = runIfFn(children, api);
   const mergedProps = mergeProps(api.rootProps, labelProps);
-  return /* @__PURE__ */ jsx(SwitchProvider, { value: api, children: /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }) });
+  return /* @__PURE__ */ jsxs(SwitchProvider, { value: api, children: [
+    /* @__PURE__ */ jsx(ark.label, { ...mergedProps, ref, children: view }),
+    /* @__PURE__ */ jsx("input", { ...api.hiddenInputProps })
+  ] });
 });
 Switch.displayName = "Switch";
 

package/switch/switch.stories.d.ts

@@ -6,4 +6,5 @@ declare const meta: Meta<SwitchType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const Controlled: () => JSX.Element;
+export declare const Disabled: () => JSX.Element;
 export declare const RenderProp: () => JSX.Element;

package/switch/switch.test.d.ts

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

package/switch/use-switch.d.ts

@@ -1,12 +1,7 @@
-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'> & {
-    defaultChecked?: boolean;
-};
-export declare const useSwitch: (props: UseSwitchProps) => zagSwitch.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
-export type UseSwitchReturn = ReturnType<typeof useSwitch>;
+export interface UseSwitchProps extends Optional<zagSwitch.Context, 'id'> {
+    defaultChecked?: zagSwitch.Context['checked'];
+}
+export type UseSwitchReturn = zagSwitch.Api;
+export declare const useSwitch: (props: UseSwitchProps) => UseSwitchReturn;

package/tabs/index.d.ts

@@ -1,48 +1,28 @@
 import { TabPresenceProps } from './tab-presence';
-import { Context, ContentProps, TriggerProps } from '@zag-js/tabs';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ButtonHTMLAttributes } from 'react';
+import { ContentProps, TriggerProps } from '@zag-js/tabs';
+import { UseTabsProps } from './use-tabs';
+import { HTMLArkProps } from '..';
+import { ForwardRefExoticComponent, RefAttributes, DetailedHTMLProps, HTMLAttributes } 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 { useTabsContext, type TabsContext } 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;
-    } & {
+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;
-    }, "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;
-    } & {
+    } & ContentProps & Omit<TabPresenceProps, "children"> & RefAttributes<HTMLDivElement>>;
+    Indicator: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         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;
-    } & {
+    } & RefAttributes<HTMLDivElement>>;
+    List: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         asChild?: boolean | undefined;
-    }, "ref">, keyof TriggerProps> & TriggerProps & RefAttributes<HTMLButtonElement>>;
+    } & RefAttributes<HTMLDivElement>>;
+    Trigger: ForwardRefExoticComponent<Omit<HTMLArkProps<"button">, keyof TriggerProps> & TriggerProps & RefAttributes<HTMLButtonElement>>;
 };
 export { TabContent, TabIndicator, TabList, TabTrigger, Tabs, tabsAnatomy, useTabsContext };
-export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsProps };
+export type { TabContentProps, TabIndicatorProps, TabListProps, TabTriggerProps, TabsContext, TabsProps, };

package/tabs/tab-content.d.ts

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