@ark-ui/react 1.0.0 → 1.1.0

package/index.mjs

@@ -9,6 +9,7 @@ export { Dialog } from './dialog/index.mjs';
 export { Editable } from './editable/index.mjs';
 export { Environment } from './environment/index.mjs';
 export { ark, jsxFactory } from './factory.mjs';
+export { FileUpload } from './file-upload/index.mjs';
 export { HoverCard } from './hover-card/index.mjs';
 export { Menu } from './menu/index.mjs';
 export { NumberInput } from './number-input/index.mjs';
@@ -61,14 +62,18 @@ export { ColorPickerChannelSliderTrack } from './color-picker/color-picker-chann
 export { ColorPickerContent } from './color-picker/color-picker-content.mjs';
 export { ColorPickerControl } from './color-picker/color-picker-control.mjs';
 export { ColorPickerEyeDropperTrigger } from './color-picker/color-picker-eye-dropper-trigger.mjs';
+export { ColorPickerFormatSelect } from './color-picker/color-picker-format-select.mjs';
+export { ColorPickerFormatTrigger } from './color-picker/color-picker-format-trigger.mjs';
 export { ColorPickerLabel } from './color-picker/color-picker-label.mjs';
 export { ColorPickerPositioner } from './color-picker/color-picker-positioner.mjs';
 export { ColorPickerSwatch } from './color-picker/color-picker-swatch.mjs';
 export { ColorPickerSwatchGroup } from './color-picker/color-picker-swatch-group.mjs';
+export { ColorPickerSwatchIndicator } from './color-picker/color-picker-swatch-indicator.mjs';
 export { ColorPickerSwatchTrigger } from './color-picker/color-picker-swatch-trigger.mjs';
 export { ColorPickerTransparencyGrid } from './color-picker/color-picker-transparency-grid.mjs';
 export { ColorPickerTrigger } from './color-picker/color-picker-trigger.mjs';
 export { ColorPickerValueText } from './color-picker/color-picker-value-text.mjs';
+export { ColorPickerView } from './color-picker/color-picker-view.mjs';
 export { useColorPickerAreaContext } from './color-picker/color-picker-area-context.mjs';
 export { useColorPickerChannelSliderContext } from './color-picker/color-picker-channel-slider-context.mjs';
 export { useColorPickerContext } from './color-picker/color-picker-context.mjs';
@@ -129,6 +134,16 @@ export { EditablePreview } from './editable/editable-preview.mjs';
 export { EditableSubmitTrigger } from './editable/editable-submit-trigger.mjs';
 export { useEditableContext } from './editable/editable-context.mjs';
 export { useEnvironmentContext } from './environment/environment-context.mjs';
+export { FileUploadDropzone } from './file-upload/file-upload-dropzone.mjs';
+export { FileUploadItem } from './file-upload/file-upload-item.mjs';
+export { FileUploadItemDeleteTrigger } from './file-upload/file-upload-item-delete-trigger.mjs';
+export { FileUploadItemGroup } from './file-upload/file-upload-item-group.mjs';
+export { FileUploadItemName } from './file-upload/file-upload-item-name.mjs';
+export { FileUploadItemPreview } from './file-upload/file-upload-item-preview.mjs';
+export { FileUploadItemSizeText } from './file-upload/file-upload-item-size-text.mjs';
+export { FileUploadLabel } from './file-upload/file-upload-label.mjs';
+export { FileUploadTrigger } from './file-upload/file-upload-trigger.mjs';
+export { useFileUploadContext } from './file-upload/file-upload-context.mjs';
 export { HoverCardArrow } from './hover-card/hover-card-arrow.mjs';
 export { HoverCardArrowTip } from './hover-card/hover-card-arrow-tip.mjs';
 export { HoverCardContent } from './hover-card/hover-card-content.mjs';

package/menu/menu-positioner.cjs

@@ -7,11 +7,17 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const menuContext = require('./menu-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const MenuPositioner = react.forwardRef((props, ref) => {
   const api = menuContext.useMenuContext();
   const mergedProps = react$1.mergeProps(api?.positionerProps ?? {}, props);
+  const presenceApi = presenceContext.usePresenceContext();
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref });
 });
 MenuPositioner.displayName = "MenuPositioner";

package/menu/menu-positioner.mjs

