@ark-ui/react 0.13.0 → 0.14.0

package/select/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/select/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Select as Select$1 } from './select.mjs';
 import { SelectContent } from './select-content.mjs';
 export { useSelectContext } from './select-context.mjs';

package/select/select-context.d.ts

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

package/select/use-select.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as select from '@zag-js/select';
 import { type Optional } from '../types';
 export type UseSelectProps = Optional<select.Context, 'id'> & {
     defaultValue?: select.Context['selectedOption'];
 };
-export type UseSelectReturn = ReturnType<typeof useSelect>;
-export declare const useSelect: (props: UseSelectProps) => select.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export type UseSelectReturn = select.Api;
+export declare const useSelect: (props: UseSelectProps) => UseSelectReturn;

package/slider/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/slider/index.d.ts

@@ -1,7 +1,6 @@
-import { PublicApi } from '@zag-js/slider';
-import { UseSliderProps } from './use-slider';
+import { UseSliderProps, UseSliderReturn } from './use-slider';
 import { Assign } from '../types';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, LabelHTMLAttributes, OutputHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, LabelHTMLAttributes, OutputHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type SliderProps } from './slider';
 import { useSliderContext } from './slider-context';
@@ -19,20 +18,14 @@ declare const Slider: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHT
 } & {
     asChild?: boolean | undefined;
 }, "ref">, UseSliderProps>, "children"> & {
-    children?: ReactNode | ((context: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
+    children?: ReactNode | ((context: UseSliderReturn) => ReactNode);
 } & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     } & {
         asChild?: boolean | undefined;
     }, "ref">, UseSliderProps>, "children"> & {
-        children?: ReactNode | ((context: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+        children?: ReactNode | ((context: UseSliderReturn) => ReactNode);
     } & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
@@ -61,10 +54,7 @@ declare const Slider: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHT
     } & {
         asChild?: boolean | undefined;
     }, "ref">, "children"> & {
-        children?: ReactNode | ((context: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+        children?: ReactNode | ((context: UseSliderReturn) => ReactNode);
     } & RefAttributes<HTMLOutputElement>>;
     Range: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;

package/slider/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Slider as Slider$1 } from './slider.mjs';
 export { useSliderContext } from './slider-context.mjs';
 import { SliderControl } from './slider-control.mjs';

package/slider/slider-context.d.ts

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

package/slider/slider.cjs

@@ -38,6 +38,8 @@ const Slider = react.forwardRef((props, ref) => {
     "readOnly",
     "step",
     "thumbAlignment",
+    "thumbAlignment",
+    "thumbSize",
     "value"
   ]);
   const slider = useSlider.useSlider(useSliderProps);

package/slider/slider.mjs

@@ -34,6 +34,8 @@ const Slider = forwardRef((props, ref) => {
     "readOnly",
     "step",
     "thumbAlignment",
+    "thumbAlignment",
+    "thumbSize",
     "value"
   ]);
   const slider = useSlider(useSliderProps);

package/slider/use-slider.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as slider from '@zag-js/slider';
 import { type Optional } from '../types';
 export type UseSliderProps = Optional<slider.Context, 'id'> & {
     defaultValue?: slider.Context['value'];
 };
-export type UseSliderReturn = ReturnType<typeof useSlider>;
-export declare const useSlider: (props: UseSliderProps) => slider.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export type UseSliderReturn = slider.Api;
+export declare const useSlider: (props: UseSliderProps) => UseSliderReturn;

package/splitter/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/splitter/index.d.ts

@@ -1,5 +1,6 @@
-import { Context, PublicApi, PanelProps, ResizeTriggerProps } from '@zag-js/splitter';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, ButtonHTMLAttributes } from 'react';
+import { UseSplitterReturn } from './use-splitter';
+import { Context, PanelProps, ResizeTriggerProps } from '@zag-js/splitter';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, ButtonHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type SplitterProps } from './splitter';
 import { useSplitterContext } from './splitter-context';
@@ -10,7 +11,7 @@ declare const Splitter: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLPro
     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"> & {
+}, "ref">, "children" | "getRootNode" | "id" | "ids" | "dir" | "onResize" | "size" | "orientation" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultSize?: {
         id: string | number;
         size?: number | undefined;
@@ -18,16 +19,13 @@ declare const Splitter: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLPro
         maxSize?: number | undefined;
     }[] | undefined;
 } & {
-    children?: ReactNode | ((state: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
+    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"> & {
+    }, "ref">, "children" | "getRootNode" | "id" | "ids" | "dir" | "onResize" | "size" | "orientation" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
         defaultSize?: {
             id: string | number;
             size?: number | undefined;
@@ -35,10 +33,7 @@ declare const Splitter: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLPro
             maxSize?: number | undefined;
         }[] | undefined;
     } & {
-        children?: ReactNode | ((state: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+        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;

package/splitter/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Splitter as Splitter$1 } from './splitter.mjs';
 export { useSplitterContext } from './splitter-context.mjs';
 import { SplitterPanel } from './splitter-panel.mjs';

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.d.ts

@@ -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" | "getRootNode" | "id" | "ids" | "orientation" | "onResize" | "dir" | "size" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "children" | "getRootNode" | "id" | "ids" | "dir" | "onResize" | "size" | "orientation" | "onResizeStart" | "onResizeEnd" | "defaultSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultSize?: {
         id: string | number;
         size?: number | undefined;

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'> & {
     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

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,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');
@@ -13,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,12 +1,10 @@
-import { PublicApi } from '@zag-js/switch';
-import { UseSwitchProps } from './use-switch';
+import { UseSwitchProps, UseSwitchReturn } from './use-switch';
 import { Assign } from '../types';
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, ReactNode, HTMLAttributes, CSSProperties, RefAttributes, InputHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, ReactNode, RefAttributes, HTMLAttributes } 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';
@@ -15,31 +13,20 @@ declare const Switch: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHT
 } & {
     asChild?: boolean | undefined;
 }, "ref">, UseSwitchProps>, "children"> & {
-    children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
+    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);
+        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;
-    } & {
-        asChild?: boolean | undefined;
-    }, "ref"> & RefAttributes<HTMLInputElement>>;
     Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: RefObject<HTMLSpanElement> | ((instance: HTMLSpanElement | null) => void) | null | undefined;
     } & {
@@ -51,5 +38,5 @@ declare const Switch: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHT
         asChild?: boolean | undefined;
     }, "ref"> & 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 { SwitchControlProps, SwitchLabelProps, SwitchProps, SwitchThumbProps };

