@ark-ui/react 4.1.2 → 4.2.0

package/dist/components/accordion/examples/context/focusedValue.d.cts

@@ -0,0 +1 @@
+export declare const ContextFocusedValue: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/examples/context/focusedValue.d.ts

@@ -0,0 +1 @@
+export declare const ContextFocusedValue: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/examples/context/getItemState.d.cts

@@ -0,0 +1 @@
+export declare const ContextGetItemState: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/examples/context/getItemState.d.ts

@@ -0,0 +1 @@
+export declare const ContextGetItemState: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/examples/context/setValue.d.cts

@@ -0,0 +1 @@
+export declare const ContextSetValue: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/examples/context/setValue.d.ts

@@ -0,0 +1 @@
+export declare const ContextSetValue: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/examples/context/value.d.cts

@@ -0,0 +1 @@
+export declare const ContextValue: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/examples/context/value.d.ts

@@ -0,0 +1 @@
+export declare const ContextValue: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/client-only/client-only.cjs

@@ -0,0 +1,23 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+
+const noop = () => void 0;
+const ClientOnly = (props) => {
+  const { children, fallback } = props;
+  const isClient = react.useSyncExternalStore(
+    () => noop,
+    () => true,
+    () => false
+  );
+  if (!isClient) {
+    return fallback;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
+
+exports.ClientOnly = ClientOnly;

package/dist/components/client-only/client-only.d.cts

@@ -0,0 +1,5 @@
+export interface ClientOnlyProps {
+    children: React.ReactNode;
+    fallback?: React.ReactNode | undefined;
+}
+export declare const ClientOnly: (props: ClientOnlyProps) => React.ReactNode;

package/dist/components/client-only/client-only.d.ts

@@ -0,0 +1,5 @@
+export interface ClientOnlyProps {
+    children: React.ReactNode;
+    fallback?: React.ReactNode | undefined;
+}
+export declare const ClientOnly: (props: ClientOnlyProps) => React.ReactNode;

package/dist/components/client-only/client-only.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useSyncExternalStore } from 'react';
+
+const noop = () => void 0;
+const ClientOnly = (props) => {
+  const { children, fallback } = props;
+  const isClient = useSyncExternalStore(
+    () => noop,
+    () => true,
+    () => false
+  );
+  if (!isClient) {
+    return fallback;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+
+export { ClientOnly };

package/dist/components/client-only/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const clientOnly = require('./client-only.cjs');
+
+
+
+exports.ClientOnly = clientOnly.ClientOnly;

package/dist/components/client-only/index.d.cts

@@ -0,0 +1 @@
+export { ClientOnly, type ClientOnlyProps } from './client-only';

package/dist/components/client-only/index.d.ts

@@ -0,0 +1 @@
+export { ClientOnly, type ClientOnlyProps } from './client-only';

package/dist/components/client-only/index.js

@@ -0,0 +1 @@
+export { ClientOnly } from './client-only.js';

package/dist/components/field/field-required-indicator.cjs

@@ -0,0 +1,24 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const core = require('@zag-js/core');
+const react = require('react');
+const factory = require('../factory.cjs');
+const useFieldContext = require('./use-field-context.cjs');
+
+const FieldRequiredIndicator = react.forwardRef(
+  ({ fallback, ...props }, ref) => {
+    const field = useFieldContext.useFieldContext();
+    if (!field.required) {
+      return fallback;
+    }
+    const mergedProps = core.mergeProps(field.getRequiredIndicatorProps(), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children ?? "*" });
+  }
+);
+FieldRequiredIndicator.displayName = "FieldRequiredIndicator";
+
+exports.FieldRequiredIndicator = FieldRequiredIndicator;

package/dist/components/field/field-required-indicator.d.cts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface FieldRequiredIndicatorBaseProps extends PolymorphicProps {
+    fallback?: React.ReactNode;
+}
+export interface FieldRequiredIndicatorProps extends HTMLProps<'span'>, FieldRequiredIndicatorBaseProps {
+}
+export declare const FieldRequiredIndicator: ForwardRefExoticComponent<FieldRequiredIndicatorProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/field/field-required-indicator.d.ts

@@ -0,0 +1,8 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface FieldRequiredIndicatorBaseProps extends PolymorphicProps {
+    fallback?: React.ReactNode;
+}
+export interface FieldRequiredIndicatorProps extends HTMLProps<'span'>, FieldRequiredIndicatorBaseProps {
+}
+export declare const FieldRequiredIndicator: ForwardRefExoticComponent<FieldRequiredIndicatorProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/field/field-required-indicator.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/core';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useFieldContext } from './use-field-context.js';
+
+const FieldRequiredIndicator = forwardRef(
+  ({ fallback, ...props }, ref) => {
+    const field = useFieldContext();
+    if (!field.required) {
+      return fallback;
+    }
+    const mergedProps = mergeProps(field.getRequiredIndicatorProps(), props);
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children ?? "*" });
+  }
+);
+FieldRequiredIndicator.displayName = "FieldRequiredIndicator";
+
+export { FieldRequiredIndicator };

package/dist/components/field/field.anatomy.cjs

@@ -12,7 +12,8 @@ const fieldAnatomy = anatomy.createAnatomy("field").parts(
   "input",
   "label",
   "select",
-  "textarea"
+  "textarea",
+  "requiredIndicator"
 );
 const parts = fieldAnatomy.build();
 

package/dist/components/field/field.anatomy.d.cts

@@ -1,3 +1,3 @@
 import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const fieldAnatomy: AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText">;
-export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText", AnatomyPart>;
+export declare const fieldAnatomy: AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator">;
+export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", AnatomyPart>;

package/dist/components/field/field.anatomy.d.ts

@@ -1,3 +1,3 @@
 import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
-export declare const fieldAnatomy: AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText">;
-export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText", AnatomyPart>;
+export declare const fieldAnatomy: AnatomyInstance<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator">;
+export declare const parts: Record<"input" | "label" | "select" | "textarea" | "root" | "errorText" | "helperText" | "requiredIndicator", AnatomyPart>;

package/dist/components/field/field.anatomy.js

@@ -8,7 +8,8 @@ const fieldAnatomy = createAnatomy("field").parts(
   "input",
   "label",
   "select",
-  "textarea"
+  "textarea",
+  "requiredIndicator"
 );
 const parts = fieldAnatomy.build();
 

package/dist/components/field/field.cjs

@@ -2,24 +2,26 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const fieldContext = require('./field-context.cjs');
+const fieldErrorText = require('./field-error-text.cjs');
+const fieldHelperText = require('./field-helper-text.cjs');
+const fieldInput = require('./field-input.cjs');
+const fieldLabel = require('./field-label.cjs');
+const fieldRequiredIndicator = require('./field-required-indicator.cjs');
 const fieldRoot = require('./field-root.cjs');
 const fieldRootProvider = require('./field-root-provider.cjs');
