@ark-ui/react 3.4.0-1 → 3.4.0

package/dist/components/switch/switch-hidden-input.cjs

@@ -7,13 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 const useSwitchContext = require('./use-switch-context.cjs');
 
 const SwitchHiddenInput = react.forwardRef(
   (props, ref) => {
     const switchContext = useSwitchContext.useSwitchContext();
     const mergedProps = react$1.mergeProps(switchContext.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+    const field = useFieldContext.useFieldContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 SwitchHiddenInput.displayName = "SwitchHiddenInput";

package/dist/components/switch/switch-hidden-input.js

@@ -3,13 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
 import { useSwitchContext } from './use-switch-context.js';
 
 const SwitchHiddenInput = forwardRef(
   (props, ref) => {
     const switchContext = useSwitchContext();
     const mergedProps = mergeProps(switchContext.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 SwitchHiddenInput.displayName = "SwitchHiddenInput";

package/dist/components/switch/use-switch.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 useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -32,9 +33,18 @@ const zagSwitch__namespace = /*#__PURE__*/_interopNamespaceDefault(zagSwitch);
 const useSwitch = (props) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    invalid: field?.invalid,
+    required: field?.required,
     getRootNode,
     checked: props.defaultChecked,
     ...props

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

@@ -5,13 +5,23 @@ import { 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 { useFieldContext } from '../field/use-field-context.js';
 
 const useSwitch = (props) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    readOnly: field?.readOnly,
+    invalid: field?.invalid,
+    required: field?.required,
     getRootNode,
     checked: props.defaultChecked,
     ...props

package/dist/components/tags-input/tags-input-hidden-input.cjs

@@ -7,13 +7,15 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+const useFieldContext = require('../field/use-field-context.cjs');
 const useTagsInputContext = require('./use-tags-input-context.cjs');
 
 const TagsInputHiddenInput = react.forwardRef(
   (props, ref) => {
     const tagsInput = useTagsInputContext.useTagsInputContext();
     const mergedProps = react$1.mergeProps(tagsInput.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { ...mergedProps, ref });
+    const field = useFieldContext.useFieldContext();
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 TagsInputHiddenInput.displayName = "TagsInputHiddenInput";

package/dist/components/tags-input/tags-input-hidden-input.js

@@ -3,13 +3,15 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.js';
+import { useFieldContext } from '../field/use-field-context.js';
 import { useTagsInputContext } from './use-tags-input-context.js';
 
 const TagsInputHiddenInput = forwardRef(
   (props, ref) => {
     const tagsInput = useTagsInputContext();
     const mergedProps = mergeProps(tagsInput.getHiddenInputProps(), props);
-    return /* @__PURE__ */ jsx(ark.input, { ...mergedProps, ref });
+    const field = useFieldContext();
+    return /* @__PURE__ */ jsx(ark.input, { "aria-describedby": field?.ariaDescribedby, ...mergedProps, ref });
   }
 );
 TagsInputHiddenInput.displayName = "TagsInputHiddenInput";

package/dist/components/tags-input/tags-input-root.cjs

@@ -37,6 +37,7 @@ const TagsInputRoot = react.forwardRef((props, ref) => {
     "onValueChange",
     "onValueInvalid",
     "readOnly",
+    "required",
     "translations",
     "validate",
     "value"

package/dist/components/tags-input/tags-input-root.js

@@ -33,6 +33,7 @@ const TagsInputRoot = forwardRef((props, ref) => {
     "onValueChange",
     "onValueInvalid",
     "readOnly",
+    "required",
     "translations",
     "validate",
     "value"

package/dist/components/tags-input/use-tags-input.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 useFieldContext = require('../field/use-field-context.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -32,9 +33,18 @@ const tagsInput__namespace = /*#__PURE__*/_interopNamespaceDefault(tagsInput);
 const useTagsInput = (props) => {
   const { getRootNode } = useEnvironmentContext.useEnvironmentContext();
   const { dir } = useLocaleContext.useLocaleContext();
+  const field = useFieldContext.useFieldContext();
   const initialContext = {
     id: react.useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    invalid: field?.invalid,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     value: props.defaultValue,
     ...props

package/dist/components/tags-input/use-tags-input.js

@@ -5,13 +5,23 @@ import { 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 { useFieldContext } from '../field/use-field-context.js';
 
 const useTagsInput = (props) => {
   const { getRootNode } = useEnvironmentContext();
   const { dir } = useLocaleContext();
+  const field = useFieldContext();
   const initialContext = {
     id: useId(),
+    ids: {
+      label: field?.ids.label,
+      hiddenInput: field?.ids.control
+    },
     dir,
+    disabled: field?.disabled,
+    invalid: field?.invalid,
+    readOnly: field?.readOnly,
+    required: field?.required,
     getRootNode,
     value: props.defaultValue,
     ...props

package/dist/index.cjs

@@ -178,6 +178,17 @@ const useEditable = require('./components/editable/use-editable.cjs');
 const useEditableContext = require('./components/editable/use-editable-context.cjs');
 const editable = require('./components/editable/editable.cjs');
 const factory = require('./components/factory.cjs');
+const fieldContext = require('./components/field/field-context.cjs');
+const fieldErrorText = require('./components/field/field-error-text.cjs');
+const fieldHelperText = require('./components/field/field-helper-text.cjs');
+const fieldInput = require('./components/field/field-input.cjs');
+const fieldLabel = require('./components/field/field-label.cjs');
+const fieldSelect = require('./components/field/field-select.cjs');
+const fieldRoot = require('./components/field/field-root.cjs');
+const fieldRootProvider = require('./components/field/field-root-provider.cjs');
+const fieldTextarea = require('./components/field/field-textarea.cjs');
+const useFieldContext = require('./components/field/use-field-context.cjs');
+const field = require('./components/field/field.cjs');
 const fileUploadContext = require('./components/file-upload/file-upload-context.cjs');
 const fileUploadDropzone = require('./components/file-upload/file-upload-dropzone.cjs');
 const fileUploadHiddenInput = require('./components/file-upload/file-upload-hidden-input.cjs');
@@ -378,6 +389,7 @@ const signaturePadContext = require('./components/signature-pad/signature-pad-co
 const signaturePadControl = require('./components/signature-pad/signature-pad-control.cjs');
 const signaturePadGuide = require('./components/signature-pad/signature-pad-guide.cjs');
 const signaturePadLabel = require('./components/signature-pad/signature-pad-label.cjs');
+const signaturePadHiddenInput = require('./components/signature-pad/signature-pad-hidden-input.cjs');
 const signaturePadRoot = require('./components/signature-pad/signature-pad-root.cjs');
 const signaturePadRootProvider = require('./components/signature-pad/signature-pad-root-provider.cjs');
 const signaturePadSegment = require('./components/signature-pad/signature-pad-segment.cjs');
@@ -676,6 +688,17 @@ exports.useEditableContext = useEditableContext.useEditableContext;
 exports.Editable = editable;
 exports.ark = factory.ark;
 exports.jsxFactory = factory.jsxFactory;
+exports.FieldContext = fieldContext.FieldContext;
+exports.FieldErrorText = fieldErrorText.FieldErrorText;
+exports.FieldHelperText = fieldHelperText.FieldHelperText;
+exports.FieldInput = fieldInput.FieldInput;
+exports.FieldLabel = fieldLabel.FieldLabel;
+exports.FieldSelect = fieldSelect.FieldSelect;
+exports.FieldRoot = fieldRoot.FieldRoot;
+exports.FieldRootProvider = fieldRootProvider.FieldRootProvider;
+exports.FieldTextarea = fieldTextarea.FieldTextarea;
+exports.useFieldContext = useFieldContext.useFieldContext;
+exports.Field = field;
 exports.FileUploadContext = fileUploadContext.FileUploadContext;
 exports.FileUploadDropzone = fileUploadDropzone.FileUploadDropzone;
 exports.FileUploadHiddenInput = fileUploadHiddenInput.FileUploadHiddenInput;
@@ -877,6 +900,7 @@ exports.SignaturePadContext = signaturePadContext.SignaturePadContext;
 exports.SignaturePadControl = signaturePadControl.SignaturePadControl;
 exports.SignaturePadGuide = signaturePadGuide.SignaturePadGuide;
 exports.SignaturePadLabel = signaturePadLabel.SignaturePadLabel;
+exports.SignaturePadHiddenInput = signaturePadHiddenInput.SignaturePadHiddenInput;
 exports.SignaturePadRoot = signaturePadRoot.SignaturePadRoot;
 exports.SignaturePadRootProvider = signaturePadRootProvider.SignaturePadRootProvider;
 exports.SignaturePadSegment = signaturePadSegment.SignaturePadSegment;

package/dist/index.js

@@ -185,6 +185,18 @@ export { useEditableContext } from './components/editable/use-editable-context.j
 import * as editable from './components/editable/editable.js';
 export { editable as Editable };
 export { ark, jsxFactory } from './components/factory.js';
+export { FieldContext } from './components/field/field-context.js';
+export { FieldErrorText } from './components/field/field-error-text.js';
+export { FieldHelperText } from './components/field/field-helper-text.js';
+export { FieldInput } from './components/field/field-input.js';
+export { FieldLabel } from './components/field/field-label.js';
+export { FieldSelect } from './components/field/field-select.js';
+export { FieldRoot } from './components/field/field-root.js';
+export { FieldRootProvider } from './components/field/field-root-provider.js';
+export { FieldTextarea } from './components/field/field-textarea.js';
+export { useFieldContext } from './components/field/use-field-context.js';
+import * as field from './components/field/field.js';
+export { field as Field };
 export { FileUploadContext } from './components/file-upload/file-upload-context.js';
 export { FileUploadDropzone } from './components/file-upload/file-upload-dropzone.js';
 export { FileUploadHiddenInput } from './components/file-upload/file-upload-hidden-input.js';
@@ -399,6 +411,7 @@ export { SignaturePadContext } from './components/signature-pad/signature-pad-co
 export { SignaturePadControl } from './components/signature-pad/signature-pad-control.js';
 export { SignaturePadGuide } from './components/signature-pad/signature-pad-guide.js';
 export { SignaturePadLabel } from './components/signature-pad/signature-pad-label.js';
+export { SignaturePadHiddenInput } from './components/signature-pad/signature-pad-hidden-input.js';
 export { SignaturePadRoot } from './components/signature-pad/signature-pad-root.js';
 export { SignaturePadRootProvider } from './components/signature-pad/signature-pad-root-provider.js';
 export { SignaturePadSegment } from './components/signature-pad/signature-pad-segment.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "3.4.0-1",
+  "version": "3.4.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -199,6 +199,17 @@
         "default": "./dist/components/factory.cjs"
       }
     },
+    "./field": {
+      "source": "./src/components/field/index.ts",
+      "import": {
+        "types": "./dist/components/field/index.d.ts",
+        "default": "./dist/components/field/index.js"
+      },
+      "require": {
+        "types": "./dist/components/field/index.d.cts",
+        "default": "./dist/components/field/index.cjs"
+      }
+    },
     "./file-upload": {
       "source": "./src/components/file-upload/index.ts",
       "import": {
@@ -522,58 +533,58 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@ark-ui/anatomy": "^3.3.1",
-    "@zag-js/accordion": "0.57.0",
-    "@zag-js/avatar": "0.57.0",
-    "@zag-js/carousel": "0.57.0",
-    "@zag-js/checkbox": "0.57.0",
-    "@zag-js/clipboard": "0.57.0",
-    "@zag-js/collapsible": "0.57.0",
-    "@zag-js/color-picker": "0.57.0",
-    "@zag-js/color-utils": "0.57.0",
-    "@zag-js/combobox": "0.57.0",
-    "@zag-js/core": "0.57.0",
-    "@zag-js/date-picker": "0.57.0",
-    "@zag-js/date-utils": "0.57.0",
-    "@zag-js/dom-query": "0.57.0",
-    "@zag-js/dialog": "0.57.0",
-    "@zag-js/editable": "0.57.0",
-    "@zag-js/file-upload": "0.57.0",
-    "@zag-js/file-utils": "0.57.0",
-    "@zag-js/hover-card": "0.57.0",
-    "@zag-js/i18n-utils": "0.57.0",
-    "@zag-js/menu": "0.57.0",
-    "@zag-js/number-input": "0.57.0",
-    "@zag-js/pagination": "0.57.0",
-    "@zag-js/pin-input": "0.57.0",
-    "@zag-js/popover": "0.57.0",
-    "@zag-js/presence": "0.57.0",
-    "@zag-js/progress": "0.57.0",
-    "@zag-js/qr-code": "0.57.0",
-    "@zag-js/radio-group": "0.57.0",
-    "@zag-js/rating-group": "0.57.0",
-    "@zag-js/react": "0.57.0",
-    "@zag-js/select": "0.57.0",
-    "@zag-js/signature-pad": "0.57.0",
-    "@zag-js/slider": "0.57.0",
-    "@zag-js/splitter": "0.57.0",
-    "@zag-js/switch": "0.57.0",
-    "@zag-js/tabs": "0.57.0",
-    "@zag-js/tags-input": "0.57.0",
-    "@zag-js/toast": "0.57.0",
-    "@zag-js/toggle-group": "0.57.0",
-    "@zag-js/tooltip": "0.57.0",
-    "@zag-js/tree-view": "0.57.0",
-    "@zag-js/types": "0.57.0"
+    "@ark-ui/anatomy": "^3.4.0",
+    "@zag-js/accordion": "0.58.2",
+    "@zag-js/avatar": "0.58.2",
+    "@zag-js/carousel": "0.58.2",
+    "@zag-js/checkbox": "0.58.2",
+    "@zag-js/clipboard": "0.58.2",
+    "@zag-js/collapsible": "0.58.2",
+    "@zag-js/color-picker": "0.58.2",
+    "@zag-js/color-utils": "0.58.2",
+    "@zag-js/combobox": "0.58.2",
+    "@zag-js/core": "0.58.2",
+    "@zag-js/date-picker": "0.58.2",
+    "@zag-js/date-utils": "0.58.2",
+    "@zag-js/dom-query": "0.58.2",
+    "@zag-js/dialog": "0.58.2",
+    "@zag-js/editable": "0.58.2",
+    "@zag-js/file-upload": "0.58.2",
+    "@zag-js/file-utils": "0.58.2",
+    "@zag-js/hover-card": "0.58.2",
+    "@zag-js/i18n-utils": "0.58.2",
+    "@zag-js/menu": "0.58.2",
+    "@zag-js/number-input": "0.58.2",
+    "@zag-js/pagination": "0.58.2",
+    "@zag-js/pin-input": "0.58.2",
+    "@zag-js/popover": "0.58.2",
+    "@zag-js/presence": "0.58.2",
+    "@zag-js/progress": "0.58.2",
+    "@zag-js/qr-code": "0.58.2",
+    "@zag-js/radio-group": "0.58.2",
+    "@zag-js/rating-group": "0.58.2",
+    "@zag-js/react": "0.58.2",
+    "@zag-js/select": "0.58.2",
+    "@zag-js/signature-pad": "0.58.2",
+    "@zag-js/slider": "0.58.2",
+    "@zag-js/splitter": "0.58.2",
+    "@zag-js/switch": "0.58.2",
+    "@zag-js/tabs": "0.58.2",
+    "@zag-js/tags-input": "0.58.2",
+    "@zag-js/toast": "0.58.2",
+    "@zag-js/toggle-group": "0.58.2",
+    "@zag-js/tooltip": "0.58.2",
+    "@zag-js/tree-view": "0.58.2",
+    "@zag-js/types": "0.58.2"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.8.1",
+    "@biomejs/biome": "1.8.2",
     "@release-it/keep-a-changelog": "5.0.0",
     "@storybook/addon-a11y": "8.1.10",
     "@storybook/addon-essentials": "8.1.10",
     "@storybook/react-vite": "8.1.10",
     "@storybook/react": "8.1.10",
-    "@testing-library/dom": "10.1.0",
+    "@testing-library/dom": "10.2.0",
     "@testing-library/jest-dom": "6.4.6",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
@@ -583,15 +594,15 @@
     "@vitejs/plugin-react": "4.3.1",
     "globby": "14.0.1",
     "jsdom": "24.1.0",
-    "lucide-react": "0.395.0",
+    "lucide-react": "0.396.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-frame-component": "5.2.7",
     "react-hook-form": "7.52.0",
-    "release-it": "17.3.0",
+    "release-it": "17.4.0",
     "resize-observer-polyfill": "1.5.1",
     "storybook": "8.1.10",
-    "typescript": "5.4.5",
+    "typescript": "5.5.2",
     "vite": "5.3.1",
     "vite-plugin-dts": "3.9.1",
     "vitest": "1.6.0",