@ark-ui/react 3.2.0 → 3.3.0

package/README.md

@@ -1,3 +1,9 @@
+<p align="center">
+  <img alt="License" src="https://img.shields.io/npm/l/@ark-ui/react?style=for-the-badge" />
+  <img alt="GitHub stars" src="https://img.shields.io/github/stars/chakra-ui/ark?logo=github&style=for-the-badge" />
+  <img alt="Downloads" src="https://img.shields.io/npm/dt/@ark-ui/react?style=for-the-badge" />
+</p>
+
 # Welcome to Ark UI
 
 Ark UI is a headless, open-source UI library with over 30+ components designed for building
@@ -18,6 +24,8 @@ Ark UI is available for the following JavaScript frameworks:
 - [Avatar](https://ark-ui.com/react/docs/components/avatar)
 - [Carousel](https://ark-ui.com/react/docs/components/carousel)
 - [Checkbox](https://ark-ui.com/react/docs/components/checkbox)
+- [Clipboard](https://ark-ui.com/react/docs/components/clipboard)
+- [Collapsible](https://ark-ui.com/react/docs/components/collapsible)
 - [Color Picker](https://ark-ui.com/react/docs/components/color-picker)
 - [Combobox](https://ark-ui.com/react/docs/components/combobox)
 - [Date Picker](https://ark-ui.com/react/docs/components/date-picker)
@@ -30,12 +38,14 @@ Ark UI is available for the following JavaScript frameworks:
 - [Pagination](https://ark-ui.com/react/docs/components/pagination)
 - [Pin Input](https://ark-ui.com/react/docs/components/pin-input)
 - [Popover](https://ark-ui.com/react/docs/components/popover)
-- [Progress](https://ark-ui.com/react/docs/components/progress)
+- [Progress - Circular](https://ark-ui.com/react/docs/components/progress-circular)
+- [Progress - Linear](https://ark-ui.com/react/docs/components/progress-linear)
+- [QR Code](https://ark-ui.com/react/docs/components/qr-code)
 - [Radio Group](https://ark-ui.com/react/docs/components/radio-group)
-- [Range Slider](https://ark-ui.com/react/docs/components/slider)
 - [Rating Group](https://ark-ui.com/react/docs/components/rating-group)
 - [Segment Group](https://ark-ui.com/react/docs/components/segment-group)
 - [Select](https://ark-ui.com/react/docs/components/select)
+- [Signature Pad](https://ark-ui.com/react/docs/components/signature-pad)
 - [Slider](https://ark-ui.com/react/docs/components/slider)
 - [Splitter](https://ark-ui.com/react/docs/components/splitter)
 - [Switch](https://ark-ui.com/react/docs/components/switch)
@@ -65,33 +75,27 @@ yarn add @ark-ui/react
 To use a component from `@ark-ui/react`, import it and include it in your application:
 
 ```tsx
-import { Slider, type SliderProps } from '@ark-ui/react'
+import { Slider } from '@ark-ui/react'
 import { useState } from 'react'
-
-export const MySlider = (props: SliderProps) => {
-  const [value, setValue] = useState([42])
-
+  
+export const MySlider = () => {
+  const [value, setValue] = useState([30])
+    
   return (
     <Slider.Root
-      min={0}
-      max={100}
+      min={-50}
+      max={50}
       value={value}
       onValueChange={(e) => setValue(e.value)}
-      {...props}
     >
       <Slider.Label>Label</Slider.Label>
-      <Slider.ValueText />
+      <Slider.ValueText>{value}</Slider.ValueText>
       <Slider.Control>
         <Slider.Track>
           <Slider.Range />
         </Slider.Track>
-        <Slider.Thumb key={0} index={0} />
+        <Slider.Thumb index={0} />
       </Slider.Control>
-      <Slider.MarkerGroup>
-        <Slider.Marker value={25}>25</Slider.Marker>
-        <Slider.Marker value={50}>50</Slider.Marker>
-        <Slider.Marker value={75}>75</Slider.Marker>
-      </Slider.MarkerGroup>
     </Slider.Root>
   )
 }

package/dist/components/checkbox/checkbox-group.cjs

@@ -0,0 +1,27 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const anatomy = require('@ark-ui/anatomy');
+const react = require('react');
+const createSplitProps = require('../../utils/create-split-props.cjs');
+const factory = require('../factory.cjs');
+const useCheckboxGroup = require('./use-checkbox-group.cjs');
+const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
+
+const CheckboxGroup = react.forwardRef((props, ref) => {
+  const [checkboxGroupProps, localProps] = createSplitProps.createSplitProps()(props, [
+    "defaultValue",
+    "value",
+    "onValueChange",
+    "disabled",
+    "readOnly"
+  ]);
+  const checkboxGroup = useCheckboxGroup.useCheckboxGroup(checkboxGroupProps);
+  return /* @__PURE__ */ jsxRuntime.jsx(useCheckboxGroupContext.CheckboxGroupContextProvider, { value: checkboxGroup, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ref, ...localProps, ...anatomy.checkboxAnatomy.build().group.attrs }) });
+});
+CheckboxGroup.displayName = "CheckboxGroup";
+
+exports.CheckboxGroup = CheckboxGroup;

package/dist/components/checkbox/checkbox-group.d.cts

@@ -0,0 +1,8 @@
+import { Assign } from '../../types';
+import { HTMLArkProps } from '../factory';
+import { UseCheckboxGroupProps } from './use-checkbox-group';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface CheckboxGroupProps extends Assign<HTMLArkProps<'div'>, UseCheckboxGroupProps> {
+}
+export declare const CheckboxGroup: ForwardRefExoticComponent<CheckboxGroupProps & RefAttributes<HTMLDivElement>>;

package/dist/components/checkbox/checkbox-group.d.ts

@@ -0,0 +1,8 @@
+import { Assign } from '../../types';
+import { HTMLArkProps } from '../factory';
+import { UseCheckboxGroupProps } from './use-checkbox-group';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface CheckboxGroupProps extends Assign<HTMLArkProps<'div'>, UseCheckboxGroupProps> {
+}
+export declare const CheckboxGroup: ForwardRefExoticComponent<CheckboxGroupProps & RefAttributes<HTMLDivElement>>;

package/dist/components/checkbox/checkbox-group.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { checkboxAnatomy } from '@ark-ui/anatomy';
+import { forwardRef } from 'react';
+import { createSplitProps } from '../../utils/create-split-props.js';
+import { ark } from '../factory.js';
+import { useCheckboxGroup } from './use-checkbox-group.js';
+import { CheckboxGroupContextProvider } from './use-checkbox-group-context.js';
+
+const CheckboxGroup = forwardRef((props, ref) => {
+  const [checkboxGroupProps, localProps] = createSplitProps()(props, [
+    "defaultValue",
+    "value",
+    "onValueChange",
+    "disabled",
+    "readOnly"
+  ]);
+  const checkboxGroup = useCheckboxGroup(checkboxGroupProps);
+  return /* @__PURE__ */ jsx(CheckboxGroupContextProvider, { value: checkboxGroup, children: /* @__PURE__ */ jsx(ark.div, { ref, ...localProps, ...checkboxAnatomy.build().group.attrs }) });
+});
+CheckboxGroup.displayName = "CheckboxGroup";
+
+export { CheckboxGroup };

package/dist/components/checkbox/checkbox.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const checkboxContext = require('./checkbox-context.cjs');
 const checkboxControl = require('./checkbox-control.cjs');
+const checkboxGroup = require('./checkbox-group.cjs');
 const checkboxHiddenInput = require('./checkbox-hidden-input.cjs');
 const checkboxIndicator = require('./checkbox-indicator.cjs');
 const checkboxLabel = require('./checkbox-label.cjs');
@@ -14,6 +15,7 @@ const checkboxRootProvider = require('./checkbox-root-provider.cjs');
 
 exports.Context = checkboxContext.CheckboxContext;
 exports.Control = checkboxControl.CheckboxControl;
+exports.Group = checkboxGroup.CheckboxGroup;
 exports.HiddenInput = checkboxHiddenInput.CheckboxHiddenInput;
 exports.Indicator = checkboxIndicator.CheckboxIndicator;
 exports.Label = checkboxLabel.CheckboxLabel;

package/dist/components/checkbox/checkbox.d.cts

@@ -1,6 +1,7 @@
 export type { CheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
 export { CheckboxContext as Context, type CheckboxContextProps as ContextProps, } from './checkbox-context';
 export { CheckboxControl as Control, type CheckboxControlProps as ControlProps, } from './checkbox-control';
+export { CheckboxGroup as Group, type CheckboxGroupProps as GroupProps } from './checkbox-group';
 export { CheckboxHiddenInput as HiddenInput, type CheckboxHiddenInputProps as HiddenInputProps, } from './checkbox-hidden-input';
 export { CheckboxIndicator as Indicator, type CheckboxIndicatorProps as IndicatorProps, } from './checkbox-indicator';
 export { CheckboxLabel as Label, type CheckboxLabelProps as LabelProps } from './checkbox-label';

package/dist/components/checkbox/checkbox.d.ts

@@ -1,6 +1,7 @@
 export type { CheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
 export { CheckboxContext as Context, type CheckboxContextProps as ContextProps, } from './checkbox-context';
 export { CheckboxControl as Control, type CheckboxControlProps as ControlProps, } from './checkbox-control';
+export { CheckboxGroup as Group, type CheckboxGroupProps as GroupProps } from './checkbox-group';
 export { CheckboxHiddenInput as HiddenInput, type CheckboxHiddenInputProps as HiddenInputProps, } from './checkbox-hidden-input';
 export { CheckboxIndicator as Indicator, type CheckboxIndicatorProps as IndicatorProps, } from './checkbox-indicator';
 export { CheckboxLabel as Label, type CheckboxLabelProps as LabelProps } from './checkbox-label';

package/dist/components/checkbox/checkbox.js

@@ -1,5 +1,6 @@
 export { CheckboxContext as Context } from './checkbox-context.js';
 export { CheckboxControl as Control } from './checkbox-control.js';
+export { CheckboxGroup as Group } from './checkbox-group.js';
 export { CheckboxHiddenInput as HiddenInput } from './checkbox-hidden-input.js';
 export { CheckboxIndicator as Indicator } from './checkbox-indicator.js';
 export { CheckboxLabel as Label } from './checkbox-label.js';

package/dist/components/checkbox/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const checkboxContext = require('./checkbox-context.cjs');
 const checkboxControl = require('./checkbox-control.cjs');
+const checkboxGroup = require('./checkbox-group.cjs');
 const checkboxHiddenInput = require('./checkbox-hidden-input.cjs');
 const checkboxIndicator = require('./checkbox-indicator.cjs');
 const checkboxLabel = require('./checkbox-label.cjs');
@@ -11,12 +12,15 @@ const checkboxRoot = require('./checkbox-root.cjs');
 const checkboxRootProvider = require('./checkbox-root-provider.cjs');
 const useCheckbox = require('./use-checkbox.cjs');
 const useCheckboxContext = require('./use-checkbox-context.cjs');
+const useCheckboxGroup = require('./use-checkbox-group.cjs');
+const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
 const checkbox = require('./checkbox.cjs');
 
 
 
 exports.CheckboxContext = checkboxContext.CheckboxContext;
 exports.CheckboxControl = checkboxControl.CheckboxControl;
+exports.CheckboxGroup = checkboxGroup.CheckboxGroup;
 exports.CheckboxHiddenInput = checkboxHiddenInput.CheckboxHiddenInput;
 exports.CheckboxIndicator = checkboxIndicator.CheckboxIndicator;
 exports.CheckboxLabel = checkboxLabel.CheckboxLabel;
@@ -24,4 +28,6 @@ exports.CheckboxRoot = checkboxRoot.CheckboxRoot;
 exports.CheckboxRootProvider = checkboxRootProvider.CheckboxRootProvider;
 exports.useCheckbox = useCheckbox.useCheckbox;
 exports.useCheckboxContext = useCheckboxContext.useCheckboxContext;
+exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
+exports.useCheckboxGroupContext = useCheckboxGroupContext.useCheckboxGroupContext;
 exports.Checkbox = checkbox;

package/dist/components/checkbox/index.d.cts

@@ -1,6 +1,7 @@
 export type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState as CheckboxCheckedState, } from '@zag-js/checkbox';
 export { CheckboxContext, type CheckboxContextProps } from './checkbox-context';
 export { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
+export { CheckboxGroup, type CheckboxGroupProps } from './checkbox-group';
 export { CheckboxHiddenInput, type CheckboxHiddenInputProps } from './checkbox-hidden-input';
 export { CheckboxIndicator, type CheckboxIndicatorProps } from './checkbox-indicator';
 export { CheckboxLabel, type CheckboxLabelProps } from './checkbox-label';
@@ -8,4 +9,6 @@ export { CheckboxRoot, type CheckboxRootProps } from './checkbox-root';
 export { CheckboxRootProvider, type CheckboxRootProviderProps } from './checkbox-root-provider';
 export { useCheckbox, type UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
 export { useCheckboxContext, type UseCheckboxContext } from './use-checkbox-context';
+export { useCheckboxGroup, type UseCheckboxGroupProps, type UseCheckboxGroupReturn, } from './use-checkbox-group';
+export { useCheckboxGroupContext, type UseCheckboxGroupContext } from './use-checkbox-group-context';
 export * as Checkbox from './checkbox';

package/dist/components/checkbox/index.d.ts

@@ -1,6 +1,7 @@
 export type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState as CheckboxCheckedState, } from '@zag-js/checkbox';
 export { CheckboxContext, type CheckboxContextProps } from './checkbox-context';
 export { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
+export { CheckboxGroup, type CheckboxGroupProps } from './checkbox-group';
 export { CheckboxHiddenInput, type CheckboxHiddenInputProps } from './checkbox-hidden-input';
 export { CheckboxIndicator, type CheckboxIndicatorProps } from './checkbox-indicator';
 export { CheckboxLabel, type CheckboxLabelProps } from './checkbox-label';
@@ -8,4 +9,6 @@ export { CheckboxRoot, type CheckboxRootProps } from './checkbox-root';
 export { CheckboxRootProvider, type CheckboxRootProviderProps } from './checkbox-root-provider';
 export { useCheckbox, type UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
 export { useCheckboxContext, type UseCheckboxContext } from './use-checkbox-context';
+export { useCheckboxGroup, type UseCheckboxGroupProps, type UseCheckboxGroupReturn, } from './use-checkbox-group';
+export { useCheckboxGroupContext, type UseCheckboxGroupContext } from './use-checkbox-group-context';
 export * as Checkbox from './checkbox';

package/dist/components/checkbox/index.js

@@ -1,5 +1,6 @@
 export { CheckboxContext } from './checkbox-context.js';
 export { CheckboxControl } from './checkbox-control.js';
+export { CheckboxGroup } from './checkbox-group.js';
 export { CheckboxHiddenInput } from './checkbox-hidden-input.js';
 export { CheckboxIndicator } from './checkbox-indicator.js';
 export { CheckboxLabel } from './checkbox-label.js';
@@ -7,5 +8,7 @@ export { CheckboxRoot } from './checkbox-root.js';
 export { CheckboxRootProvider } from './checkbox-root-provider.js';
 export { useCheckbox } from './use-checkbox.js';
 export { useCheckboxContext } from './use-checkbox-context.js';
+export { useCheckboxGroup } from './use-checkbox-group.js';
+export { useCheckboxGroupContext } from './use-checkbox-group-context.js';
 import * as checkbox from './checkbox.js';
 export { checkbox as Checkbox };

package/dist/components/checkbox/use-checkbox-group-context.cjs

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const createContext = require('../../utils/create-context.cjs');
+
+const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext.createContext({
+  name: "CheckboxGroupContext",
+  hookName: "useCheckboxGroupContext",
+  providerName: "<CheckboxGroupProvider />",
+  strict: false
+});
+
+exports.CheckboxGroupContextProvider = CheckboxGroupContextProvider;
+exports.useCheckboxGroupContext = useCheckboxGroupContext;

package/dist/components/checkbox/use-checkbox-group-context.d.cts

@@ -0,0 +1,6 @@
+import { UseCheckboxGroupReturn } from './use-checkbox-group';
+import { Provider } from 'react';
+
+export interface UseCheckboxGroupContext extends UseCheckboxGroupReturn {
+}
+export declare const CheckboxGroupContextProvider: Provider<UseCheckboxGroupContext | undefined>, useCheckboxGroupContext: () => UseCheckboxGroupContext | undefined;

package/dist/components/checkbox/use-checkbox-group-context.d.ts

@@ -0,0 +1,6 @@
+import { UseCheckboxGroupReturn } from './use-checkbox-group';
+import { Provider } from 'react';
+
+export interface UseCheckboxGroupContext extends UseCheckboxGroupReturn {
+}
+export declare const CheckboxGroupContextProvider: Provider<UseCheckboxGroupContext | undefined>, useCheckboxGroupContext: () => UseCheckboxGroupContext | undefined;

package/dist/components/checkbox/use-checkbox-group-context.js

@@ -0,0 +1,11 @@
+'use client';
+import { createContext } from '../../utils/create-context.js';
+
+const [CheckboxGroupContextProvider, useCheckboxGroupContext] = createContext({
+  name: "CheckboxGroupContext",
+  hookName: "useCheckboxGroupContext",
+  providerName: "<CheckboxGroupProvider />",
+  strict: false
+});
+
+export { CheckboxGroupContextProvider, useCheckboxGroupContext };

package/dist/components/checkbox/use-checkbox-group.cjs

@@ -0,0 +1,60 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const useControllableState = require('../../utils/use-controllable-state.cjs');
+const useEvent = require('../../utils/use-event.cjs');
+
+function useCheckboxGroup(props = {}) {
+  const { defaultValue, value: controlledValue, onValueChange, disabled, readOnly } = props;
+  const interative = !(disabled || readOnly);
+  const onChangeProp = useEvent.useEvent(onValueChange, { sync: true });
+  const [value, setValue] = useControllableState.useControllableState({
+    value: controlledValue,
+    defaultValue: defaultValue || [],
+    onChange: onChangeProp
+  });
+  const isChecked = (val) => {
+    return value.some((v) => String(v) === String(val));
+  };
+  const toggleValue = (val) => {
+    isChecked(val) ? removeValue(val) : addValue(val);
+  };
+  const addValue = (val) => {
+    if (!interative)
+      return;
+    if (isChecked(val))
+      return;
+    setValue(value.concat(val));
+  };
+  const removeValue = (val) => {
+    if (!interative)
+      return;
+    setValue(value.filter((v) => String(v) !== String(val)));
+  };
+  const getItemProps = (props2) => {
+    return {
+      checked: props2.value != null ? isChecked(props2.value) : void 0,
+      onCheckedChange() {
+        if (props2.value != null) {
+          toggleValue(props2.value);
+        }
+      },
+      disabled,
+      readOnly
+    };
+  };
+  return {
+    isChecked,
+    value,
+    disabled,
+    readOnly,
+    setValue,
+    addValue,
+    toggleValue,
+    getItemProps
+  };
+}
+
+exports.useCheckboxGroup = useCheckboxGroup;

package/dist/components/checkbox/use-checkbox-group.d.cts

@@ -0,0 +1,41 @@
+export interface UseCheckboxGroupProps {
+    /**
+     * The initial value of `value` when uncontrolled
+     */
+    defaultValue?: string[];
+    /**
+     * The controlled value of the checkbox group
+     */
+    value?: string[];
+    /**
+     * The callback to call when the value changes
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * If `true`, the checkbox group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the checkbox group is read-only
+     */
+    readOnly?: boolean;
+}
+export interface CheckboxGroupItemProps {
+    value: string | undefined;
+}
+export declare function useCheckboxGroup(props?: UseCheckboxGroupProps): {
+    isChecked: (val: string | undefined) => boolean;
+    value: string[];
+    disabled: boolean | undefined;
+    readOnly: boolean | undefined;
+    setValue: (value: string[]) => void | undefined;
+    addValue: (val: string) => void;
+    toggleValue: (val: string) => void;
+    getItemProps: (props: CheckboxGroupItemProps) => {
+        checked: boolean | undefined;
+        onCheckedChange(): void;
+        disabled: boolean | undefined;
+        readOnly: boolean | undefined;
+    };
+};
+export type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>;

package/dist/components/checkbox/use-checkbox-group.d.ts

@@ -0,0 +1,41 @@
+export interface UseCheckboxGroupProps {
+    /**
+     * The initial value of `value` when uncontrolled
+     */
+    defaultValue?: string[];
+    /**
+     * The controlled value of the checkbox group
+     */
+    value?: string[];
+    /**
+     * The callback to call when the value changes
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * If `true`, the checkbox group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the checkbox group is read-only
+     */
+    readOnly?: boolean;
+}
+export interface CheckboxGroupItemProps {
+    value: string | undefined;
+}
+export declare function useCheckboxGroup(props?: UseCheckboxGroupProps): {
+    isChecked: (val: string | undefined) => boolean;
+    value: string[];
+    disabled: boolean | undefined;
+    readOnly: boolean | undefined;
+    setValue: (value: string[]) => void | undefined;
+    addValue: (val: string) => void;
+    toggleValue: (val: string) => void;
+    getItemProps: (props: CheckboxGroupItemProps) => {
+        checked: boolean | undefined;
+        onCheckedChange(): void;
+        disabled: boolean | undefined;
+        readOnly: boolean | undefined;
+    };
+};
+export type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>;

package/dist/components/checkbox/use-checkbox-group.js

@@ -0,0 +1,56 @@
+'use client';
+import { useControllableState } from '../../utils/use-controllable-state.js';
+import { useEvent } from '../../utils/use-event.js';
+
+function useCheckboxGroup(props = {}) {
+  const { defaultValue, value: controlledValue, onValueChange, disabled, readOnly } = props;
+  const interative = !(disabled || readOnly);
+  const onChangeProp = useEvent(onValueChange, { sync: true });
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue: defaultValue || [],
+    onChange: onChangeProp
+  });
+  const isChecked = (val) => {
+    return value.some((v) => String(v) === String(val));
+  };
+  const toggleValue = (val) => {
+    isChecked(val) ? removeValue(val) : addValue(val);
+  };
+  const addValue = (val) => {
+    if (!interative)
+      return;
+    if (isChecked(val))
+      return;
+    setValue(value.concat(val));
+  };
+  const removeValue = (val) => {
+    if (!interative)
+      return;
+    setValue(value.filter((v) => String(v) !== String(val)));
+  };
+  const getItemProps = (props2) => {
+    return {
+      checked: props2.value != null ? isChecked(props2.value) : void 0,
+      onCheckedChange() {
+        if (props2.value != null) {
+          toggleValue(props2.value);
+        }
+      },
+      disabled,
+      readOnly
+    };
+  };
+  return {
+    isChecked,
+    value,
+    disabled,
+    readOnly,
+    setValue,
+    addValue,
+    toggleValue,
+    getItemProps
+  };
+}
+
+export { useCheckboxGroup };

package/dist/components/checkbox/use-checkbox.cjs

@@ -9,6 +9,7 @@ const react = require('react');
 const useEnvironmentContext = require('../../providers/environment/use-environment-context.cjs');
 const useLocaleContext = require('../../providers/locale/use-locale-context.cjs');
 const useEvent = require('../../utils/use-event.cjs');
+const useCheckboxGroupContext = require('./use-checkbox-group-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -29,7 +30,11 @@ function _interopNamespaceDefault(e) {
 
 const checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox);
 
-const useCheckbox = (props = {}) => {
+const useCheckbox = (ownProps = {}) => {
+  const checkboxGroup = useCheckboxGroupContext.useCheckboxGroupContext();
+  const props = react.useMemo(() => {
+    return react$1.mergeProps(ownProps, checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {});
+  }, [ownProps, checkboxGroup]);
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
   const initialContext = {

package/dist/components/checkbox/use-checkbox.d.cts

@@ -10,4 +10,4 @@ export interface UseCheckboxProps extends Optional<Omit<checkbox.Context, 'dir'
 }
 export interface UseCheckboxReturn extends checkbox.Api<PropTypes> {
 }
-export declare const useCheckbox: (props?: UseCheckboxProps) => UseCheckboxReturn;
+export declare const useCheckbox: (ownProps?: UseCheckboxProps) => UseCheckboxReturn;

package/dist/components/checkbox/use-checkbox.d.ts

@@ -10,4 +10,4 @@ export interface UseCheckboxProps extends Optional<Omit<checkbox.Context, 'dir'
 }
 export interface UseCheckboxReturn extends checkbox.Api<PropTypes> {
 }
-export declare const useCheckbox: (props?: UseCheckboxProps) => UseCheckboxReturn;
+export declare const useCheckbox: (ownProps?: UseCheckboxProps) => UseCheckboxReturn;

package/dist/components/checkbox/use-checkbox.js

@@ -1,12 +1,17 @@
 'use client';
 import * as checkbox from '@zag-js/checkbox';
-import { useMachine, normalizeProps } from '@zag-js/react';
-import { useId } from 'react';
+import { mergeProps, useMachine, normalizeProps } from '@zag-js/react';
+import { useMemo, useId } from 'react';
 import { useEnvironmentContext } from '../../providers/environment/use-environment-context.js';
 import { useLocaleContext } from '../../providers/locale/use-locale-context.js';
 import { useEvent } from '../../utils/use-event.js';
+import { useCheckboxGroupContext } from './use-checkbox-group-context.js';
 
-const useCheckbox = (props = {}) => {
+const useCheckbox = (ownProps = {}) => {
+  const checkboxGroup = useCheckboxGroupContext();
+  const props = useMemo(() => {
+    return mergeProps(ownProps, checkboxGroup?.getItemProps({ value: ownProps.value }) ?? {});
+  }, [ownProps, checkboxGroup]);
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
   const initialContext = {

package/dist/components/combobox/combobox-list.cjs

@@ -0,0 +1,19 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react$1 = require('@zag-js/react');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useComboboxContext = require('./use-combobox-context.cjs');
+
+const ComboboxList = react.forwardRef((props, ref) => {
+  const combobox = useComboboxContext.useComboboxContext();
+  const mergedProps = react$1.mergeProps(combobox.getListProps(), props);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
+});
+ComboboxList.displayName = "ComboboxList";
+
+exports.ComboboxList = ComboboxList;

package/dist/components/combobox/combobox-list.d.cts

@@ -0,0 +1,6 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface ComboboxListProps extends HTMLArkProps<'div'> {
+}
+export declare const ComboboxList: ForwardRefExoticComponent<ComboboxListProps & RefAttributes<HTMLDivElement>>;

package/dist/components/combobox/combobox-list.d.ts

@@ -0,0 +1,6 @@
+import { HTMLArkProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+
+export interface ComboboxListProps extends HTMLArkProps<'div'> {
+}
+export declare const ComboboxList: ForwardRefExoticComponent<ComboboxListProps & RefAttributes<HTMLDivElement>>;

package/dist/components/combobox/combobox-list.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useComboboxContext } from './use-combobox-context.js';
+
+const ComboboxList = forwardRef((props, ref) => {
+  const combobox = useComboboxContext();
+  const mergedProps = mergeProps(combobox.getListProps(), props);
+  return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
+});
+ComboboxList.displayName = "ComboboxList";
+
+export { ComboboxList };

package/dist/components/combobox/combobox.cjs

@@ -14,6 +14,7 @@ const comboboxItemGroupLabel = require('./combobox-item-group-label.cjs');
 const comboboxItemIndicator = require('./combobox-item-indicator.cjs');
 const comboboxItemText = require('./combobox-item-text.cjs');
 const comboboxLabel = require('./combobox-label.cjs');
+const comboboxList = require('./combobox-list.cjs');
 const comboboxPositioner = require('./combobox-positioner.cjs');
 const comboboxRoot = require('./combobox-root.cjs');
 const comboboxRootProvider = require('./combobox-root-provider.cjs');
@@ -33,6 +34,7 @@ exports.ItemGroupLabel = comboboxItemGroupLabel.ComboboxItemGroupLabel;
 exports.ItemIndicator = comboboxItemIndicator.ComboboxItemIndicator;
 exports.ItemText = comboboxItemText.ComboboxItemText;
 exports.Label = comboboxLabel.ComboboxLabel;
+exports.List = comboboxList.ComboboxList;
 exports.Positioner = comboboxPositioner.ComboboxPositioner;
 exports.Root = comboboxRoot.ComboboxRoot;
 exports.RootProvider = comboboxRootProvider.ComboboxRootProvider;