-const fieldLabel = require('./field-label.cjs');
-const fieldInput = require('./field-input.cjs');
-const fieldTextarea = require('./field-textarea.cjs');
 const fieldSelect = require('./field-select.cjs');
-const fieldHelperText = require('./field-helper-text.cjs');
-const fieldErrorText = require('./field-error-text.cjs');
-const fieldContext = require('./field-context.cjs');
+const fieldTextarea = require('./field-textarea.cjs');
 
 
 
+exports.Context = fieldContext.FieldContext;
+exports.ErrorText = fieldErrorText.FieldErrorText;
+exports.HelperText = fieldHelperText.FieldHelperText;
+exports.Input = fieldInput.FieldInput;
+exports.Label = fieldLabel.FieldLabel;
+exports.RequiredIndicator = fieldRequiredIndicator.FieldRequiredIndicator;
 exports.Root = fieldRoot.FieldRoot;
 exports.RootProvider = fieldRootProvider.FieldRootProvider;
-exports.Label = fieldLabel.FieldLabel;
-exports.Input = fieldInput.FieldInput;
-exports.Textarea = fieldTextarea.FieldTextarea;
 exports.Select = fieldSelect.FieldSelect;
-exports.HelperText = fieldHelperText.FieldHelperText;
-exports.ErrorText = fieldErrorText.FieldErrorText;
-exports.Context = fieldContext.FieldContext;
+exports.Textarea = fieldTextarea.FieldTextarea;

package/dist/components/field/field.d.cts

@@ -1,9 +1,10 @@
-export { FieldRoot as Root, type FieldRootProps as RootProps, type FieldRootBaseProps as RootBaseProps, } from './field-root';
-export { FieldRootProvider as RootProvider, type FieldRootProviderProps as RootProviderProps, type FieldRootProviderBaseProps as RootProviderBaseProps, } from './field-root-provider';
-export { FieldLabel as Label, type FieldLabelProps as LabelProps, type FieldLabelBaseProps as LabelBaseProps, } from './field-label';
-export { FieldInput as Input, type FieldInputProps as InputProps, type FieldInputBaseProps as InputBaseProps, } from './field-input';
-export { FieldTextarea as Textarea, type FieldTextareaProps as TextareaProps, type FieldTextareaBaseProps as TextareaBaseProps, } from './field-textarea';
-export { FieldSelect as Select, type FieldSelectProps as SelectProps, type FieldSelectBaseProps as SelectBaseProps, } from './field-select';
-export { FieldHelperText as HelperText, type FieldHelperTextProps as HelperTextProps, type FieldHelperTextBaseProps as HelperTextBaseProps, } from './field-helper-text';
-export { FieldErrorText as ErrorText, type FieldErrorTextProps as ErrorTextProps, type FieldErrorTextBaseProps as ErrorTextBaseProps, } from './field-error-text';
 export { FieldContext as Context, type FieldContextProps as ContextProps } from './field-context';
+export { FieldErrorText as ErrorText, type FieldErrorTextBaseProps as ErrorTextBaseProps, type FieldErrorTextProps as ErrorTextProps, } from './field-error-text';
+export { FieldHelperText as HelperText, type FieldHelperTextBaseProps as HelperTextBaseProps, type FieldHelperTextProps as HelperTextProps, } from './field-helper-text';
+export { FieldInput as Input, type FieldInputBaseProps as InputBaseProps, type FieldInputProps as InputProps, } from './field-input';
+export { FieldLabel as Label, type FieldLabelBaseProps as LabelBaseProps, type FieldLabelProps as LabelProps, } from './field-label';
+export { FieldRequiredIndicator as RequiredIndicator, type FieldRequiredIndicatorBaseProps as RequiredIndicatorBaseProps, type FieldRequiredIndicatorProps as RequiredIndicatorProps, } from './field-required-indicator';
+export { FieldRoot as Root, type FieldRootBaseProps as RootBaseProps, type FieldRootProps as RootProps, } from './field-root';
+export { FieldRootProvider as RootProvider, type FieldRootProviderBaseProps as RootProviderBaseProps, type FieldRootProviderProps as RootProviderProps, } from './field-root-provider';
+export { FieldSelect as Select, type FieldSelectBaseProps as SelectBaseProps, type FieldSelectProps as SelectProps, } from './field-select';
+export { FieldTextarea as Textarea, type FieldTextareaBaseProps as TextareaBaseProps, type FieldTextareaProps as TextareaProps, } from './field-textarea';

package/dist/components/field/field.d.ts

@@ -1,9 +1,10 @@
-export { FieldRoot as Root, type FieldRootProps as RootProps, type FieldRootBaseProps as RootBaseProps, } from './field-root';
-export { FieldRootProvider as RootProvider, type FieldRootProviderProps as RootProviderProps, type FieldRootProviderBaseProps as RootProviderBaseProps, } from './field-root-provider';
-export { FieldLabel as Label, type FieldLabelProps as LabelProps, type FieldLabelBaseProps as LabelBaseProps, } from './field-label';
-export { FieldInput as Input, type FieldInputProps as InputProps, type FieldInputBaseProps as InputBaseProps, } from './field-input';
-export { FieldTextarea as Textarea, type FieldTextareaProps as TextareaProps, type FieldTextareaBaseProps as TextareaBaseProps, } from './field-textarea';
-export { FieldSelect as Select, type FieldSelectProps as SelectProps, type FieldSelectBaseProps as SelectBaseProps, } from './field-select';
-export { FieldHelperText as HelperText, type FieldHelperTextProps as HelperTextProps, type FieldHelperTextBaseProps as HelperTextBaseProps, } from './field-helper-text';
-export { FieldErrorText as ErrorText, type FieldErrorTextProps as ErrorTextProps, type FieldErrorTextBaseProps as ErrorTextBaseProps, } from './field-error-text';
 export { FieldContext as Context, type FieldContextProps as ContextProps } from './field-context';
+export { FieldErrorText as ErrorText, type FieldErrorTextBaseProps as ErrorTextBaseProps, type FieldErrorTextProps as ErrorTextProps, } from './field-error-text';
+export { FieldHelperText as HelperText, type FieldHelperTextBaseProps as HelperTextBaseProps, type FieldHelperTextProps as HelperTextProps, } from './field-helper-text';
+export { FieldInput as Input, type FieldInputBaseProps as InputBaseProps, type FieldInputProps as InputProps, } from './field-input';
+export { FieldLabel as Label, type FieldLabelBaseProps as LabelBaseProps, type FieldLabelProps as LabelProps, } from './field-label';
+export { FieldRequiredIndicator as RequiredIndicator, type FieldRequiredIndicatorBaseProps as RequiredIndicatorBaseProps, type FieldRequiredIndicatorProps as RequiredIndicatorProps, } from './field-required-indicator';
+export { FieldRoot as Root, type FieldRootBaseProps as RootBaseProps, type FieldRootProps as RootProps, } from './field-root';
+export { FieldRootProvider as RootProvider, type FieldRootProviderBaseProps as RootProviderBaseProps, type FieldRootProviderProps as RootProviderProps, } from './field-root-provider';
+export { FieldSelect as Select, type FieldSelectBaseProps as SelectBaseProps, type FieldSelectProps as SelectProps, } from './field-select';
+export { FieldTextarea as Textarea, type FieldTextareaBaseProps as TextareaBaseProps, type FieldTextareaProps as TextareaProps, } from './field-textarea';