@@ -3,11 +3,17 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { useMenuContext } from './menu-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const MenuPositioner = forwardRef((props, ref) => {
   const api = useMenuContext();
   const mergedProps = mergeProps(api?.positionerProps ?? {}, props);
+  const presenceApi = usePresenceContext();
+  if (presenceApi.isUnmounted) {
+    return null;
+  }
   return /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref });
 });
 MenuPositioner.displayName = "MenuPositioner";

package/menu/menu-trigger.cjs

@@ -7,11 +7,20 @@ const jsxRuntime = require('react/jsx-runtime');
 const react$1 = require('@zag-js/react');
 const react = require('react');
 const factory = require('../factory.cjs');
+require('../presence/index.cjs');
 const menuContext = require('./menu-context.cjs');
+const presenceContext = require('../presence/presence-context.cjs');
 
 const MenuTrigger = react.forwardRef((props, ref) => {
   const api = menuContext.useMenuContext();
-  const mergedProps = react$1.mergeProps(api?.triggerProps ?? {}, props);
+  const presenceApi = presenceContext.usePresenceContext();
+  const mergedProps = react$1.mergeProps(
+    {
+      ...api.triggerProps,
+      "aria-controls": presenceApi.isUnmounted ? void 0 : api.triggerProps["aria-controls"]
+    },
+    props
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.button, { ...mergedProps, ref });
 });
 MenuTrigger.displayName = "MenuTrigger";

package/menu/menu-trigger.mjs

@@ -3,11 +3,20 @@ import { jsx } from 'react/jsx-runtime';
 import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { ark } from '../factory.mjs';
+import '../presence/index.mjs';
 import { useMenuContext } from './menu-context.mjs';
+import { usePresenceContext } from '../presence/presence-context.mjs';
 
 const MenuTrigger = forwardRef((props, ref) => {
   const api = useMenuContext();
-  const mergedProps = mergeProps(api?.triggerProps ?? {}, props);
+  const presenceApi = usePresenceContext();
+  const mergedProps = mergeProps(
+    {
+      ...api.triggerProps,
+      "aria-controls": presenceApi.isUnmounted ? void 0 : api.triggerProps["aria-controls"]
+    },
+    props
+  );
   return /* @__PURE__ */ jsx(ark.button, { ...mergedProps, ref });
 });
 MenuTrigger.displayName = "MenuTrigger";

package/number-input/number-input.cjs

@@ -8,42 +8,47 @@ const react$1 = require('@zag-js/react');
 const react = require('react');
 const createSplitProps = require('../create-split-props.cjs');
 const factory = require('../factory.cjs');
+const runIfFn = require('../run-if-fn.cjs');
 const numberInputContext = require('./number-input-context.cjs');
 const useNumberInput = require('./use-number-input.cjs');
 
 const NumberInput = react.forwardRef((props, ref) => {
-  const [useNumberInputProps, divProps] = createSplitProps.createSplitProps()(props, [
-    "allowMouseWheel",
-    "allowOverflow",
-    "clampValueOnBlur",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "focusInputOnChange",
-    "form",
-    "formatOptions",
-    "getRootNode",
-    "id",
-    "ids",
-    "inputMode",
-    "invalid",
-    "locale",
-    "max",
-    "min",
-    "name",
-    "onFocusChange",
-    "onValueChange",
-    "onValueInvalid",
-    "pattern",
-    "readOnly",
-    "spinOnPress",
-    "step",
-    "translations",
-    "value"
-  ]);
+  const [useNumberInputProps, { children, ...divProps }] = createSplitProps.createSplitProps()(
+    props,
+    [
+      "allowMouseWheel",
+      "allowOverflow",
+      "clampValueOnBlur",
+      "defaultValue",
+      "dir",
+      "disabled",
+      "focusInputOnChange",
+      "form",
+      "formatOptions",
+      "getRootNode",
+      "id",
+      "ids",
+      "inputMode",
+      "invalid",
+      "locale",
+      "max",
+      "min",
+      "name",
+      "onFocusChange",
+      "onValueChange",
+      "onValueInvalid",
+      "pattern",
+      "readOnly",
+      "spinOnPress",
+      "step",
+      "translations",
+      "value"
+    ]
+  );
   const api = useNumberInput.useNumberInput(useNumberInputProps);
   const mergedProps = react$1.mergeProps(api.rootProps, divProps);
-  return /* @__PURE__ */ jsxRuntime.jsx(numberInputContext.NumberInputProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref }) });
+  const view = runIfFn.runIfFn(children, api);
+  return /* @__PURE__ */ jsxRuntime.jsx(numberInputContext.NumberInputProvider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(factory.ark.div, { ...mergedProps, ref, children: view }) });
 });
 NumberInput.displayName = "NumberInput";
 

