@ark-ui/react 3.4.0-0 → 3.4.0

package/dist/index.cjs

@@ -73,8 +73,10 @@ const colorPickerAreaBackground = require('./components/color-picker/color-picke
 const colorPickerAreaThumb = require('./components/color-picker/color-picker-area-thumb.cjs');
 const colorPickerChannelInput = require('./components/color-picker/color-picker-channel-input.cjs');
 const colorPickerChannelSlider = require('./components/color-picker/color-picker-channel-slider.cjs');
+const colorPickerChannelSliderLabel = require('./components/color-picker/color-picker-channel-slider-label.cjs');
 const colorPickerChannelSliderThumb = require('./components/color-picker/color-picker-channel-slider-thumb.cjs');
 const colorPickerChannelSliderTrack = require('./components/color-picker/color-picker-channel-slider-track.cjs');
+const colorPickerChannelSliderValueText = require('./components/color-picker/color-picker-channel-slider-value-text.cjs');
 const colorPickerContent = require('./components/color-picker/color-picker-content.cjs');
 const colorPickerContext = require('./components/color-picker/color-picker-context.cjs');
 const colorPickerControl = require('./components/color-picker/color-picker-control.cjs');
@@ -92,6 +94,7 @@ const colorPickerSwatchIndicator = require('./components/color-picker/color-pick
 const colorPickerSwatchTrigger = require('./components/color-picker/color-picker-swatch-trigger.cjs');
 const colorPickerTransparencyGrid = require('./components/color-picker/color-picker-transparency-grid.cjs');
 const colorPickerTrigger = require('./components/color-picker/color-picker-trigger.cjs');
+const colorPickerValueSwatch = require('./components/color-picker/color-picker-value-swatch.cjs');
 const colorPickerValueText = require('./components/color-picker/color-picker-value-text.cjs');
 const colorPickerView = require('./components/color-picker/color-picker-view.cjs');
 const useColorPicker = require('./components/color-picker/use-color-picker.cjs');
@@ -175,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');
@@ -375,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');
@@ -567,8 +582,10 @@ exports.ColorPickerAreaBackground = colorPickerAreaBackground.ColorPickerAreaBac
 exports.ColorPickerAreaThumb = colorPickerAreaThumb.ColorPickerAreaThumb;
 exports.ColorPickerChannelInput = colorPickerChannelInput.ColorPickerChannelInput;
 exports.ColorPickerChannelSlider = colorPickerChannelSlider.ColorPickerChannelSlider;
+exports.ColorPickerChannelSliderLabel = colorPickerChannelSliderLabel.ColorPickerChannelSliderLabel;
 exports.ColorPickerChannelSliderThumb = colorPickerChannelSliderThumb.ColorPickerChannelSliderThumb;
 exports.ColorPickerChannelSliderTrack = colorPickerChannelSliderTrack.ColorPickerChannelSliderTrack;
+exports.ColorPickerChannelSliderValueText = colorPickerChannelSliderValueText.ColorPickerChannelSliderValueText;
 exports.ColorPickerContent = colorPickerContent.ColorPickerContent;
 exports.ColorPickerContext = colorPickerContext.ColorPickerContext;
 exports.ColorPickerControl = colorPickerControl.ColorPickerControl;
@@ -586,6 +603,7 @@ exports.ColorPickerSwatchIndicator = colorPickerSwatchIndicator.ColorPickerSwatc
 exports.ColorPickerSwatchTrigger = colorPickerSwatchTrigger.ColorPickerSwatchTrigger;
 exports.ColorPickerTransparencyGrid = colorPickerTransparencyGrid.ColorPickerTransparencyGrid;
 exports.ColorPickerTrigger = colorPickerTrigger.ColorPickerTrigger;
+exports.ColorPickerValueSwatch = colorPickerValueSwatch.ColorPickerValueSwatch;
 exports.ColorPickerValueText = colorPickerValueText.ColorPickerValueText;
 exports.ColorPickerView = colorPickerView.ColorPickerView;
 exports.useColorPicker = useColorPicker.useColorPicker;
@@ -670,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;
@@ -871,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

@@ -75,8 +75,10 @@ export { ColorPickerAreaBackground } from './components/color-picker/color-picke
 export { ColorPickerAreaThumb } from './components/color-picker/color-picker-area-thumb.js';
 export { ColorPickerChannelInput } from './components/color-picker/color-picker-channel-input.js';
 export { ColorPickerChannelSlider } from './components/color-picker/color-picker-channel-slider.js';
+export { ColorPickerChannelSliderLabel } from './components/color-picker/color-picker-channel-slider-label.js';
 export { ColorPickerChannelSliderThumb } from './components/color-picker/color-picker-channel-slider-thumb.js';
 export { ColorPickerChannelSliderTrack } from './components/color-picker/color-picker-channel-slider-track.js';
+export { ColorPickerChannelSliderValueText } from './components/color-picker/color-picker-channel-slider-value-text.js';
 export { ColorPickerContent } from './components/color-picker/color-picker-content.js';
 export { ColorPickerContext } from './components/color-picker/color-picker-context.js';
 export { ColorPickerControl } from './components/color-picker/color-picker-control.js';
@@ -94,6 +96,7 @@ export { ColorPickerSwatchIndicator } from './components/color-picker/color-pick
 export { ColorPickerSwatchTrigger } from './components/color-picker/color-picker-swatch-trigger.js';
 export { ColorPickerTransparencyGrid } from './components/color-picker/color-picker-transparency-grid.js';
 export { ColorPickerTrigger } from './components/color-picker/color-picker-trigger.js';
+export { ColorPickerValueSwatch } from './components/color-picker/color-picker-value-swatch.js';
 export { ColorPickerValueText } from './components/color-picker/color-picker-value-text.js';
 export { ColorPickerView } from './components/color-picker/color-picker-view.js';
 export { useColorPicker } from './components/color-picker/use-color-picker.js';
@@ -182,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';
@@ -396,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/dist/utils/use-event.cjs

@@ -11,8 +11,7 @@ function useEvent(callback, opts = {}) {
   return react.useCallback(
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     (...args) => {
-      if (sync)
-        return queueMicrotask(() => callbackRef.current?.(...args));
+      if (sync) return queueMicrotask(() => callbackRef.current?.(...args));
       return callbackRef.current?.(...args);
     },
     [sync, callbackRef]

package/dist/utils/use-event.js

@@ -7,8 +7,7 @@ function useEvent(callback, opts = {}) {
   return useCallback(
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
     (...args) => {
-      if (sync)
-        return queueMicrotask(() => callbackRef.current?.(...args));
+      if (sync) return queueMicrotask(() => callbackRef.current?.(...args));
       return callbackRef.current?.(...args);
     },
     [sync, callbackRef]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "3.4.0-0",
+  "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.56.1",
-    "@zag-js/avatar": "0.56.1",
-    "@zag-js/carousel": "0.56.1",
-    "@zag-js/checkbox": "0.56.1",
-    "@zag-js/clipboard": "0.56.1",
-    "@zag-js/collapsible": "0.56.1",
-    "@zag-js/color-picker": "0.56.1",
-    "@zag-js/color-utils": "0.56.1",
-    "@zag-js/combobox": "0.56.1",
-    "@zag-js/core": "0.56.1",
-    "@zag-js/date-picker": "0.56.1",
-    "@zag-js/date-utils": "0.56.1",
-    "@zag-js/dom-query": "0.56.1",
-    "@zag-js/dialog": "0.56.1",
-    "@zag-js/editable": "0.56.1",
-    "@zag-js/file-upload": "0.56.1",
-    "@zag-js/file-utils": "0.56.1",
-    "@zag-js/hover-card": "0.56.1",
-    "@zag-js/i18n-utils": "0.56.1",
-    "@zag-js/menu": "0.56.1",
-    "@zag-js/number-input": "0.56.1",
-    "@zag-js/pagination": "0.56.1",
-    "@zag-js/pin-input": "0.56.1",
-    "@zag-js/popover": "0.56.1",
-    "@zag-js/presence": "0.56.1",
-    "@zag-js/progress": "0.56.1",
-    "@zag-js/qr-code": "0.56.1",
-    "@zag-js/radio-group": "0.56.1",
-    "@zag-js/rating-group": "0.56.1",
-    "@zag-js/react": "0.56.1",
-    "@zag-js/select": "0.56.1",
-    "@zag-js/signature-pad": "0.56.1",
-    "@zag-js/slider": "0.56.1",
-    "@zag-js/splitter": "0.56.1",
-    "@zag-js/switch": "0.56.1",
-    "@zag-js/tabs": "0.56.1",
-    "@zag-js/tags-input": "0.56.1",
-    "@zag-js/toast": "0.56.1",
-    "@zag-js/toggle-group": "0.56.1",
-    "@zag-js/tooltip": "0.56.1",
-    "@zag-js/tree-view": "0.56.1",
-    "@zag-js/types": "0.56.1"
+    "@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.7",
-    "@storybook/addon-essentials": "8.1.7",
-    "@storybook/react-vite": "8.1.7",
-    "@storybook/react": "8.1.7",
-    "@testing-library/dom": "10.1.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.2.0",
     "@testing-library/jest-dom": "6.4.6",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
@@ -583,16 +594,16 @@
     "@vitejs/plugin-react": "4.3.1",
     "globby": "14.0.1",
     "jsdom": "24.1.0",
-    "lucide-react": "0.394.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.51.5",
-    "release-it": "17.3.0",
+    "react-hook-form": "7.52.0",
+    "release-it": "17.4.0",
     "resize-observer-polyfill": "1.5.1",
-    "storybook": "8.1.7",
-    "typescript": "5.4.5",
-    "vite": "5.2.13",
+    "storybook": "8.1.10",
+    "typescript": "5.5.2",
+    "vite": "5.3.1",
     "vite-plugin-dts": "3.9.1",
     "vitest": "1.6.0",
     "vitest-axe": "1.0.0-pre.3"