@ark-ui/react 1.0.1 → 1.1.0

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.1",
+  "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.29.0",
-    "@zag-js/avatar": "0.29.0",
-    "@zag-js/carousel": "0.29.0",
-    "@zag-js/checkbox": "0.29.0",
-    "@zag-js/color-picker": "0.29.0",
-    "@zag-js/color-utils": "0.29.0",
-    "@zag-js/combobox": "0.29.0",
-    "@zag-js/core": "0.29.0",
-    "@zag-js/date-picker": "0.29.0",
-    "@zag-js/date-utils": "0.29.0",
-    "@zag-js/dialog": "0.29.0",
-    "@zag-js/editable": "0.29.0",
-    "@zag-js/hover-card": "0.29.0",
-    "@zag-js/menu": "0.29.0",
-    "@zag-js/number-input": "0.29.0",
-    "@zag-js/pagination": "0.29.0",
-    "@zag-js/pin-input": "0.29.0",
-    "@zag-js/popover": "0.29.0",
-    "@zag-js/presence": "0.29.0",
-    "@zag-js/radio-group": "0.29.0",
-    "@zag-js/rating-group": "0.29.0",
-    "@zag-js/react": "0.29.0",
-    "@zag-js/select": "0.29.0",
-    "@zag-js/slider": "0.29.0",
-    "@zag-js/splitter": "0.29.0",
-    "@zag-js/switch": "0.29.0",
-    "@zag-js/tabs": "0.29.0",
-    "@zag-js/tags-input": "0.29.0",
-    "@zag-js/toast": "0.29.0",
-    "@zag-js/toggle-group": "0.29.0",
-    "@zag-js/tooltip": "0.29.0",
-    "@zag-js/types": "0.29.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];