package/number-input/number-input.d.ts

@@ -1,8 +1,9 @@
-import { ForwardRefExoticComponent, RefAttributes } from 'react';
-/// <reference types="react" />
+import { ForwardRefExoticComponent, RefAttributes, type ReactNode } from 'react';
 import { type HTMLArkProps } from '../factory';
 import { type Assign } from '../types';
-import { type UseNumberInputProps } from './use-number-input';
-export interface NumberInputProps extends Assign<HTMLArkProps<'div'>, UseNumberInputProps> {
+import { type UseNumberInputProps, type UseNumberInputReturn } from './use-number-input';
+export interface NumberInputProps extends Assign<Assign<HTMLArkProps<'div'>, {
+    children?: ReactNode | ((api: UseNumberInputReturn) => ReactNode);
+}>, UseNumberInputProps> {
 }
 export declare const NumberInput: ForwardRefExoticComponent<NumberInputProps & RefAttributes<HTMLDivElement>>;

package/number-input/number-input.mjs

@@ -4,42 +4,47 @@ import { mergeProps } from '@zag-js/react';
 import { forwardRef } from 'react';
 import { createSplitProps } from '../create-split-props.mjs';
 import { ark } from '../factory.mjs';
+import { runIfFn } from '../run-if-fn.mjs';
 import { NumberInputProvider } from './number-input-context.mjs';
 import { useNumberInput } from './use-number-input.mjs';
 
 const NumberInput = forwardRef((props, ref) => {
-  const [useNumberInputProps, divProps] = createSplitProps()(props, [
-    "allowMouseWheel",
-    "allowOverflow",
-    "clampValueOnBlur",
-    "defaultValue",
-    "dir",
-    "disabled",
-    "focusInputOnChange",
-    "form",
-    "formatOptions",
-    "getRootNode",
-    "id",
-    "ids",
-    "inputMode",
-    "invalid",
-    "locale",
-    "max",
-    "min",
-    "name",
-    "onFocusChange",
-    "onValueChange",
-    "onValueInvalid",
-    "pattern",
-    "readOnly",
-    "spinOnPress",
-    "step",
-    "translations",
-    "value"
-  ]);
+  const [useNumberInputProps, { children, ...divProps }] = createSplitProps()(
+    props,
+    [
+      "allowMouseWheel",
+      "allowOverflow",
+      "clampValueOnBlur",
+      "defaultValue",
+      "dir",
+      "disabled",
+      "focusInputOnChange",
+      "form",
+      "formatOptions",
+      "getRootNode",
+      "id",
+      "ids",
+      "inputMode",
+      "invalid",
+      "locale",
+      "max",
+      "min",
+      "name",
+      "onFocusChange",
+      "onValueChange",
+      "onValueInvalid",
+      "pattern",
+      "readOnly",
+      "spinOnPress",
+      "step",
+      "translations",
+      "value"
+    ]
+  );
   const api = useNumberInput(useNumberInputProps);
   const mergedProps = mergeProps(api.rootProps, divProps);
-  return /* @__PURE__ */ jsx(NumberInputProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref }) });
+  const view = runIfFn(children, api);
+  return /* @__PURE__ */ jsx(NumberInputProvider, { value: api, children: /* @__PURE__ */ jsx(ark.div, { ...mergedProps, ref, children: view }) });
 });
 NumberInput.displayName = "NumberInput";
 

package/number-input/number-input.stories.d.ts

@@ -12,3 +12,4 @@ export declare const MouseWheel: () => JSX.Element;
 export declare const NoClamp: () => JSX.Element;
 export declare const FormUsage: () => JSX.Element;
 export declare const Formatted: () => JSX.Element;
+export declare const RenderFn: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ark-ui/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -13,6 +13,7 @@
     "dialog",
     "editable",
     "environment",
+    "file upload",
     "hover card",
     "menu",
     "number input",
