@react-fabric/form 1.0.0-beta.23 → 1.0.0-beta.25

package/dist/cjs/input/ArrayInput.js

@@ -140,13 +140,14 @@ var ArrayInput = function ArrayInput(_ref) {
           label: t((_error$values$label = (_error$values = error.values) === null || _error$values === void 0 ? void 0 : _error$values.label) !== null && _error$values$label !== void 0 ? _error$values$label : "form:badkey", (_error$values2 = error.values) === null || _error$values2 === void 0 ? void 0 : _error$values2.path)
         }) : {}),
         children: /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
+          size: "sm",
           "aria-label": "Add item",
           icon: core$1.CoreIcons.insert,
           onClick: function onClick() {
             return handleAdd(onAdd === null || onAdd === void 0 ? void 0 : onAdd());
           },
           "data-invalid": !!error,
-          disabled: !!disabled || readOnly || fields.length < maxItems,
+          disabled: !!disabled || readOnly || fields.length > maxItems,
           className: classNames(ArrayInput_module.addButton, "me-10"),
           children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
         })
@@ -155,7 +156,11 @@ var ArrayInput = function ArrayInput(_ref) {
   }, [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: ArrayInput_module.arrayInput,
-    children: [!fixedList && onAdd && buttonPosition !== "bottom" && addButton, /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+      appendLabel: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "-me-2",
+        children: !fixedList && onAdd && buttonPosition !== "bottom" && addButton
+      }),
       children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
         children: fields.map(function (item, index) {
           return /*#__PURE__*/jsxRuntime.jsxs(SortableItem, {
@@ -164,7 +169,7 @@ var ArrayInput = function ArrayInput(_ref) {
             children: [typeof children === "function" ? children({
               index: index,
               name: "".concat(name, ".").concat(index)
-            }) : utilities$1.cloneChildren(children, function (child) {
+            }) : core$1.cloneChildren(children, function (child) {
               return /*#__PURE__*/react.cloneElement(child, Object.assign({
                 disabled: disabled,
                 readOnly: readOnly,

package/dist/cjs/input/ColorInput.js

@@ -108,11 +108,7 @@ var ColorInput = function ColorInput(_ref) {
         zIndex: "var(--z-popover)"
       }, floatingStyles),
       "data-testid": "dropdown-body"
-    }, getFloatingProps({
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    })), {}, {
+    }, getFloatingProps()), {}, {
       children: [/*#__PURE__*/jsxRuntime.jsx(ColorPicker.ColorPicker, _objectSpread(_objectSpread({}, rest), {}, {
         onChange: handleChange,
         defaultColor: defaultColor,

package/dist/cjs/input/ColorPicker.js

@@ -41,12 +41,9 @@ var ColorPicker = /*#__PURE__*/react.memo(function (_ref) {
     styles: {
       "default": {
         hue: {
-          borderRadius: "99px",
           boxShadow: "0 0 1px 1px var(--color-shadow)"
         },
         alpha: {
-          height: "1rem",
-          borderRadius: "99px",
           backgroundColor: "var(--fabric-bg)",
           boxShadow: "0 0 1px 1px var(--color-shadow)"
         },
@@ -63,36 +60,6 @@ var ColorPicker = /*#__PURE__*/react.memo(function (_ref) {
           backgroundColor: "var(--fabric-bg)",
           boxShadow: "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)"
         },
-        Alpha: {
-          alpha: {
-            paddingRight: "calc(1rem - 2px)"
-          },
-          slider: {
-            width: "calc(1rem - 2px)",
-            borderRadius: "99px",
-            height: "calc(1rem - 2px)",
-            transform: "none"
-          }
-        },
-        Hue: {
-          hue: {
-            paddingRight: "calc(1rem - 2px)"
-          },
-          slider: {
-            width: "calc(1rem - 2px)",
-            borderRadius: "99px",
-            height: "calc(1rem - 2px)",
-            transform: "none"
-          }
-        },
-        Saturation: {
-          circle: {
-            width: "0.5rem",
-            borderRadius: "99px",
-            height: "0.5rem",
-            transform: "translate(-0.25rem, -0.25rem)"
-          }
-        },
         checkboard: {
           white: "transparent",
           black: "red"

package/dist/cjs/input/ColorPicker.module.css

@@ -1 +1 @@
-@layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{background-color:theme(backgroundColor.base);border:1px solid theme(borderColor.base);border-radius:theme(borderRadius.sm);box-shadow:none;color:theme(textColor.base);line-height:2;padding:0 4px!important;&:focus{border-color:theme(borderColor.primary.DEFAULT)}}& label{color:theme(textColor.base)}& :global(.flexbox-fix){border-color:theme(borderColor.muted);justify-content:center;&>div>div{text-align:center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}}}
+@layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{background-color:theme(backgroundColor.base);border:1px solid theme(borderColor.base);border-radius:theme(borderRadius.sm);box-shadow:none;color:theme(textColor.base);line-height:2;padding:0 4px!important;&:focus{border-color:theme(borderColor.primary.DEFAULT)}}& label{color:theme(textColor.base)}& :global(.flexbox-fix){border-color:theme(borderColor.muted);justify-content:center;&>div>div{text-align:center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}& :global(.saturation-black)~div{pointer-events:none}}}

package/dist/cjs/input/Field.js

@@ -2,7 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var utilities = require('@react-fabric/utilities');
+var core = require('@react-fabric/core');
 var classNames = require('classnames');
 var react = require('react');
 var Field_module = require('../internal/Field.module.css');
@@ -21,7 +21,7 @@ var Field = function Field(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames(Field_module.fieldGroup, !plain && !noOutline && "outline", !plain && "bg-base", "flex-1 rounded", !vertical && "flex flex-nowrap"),
-      children: utilities.cloneChildren(children, function (child) {
+      children: core.cloneChildren(children, function (child) {
         return /*#__PURE__*/react.cloneElement(child, {
           "data-inner": true
         });

package/dist/cjs/input/RadioGroup.js

@@ -2,7 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var utilities = require('@react-fabric/utilities');
+var core = require('@react-fabric/core');
 var react = require('react');
 var FieldWrapper = require('../internal/FieldWrapper.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -20,7 +20,7 @@ var RadioGroup = function RadioGroup(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: className,
-      children: utilities.cloneChildren(children, function (child) {
+      children: core.cloneChildren(children, function (child) {
         return /*#__PURE__*/react.cloneElement(child, {
           name: name,
           onChange: onChange,

package/dist/cjs/internal/FieldWrapper.js

@@ -49,7 +49,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
       flexBasis: width
     },
     children: [!isInner && /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex flex-nowrap flex-content gap-1 py-0.5 px-2",
+      className: "flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2",
       style: {
         width: inline ? labelWidth : undefined
       },
@@ -64,6 +64,8 @@ var FieldWrapper = function FieldWrapper(_ref) {
       }), required && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "text-danger-500 select-none flex-content text-[10px]",
         children: "\u273D"
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "flex-1"
       }), appendLabel && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "flex-content",
         children: appendLabel

package/dist/esm/input/ArrayInput.js

@@ -4,8 +4,8 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext, useSortable } from '@dnd-kit/sortable';
-import { Icon, CoreIcons, Tooltip, Button } from '@react-fabric/core';
-import { isString, cloneChildren } from '@react-fabric/utilities';
+import { Icon, CoreIcons, Tooltip, Button, cloneChildren } from '@react-fabric/core';
+import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, useCallback, useImperativeHandle, cloneElement } from 'react';
 import { useFormContext, useFieldArray } from 'react-hook-form';
@@ -140,13 +140,14 @@ var ArrayInput = function ArrayInput(_ref) {
           label: t((_error$values$label = (_error$values = error.values) === null || _error$values === void 0 ? void 0 : _error$values.label) !== null && _error$values$label !== void 0 ? _error$values$label : "form:badkey", (_error$values2 = error.values) === null || _error$values2 === void 0 ? void 0 : _error$values2.path)
         }) : {}),
         children: /*#__PURE__*/jsx(Button, {
+          size: "sm",
           "aria-label": "Add item",
           icon: CoreIcons.insert,
           onClick: function onClick() {
             return handleAdd(onAdd === null || onAdd === void 0 ? void 0 : onAdd());
           },
           "data-invalid": !!error,
-          disabled: !!disabled || readOnly || fields.length < maxItems,
+          disabled: !!disabled || readOnly || fields.length > maxItems,
           className: classNames(classes.addButton, "me-10"),
           children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
         })
@@ -155,7 +156,11 @@ var ArrayInput = function ArrayInput(_ref) {
   }, [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems]);
   return /*#__PURE__*/jsxs("div", {
     className: classes.arrayInput,
-    children: [!fixedList && onAdd && buttonPosition !== "bottom" && addButton, /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [/*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+      appendLabel: /*#__PURE__*/jsx("div", {
+        className: "-me-2",
+        children: !fixedList && onAdd && buttonPosition !== "bottom" && addButton
+      }),
       children: /*#__PURE__*/jsx(Wrapper, {
         children: fields.map(function (item, index) {
           return /*#__PURE__*/jsxs(SortableItem, {

package/dist/esm/input/ColorInput.js

@@ -108,11 +108,7 @@ var ColorInput = function ColorInput(_ref) {
         zIndex: "var(--z-popover)"
       }, floatingStyles),
       "data-testid": "dropdown-body"
-    }, getFloatingProps({
-      onClick: function onClick(e) {
-        return e.stopPropagation();
-      }
-    })), {}, {
+    }, getFloatingProps()), {}, {
       children: [/*#__PURE__*/jsx(ColorPicker, _objectSpread(_objectSpread({}, rest), {}, {
         onChange: handleChange,
         defaultColor: defaultColor,

package/dist/esm/input/ColorPicker.js

@@ -41,12 +41,9 @@ var ColorPicker = /*#__PURE__*/memo(function (_ref) {
     styles: {
       "default": {
         hue: {
-          borderRadius: "99px",
           boxShadow: "0 0 1px 1px var(--color-shadow)"
         },
         alpha: {
-          height: "1rem",
-          borderRadius: "99px",
           backgroundColor: "var(--fabric-bg)",
           boxShadow: "0 0 1px 1px var(--color-shadow)"
         },
@@ -63,36 +60,6 @@ var ColorPicker = /*#__PURE__*/memo(function (_ref) {
           backgroundColor: "var(--fabric-bg)",
           boxShadow: "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)"
         },
-        Alpha: {
-          alpha: {
-            paddingRight: "calc(1rem - 2px)"
-          },
-          slider: {
-            width: "calc(1rem - 2px)",
-            borderRadius: "99px",
-            height: "calc(1rem - 2px)",
-            transform: "none"
-          }
-        },
-        Hue: {
-          hue: {
-            paddingRight: "calc(1rem - 2px)"
-          },
-          slider: {
-            width: "calc(1rem - 2px)",
-            borderRadius: "99px",
-            height: "calc(1rem - 2px)",
-            transform: "none"
-          }
-        },
-        Saturation: {
-          circle: {
-            width: "0.5rem",
-            borderRadius: "99px",
-            height: "0.5rem",
-            transform: "translate(-0.25rem, -0.25rem)"
-          }
-        },
         checkboard: {
           white: "transparent",
           black: "red"

package/dist/esm/input/ColorPicker.module.css

@@ -1 +1 @@
-@layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{background-color:theme(backgroundColor.base);border:1px solid theme(borderColor.base);border-radius:theme(borderRadius.sm);box-shadow:none;color:theme(textColor.base);line-height:2;padding:0 4px!important;&:focus{border-color:theme(borderColor.primary.DEFAULT)}}& label{color:theme(textColor.base)}& :global(.flexbox-fix){border-color:theme(borderColor.muted);justify-content:center;&>div>div{text-align:center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}}}
+@layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{background-color:theme(backgroundColor.base);border:1px solid theme(borderColor.base);border-radius:theme(borderRadius.sm);box-shadow:none;color:theme(textColor.base);line-height:2;padding:0 4px!important;&:focus{border-color:theme(borderColor.primary.DEFAULT)}}& label{color:theme(textColor.base)}& :global(.flexbox-fix){border-color:theme(borderColor.muted);justify-content:center;&>div>div{text-align:center}& span>div{box-shadow:inset 0 0 1px 1px theme(borderColor.base)!important}}& :global(.saturation-black)~div{pointer-events:none}}}

package/dist/esm/input/Field.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { cloneChildren } from '@react-fabric/utilities';
+import { cloneChildren } from '@react-fabric/core';
 import classNames from 'classnames';
 import { cloneElement } from 'react';
 import classes from '../internal/Field.module.css';

package/dist/esm/input/RadioGroup.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { cloneChildren } from '@react-fabric/utilities';
+import { cloneChildren } from '@react-fabric/core';
 import { cloneElement } from 'react';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
 import { jsx } from 'react/jsx-runtime';

package/dist/esm/internal/FieldWrapper.js

@@ -49,7 +49,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
       flexBasis: width
     },
     children: [!isInner && /*#__PURE__*/jsxs("div", {
-      className: "flex flex-nowrap flex-content gap-1 py-0.5 px-2",
+      className: "flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2",
       style: {
         width: inline ? labelWidth : undefined
       },
@@ -64,6 +64,8 @@ var FieldWrapper = function FieldWrapper(_ref) {
       }), required && /*#__PURE__*/jsx("span", {
         className: "text-danger-500 select-none flex-content text-[10px]",
         children: "\u273D"
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex-1"
       }), appendLabel && /*#__PURE__*/jsx("span", {
         className: "flex-content",
         children: appendLabel

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.23",
+  "version": "1.0.0-beta.25",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -39,8 +39,8 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.23",
-    "@react-fabric/utilities": "^1.0.0-beta.23",
+    "@react-fabric/core": "^1.0.0-beta.25",
+    "@react-fabric/utilities": "^1.0.0-beta.25",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -60,5 +60,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "96cac942a837ec03886660d398de74b8bcb2dbac"
+  "gitHead": "34640e2473c7823254e82aa7aed920c9c6f8f503"
 }

package/src/input/ArrayInput.tsx

@@ -23,8 +23,14 @@
 
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import { Button, CoreIcons, Icon, Tooltip } from "@react-fabric/core";
-import { cloneChildren, isString } from "@react-fabric/utilities";
+import {
+  Button,
+  cloneChildren,
+  CoreIcons,
+  Icon,
+  Tooltip,
+} from "@react-fabric/core";
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   cloneElement,
@@ -269,11 +275,12 @@ export const ArrayInput = ({
           }
         >
           <Button
+            size="sm"
             aria-label="Add item"
             icon={CoreIcons.insert}
             onClick={() => handleAdd(onAdd?.())}
             data-invalid={!!error}
-            disabled={!!disabled || readOnly || fields.length < maxItems}
+            disabled={!!disabled || readOnly || fields.length > maxItems}
             className={classNames(classes.addButton, "me-10")}
           >
             {addLabel ?? t("addArray")}
@@ -286,8 +293,14 @@ export const ArrayInput = ({
 
   return (
     <div className={classes.arrayInput}>
-      {!fixedList && onAdd && buttonPosition !== "bottom" && addButton}
-      <FieldWrapper {...rest}>
+      <FieldWrapper
+        {...rest}
+        appendLabel={
+          <div className="-me-2">
+            {!fixedList && onAdd && buttonPosition !== "bottom" && addButton}
+          </div>
+        }
+      >
         <Wrapper>
           {fields.map((item, index) => (
             <SortableItem

package/src/input/ColorInput.tsx

@@ -171,9 +171,7 @@ export const ColorInput = ({
             ...floatingStyles,
           }}
           data-testid="dropdown-body"
-          {...getFloatingProps({
-            onClick: (e) => e.stopPropagation(),
-          })}
+          {...getFloatingProps()}
         >
           <ColorPicker
             {...rest}

package/src/input/ColorPicker.module.css

@@ -57,5 +57,9 @@
         box-shadow: 0 0 1px 1px theme(borderColor.base) inset !important;
       }
     }
+
+    & :global(.saturation-black) ~ div {
+      pointer-events: none;
+    }
   }
 }

package/src/input/ColorPicker.tsx

@@ -135,12 +135,9 @@ export const ColorPicker: FC<ColorProps> = memo(
           {
             default: {
               hue: {
-                borderRadius: "99px",
                 boxShadow: "0 0 1px 1px var(--color-shadow)",
               },
               alpha: {
-                height: "1rem",
-                borderRadius: "99px",
                 backgroundColor: "var(--fabric-bg)",
                 boxShadow: "0 0 1px 1px var(--color-shadow)",
               },
@@ -158,36 +155,6 @@ export const ColorPicker: FC<ColorProps> = memo(
                 boxShadow:
                   "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
               },
-              Alpha: {
-                alpha: {
-                  paddingRight: "calc(1rem - 2px)",
-                },
-                slider: {
-                  width: "calc(1rem - 2px)",
-                  borderRadius: "99px",
-                  height: "calc(1rem - 2px)",
-                  transform: "none",
-                },
-              },
-              Hue: {
-                hue: {
-                  paddingRight: "calc(1rem - 2px)",
-                },
-                slider: {
-                  width: "calc(1rem - 2px)",
-                  borderRadius: "99px",
-                  height: "calc(1rem - 2px)",
-                  transform: "none",
-                },
-              },
-              Saturation: {
-                circle: {
-                  width: "0.5rem",
-                  borderRadius: "99px",
-                  height: "0.5rem",
-                  transform: "translate(-0.25rem, -0.25rem)",
-                },
-              },
               checkboard: {
                 white: "transparent",
                 black: "red",

package/src/input/Field.tsx

@@ -21,11 +21,11 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { cloneChildren } from "@react-fabric/core";
 import {
   type ChildrenProp,
   type CssProp,
 } from "@react-fabric/core/dist/types/types";
-import { cloneChildren } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { cloneElement } from "react";
 import classes from "../internal/Field.module.css";

package/src/input/RadioGroup.tsx

@@ -21,11 +21,11 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { cloneChildren } from "@react-fabric/core";
 import {
   type ChildrenProp,
   type CssProp,
 } from "@react-fabric/core/dist/types/types";
-import { cloneChildren } from "@react-fabric/utilities";
 import { cloneElement } from "react";
 import { FieldWrapper } from "../internal/FieldWrapper";
 import { type Radio } from "./Radio";

package/src/internal/FieldWrapper.tsx

@@ -50,7 +50,7 @@ export const FieldWrapper = ({
     >
       {!isInner && (
         <div
-          className="flex flex-nowrap flex-content gap-1 py-0.5 px-2"
+          className="flex flex-nowrap flex-content items-end gap-1 py-0.5 px-2"
           style={{ width: inline ? labelWidth : undefined }}
         >
           <label
@@ -73,6 +73,7 @@ export const FieldWrapper = ({
               ✽
             </span>
           )}
+          <div className="flex-1" />
           {appendLabel && <span className="flex-content">{appendLabel}</span>}
         </div>
       )}