package/switch/index.mjs

@@ -1,7 +1,7 @@
+'use client';
 import { Switch as Switch$1 } from './switch.mjs';
 export { useSwitchContext } from './switch-context.mjs';
 import { SwitchControl } from './switch-control.mjs';
-import { 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';
@@ -9,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,9 +10,12 @@ const factory = require('../factory.cjs');
 const switchContext = require('./switch-context.cjs');
 
 const SwitchControl = react.forwardRef((props, ref) => {
-  const { controlProps } = switchContext.useSwitchContext();
+  const { controlProps, hiddenInputProps } = switchContext.useSwitchContext();
   const mergedProps = react$1.mergeProps(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", { ...hiddenInputProps })
+  ] });
 });
 SwitchControl.displayName = "SwitchControl";
 

package/switch/switch-control.mjs

@@ -1,14 +1,17 @@
 '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';
 import { useSwitchContext } from './switch-context.mjs';
 
 const SwitchControl = forwardRef((props, ref) => {
-  const { controlProps } = useSwitchContext();
+  const { controlProps, hiddenInputProps } = useSwitchContext();
   const mergedProps = mergeProps(controlProps, props);
-  return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref }),
+    /* @__PURE__ */ jsx("input", { ...hiddenInputProps })
+  ] });
 });
 SwitchControl.displayName = "SwitchControl";
 

package/switch/switch.d.ts

@@ -4,12 +4,12 @@ import { ark } 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);
+    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);
+    children?: ReactNode | ((pages: UseSwitchReturn) => ReactNode);
 } & RefAttributes<HTMLLabelElement>>;

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 type UseSwitchReturn = zagSwitch.Api;
+export declare const useSwitch: (props: UseSwitchProps) => UseSwitchReturn;

package/tabs/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/tabs/index.d.ts

@@ -13,14 +13,14 @@ declare const Tabs: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<H
     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"> & {