package/dist/components/field/field.js

@@ -1,9 +1,10 @@
+export { FieldContext as Context } from './field-context.js';
+export { FieldErrorText as ErrorText } from './field-error-text.js';
+export { FieldHelperText as HelperText } from './field-helper-text.js';
+export { FieldInput as Input } from './field-input.js';
+export { FieldLabel as Label } from './field-label.js';
+export { FieldRequiredIndicator as RequiredIndicator } from './field-required-indicator.js';
 export { FieldRoot as Root } from './field-root.js';
 export { FieldRootProvider as RootProvider } from './field-root-provider.js';
-export { FieldLabel as Label } from './field-label.js';
-export { FieldInput as Input } from './field-input.js';
-export { FieldTextarea as Textarea } from './field-textarea.js';
 export { FieldSelect as Select } from './field-select.js';
-export { FieldHelperText as HelperText } from './field-helper-text.js';
-export { FieldErrorText as ErrorText } from './field-error-text.js';
-export { FieldContext as Context } from './field-context.js';
+export { FieldTextarea as Textarea } from './field-textarea.js';

package/dist/components/field/index.cjs

@@ -11,6 +11,7 @@ const fieldRoot = require('./field-root.cjs');
 const fieldRootProvider = require('./field-root-provider.cjs');
 const fieldSelect = require('./field-select.cjs');
 const fieldTextarea = require('./field-textarea.cjs');
+const fieldRequiredIndicator = require('./field-required-indicator.cjs');
 const field_anatomy = require('./field.anatomy.cjs');
 const useFieldContext = require('./use-field-context.cjs');
 const field = require('./field.cjs');
@@ -26,6 +27,7 @@ exports.FieldRoot = fieldRoot.FieldRoot;
 exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
 exports.FieldSelect = fieldSelect.FieldSelect;
 exports.FieldTextarea = fieldTextarea.FieldTextarea;
+exports.FieldRequiredIndicator = fieldRequiredIndicator.FieldRequiredIndicator;
 exports.fieldAnatomy = field_anatomy.fieldAnatomy;
 exports.useFieldContext = useFieldContext.useFieldContext;
 exports.Field = field;

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

@@ -7,6 +7,7 @@ export { FieldRoot, type FieldRootBaseProps, type FieldRootProps } from './field
 export { FieldRootProvider, type FieldRootProviderBaseProps, type FieldRootProviderProps, } from './field-root-provider';
 export { FieldSelect, type FieldSelectBaseProps, type FieldSelectProps } from './field-select';
 export { FieldTextarea, type FieldTextareaBaseProps, type FieldTextareaProps, } from './field-textarea';
+export { FieldRequiredIndicator, type FieldRequiredIndicatorProps, type FieldRequiredIndicatorBaseProps, } from './field-required-indicator';
 export { fieldAnatomy } from './field.anatomy';
 export { useFieldContext, type UseFieldContext } from './use-field-context';
 export * as Field from './field';

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

@@ -7,6 +7,7 @@ export { FieldRoot, type FieldRootBaseProps, type FieldRootProps } from './field
 export { FieldRootProvider, type FieldRootProviderBaseProps, type FieldRootProviderProps, } from './field-root-provider';
 export { FieldSelect, type FieldSelectBaseProps, type FieldSelectProps } from './field-select';
 export { FieldTextarea, type FieldTextareaBaseProps, type FieldTextareaProps, } from './field-textarea';
+export { FieldRequiredIndicator, type FieldRequiredIndicatorProps, type FieldRequiredIndicatorBaseProps, } from './field-required-indicator';
 export { fieldAnatomy } from './field.anatomy';
 export { useFieldContext, type UseFieldContext } from './use-field-context';
 export * as Field from './field';

package/dist/components/field/index.js

@@ -7,6 +7,7 @@ export { FieldRoot } from './field-root.js';
 export { FieldRootProvider } from './field-root-provider.js';
 export { FieldSelect } from './field-select.js';
 export { FieldTextarea } from './field-textarea.js';
+export { FieldRequiredIndicator } from './field-required-indicator.js';
 export { fieldAnatomy } from './field.anatomy.js';
 export { useFieldContext } from './use-field-context.js';
 import * as field from './field.js';

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

@@ -119,6 +119,13 @@ const useField = (props) => {
     }),
     [errorTextId]
   );
+  const getRequiredIndicatorProps = react.useMemo(
+    () => () => ({
+      "aria-hidden": true,
+      ...field_anatomy.parts.requiredIndicator.attrs
+    }),
+    []
+  );
   return {
     ariaDescribedby: labelIds,
     ids: {
@@ -141,7 +148,8 @@ const useField = (props) => {
     getTextareaProps,
     getSelectProps,
     getHelperTextProps,
-    getErrorTextProps
+    getErrorTextProps,
+    getRequiredIndicatorProps
   };
 };
 

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

@@ -57,4 +57,5 @@ export declare const useField: (props: UseFieldProps) => {
     getSelectProps: () => HTMLProps<"select">;
     getHelperTextProps: () => HTMLProps<"span">;
     getErrorTextProps: () => HTMLProps<"span">;
+    getRequiredIndicatorProps: () => HTMLProps<"span">;
 };

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

@@ -57,4 +57,5 @@ export declare const useField: (props: UseFieldProps) => {
     getSelectProps: () => HTMLProps<"select">;
     getHelperTextProps: () => HTMLProps<"span">;
     getErrorTextProps: () => HTMLProps<"span">;
+    getRequiredIndicatorProps: () => HTMLProps<"span">;
 };

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

@@ -115,6 +115,13 @@ const useField = (props) => {
     }),
     [errorTextId]
   );
