@ark-ui/react 0.13.0 → 0.14.0

package/pagination/pagination.d.ts

@@ -3,12 +3,12 @@ import { ark } from '../factory';
 import { type Assign } from '../types';
 import { type UsePaginationProps, type UsePaginationReturn } from './use-pagination';
 export type PaginationProps = Assign<Assign<ComponentPropsWithoutRef<typeof ark.nav>, UsePaginationProps>, {
-    children: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
+    children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
 }>;
 export declare const Pagination: ForwardRefExoticComponent<Omit<Assign<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     ref?: ((instance: HTMLElement | null) => void) | RefObject<HTMLElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref">, UsePaginationProps>, "children"> & {
-    children: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
+    children?: ReactNode | ((pages: UsePaginationReturn) => ReactNode);
 } & RefAttributes<HTMLElement>>;

package/pagination/use-pagination.d.ts

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

package/pin-input/index.cjs

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

package/pin-input/index.d.ts

@@ -11,14 +11,14 @@ declare const PinInput: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLPro
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "onChange" | "onInvalid" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "onChange" | "onInvalid" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string[] | 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">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "onChange" | "onInvalid" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    }, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "onChange" | "onInvalid" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
         defaultValue?: string[] | undefined;
     } & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/pin-input/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { PinInput as PinInput$1 } from './pin-input.mjs';
 export { usePinInputContext } from './pin-input-context.mjs';
 import { PinInputControl } from './pin-input-control.mjs';

package/pin-input/pin-input-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/pin-input';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UsePinInputReturn } from './use-pin-input';
 export type PinInputContext = UsePinInputReturn;
-export declare const PinInputProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, usePinInputContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const PinInputProvider: Provider<UsePinInputReturn>, usePinInputContext: () => UsePinInputReturn;

package/pin-input/pin-input.d.ts

@@ -8,6 +8,6 @@ export declare const PinInput: ForwardRefExoticComponent<Omit<Omit<Omit<Detailed
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "onChange" | "onInvalid" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "mask" | "pattern" | "id" | "ids" | "disabled" | "type" | "defaultValue" | "autoFocus" | "dir" | "placeholder" | "onChange" | "onInvalid" | "invalid" | "translations" | "selectOnFocus" | "otp" | "onComplete" | "blurOnComplete"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string[] | undefined;
 } & RefAttributes<HTMLDivElement>>;

package/pin-input/use-pin-input.d.ts

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

package/popover/index.cjs

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

package/popover/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Popover as Popover$1 } from './popover.mjs';
 import { PopoverAnchor } from './popover-anchor.mjs';
 import { PopoverArrow } from './popover-arrow.mjs';

package/popover/popover-context.d.ts

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

package/popover/use-popover.d.ts

@@ -1,10 +1,5 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as popover from '@zag-js/popover';
 import { type Optional } from '../types';
 export type UsePopoverProps = Optional<popover.Context, 'id'>;
-export type UsePopoverReturn = ReturnType<typeof usePopover>;
-export declare const usePopover: (props: UsePopoverProps) => popover.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export type UsePopoverReturn = popover.Api;
+export declare const usePopover: (props: UsePopoverProps) => UsePopoverReturn;

package/presence/index.cjs

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

package/presence/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Presence as Presence$1 } from './presence.mjs';
 export { splitPresenceProps } from './split-presence-props.mjs';
 

package/presence/use-presence.d.ts

@@ -1,4 +1,4 @@
 import * as presence from '@zag-js/presence';
 import type { Optional } from '../types';
 export type UsePresenceProps = Optional<presence.Context, 'present'>;
-export declare const usePresence: (props: UsePresenceProps) => presence.PublicApi;
+export declare const usePresence: (props: UsePresenceProps) => presence.Api;

package/pressable/index.cjs

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

package/pressable/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Pressable as Pressable$1 } from './pressable.mjs';
 export { usePressable } from './use-pressable.mjs';
 

package/pressable/use-pressable.d.ts

@@ -1,10 +1,5 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as pressable from '@zag-js/pressable';
 import { type Optional } from '../types';
 export type UsePressableProps = Optional<pressable.Context, 'id'>;
-export type UsePressableReturn = ReturnType<typeof usePressable>;
-export declare const usePressable: (props?: UsePressableProps) => pressable.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export type UsePressableReturn = pressable.Api;
+export declare const usePressable: (props?: UsePressableProps) => UsePressableReturn;

package/radio-group/index.cjs

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

package/radio-group/index.d.ts

@@ -13,14 +13,14 @@ declare const RadioGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLP
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & 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">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    }, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
         defaultValue?: string | null | undefined;
     } & RefAttributes<HTMLDivElement>>;
     Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {

package/radio-group/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Radio } from './radio.mjs';
 export { useRadioContext } from './radio-context.mjs';
 import { RadioControl } from './radio-control.mjs';