@@ -59,42 +60,43 @@
     "release-it": "release-it --config ../../../release-it.json"
   },
   "dependencies": {
-    "@ark-ui/anatomy": "1.0.0",
-    "@zag-js/accordion": "0.28.0",
-    "@zag-js/avatar": "0.28.0",
-    "@zag-js/carousel": "0.28.0",
-    "@zag-js/checkbox": "0.28.0",
-    "@zag-js/color-picker": "0.28.0",
-    "@zag-js/color-utils": "0.28.0",
-    "@zag-js/combobox": "0.28.0",
-    "@zag-js/core": "0.28.0",
-    "@zag-js/date-picker": "0.28.0",
-    "@zag-js/date-utils": "0.28.0",
-    "@zag-js/dialog": "0.28.0",
-    "@zag-js/editable": "0.28.0",
-    "@zag-js/hover-card": "0.28.0",
-    "@zag-js/menu": "0.28.0",
-    "@zag-js/number-input": "0.28.0",
-    "@zag-js/pagination": "0.28.0",
-    "@zag-js/pin-input": "0.28.0",
-    "@zag-js/popover": "0.28.0",
-    "@zag-js/presence": "0.28.0",
-    "@zag-js/radio-group": "0.28.0",
-    "@zag-js/rating-group": "0.28.0",
-    "@zag-js/react": "0.28.0",
-    "@zag-js/select": "0.28.0",
-    "@zag-js/slider": "0.28.0",
-    "@zag-js/splitter": "0.28.0",
-    "@zag-js/switch": "0.28.0",
-    "@zag-js/tabs": "0.28.0",
-    "@zag-js/tags-input": "0.28.0",
-    "@zag-js/toast": "0.28.0",
-    "@zag-js/toggle-group": "0.28.0",
-    "@zag-js/tooltip": "0.28.0",
-    "@zag-js/types": "0.28.0"
+    "@ark-ui/anatomy": "1.1.0",
+    "@zag-js/accordion": "0.30.0",
+    "@zag-js/avatar": "0.30.0",
+    "@zag-js/carousel": "0.30.0",
+    "@zag-js/checkbox": "0.30.0",
+    "@zag-js/color-picker": "0.30.0",
+    "@zag-js/color-utils": "0.30.0",
+    "@zag-js/combobox": "0.30.0",
+    "@zag-js/core": "0.30.0",
+    "@zag-js/date-picker": "0.30.0",
+    "@zag-js/date-utils": "0.30.0",
+    "@zag-js/dialog": "0.30.0",
+    "@zag-js/editable": "0.30.0",
+    "@zag-js/file-upload": "0.30.0",
+    "@zag-js/hover-card": "0.30.0",
+    "@zag-js/menu": "0.30.0",
+    "@zag-js/number-input": "0.30.0",
+    "@zag-js/pagination": "0.30.0",
+    "@zag-js/pin-input": "0.30.0",
+    "@zag-js/popover": "0.30.0",
+    "@zag-js/presence": "0.30.0",
+    "@zag-js/radio-group": "0.30.0",
+    "@zag-js/rating-group": "0.30.0",
+    "@zag-js/react": "0.30.0",
+    "@zag-js/select": "0.30.0",
+    "@zag-js/slider": "0.30.0",
+    "@zag-js/splitter": "0.30.0",
+    "@zag-js/switch": "0.30.0",
+    "@zag-js/tabs": "0.30.0",
+    "@zag-js/tags-input": "0.30.0",
+    "@zag-js/toast": "0.30.0",
+    "@zag-js/toggle-group": "0.30.0",
+    "@zag-js/tooltip": "0.30.0",
+    "@zag-js/types": "0.30.0"
   },
   "devDependencies": {
-    "@release-it/keep-a-changelog": "4.0.0",
+    "@release-it/keep-a-changelog": "5.0.0",
     "@storybook/addon-a11y": "7.5.3",
     "@storybook/addon-essentials": "7.5.3",
     "@storybook/addons": "7.5.3",
@@ -102,29 +104,30 @@
     "@storybook/react-vite": "7.5.3",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
-    "@testing-library/react": "14.1.0",
+    "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.1",
-    "@types/jsdom": "21.1.5",
+    "@types/jsdom": "21.1.6",
     "@types/react": "18.2.37",
-    "@types/react-dom": "18.2.15",
+    "@types/react-dom": "18.2.16",
     "@types/testing-library__jest-dom": "5.14.9",
-    "@typescript-eslint/eslint-plugin": "6.10.0",
-    "@typescript-eslint/parser": "6.10.0",
-    "@vitejs/plugin-react": "4.1.1",
+    "@typescript-eslint/eslint-plugin": "6.12.0",
+    "@typescript-eslint/parser": "6.12.0",
+    "@vitejs/plugin-react": "4.2.0",
     "@vitest/coverage-v8": "0.34.6",
-    "eslint": "8.53.0",
+    "eslint": "8.54.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "globby": "13.2.2",
+    "globby": "14.0.0",
     "jsdom": "22.1.0",
     "lucide-react": "0.292.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-frame-component": "5.2.6",
-    "release-it": "16.2.1",
+    "react-hook-form": "7.48.2",
+    "release-it": "17.0.0",
     "resize-observer-polyfill": "1.5.1",
     "storybook": "7.5.3",
-    "typescript": "5.2.2",
+    "typescript": "5.3.2",
     "vite": "4.5.0",
     "vite-plugin-dts": "3.6.3",
     "vitest": "0.34.6"
@@ -195,6 +198,11 @@
       "import": "./environment/index.mjs",
       "require": "./environment/index.cjs"
     },