+  const getRequiredIndicatorProps = useMemo(
+    () => () => ({
+      "aria-hidden": true,
+      ...parts.requiredIndicator.attrs
+    }),
+    []
+  );
   return {
     ariaDescribedby: labelIds,
     ids: {
@@ -137,7 +144,8 @@ const useField = (props) => {
     getTextareaProps,
     getSelectProps,
     getHelperTextProps,
-    getErrorTextProps
+    getErrorTextProps,
+    getRequiredIndicatorProps
   };
 };
 

package/dist/components/index.cjs

@@ -51,6 +51,7 @@ const useCheckboxContext = require('./checkbox/use-checkbox-context.cjs');
 const useCheckboxGroup = require('./checkbox/use-checkbox-group.cjs');
 const useCheckboxGroupContext = require('./checkbox/use-checkbox-group-context.cjs');
 const checkbox = require('./checkbox/checkbox.cjs');
+const clientOnly = require('./client-only/client-only.cjs');
 const clipboardContext = require('./clipboard/clipboard-context.cjs');
 const clipboardControl = require('./clipboard/clipboard-control.cjs');
 const clipboardIndicator = require('./clipboard/clipboard-indicator.cjs');
@@ -194,6 +195,7 @@ const fieldRoot = require('./field/field-root.cjs');
 const fieldRootProvider = require('./field/field-root-provider.cjs');
 const fieldSelect = require('./field/field-select.cjs');
 const fieldTextarea = require('./field/field-textarea.cjs');
+const fieldRequiredIndicator = require('./field/field-required-indicator.cjs');
 const field_anatomy = require('./field/field.anatomy.cjs');
 const useFieldContext = require('./field/use-field-context.cjs');
 const field = require('./field/field.cjs');
@@ -421,6 +423,7 @@ const useSignaturePadContext = require('./signature-pad/use-signature-pad-contex
 const signaturePad$1 = require('./signature-pad/signature-pad.cjs');
 const sliderContext = require('./slider/slider-context.cjs');
 const sliderControl = require('./slider/slider-control.cjs');
+const sliderDraggingIndicator = require('./slider/slider-dragging-indicator.cjs');
 const sliderHiddenInput = require('./slider/slider-hidden-input.cjs');
 const sliderLabel = require('./slider/slider-label.cjs');
 const sliderMarker = require('./slider/slider-marker.cjs');
@@ -663,6 +666,7 @@ exports.useCheckboxContext = useCheckboxContext.useCheckboxContext;
 exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
 exports.useCheckboxGroupContext = useCheckboxGroupContext.useCheckboxGroupContext;
 exports.Checkbox = checkbox;
+exports.ClientOnly = clientOnly.ClientOnly;
 exports.ClipboardContext = clipboardContext.ClipboardContext;
 exports.ClipboardControl = clipboardControl.ClipboardControl;
 exports.ClipboardIndicator = clipboardIndicator.ClipboardIndicator;
@@ -813,6 +817,7 @@ exports.FieldRoot = fieldRoot.FieldRoot;
 exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
 exports.FieldSelect = fieldSelect.FieldSelect;
 exports.FieldTextarea = fieldTextarea.FieldTextarea;
+exports.FieldRequiredIndicator = fieldRequiredIndicator.FieldRequiredIndicator;
 exports.fieldAnatomy = field_anatomy.fieldAnatomy;
 exports.useFieldContext = useFieldContext.useFieldContext;
 exports.Field = field;
@@ -1041,6 +1046,7 @@ exports.useSignaturePadContext = useSignaturePadContext.useSignaturePadContext;
 exports.SignaturePad = signaturePad$1;
 exports.SliderContext = sliderContext.SliderContext;
 exports.SliderControl = sliderControl.SliderControl;
+exports.SliderDraggingIndicator = sliderDraggingIndicator.SliderDraggingIndicator;
 exports.SliderHiddenInput = sliderHiddenInput.SliderHiddenInput;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;

package/dist/components/index.d.cts

@@ -2,6 +2,7 @@ export * from './accordion';
 export * from './avatar';
 export * from './carousel';
 export * from './checkbox';
+export * from './client-only';
 export * from './clipboard';
 export * from './collapsible';
 export * from './color-picker';

package/dist/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './accordion';
 export * from './avatar';
 export * from './carousel';
 export * from './checkbox';
+export * from './client-only';
 export * from './clipboard';
 export * from './collapsible';
 export * from './color-picker';

package/dist/components/index.js

@@ -51,6 +51,7 @@ export { useCheckboxGroup } from './checkbox/use-checkbox-group.js';
 export { useCheckboxGroupContext } from './checkbox/use-checkbox-group-context.js';
 import * as checkbox from './checkbox/checkbox.js';
 export { checkbox as Checkbox };
+export { ClientOnly } from './client-only/client-only.js';
 export { ClipboardContext } from './clipboard/clipboard-context.js';
 export { ClipboardControl } from './clipboard/clipboard-control.js';
 export { ClipboardIndicator } from './clipboard/clipboard-indicator.js';
@@ -201,6 +202,7 @@ export { FieldRoot } from './field/field-root.js';
 export { FieldRootProvider } from './field/field-root-provider.js';
 export { FieldSelect } from './field/field-select.js';
 export { FieldTextarea } from './field/field-textarea.js';
+export { FieldRequiredIndicator } from './field/field-required-indicator.js';
 export { fieldAnatomy } from './field/field.anatomy.js';
 export { useFieldContext } from './field/use-field-context.js';
 import * as field from './field/field.js';
@@ -445,6 +447,7 @@ import * as signaturePad from './signature-pad/signature-pad.js';
 export { signaturePad as SignaturePad };
 export { SliderContext } from './slider/slider-context.js';
 export { SliderControl } from './slider/slider-control.js';
+export { SliderDraggingIndicator } from './slider/slider-dragging-indicator.js';
 export { SliderHiddenInput } from './slider/slider-hidden-input.js';
 export { SliderLabel } from './slider/slider-label.js';
 export { SliderMarker } from './slider/slider-marker.js';

package/dist/components/slider/index.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const sliderContext = require('./slider-context.cjs');
 const sliderControl = require('./slider-control.cjs');
+const sliderDraggingIndicator = require('./slider-dragging-indicator.cjs');
 const sliderHiddenInput = require('./slider-hidden-input.cjs');
 const sliderLabel = require('./slider-label.cjs');
 const sliderMarker = require('./slider-marker.cjs');
@@ -23,6 +24,7 @@ const slider = require('@zag-js/slider');
 
 exports.SliderContext = sliderContext.SliderContext;
 exports.SliderControl = sliderControl.SliderControl;
+exports.SliderDraggingIndicator = sliderDraggingIndicator.SliderDraggingIndicator;
 exports.SliderHiddenInput = sliderHiddenInput.SliderHiddenInput;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;

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

@@ -1,6 +1,7 @@
 export type { FocusChangeDetails as SliderFocusChangeDetails, ValueChangeDetails as SliderValueChangeDetails, } from '@zag-js/slider';
 export { SliderContext, type SliderContextProps, } from './slider-context';
 export { SliderControl, type SliderControlBaseProps, type SliderControlProps, } from './slider-control';
+export { SliderDraggingIndicator, type SliderDraggingIndicatorBaseProps, type SliderDraggingIndicatorProps, } from './slider-dragging-indicator';
 export { SliderHiddenInput, type SliderHiddenInputBaseProps, type SliderHiddenInputProps, } from './slider-hidden-input';
 export { SliderLabel, type SliderLabelBaseProps, type SliderLabelProps, } from './slider-label';
 export { SliderMarker, type SliderMarkerBaseProps, type SliderMarkerProps, } from './slider-marker';

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

@@ -1,6 +1,7 @@
 export type { FocusChangeDetails as SliderFocusChangeDetails, ValueChangeDetails as SliderValueChangeDetails, } from '@zag-js/slider';
 export { SliderContext, type SliderContextProps, } from './slider-context';
 export { SliderControl, type SliderControlBaseProps, type SliderControlProps, } from './slider-control';
+export { SliderDraggingIndicator, type SliderDraggingIndicatorBaseProps, type SliderDraggingIndicatorProps, } from './slider-dragging-indicator';
 export { SliderHiddenInput, type SliderHiddenInputBaseProps, type SliderHiddenInputProps, } from './slider-hidden-input';
 export { SliderLabel, type SliderLabelBaseProps, type SliderLabelProps, } from './slider-label';
 export { SliderMarker, type SliderMarkerBaseProps, type SliderMarkerProps, } from './slider-marker';

package/dist/components/slider/index.js

@@ -1,5 +1,6 @@
 export { SliderContext } from './slider-context.js';
 export { SliderControl } from './slider-control.js';
+export { SliderDraggingIndicator } from './slider-dragging-indicator.js';
 export { SliderHiddenInput } from './slider-hidden-input.js';
 export { SliderLabel } from './slider-label.js';
 export { SliderMarker } from './slider-marker.js';

package/dist/components/slider/slider-dragging-indicator.cjs

@@ -0,0 +1,23 @@
+'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 useSliderContext = require('./use-slider-context.cjs');
+const useSliderThumbPropsContext = require('./use-slider-thumb-props-context.cjs');
+
+const SliderDraggingIndicator = react.forwardRef(
+  (props, ref) => {
+    const slider = useSliderContext.useSliderContext();
+    const { index } = useSliderThumbPropsContext.useSliderThumbPropsContext();
+    const mergedProps = react$1.mergeProps(slider.getDraggingIndicatorProps({ index }), props);
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.span, { ...mergedProps, ref, children: props.children || slider.getThumbValue(index) });
+  }
+);
+SliderDraggingIndicator.displayName = "SliderDraggingIndicator";
+
+exports.SliderDraggingIndicator = SliderDraggingIndicator;

package/dist/components/slider/slider-dragging-indicator.d.cts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface SliderDraggingIndicatorBaseProps extends PolymorphicProps {
+}
+export interface SliderDraggingIndicatorProps extends HTMLProps<'span'>, SliderDraggingIndicatorBaseProps {
+}
+export declare const SliderDraggingIndicator: ForwardRefExoticComponent<SliderDraggingIndicatorProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/slider/slider-dragging-indicator.d.ts

@@ -0,0 +1,7 @@
+import { HTMLProps, PolymorphicProps } from '../factory';
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+export interface SliderDraggingIndicatorBaseProps extends PolymorphicProps {
+}
+export interface SliderDraggingIndicatorProps extends HTMLProps<'span'>, SliderDraggingIndicatorBaseProps {
+}
+export declare const SliderDraggingIndicator: ForwardRefExoticComponent<SliderDraggingIndicatorProps & RefAttributes<HTMLSpanElement>>;

package/dist/components/slider/slider-dragging-indicator.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@zag-js/react';
+import { forwardRef } from 'react';
+import { ark } from '../factory.js';
+import { useSliderContext } from './use-slider-context.js';
+import { useSliderThumbPropsContext } from './use-slider-thumb-props-context.js';
+
+const SliderDraggingIndicator = forwardRef(
+  (props, ref) => {
+    const slider = useSliderContext();
+    const { index } = useSliderThumbPropsContext();
+    const mergedProps = mergeProps(slider.getDraggingIndicatorProps({ index }), props);
+    return /* @__PURE__ */ jsx(ark.span, { ...mergedProps, ref, children: props.children || slider.getThumbValue(index) });
+  }
+);
+SliderDraggingIndicator.displayName = "SliderDraggingIndicator";
+
+export { SliderDraggingIndicator };

package/dist/components/slider/slider.cjs

@@ -4,6 +4,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const sliderContext = require('./slider-context.cjs');
 const sliderControl = require('./slider-control.cjs');
+const sliderDraggingIndicator = require('./slider-dragging-indicator.cjs');
+const sliderHiddenInput = require('./slider-hidden-input.cjs');
 const sliderLabel = require('./slider-label.cjs');
 const sliderMarker = require('./slider-marker.cjs');
 const sliderMarkerGroup = require('./slider-marker-group.cjs');
@@ -12,13 +14,14 @@ const sliderRoot = require('./slider-root.cjs');
 const sliderRootProvider = require('./slider-root-provider.cjs');
 const sliderThumb = require('./slider-thumb.cjs');
 const sliderTrack = require('./slider-track.cjs');
-const sliderHiddenInput = require('./slider-hidden-input.cjs');
 const sliderValueText = require('./slider-value-text.cjs');
 
 
 
 exports.Context = sliderContext.SliderContext;
 exports.Control = sliderControl.SliderControl;
+exports.DraggingIndicator = sliderDraggingIndicator.SliderDraggingIndicator;
+exports.HiddenInput = sliderHiddenInput.SliderHiddenInput;
 exports.Label = sliderLabel.SliderLabel;
 exports.Marker = sliderMarker.SliderMarker;
 exports.MarkerGroup = sliderMarkerGroup.SliderMarkerGroup;
@@ -27,5 +30,4 @@ exports.Root = sliderRoot.SliderRoot;
 exports.RootProvider = sliderRootProvider.SliderRootProvider;
 exports.Thumb = sliderThumb.SliderThumb;
 exports.Track = sliderTrack.SliderTrack;
-exports.HiddenInput = sliderHiddenInput.SliderHiddenInput;
 exports.ValueText = sliderValueText.SliderValueText;

package/dist/components/slider/slider.d.cts

@@ -1,13 +1,14 @@
 export type { FocusChangeDetails, ValueChangeDetails } from '@zag-js/slider';
 export { SliderContext as Context, type SliderContextProps as ContextProps } from './slider-context';
-export { SliderControl as Control, type SliderControlProps as ControlProps, type SliderControlBaseProps as ControlBaseProps, } from './slider-control';
-export { SliderLabel as Label, type SliderLabelProps as LabelProps, type SliderLabelBaseProps as LabelBaseProps, } from './slider-label';
-export { SliderMarker as Marker, type SliderMarkerProps as MarkerProps, type SliderMarkerBaseProps as MarkerBaseProps, } from './slider-marker';
-export { SliderMarkerGroup as MarkerGroup, type SliderMarkerGroupProps as MarkerGroupProps, type SliderMarkerGroupBaseProps as MarkerGroupBaseProps, } from './slider-marker-group';
-export { SliderRange as Range, type SliderRangeProps as RangeProps, type SliderRangeBaseProps as RangeBaseProps, } from './slider-range';
-export { SliderRoot as Root, type SliderRootProps as RootProps, type SliderRootBaseProps as RootBaseProps, } from './slider-root';
-export { SliderRootProvider as RootProvider, type SliderRootProviderProps as RootProviderProps, type SliderRootProviderBaseProps as RootProviderBaseProps, } from './slider-root-provider';
-export { SliderThumb as Thumb, type SliderThumbProps as ThumbProps, type SliderThumbBaseProps as ThumbBaseProps, } from './slider-thumb';
-export { SliderTrack as Track, type SliderTrackProps as TrackProps, type SliderTrackBaseProps as TrackBaseProps, } from './slider-track';
-export { SliderHiddenInput as HiddenInput, type SliderHiddenInputProps as HiddenInputProps, type SliderHiddenInputBaseProps as HiddenInputBaseProps, } from './slider-hidden-input';
-export { SliderValueText as ValueText, type SliderValueTextProps as ValueTextProps, type SliderValueTextBaseProps as ValueTextBaseProps, } from './slider-value-text';
+export { SliderControl as Control, type SliderControlBaseProps as ControlBaseProps, type SliderControlProps as ControlProps, } from './slider-control';
+export { SliderDraggingIndicator as DraggingIndicator, type SliderDraggingIndicatorBaseProps as DraggingIndicatorBaseProps, type SliderDraggingIndicatorProps as DraggingIndicatorProps, } from './slider-dragging-indicator';
+export { SliderHiddenInput as HiddenInput, type SliderHiddenInputBaseProps as HiddenInputBaseProps, type SliderHiddenInputProps as HiddenInputProps, } from './slider-hidden-input';
+export { SliderLabel as Label, type SliderLabelBaseProps as LabelBaseProps, type SliderLabelProps as LabelProps, } from './slider-label';
+export { SliderMarker as Marker, type SliderMarkerBaseProps as MarkerBaseProps, type SliderMarkerProps as MarkerProps, } from './slider-marker';
+export { SliderMarkerGroup as MarkerGroup, type SliderMarkerGroupBaseProps as MarkerGroupBaseProps, type SliderMarkerGroupProps as MarkerGroupProps, } from './slider-marker-group';
+export { SliderRange as Range, type SliderRangeBaseProps as RangeBaseProps, type SliderRangeProps as RangeProps, } from './slider-range';
+export { SliderRoot as Root, type SliderRootBaseProps as RootBaseProps, type SliderRootProps as RootProps, } from './slider-root';
+export { SliderRootProvider as RootProvider, type SliderRootProviderBaseProps as RootProviderBaseProps, type SliderRootProviderProps as RootProviderProps, } from './slider-root-provider';
+export { SliderThumb as Thumb, type SliderThumbBaseProps as ThumbBaseProps, type SliderThumbProps as ThumbProps, } from './slider-thumb';
+export { SliderTrack as Track, type SliderTrackBaseProps as TrackBaseProps, type SliderTrackProps as TrackProps, } from './slider-track';
+export { SliderValueText as ValueText, type SliderValueTextBaseProps as ValueTextBaseProps, type SliderValueTextProps as ValueTextProps, } from './slider-value-text';

package/dist/components/slider/slider.d.ts

@@ -1,13 +1,14 @@
 export type { FocusChangeDetails, ValueChangeDetails } from '@zag-js/slider';
 export { SliderContext as Context, type SliderContextProps as ContextProps } from './slider-context';
-export { SliderControl as Control, type SliderControlProps as ControlProps, type SliderControlBaseProps as ControlBaseProps, } from './slider-control';
-export { SliderLabel as Label, type SliderLabelProps as LabelProps, type SliderLabelBaseProps as LabelBaseProps, } from './slider-label';
-export { SliderMarker as Marker, type SliderMarkerProps as MarkerProps, type SliderMarkerBaseProps as MarkerBaseProps, } from './slider-marker';
-export { SliderMarkerGroup as MarkerGroup, type SliderMarkerGroupProps as MarkerGroupProps, type SliderMarkerGroupBaseProps as MarkerGroupBaseProps, } from './slider-marker-group';
-export { SliderRange as Range, type SliderRangeProps as RangeProps, type SliderRangeBaseProps as RangeBaseProps, } from './slider-range';
-export { SliderRoot as Root, type SliderRootProps as RootProps, type SliderRootBaseProps as RootBaseProps, } from './slider-root';
-export { SliderRootProvider as RootProvider, type SliderRootProviderProps as RootProviderProps, type SliderRootProviderBaseProps as RootProviderBaseProps, } from './slider-root-provider';
-export { SliderThumb as Thumb, type SliderThumbProps as ThumbProps, type SliderThumbBaseProps as ThumbBaseProps, } from './slider-thumb';
-export { SliderTrack as Track, type SliderTrackProps as TrackProps, type SliderTrackBaseProps as TrackBaseProps, } from './slider-track';
-export { SliderHiddenInput as HiddenInput, type SliderHiddenInputProps as HiddenInputProps, type SliderHiddenInputBaseProps as HiddenInputBaseProps, } from './slider-hidden-input';
-export { SliderValueText as ValueText, type SliderValueTextProps as ValueTextProps, type SliderValueTextBaseProps as ValueTextBaseProps, } from './slider-value-text';
+export { SliderControl as Control, type SliderControlBaseProps as ControlBaseProps, type SliderControlProps as ControlProps, } from './slider-control';
+export { SliderDraggingIndicator as DraggingIndicator, type SliderDraggingIndicatorBaseProps as DraggingIndicatorBaseProps, type SliderDraggingIndicatorProps as DraggingIndicatorProps, } from './slider-dragging-indicator';
+export { SliderHiddenInput as HiddenInput, type SliderHiddenInputBaseProps as HiddenInputBaseProps, type SliderHiddenInputProps as HiddenInputProps, } from './slider-hidden-input';
+export { SliderLabel as Label, type SliderLabelBaseProps as LabelBaseProps, type SliderLabelProps as LabelProps, } from './slider-label';
+export { SliderMarker as Marker, type SliderMarkerBaseProps as MarkerBaseProps, type SliderMarkerProps as MarkerProps, } from './slider-marker';
+export { SliderMarkerGroup as MarkerGroup, type SliderMarkerGroupBaseProps as MarkerGroupBaseProps, type SliderMarkerGroupProps as MarkerGroupProps, } from './slider-marker-group';
+export { SliderRange as Range, type SliderRangeBaseProps as RangeBaseProps, type SliderRangeProps as RangeProps, } from './slider-range';
+export { SliderRoot as Root, type SliderRootBaseProps as RootBaseProps, type SliderRootProps as RootProps, } from './slider-root';
+export { SliderRootProvider as RootProvider, type SliderRootProviderBaseProps as RootProviderBaseProps, type SliderRootProviderProps as RootProviderProps, } from './slider-root-provider';
+export { SliderThumb as Thumb, type SliderThumbBaseProps as ThumbBaseProps, type SliderThumbProps as ThumbProps, } from './slider-thumb';
+export { SliderTrack as Track, type SliderTrackBaseProps as TrackBaseProps, type SliderTrackProps as TrackProps, } from './slider-track';
+export { SliderValueText as ValueText, type SliderValueTextBaseProps as ValueTextBaseProps, type SliderValueTextProps as ValueTextProps, } from './slider-value-text';

package/dist/components/slider/slider.js

@@ -1,5 +1,7 @@
 export { SliderContext as Context } from './slider-context.js';
 export { SliderControl as Control } from './slider-control.js';
+export { SliderDraggingIndicator as DraggingIndicator } from './slider-dragging-indicator.js';
+export { SliderHiddenInput as HiddenInput } from './slider-hidden-input.js';
 export { SliderLabel as Label } from './slider-label.js';
 export { SliderMarker as Marker } from './slider-marker.js';
 export { SliderMarkerGroup as MarkerGroup } from './slider-marker-group.js';
@@ -8,5 +10,4 @@ export { SliderRoot as Root } from './slider-root.js';
 export { SliderRootProvider as RootProvider } from './slider-root-provider.js';
 export { SliderThumb as Thumb } from './slider-thumb.js';
 export { SliderTrack as Track } from './slider-track.js';
-export { SliderHiddenInput as HiddenInput } from './slider-hidden-input.js';
 export { SliderValueText as ValueText } from './slider-value-text.js';

package/dist/index.cjs

@@ -51,6 +51,7 @@ const useCheckboxContext = require('./components/checkbox/use-checkbox-context.c
 const useCheckboxGroup = require('./components/checkbox/use-checkbox-group.cjs');
 const useCheckboxGroupContext = require('./components/checkbox/use-checkbox-group-context.cjs');
 const checkbox = require('./components/checkbox/checkbox.cjs');
+const clientOnly = require('./components/client-only/client-only.cjs');
 const clipboardContext = require('./components/clipboard/clipboard-context.cjs');
 const clipboardControl = require('./components/clipboard/clipboard-control.cjs');
 const clipboardIndicator = require('./components/clipboard/clipboard-indicator.cjs');
@@ -194,6 +195,7 @@ const fieldRoot = require('./components/field/field-root.cjs');
 const fieldRootProvider = require('./components/field/field-root-provider.cjs');
 const fieldSelect = require('./components/field/field-select.cjs');
 const fieldTextarea = require('./components/field/field-textarea.cjs');
+const fieldRequiredIndicator = require('./components/field/field-required-indicator.cjs');
 const field_anatomy = require('./components/field/field.anatomy.cjs');
 const useFieldContext = require('./components/field/use-field-context.cjs');
 const field = require('./components/field/field.cjs');
@@ -421,6 +423,7 @@ const useSignaturePadContext = require('./components/signature-pad/use-signature
 const signaturePad$1 = require('./components/signature-pad/signature-pad.cjs');
 const sliderContext = require('./components/slider/slider-context.cjs');
 const sliderControl = require('./components/slider/slider-control.cjs');
+const sliderDraggingIndicator = require('./components/slider/slider-dragging-indicator.cjs');
 const sliderHiddenInput = require('./components/slider/slider-hidden-input.cjs');
 const sliderLabel = require('./components/slider/slider-label.cjs');
 const sliderMarker = require('./components/slider/slider-marker.cjs');
@@ -667,6 +670,7 @@ exports.useCheckboxContext = useCheckboxContext.useCheckboxContext;
 exports.useCheckboxGroup = useCheckboxGroup.useCheckboxGroup;
 exports.useCheckboxGroupContext = useCheckboxGroupContext.useCheckboxGroupContext;
 exports.Checkbox = checkbox;
+exports.ClientOnly = clientOnly.ClientOnly;
 exports.ClipboardContext = clipboardContext.ClipboardContext;
 exports.ClipboardControl = clipboardControl.ClipboardControl;
 exports.ClipboardIndicator = clipboardIndicator.ClipboardIndicator;
@@ -817,6 +821,7 @@ exports.FieldRoot = fieldRoot.FieldRoot;
 exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
 exports.FieldSelect = fieldSelect.FieldSelect;
 exports.FieldTextarea = fieldTextarea.FieldTextarea;
+exports.FieldRequiredIndicator = fieldRequiredIndicator.FieldRequiredIndicator;
 exports.fieldAnatomy = field_anatomy.fieldAnatomy;
 exports.useFieldContext = useFieldContext.useFieldContext;
 exports.Field = field;
@@ -1045,6 +1050,7 @@ exports.useSignaturePadContext = useSignaturePadContext.useSignaturePadContext;
 exports.SignaturePad = signaturePad$1;
 exports.SliderContext = sliderContext.SliderContext;
 exports.SliderControl = sliderControl.SliderControl;
+exports.SliderDraggingIndicator = sliderDraggingIndicator.SliderDraggingIndicator;
 exports.SliderHiddenInput = sliderHiddenInput.SliderHiddenInput;
 exports.SliderLabel = sliderLabel.SliderLabel;
 exports.SliderMarker = sliderMarker.SliderMarker;

package/dist/index.js

@@ -51,6 +51,7 @@ export { useCheckboxGroup } from './components/checkbox/use-checkbox-group.js';
 export { useCheckboxGroupContext } from './components/checkbox/use-checkbox-group-context.js';
 import * as checkbox from './components/checkbox/checkbox.js';
 export { checkbox as Checkbox };
+export { ClientOnly } from './components/client-only/client-only.js';
 export { ClipboardContext } from './components/clipboard/clipboard-context.js';
 export { ClipboardControl } from './components/clipboard/clipboard-control.js';
 export { ClipboardIndicator } from './components/clipboard/clipboard-indicator.js';
@@ -201,6 +202,7 @@ export { FieldRoot } from './components/field/field-root.js';
 export { FieldRootProvider } from './components/field/field-root-provider.js';
 export { FieldSelect } from './components/field/field-select.js';
 export { FieldTextarea } from './components/field/field-textarea.js';
+export { FieldRequiredIndicator } from './components/field/field-required-indicator.js';
 export { fieldAnatomy } from './components/field/field.anatomy.js';
 export { useFieldContext } from './components/field/use-field-context.js';
 import * as field from './components/field/field.js';
@@ -445,6 +447,7 @@ import * as signaturePad from './components/signature-pad/signature-pad.js';
 export { signaturePad as SignaturePad };
 export { SliderContext } from './components/slider/slider-context.js';
 export { SliderControl } from './components/slider/slider-control.js';
+export { SliderDraggingIndicator } from './components/slider/slider-dragging-indicator.js';
 export { SliderHiddenInput } from './components/slider/slider-hidden-input.js';
 export { SliderLabel } from './components/slider/slider-label.js';
 export { SliderMarker } from './components/slider/slider-marker.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -149,86 +149,86 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.5.6",
-    "@zag-js/accordion": "0.74.2",
-    "@zag-js/anatomy": "0.74.2",
-    "@zag-js/avatar": "0.74.2",
-    "@zag-js/carousel": "0.74.2",
-    "@zag-js/checkbox": "0.74.2",
-    "@zag-js/clipboard": "0.74.2",
-    "@zag-js/collapsible": "0.74.2",
-    "@zag-js/collection": "0.74.2",
-    "@zag-js/color-picker": "0.74.2",
-    "@zag-js/color-utils": "0.74.2",
-    "@zag-js/combobox": "0.74.2",
-    "@zag-js/core": "0.74.2",
-    "@zag-js/date-picker": "0.74.2",
-    "@zag-js/date-utils": "0.74.2",
-    "@zag-js/dialog": "0.74.2",
-    "@zag-js/dom-query": "0.74.2",
-    "@zag-js/editable": "0.74.2",
-    "@zag-js/file-upload": "0.74.2",
-    "@zag-js/file-utils": "0.74.2",
-    "@zag-js/highlight-word": "0.74.2",
-    "@zag-js/hover-card": "0.74.2",
-    "@zag-js/i18n-utils": "0.74.2",
-    "@zag-js/menu": "0.74.2",
-    "@zag-js/number-input": "0.74.2",
-    "@zag-js/pagination": "0.74.2",
-    "@zag-js/pin-input": "0.74.2",
-    "@zag-js/popover": "0.74.2",
-    "@zag-js/presence": "0.74.2",
-    "@zag-js/progress": "0.74.2",
-    "@zag-js/qr-code": "0.74.2",
-    "@zag-js/radio-group": "0.74.2",
-    "@zag-js/rating-group": "0.74.2",
-    "@zag-js/react": "0.74.2",
-    "@zag-js/select": "0.74.2",
-    "@zag-js/signature-pad": "0.74.2",
-    "@zag-js/slider": "0.74.2",
-    "@zag-js/splitter": "0.74.2",
-    "@zag-js/steps": "0.74.2",
-    "@zag-js/switch": "0.74.2",
-    "@zag-js/tabs": "0.74.2",
-    "@zag-js/tags-input": "0.74.2",
-    "@zag-js/time-picker": "0.74.2",
-    "@zag-js/timer": "0.74.2",
-    "@zag-js/toast": "0.74.2",
-    "@zag-js/toggle-group": "0.74.2",
-    "@zag-js/tooltip": "0.74.2",
-    "@zag-js/tree-view": "0.74.2",
-    "@zag-js/types": "0.74.2"
+    "@zag-js/accordion": "0.76.0",
+    "@zag-js/anatomy": "0.76.0",
+    "@zag-js/avatar": "0.76.0",
+    "@zag-js/carousel": "0.76.0",
+    "@zag-js/checkbox": "0.76.0",
+    "@zag-js/clipboard": "0.76.0",
+    "@zag-js/collapsible": "0.76.0",
+    "@zag-js/collection": "0.76.0",
+    "@zag-js/color-picker": "0.76.0",
+    "@zag-js/color-utils": "0.76.0",
+    "@zag-js/combobox": "0.76.0",
+    "@zag-js/core": "0.76.0",
+    "@zag-js/date-picker": "0.76.0",
+    "@zag-js/date-utils": "0.76.0",
+    "@zag-js/dialog": "0.76.0",
+    "@zag-js/dom-query": "0.76.0",
+    "@zag-js/editable": "0.76.0",
+    "@zag-js/file-upload": "0.76.0",
+    "@zag-js/file-utils": "0.76.0",
+    "@zag-js/highlight-word": "0.76.0",
+    "@zag-js/hover-card": "0.76.0",
+    "@zag-js/i18n-utils": "0.76.0",
+    "@zag-js/menu": "0.76.0",
+    "@zag-js/number-input": "0.76.0",
+    "@zag-js/pagination": "0.76.0",
+    "@zag-js/pin-input": "0.76.0",
+    "@zag-js/popover": "0.76.0",
+    "@zag-js/presence": "0.76.0",
+    "@zag-js/progress": "0.76.0",
+    "@zag-js/qr-code": "0.76.0",
+    "@zag-js/radio-group": "0.76.0",
+    "@zag-js/rating-group": "0.76.0",
+    "@zag-js/react": "0.76.0",
+    "@zag-js/select": "0.76.0",
+    "@zag-js/signature-pad": "0.76.0",
+    "@zag-js/slider": "0.76.0",
+    "@zag-js/splitter": "0.76.0",
+    "@zag-js/steps": "0.76.0",
+    "@zag-js/switch": "0.76.0",
+    "@zag-js/tabs": "0.76.0",
+    "@zag-js/tags-input": "0.76.0",
+    "@zag-js/time-picker": "0.76.0",
+    "@zag-js/timer": "0.76.0",
+    "@zag-js/toast": "0.76.0",
+    "@zag-js/toggle-group": "0.76.0",
+    "@zag-js/tooltip": "0.76.0",
+    "@zag-js/tree-view": "0.76.0",
+    "@zag-js/types": "0.76.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.3",
+    "@biomejs/biome": "1.9.4",
     "@release-it/keep-a-changelog": "5.0.0",
-    "@storybook/addon-a11y": "8.3.5",
-    "@storybook/addon-essentials": "8.3.5",
-    "@storybook/react-vite": "8.3.5",
-    "@storybook/react": "8.3.5",
+    "@storybook/addon-a11y": "8.3.6",
+    "@storybook/addon-essentials": "8.3.6",
+    "@storybook/react-vite": "8.3.6",
+    "@storybook/react": "8.3.6",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/jest-dom": "6.6.1",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jsdom": "21.1.7",
-    "@types/react": "18.3.11",
+    "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "4.3.2",
-    "@zag-js/stringify-state": "0.74.2",
+    "@vitejs/plugin-react": "4.3.3",
+    "@zag-js/stringify-state": "0.76.0",
     "clean-package": "2.2.0",
     "globby": "14.0.2",
     "jsdom": "25.0.1",
-    "lucide-react": "0.452.0",
+    "lucide-react": "0.453.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-frame-component": "5.2.7",
-    "react-hook-form": "7.53.0",
-    "release-it": "17.8.2",
+    "react-hook-form": "7.53.1",
+    "release-it": "17.10.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "8.3.5",
+    "storybook": "8.3.6",
     "typescript": "5.6.3",
-    "vite": "5.4.8",
-    "vite-plugin-dts": "4.2.4",
-    "vitest": "2.1.2",
+    "vite": "5.4.10",
+    "vite-plugin-dts": "4.3.0",
+    "vitest": "2.1.3",
     "vitest-axe": "1.0.0-pre.3"
   },
   "peerDependencies": {