package/radio-group/radio-group-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/radio-group';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseRadioGroupReturn } from './use-radio-group';
 export type RadioGroupContext = UseRadioGroupReturn;
-export declare const RadioGroupProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useRadioGroupContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const RadioGroupProvider: Provider<UseRadioGroupReturn>, useRadioGroupContext: () => UseRadioGroupReturn;

package/radio-group/radio-group.d.ts

@@ -8,6 +8,6 @@ export declare const RadioGroup: ForwardRefExoticComponent<Omit<Omit<Omit<Detail
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string | null | undefined;
 } & RefAttributes<HTMLDivElement>>;

package/radio-group/use-radio-group.d.ts

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

package/range-slider/index.cjs

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

package/range-slider/index.d.ts

@@ -1,5 +1,6 @@
-import { Context, PublicApi } from '@zag-js/range-slider';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, LabelHTMLAttributes, OutputHTMLAttributes } from 'react';
+import { UseRangeSliderReturn } from './use-range-slider';
+import { Context } from '@zag-js/range-slider';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, LabelHTMLAttributes, OutputHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type RangeSliderProps } from './range-slider';
 import { useRangeSliderContext } from './range-slider-context';
@@ -16,25 +17,19 @@ declare const RangeSlider: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTML
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "aria-label" | "disabled" | "max" | "min" | "orientation" | "aria-labelledby" | "onChange" | "defaultValue" | "dir" | "readOnly" | "step" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "aria-label" | "disabled" | "defaultValue" | "dir" | "aria-labelledby" | "onChange" | "max" | "min" | "readOnly" | "step" | "orientation" | "onFocusChange" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: number[] | undefined;
 } & {
-    children?: ReactNode | ((api: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
+    children?: ReactNode | ((api: UseRangeSliderReturn) => 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">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "aria-label" | "disabled" | "max" | "min" | "orientation" | "aria-labelledby" | "onChange" | "defaultValue" | "dir" | "readOnly" | "step" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    }, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "aria-label" | "disabled" | "defaultValue" | "dir" | "aria-labelledby" | "onChange" | "max" | "min" | "readOnly" | "step" | "orientation" | "onFocusChange" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
         defaultValue?: number[] | undefined;
     } & {
-        children?: ReactNode | ((api: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+        children?: ReactNode | ((api: UseRangeSliderReturn) => ReactNode);
     } & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
@@ -63,10 +58,7 @@ declare const RangeSlider: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTML
     } & {
         asChild?: boolean | undefined;
     }, "ref">, "children"> & {
-        children?: ReactNode | ((api: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+        children?: ReactNode | ((api: UseRangeSliderReturn) => ReactNode);
     } & RefAttributes<HTMLOutputElement>>;
     Range: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;

package/range-slider/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { RangeSlider as RangeSlider$1 } from './range-slider.mjs';
 export { useRangeSliderContext } from './range-slider-context.mjs';
 import { RangeSliderControl } from './range-slider-control.mjs';

package/range-slider/range-slider-context.d.ts

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

package/range-slider/range-slider.cjs

@@ -34,10 +34,13 @@ const RangeSlider = react.forwardRef((props, ref) => {
       "onChange",
       "onChangeEnd",
       "onChangeStart",
+      "onFocusChange",
       "orientation",
       "readOnly",
       "step",
       "thumbAlignment",
+      "thumbAlignment",
+      "thumbSize",
       "value"
     ]
   );

package/range-slider/range-slider.d.ts

@@ -10,7 +10,7 @@ export declare const RangeSlider: ForwardRefExoticComponent<Omit<Omit<Omit<Detai
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "aria-label" | "disabled" | "max" | "min" | "orientation" | "aria-labelledby" | "onChange" | "defaultValue" | "dir" | "readOnly" | "step" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "aria-label" | "disabled" | "defaultValue" | "dir" | "aria-labelledby" | "onChange" | "max" | "min" | "readOnly" | "step" | "orientation" | "onFocusChange" | "invalid" | "onChangeEnd" | "onChangeStart" | "getAriaValueText" | "minStepsBetweenThumbs" | "thumbAlignment" | "thumbSize"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: number[] | undefined;
 } & {
     children?: ReactNode | ((api: UseRangeSliderReturn) => ReactNode);

package/range-slider/range-slider.mjs

@@ -30,10 +30,13 @@ const RangeSlider = forwardRef((props, ref) => {
       "onChange",
       "onChangeEnd",
       "onChangeStart",
+      "onFocusChange",
       "orientation",
       "readOnly",
       "step",
       "thumbAlignment",
+      "thumbAlignment",
+      "thumbSize",
       "value"
     ]
   );

package/range-slider/use-range-slider.d.ts

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

package/rating-group/index.cjs

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

package/rating-group/index.d.ts

@@ -1,5 +1,6 @@
-import { Context, PublicApi, ItemProps, ItemState } from '@zag-js/rating-group';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ReactNode, CSSProperties, LabelHTMLAttributes } from 'react';
+import { UseRatingGroupReturn } from './use-rating-group';
+import { Context, ItemProps, ItemState } from '@zag-js/rating-group';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, RefAttributes, ReactNode, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { Rating, type RatingProps } from './rating';
 import { useRatingContext } from './rating-context';
@@ -12,14 +13,14 @@ declare const RatingGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTML
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "max" | "onChange" | "defaultValue" | "autoFocus" | "dir" | "readOnly" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "autoFocus" | "dir" | "onChange" | "max" | "readOnly" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: number | 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">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "max" | "onChange" | "defaultValue" | "autoFocus" | "dir" | "readOnly" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    }, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "autoFocus" | "dir" | "onChange" | "max" | "readOnly" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
         defaultValue?: number | undefined;
     } & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -27,10 +28,7 @@ declare const RatingGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTML
     } & {
         asChild?: boolean | undefined;
     }, "ref">, "children"> & {
-        children: ReactNode | ((context: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+        children?: ReactNode | ((context: UseRatingGroupReturn) => ReactNode);
     } & RefAttributes<HTMLDivElement>>;
     Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;

package/rating-group/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Rating } from './rating.mjs';
 export { useRatingContext } from './rating-context.mjs';
 import { RatingGroup as RatingGroup$1 } from './rating-group.mjs';

package/rating-group/rating-group-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/rating-group';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseRatingGroupReturn } from './use-rating-group';
 export type RatingGroupContext = UseRatingGroupReturn;
-export declare const RatingGroupProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useRatingGroupContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const RatingGroupProvider: Provider<UseRatingGroupReturn>, useRatingGroupContext: () => UseRatingGroupReturn;

package/rating-group/rating-group-control.d.ts

@@ -2,12 +2,12 @@ import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject
 import { ark } from '../factory';
 import { type RatingGroupContext } from './rating-group-context';
 export type RatingGroupControlProps = Omit<ComponentPropsWithoutRef<typeof ark.div>, 'children'> & {
-    children: ReactNode | ((context: RatingGroupContext) => ReactNode);
+    children?: ReactNode | ((context: RatingGroupContext) => ReactNode);
 };
 export declare const RatingGroupControl: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref">, "children"> & {
-    children: ReactNode | ((context: RatingGroupContext) => ReactNode);
+    children?: ReactNode | ((context: RatingGroupContext) => ReactNode);
 } & RefAttributes<HTMLDivElement>>;

package/rating-group/rating-group.d.ts

@@ -8,6 +8,6 @@ export declare const RatingGroup: ForwardRefExoticComponent<Omit<Omit<Omit<Detai
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "max" | "onChange" | "defaultValue" | "autoFocus" | "dir" | "readOnly" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "autoFocus" | "dir" | "onChange" | "max" | "readOnly" | "translations" | "allowHalf" | "onHover"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: number | undefined;
 } & RefAttributes<HTMLDivElement>>;

package/rating-group/use-rating-group.d.ts

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

package/segment-group/index.cjs

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

package/segment-group/index.d.ts

@@ -14,14 +14,14 @@ declare const SegmentGroup: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTM
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & 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">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    }, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
         defaultValue?: string | null | undefined;
     } & RefAttributes<HTMLDivElement>>;
     Label: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {

package/segment-group/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Segment } from './segment.mjs';
 export { useSegmentContext } from './segment-context.mjs';
 import { SegmentControl } from './segment-control.mjs';

package/segment-group/segment-group-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/radio-group';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseSegmentGroupReturn } from './use-segment-group';
 export type SegmentGroupContext = UseSegmentGroupReturn;
-export declare const SegmentGroupProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useSegmentGroupContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const SegmentGroupProvider: Provider<UseSegmentGroupReturn>, useSegmentGroupContext: () => UseSegmentGroupReturn;

package/segment-group/segment-group.d.ts

@@ -8,6 +8,6 @@ export declare const SegmentGroup: ForwardRefExoticComponent<Omit<Omit<Omit<Deta
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "readOnly"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "name" | "value" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "readOnly" | "orientation"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     defaultValue?: string | null | undefined;
 } & RefAttributes<HTMLDivElement>>;

package/segment-group/use-segment-group.d.ts

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