@ark-ui/react 0.13.0 → 0.14.0

package/CHANGELOG.md

@@ -6,6 +6,28 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [0.14.0] - 2023-08-29
+
+### Changed
+
+- Changed `MenuItem` from a `button` to a `div` element.
+- `Accordion`: Remove support for passing value as `string`. The value property must be an array of strings.
+- `Combobox`: Remove `selectInputOnFocus` option in favor of userland control
+- `TagsInput`: Rename `onHighlight` to `onFocusChange`
+
+### Removed
+
+- Removed `'use client'` annotation from `compose-refs` function.
+- Removed `Switchinput`. This component is no longer required.
+- `TagsInput`: Removed`onTagUpdate` use `onChange` instead.
+- `Switch`: Removed `defaultChecked` in favor of `defaultIsChecked`
+
+## [0.13.1] - 2023-08-13
+
+### Changed
+
+- Removed `'use client'` annotation from `factory` function.
+
 ## [0.13.0] - 2023-08-13
 
 ### Changed
@@ -185,7 +207,7 @@ description: All notable changes to this project will be documented in this file
 - Add `Toast`
 - Add `Tooltip`
 
-[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.13.0...HEAD
+[unreleased]: https://github.com/chakra-ui/ark/compare/@ark-ui/react@0.14.0...HEAD
 [0.1.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.1.0
 [0.2.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.2.0
 [0.3.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.3.0
@@ -210,5 +232,7 @@ description: All notable changes to this project will be documented in this file
 ```
 
 [0.12.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.12.0
-
 [0.13.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.13.0
+[0.13.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.13.1
+
+[0.14.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/react@0.14.0

package/accordion/accordion-context.d.ts

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

package/accordion/accordion.cjs

@@ -22,8 +22,9 @@ const Accordion = react.forwardRef((props, ref) => {
     "ids",
     "multiple",
     "onChange",
-    "value",
-    "orientation"
+    "onFocusChange",
+    "orientation",
+    "value"
   ]);
   const accordion = useAccordion.useAccordion(useAccordionProps);
   const mergedProps = react$1.mergeProps(accordion.rootProps, divProps);

package/accordion/accordion.d.ts

@@ -8,6 +8,6 @@ export declare const Accordion: ForwardRefExoticComponent<Omit<Omit<Omit<Detaile
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "value" | "getRootNode" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "multiple" | "collapsible"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string | string[] | null | undefined;
+}, "ref">, "value" | "getRootNode" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "multiple" | "orientation" | "collapsible" | "onFocusChange"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    defaultValue?: string[] | undefined;
 } & RefAttributes<HTMLDivElement>>;

package/accordion/accordion.mjs

@@ -18,8 +18,9 @@ const Accordion = forwardRef((props, ref) => {
     "ids",
     "multiple",
     "onChange",
-    "value",
-    "orientation"
+    "onFocusChange",
+    "orientation",
+    "value"
   ]);
   const accordion = useAccordion(useAccordionProps);
   const mergedProps = mergeProps(accordion.rootProps, divProps);

package/accordion/index.cjs

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

package/accordion/index.d.ts

@@ -13,15 +13,15 @@ declare const Accordion: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLPr
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "value" | "getRootNode" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "multiple" | "collapsible"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    defaultValue?: string | string[] | null | undefined;
+}, "ref">, "value" | "getRootNode" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "multiple" | "orientation" | "collapsible" | "onFocusChange"> & 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">, "value" | "getRootNode" | "id" | "ids" | "disabled" | "orientation" | "onChange" | "defaultValue" | "dir" | "multiple" | "collapsible"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        defaultValue?: string | string[] | null | undefined;
+    }, "ref">, "value" | "getRootNode" | "id" | "ids" | "disabled" | "defaultValue" | "dir" | "onChange" | "multiple" | "orientation" | "collapsible" | "onFocusChange"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+        defaultValue?: string[] | undefined;
     } & RefAttributes<HTMLDivElement>>;
     Content: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;

package/accordion/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Accordion as Accordion$1 } from './accordion.mjs';
 import { AccordionContent } from './accordion-content.mjs';
 export { useAccordionContext } from './accordion-context.mjs';

package/accordion/use-accordion.d.ts

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

package/avatar/avatar-context.d.ts

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

package/avatar/index.cjs

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

package/avatar/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Avatar as Avatar$1 } from './avatar.mjs';
 export { useAvatarContext } from './avatar-context.mjs';
 import { AvatarFallback } from './avatar-fallback.mjs';

package/avatar/use-avatar.d.ts

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

package/carousel/carousel-context.d.ts

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

package/carousel/carousel.d.ts

@@ -5,12 +5,12 @@ import { type Assign } from '../types';
 import { type CarouselContext } from './carousel-context';
 import { type UseCarouselProps } from './use-carousel';
 export type CarouselProps = Assign<ComponentPropsWithoutRef<typeof ark.div> & {
-    children: ReactNode | ((pages: CarouselContext) => ReactNode);
+    children?: ReactNode | ((pages: CarouselContext) => ReactNode);
 }, UseCarouselProps>;
 export declare const Carousel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
 }, "ref"> & {
-    children: ReactNode | ((pages: CarouselContext) => ReactNode);
-}, "getRootNode" | "id" | "ids" | "orientation" | "spacing" | "dir" | "loop" | "align" | "slidesPerView" | "index" | "onSlideChange"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>>;
+    children?: ReactNode | ((pages: CarouselContext) => ReactNode);
+}, "getRootNode" | "id" | "ids" | "dir" | "orientation" | "spacing" | "loop" | "align" | "slidesPerView" | "index" | "onSlideChange"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>>;

package/carousel/index.cjs

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

package/carousel/index.d.ts

@@ -1,5 +1,6 @@
-import { PublicApi, Context, SlideIndicatorProps, SlideProps } from '@zag-js/carousel';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, ButtonHTMLAttributes } from 'react';
+import { Context, SlideIndicatorProps, SlideProps } from '@zag-js/carousel';
+import { UseCarouselReturn } from './use-carousel';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, ButtonHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type CarouselProps } from './carousel';
 import { useCarouselContext } from './carousel-context';
@@ -17,21 +18,15 @@ declare const Carousel: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLPro
 } & {
     asChild?: boolean | undefined;
 }, "ref"> & {
-    children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
-}, "getRootNode" | "id" | "ids" | "orientation" | "spacing" | "dir" | "loop" | "align" | "slidesPerView" | "index" | "onSlideChange"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>> & {
+    children?: ReactNode | ((pages: UseCarouselReturn) => ReactNode);
+}, "getRootNode" | "id" | "ids" | "dir" | "orientation" | "spacing" | "loop" | "align" | "slidesPerView" | "index" | "onSlideChange"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & 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: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
-    }, "getRootNode" | "id" | "ids" | "orientation" | "spacing" | "dir" | "loop" | "align" | "slidesPerView" | "index" | "onSlideChange"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>>;
+        children?: ReactNode | ((pages: UseCarouselReturn) => ReactNode);
+    }, "getRootNode" | "id" | "ids" | "dir" | "orientation" | "spacing" | "loop" | "align" | "slidesPerView" | "index" | "onSlideChange"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & RefAttributes<HTMLDivElement>>;
     Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     } & {

package/carousel/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Carousel as Carousel$1 } from './carousel.mjs';
 export { useCarouselContext } from './carousel-context.mjs';
 import { CarouselControl } from './carousel-control.mjs';

package/carousel/use-carousel.d.ts

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

package/checkbox/checkbox-context.d.ts

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

package/checkbox/checkbox.d.ts

@@ -4,12 +4,12 @@ import { type Assign } from '../types';
 import { type CheckboxContext } from './checkbox-context';
 import { type UseCheckboxProps } from './use-checkbox';
 export type CheckboxProps = Assign<ComponentPropsWithoutRef<typeof ark.label>, Assign<UseCheckboxProps, {
-    children: ReactNode | ((pages: CheckboxContext) => ReactNode);
+    children?: ReactNode | ((pages: CheckboxContext) => ReactNode);
 }>>;
 export declare const Checkbox: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "onChange" | "defaultChecked" | "dir" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
-    children: ReactNode | ((pages: CheckboxContext) => ReactNode);
+}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultChecked" | "dir" | "onChange" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
+    children?: ReactNode | ((pages: CheckboxContext) => ReactNode);
 } & RefAttributes<HTMLLabelElement>>;

package/checkbox/index.cjs

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

package/checkbox/index.d.ts

@@ -1,7 +1,7 @@
-import { UseCheckboxProps } from './use-checkbox';
-import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, ReactNode, HTMLAttributes, CSSProperties, RefAttributes } from 'react';
+import { UseCheckboxProps, UseCheckboxReturn } from './use-checkbox';
+import { ForwardRefExoticComponent, DetailedHTMLProps, LabelHTMLAttributes, RefObject, ReactNode, RefAttributes, HTMLAttributes } from 'react';
 /// <reference types="react" />
-import { PublicApi, CheckedState } from '@zag-js/checkbox';
+import type { CheckedState } from '@zag-js/checkbox';
 import { type CheckboxProps } from './checkbox';
 import { useCheckboxContext } from './checkbox-context';
 import { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
@@ -11,21 +11,15 @@ declare const Checkbox: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLPro
     ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "onChange" | "defaultChecked" | "dir" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
-    children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
+}, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultChecked" | "dir" | "onChange" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
+    children?: ReactNode | ((pages: UseCheckboxReturn) => ReactNode);
 } & RefAttributes<HTMLLabelElement>> & {
     Root: ForwardRefExoticComponent<Omit<Omit<Omit<DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
         ref?: ((instance: HTMLLabelElement | null) => void) | RefObject<HTMLLabelElement> | null | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "onChange" | "defaultChecked" | "dir" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
-        children: ReactNode | ((pages: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+    }, "ref">, "name" | "value" | "children" | "getRootNode" | "form" | "id" | "ids" | "disabled" | "defaultChecked" | "dir" | "onChange" | "checked" | "required" | "invalid"> & Omit<UseCheckboxProps, "children"> & {
+        children?: ReactNode | ((pages: UseCheckboxReturn) => ReactNode);
     } & RefAttributes<HTMLLabelElement>>;
     Control: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;

package/checkbox/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Checkbox as Checkbox$1 } from './checkbox.mjs';
 export { useCheckboxContext } from './checkbox-context.mjs';
 import { CheckboxControl } from './checkbox-control.mjs';

package/checkbox/use-checkbox.d.ts

@@ -1,12 +1,7 @@
-import { HTMLAttributes, CSSProperties } from 'react';
-/// <reference types="react" />
 import * as checkbox from '@zag-js/checkbox';
 import { type Optional } from '../types';
 export type UseCheckboxProps = Optional<checkbox.Context, 'id'> & {
     defaultChecked?: boolean;
 };
-export type UseCheckboxReturn = ReturnType<typeof useCheckbox>;
-export declare const useCheckbox: (props: UseCheckboxProps) => checkbox.PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export type UseCheckboxReturn = checkbox.Api;
+export declare const useCheckbox: (props: UseCheckboxProps) => UseCheckboxReturn;

package/color-picker/color-picker-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/color-picker';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseColorPickerReturn } from './use-color-picker';
 export type ColorPickerContext = UseColorPickerReturn;
-export declare const ColorPickerProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useColorPickerContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const ColorPickerProvider: Provider<UseColorPickerReturn>, useColorPickerContext: () => UseColorPickerReturn;

package/color-picker/index.cjs

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

package/color-picker/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { ColorPicker as ColorPicker$1 } from './color-picker.mjs';
 import { ColorPickerArea } from './color-picker-area.mjs';
 export { useColorPickerAreaContext } from './color-picker-area-context.mjs';

package/color-picker/use-color-picker.d.ts

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

package/combobox/combobox-context.d.ts

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

package/combobox/combobox.cjs

@@ -46,7 +46,6 @@ const Combobox = react.forwardRef((props, ref) => {
       "placeholder",
       "positioning",
       "readOnly",
-      "selectInputOnFocus",
       "selectionBehavior",
       "selectionData",
       "selectOnTab",

package/combobox/combobox.d.ts

@@ -10,6 +10,6 @@ export declare const Combobox: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Det
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "children">, "name" | "getRootNode" | "form" | "id" | "ids" | "onOpen" | "onClose" | "positioning" | "disabled" | "onSelect" | "autoFocus" | "dir" | "placeholder" | "loop" | "readOnly" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "selectInputOnFocus" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "onInputChange" | "onHighlight" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+}, "ref">, "children">, "name" | "getRootNode" | "form" | "id" | "ids" | "onOpen" | "onClose" | "positioning" | "disabled" | "autoFocus" | "dir" | "placeholder" | "onSelect" | "readOnly" | "loop" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "onInputChange" | "onHighlight" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
     children?: ReactNode | ((props: UseComboboxReturn) => React.ReactNode);
 } & RefAttributes<HTMLDivElement>>;

package/combobox/combobox.mjs

@@ -42,7 +42,6 @@ const Combobox = forwardRef((props, ref) => {
       "placeholder",
       "positioning",
       "readOnly",
-      "selectInputOnFocus",
       "selectionBehavior",
       "selectionData",
       "selectOnTab",

package/combobox/index.cjs

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

package/combobox/index.d.ts

@@ -1,6 +1,7 @@
 import { PresenceProps } from '..';
-import { Context, PublicApi, OptionData, OptionGroupProps, OptionGroupLabelProps } from '@zag-js/combobox';
-import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, CSSProperties, RefAttributes, ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
+import { UseComboboxReturn } from './use-combobox';
+import { Context, OptionData, OptionGroupProps, OptionGroupLabelProps } from '@zag-js/combobox';
+import { ForwardRefExoticComponent, DetailedHTMLProps, HTMLAttributes, RefObject, ReactNode, RefAttributes, ButtonHTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes } from 'react';
 /// <reference types="react" />
 import { type ComboboxProps } from './combobox';
 import { ComboboxClearTrigger, type ComboboxClearTriggerProps } from './combobox-clear-trigger';
@@ -19,21 +20,15 @@ declare const Combobox: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHT
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "ref">, "children">, "name" | "getRootNode" | "form" | "id" | "ids" | "onOpen" | "onClose" | "positioning" | "disabled" | "onSelect" | "autoFocus" | "dir" | "placeholder" | "loop" | "readOnly" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "selectInputOnFocus" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "onInputChange" | "onHighlight" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-    children?: ReactNode | ((props: PublicApi<JSX.IntrinsicElements & {
-        element: HTMLAttributes<HTMLElement>;
-        style: CSSProperties;
-    }>) => ReactNode);
+}, "ref">, "children">, "name" | "getRootNode" | "form" | "id" | "ids" | "onOpen" | "onClose" | "positioning" | "disabled" | "autoFocus" | "dir" | "placeholder" | "onSelect" | "readOnly" | "loop" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "onInputChange" | "onHighlight" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+    children?: ReactNode | ((props: UseComboboxReturn) => ReactNode);
 } & RefAttributes<HTMLDivElement>> & {
     Root: ForwardRefExoticComponent<Omit<Omit<Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     } & {
         asChild?: boolean | undefined;
-    }, "ref">, "children">, "name" | "getRootNode" | "form" | "id" | "ids" | "onOpen" | "onClose" | "positioning" | "disabled" | "onSelect" | "autoFocus" | "dir" | "placeholder" | "loop" | "readOnly" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "selectInputOnFocus" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "onInputChange" | "onHighlight" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
-        children?: ReactNode | ((props: PublicApi<JSX.IntrinsicElements & {
-            element: HTMLAttributes<HTMLElement>;
-            style: CSSProperties;
-        }>) => ReactNode);
+    }, "ref">, "children">, "name" | "getRootNode" | "form" | "id" | "ids" | "onOpen" | "onClose" | "positioning" | "disabled" | "autoFocus" | "dir" | "placeholder" | "onSelect" | "readOnly" | "loop" | "invalid" | "inputValue" | "selectionData" | "inputBehavior" | "blurOnSelect" | "selectionBehavior" | "selectOnTab" | "focusOnClear" | "openOnClick" | "allowCustomValue" | "ariaHidden" | "isCustomValue" | "onInputChange" | "onHighlight" | "translations" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside"> & Pick<Partial<Context>, "id"> & Omit<Context, "id"> & {
+        children?: ReactNode | ((props: UseComboboxReturn) => ReactNode);
     } & RefAttributes<HTMLDivElement>>;
     ClearTrigger: ForwardRefExoticComponent<Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
         ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined;

package/combobox/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { Combobox as Combobox$1 } from './combobox.mjs';
 import { ComboboxClearTrigger } from './combobox-clear-trigger.mjs';
 import { ComboboxContent } from './combobox-content.mjs';

package/combobox/use-combobox.d.ts

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

package/compose-refs.cjs

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

package/compose-refs.mjs

@@ -1,4 +1,3 @@
-'use client';
 function setRef(ref, value) {
   if (typeof ref === "function") {
     ref(value);

package/date-picker/date-picker-context.d.ts

@@ -1,12 +1,5 @@
-import { PublicApi } from '@zag-js/date-picker';
-import { Provider, HTMLAttributes, CSSProperties } from 'react';
+import { Provider } from 'react';
 /// <reference types="react" />
 import { type UseDatePickerReturn } from './use-date-picker';
 export type DatePickerContext = UseDatePickerReturn;
-export declare const DatePickerProvider: Provider<PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>>, useDatePickerContext: () => PublicApi<JSX.IntrinsicElements & {
-    element: HTMLAttributes<HTMLElement>;
-    style: CSSProperties;
-}>;
+export declare const DatePickerProvider: Provider<UseDatePickerReturn>, useDatePickerContext: () => UseDatePickerReturn;

package/date-picker/index.cjs

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

package/date-picker/index.mjs

@@ -1,3 +1,4 @@
+'use client';
 import { DatePicker as DatePicker$1 } from './date-picker.mjs';
 export { useDatePickerCellContext } from './date-picker-cell-context.mjs';
 import { DatePickerClearTrigger } from './date-picker-clear-trigger.mjs';