+}, "ref">, "value" | "getRootNode" | "id" | "ids" | "defaultValue" | "dir" | "onFocus" | "onChange" | "orientation" | "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"> & {
+    }, "ref">, "value" | "getRootNode" | "id" | "ids" | "defaultValue" | "dir" | "onFocus" | "onChange" | "orientation" | "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"> & {

package/tabs/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { TabContent } from './tab-content.mjs';
 import { TabIndicator } from './tab-indicator.mjs';
 import { TabList } from './tab-list.mjs';

package/tabs/tabs-context.d.ts

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

package/tabs/tabs.d.ts

@@ -8,6 +8,6 @@ export declare const Tabs: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTML
     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"> & {
+}, "ref">, "value" | "getRootNode" | "id" | "ids" | "defaultValue" | "dir" | "onFocus" | "onChange" | "orientation" | "loop" | "translations" | "activationMode" | "onDelete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string | null | undefined;
 } & RefAttributes<HTMLDivElement>>;

package/tabs/use-tabs.cjs

@@ -9,6 +9,25 @@ const react = require('react');
 require('../environment/index.cjs');
 const environmentContext = require('../environment/environment-context.cjs');
 
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const tabs__namespace = /*#__PURE__*/_interopNamespaceDefault(tabs);
+
 const useTabs = (props) => {
   const getRootNode = environmentContext.useEnvironmentContext();
   const initialContext = {
@@ -21,8 +40,8 @@ const useTabs = (props) => {
     ...initialContext,
     value: props.value
   };
-  const [state, send] = react$1.useMachine(tabs.machine(initialContext), { context });
-  return tabs.connect(state, send, react$1.normalizeProps);
+  const [state, send] = react$1.useMachine(tabs__namespace.machine(initialContext), { context });
+  return tabs__namespace.connect(state, send, react$1.normalizeProps);
 };
 
 exports.useTabs = useTabs;

package/tabs/use-tabs.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
-import { PublicApi, type Context } from '@zag-js/tabs';
+import * as tabs from '@zag-js/tabs';
 import { type Optional } from '../types';
-export type UseTabsProps = Optional<Context, 'id'> & {
-    defaultValue?: Context['value'];
+export type UseTabsProps = Optional<tabs.Context, 'id'> & {
+    defaultValue?: tabs.Context['value'];
 };
-export type UseTabsReturn = ReturnType<typeof useTabs>;
-export declare const useTabs: (props: UseTabsProps) => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export type UseTabsReturn = tabs.Api;
+export declare const useTabs: (props: UseTabsProps) => UseTabsReturn;

package/tabs/use-tabs.mjs

@@ -1,6 +1,6 @@
 'use client';
 import { useMachine, normalizeProps } from '@zag-js/react';
-import { machine, connect } from '@zag-js/tabs';
+import * as tabs from '@zag-js/tabs';
 import { useId } from 'react';
 import '../environment/index.mjs';
 import { useEnvironmentContext } from '../environment/environment-context.mjs';
@@ -17,8 +17,8 @@ const useTabs = (props) => {
     ...initialContext,
     value: props.value
   };
-  const [state, send] = useMachine(machine(initialContext), { context });
-  return connect(state, send, normalizeProps);
+  const [state, send] = useMachine(tabs.machine(initialContext), { context });
+  return tabs.connect(state, send, normalizeProps);
 };
 
 export { useTabs };

package/tags-input/index.cjs

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

package/tags-input/index.d.ts

@@ -17,14 +17,14 @@ declare const TagsInput: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<Detaile
 } & {
     asChild?: boolean | undefined;
 }, "ref">, UseTagsInputProps>, "children"> & {
-    children: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
+    children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
 } & RefAttributes<HTMLInputElement>> & {
     Root: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
         ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined;
     } & {
         asChild?: boolean | undefined;
     }, "ref">, UseTagsInputProps>, "children"> & {
-        children: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
+        children?: ReactNode | ((pages: UseTagsInputProps) => ReactNode);
     } & RefAttributes<HTMLInputElement>>;
     ClearTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;

package/tags-input/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Tag } from './tag.mjs';
 import { TagDeleteTrigger } from './tag-delete-trigger.mjs';
 import { TagInput } from './tag-input.mjs';