+    "./file-upload": {
+      "types": "./file-upload/index.d.ts",
+      "import": "./file-upload/index.mjs",
+      "require": "./file-upload/index.cjs"
+    },
     "./hover-card": {
       "types": "./hover-card/index.d.ts",
       "import": "./hover-card/index.mjs",

package/radio-group/radio-group.stories.d.ts

@@ -7,4 +7,4 @@ export default meta;
 export declare const Basic: () => JSX.Element;
 export declare const Disabled: () => JSX.Element;
 export declare const InitialValue: () => JSX.Element;
-export declare const OnChange: () => JSX.Element;
+export declare const OnEvent: () => JSX.Element;

package/select/select.stories.d.ts

@@ -8,3 +8,4 @@ export declare const Basic: () => JSX.Element;
 export declare const Advanced: () => JSX.Element;
 export declare const Multiple: () => JSX.Element;
 export declare const Controlled: () => JSX.Element;
+export declare const FormLibrary: () => JSX.Element;

package/slider/slider.stories.d.ts

@@ -5,6 +5,7 @@ type SliderType = typeof Slider;
 declare const meta: Meta<SliderType>;
 export default meta;
 export declare const Basic: () => JSX.Element;
+export declare const Range: () => JSX.Element;
 export declare const WithMarks: () => JSX.Element;
 export declare const InitialValue: () => JSX.Element;
 export declare const MinMax: () => JSX.Element;
@@ -12,4 +13,3 @@ export declare const Step: () => JSX.Element;
 export declare const OnEvent: () => JSX.Element;
 export declare const Vertical: () => JSX.Element;
 export declare const CenterOrigin: () => JSX.Element;
-export declare const Advanced: () => JSX.Element;

package/toast/create-toaster.cjs

@@ -45,7 +45,7 @@ const createToaster = (props) => {
     }, []);
     const mergedProps = react.mergeProps(api.getGroupProps({ placement }), props2);
     const toasts = api.toastsByPlacement[placement] ?? [];
-    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ol, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsxRuntime.jsx(ToastProviderFactory, { service: toast2 }, service.id)) });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.ol, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsxRuntime.jsx(ToastProviderFactory, { service: toast2 }, toast2.id)) });
   });
   Toaster.displayName = "ToastGroup";
   return [Toaster, api];

package/toast/create-toaster.mjs

@@ -22,7 +22,7 @@ const createToaster = (props) => {
     }, []);
     const mergedProps = mergeProps(api.getGroupProps({ placement }), props2);
     const toasts = api.toastsByPlacement[placement] ?? [];
-    return /* @__PURE__ */ jsx(ark.ol, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsx(ToastProviderFactory, { service: toast2 }, service.id)) });
+    return /* @__PURE__ */ jsx(ark.ol, { ...mergedProps, ref, children: toasts.map((toast2) => /* @__PURE__ */ jsx(ToastProviderFactory, { service: toast2 }, toast2.id)) });
   });
   Toaster.displayName = "ToastGroup";
   return [Toaster, api];