@react-fabric/form 1.0.0-beta.14 → 1.0.0-beta.17

package/dist/cjs/form/Form.js

@@ -32,6 +32,9 @@ var Form = function Form(_ref) {
     resolver: schema && yup.yupResolver(schema),
     defaultValues: defaultValues
   });
+  react.useEffect(function () {
+    form.reset();
+  }, []);
   var _useTransition = react.useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2),
     startTransition = _useTransition2[1];

package/dist/cjs/input/ArrayInput.js

@@ -138,7 +138,7 @@ var ArrayInput = function ArrayInput(_ref) {
             children: [typeof children === "function" ? children({
               index: index,
               name: "".concat(name, ".").concat(index)
-            }) : react.Children.map(children, function (child) {
+            }) : utilities$1.cloneChildren(children, function (child) {
               return /*#__PURE__*/react.cloneElement(child, Object.assign({
                 disabled: disabled,
                 readOnly: readOnly,

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

@@ -1 +1 @@
-@layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{@apply bg-base text-base !border !border-solid !rounded-sm !border-base focus:!border-primary !shadow-none;line-height:2;padding:0 4px!important}& label{@apply !text-base}& :global(.flexbox-fix){@apply !border-t-muted justify-center;&>div>div{@apply text-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}}}}

package/dist/cjs/input/Field.js

@@ -2,6 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var Field_module = require('../internal/Field.module.css');
@@ -20,8 +21,8 @@ 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: react.Children.map(children, function (child) {
-        return child && /*#__PURE__*/react.cloneElement(child, {
+      children: utilities.cloneChildren(children, function (child) {
+        return /*#__PURE__*/react.cloneElement(child, {
           "data-inner": true
         });
       })

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

@@ -1 +1 @@
-@layer comp{.fileInput{&::-webkit-file-upload-button{@apply bg-primary-500 opacity-80 hover:opacity-90 text-white rounded border-none py-0 cursor-pointer}&[aria-invalid=true]::-webkit-file-upload-button{@apply bg-danger-500}&:disabled::-webkit-file-upload-button{@apply bg-muted pointer-events-none}&[readOnly]{@apply pointer-events-none}}}
+@layer comp{.fileInput{&::-webkit-file-upload-button{background-color:theme(backgroundColor.primary.500);border:0;border-radius:theme(borderRadius.DEFAULT);color:theme(textColor.white);cursor:pointer;opacity:.8;padding-block:0;&:hover{opacity:.9}}&[aria-invalid=true]::-webkit-file-upload-button{background-color:theme(backgroundColor.danger.500)}&:disabled::-webkit-file-upload-button{background-color:theme(backgroundColor.muted);pointer-events:none}&[readOnly]{pointer-events:none}}}

package/dist/cjs/input/RadioGroup.js

@@ -2,6 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var FieldWrapper = require('../internal/FieldWrapper.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -19,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: react.Children.map(children, function (child) {
+      children: utilities.cloneChildren(children, function (child) {
         return /*#__PURE__*/react.cloneElement(child, {
           name: name,
           onChange: onChange,

package/dist/esm/form/Form.js

@@ -7,7 +7,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useDebounce } from '@react-fabric/core';
-import { useRef, useTransition, useEffect, useCallback, useImperativeHandle } from 'react';
+import { useRef, useEffect, useTransition, useCallback, useImperativeHandle } from 'react';
 import { useForm, FormProvider } from 'react-hook-form';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
@@ -32,6 +32,9 @@ var Form = function Form(_ref) {
     resolver: schema && yupResolver(schema),
     defaultValues: defaultValues
   });
+  useEffect(function () {
+    form.reset();
+  }, []);
   var _useTransition = useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2),
     startTransition = _useTransition2[1];

package/dist/esm/input/ArrayInput.js

@@ -5,9 +5,9 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext, useSortable } from '@dnd-kit/sortable';
 import { Icon, CoreIcons, Button, Tooltip } from '@react-fabric/core';
-import { isString } from '@react-fabric/utilities';
+import { cloneChildren, isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo, useCallback, useImperativeHandle, Children, cloneElement } from 'react';
+import { useMemo, useCallback, useImperativeHandle, cloneElement } from 'react';
 import { useFormContext, useFieldArray } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
@@ -138,7 +138,7 @@ var ArrayInput = function ArrayInput(_ref) {
             children: [typeof children === "function" ? children({
               index: index,
               name: "".concat(name, ".").concat(index)
-            }) : Children.map(children, function (child) {
+            }) : cloneChildren(children, function (child) {
               return /*#__PURE__*/cloneElement(child, Object.assign({
                 disabled: disabled,
                 readOnly: readOnly,

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

@@ -1 +1 @@
-@layer comp{.colorPicker{--color-shadow:theme(borderColor.base);& input{@apply bg-base text-base !border !border-solid !rounded-sm !border-base focus:!border-primary !shadow-none;line-height:2;padding:0 4px!important}& label{@apply !text-base}& :global(.flexbox-fix){@apply !border-t-muted justify-center;&>div>div{@apply text-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}}}}

package/dist/esm/input/Field.js

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

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

@@ -1 +1 @@
-@layer comp{.fileInput{&::-webkit-file-upload-button{@apply bg-primary-500 opacity-80 hover:opacity-90 text-white rounded border-none py-0 cursor-pointer}&[aria-invalid=true]::-webkit-file-upload-button{@apply bg-danger-500}&:disabled::-webkit-file-upload-button{@apply bg-muted pointer-events-none}&[readOnly]{@apply pointer-events-none}}}
+@layer comp{.fileInput{&::-webkit-file-upload-button{background-color:theme(backgroundColor.primary.500);border:0;border-radius:theme(borderRadius.DEFAULT);color:theme(textColor.white);cursor:pointer;opacity:.8;padding-block:0;&:hover{opacity:.9}}&[aria-invalid=true]::-webkit-file-upload-button{background-color:theme(backgroundColor.danger.500)}&:disabled::-webkit-file-upload-button{background-color:theme(backgroundColor.muted);pointer-events:none}&[readOnly]{pointer-events:none}}}

package/dist/esm/input/RadioGroup.js

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

package/dist/types/input/ArrayInput.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode, type RefObject } from "react";
+import { type ReactNode, type Ref } from "react";
 export interface ArrayInputProps {
     /**
      * input label
@@ -52,7 +52,7 @@ export interface ArrayInputProps {
      * fixed length list
      */
     fixedList?: boolean;
-    arrayRef?: RefObject<{
+    arrayRef?: Ref<{
         addItem: (item: AnyObject) => void;
         removeItem: (idx: number) => void;
     }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.17",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -37,10 +37,10 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@floating-ui/react": "0.26.24",
+    "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.14",
-    "@react-fabric/utilities": "^1.0.0-beta.14",
+    "@react-fabric/core": "^1.0.0-beta.17",
+    "@react-fabric/utilities": "^1.0.0-beta.17",
     "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": "105e7af06bb2ef8f47e0bfbf29fa890c7856f7d8"
+  "gitHead": "a2a0f20255da48d1cbcbcfe100fd3fbd4d13da67"
 }

package/src/form/Form.tsx

@@ -89,6 +89,10 @@ export const Form = <K extends KeyValue>({
     defaultValues: defaultValues as DefaultValues<K>,
   });
 
+  useEffect(() => {
+    form.reset();
+  }, []);
+
   const [, startTransition] = useTransition();
   const changeHandler = useDebounce(onChange, [onChange]);
   useEffect(() => {

package/src/input/ArrayInput.tsx

@@ -24,17 +24,16 @@
 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 { isString } from "@react-fabric/utilities";
+import { cloneChildren, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
-  Children,
   cloneElement,
   useCallback,
   useImperativeHandle,
   useMemo,
   type PropsWithChildren,
   type ReactNode,
-  type RefObject,
+  type Ref,
 } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -96,7 +95,7 @@ export interface ArrayInputProps {
    * fixed length list
    */
   fixedList?: boolean;
-  arrayRef?: RefObject<{
+  arrayRef?: Ref<{
     addItem: (item: AnyObject) => void;
     removeItem: (idx: number) => void;
   }>;
@@ -255,7 +254,7 @@ export const ArrayInput = ({
                     index,
                     name: `${name}.${index}`,
                   })
-                : Children.map(children, (child: AnyObject) =>
+                : cloneChildren(children, (child: AnyObject) =>
                     cloneElement(
                       child,
                       Object.assign(

package/src/input/ColorPicker.module.css

@@ -26,21 +26,31 @@
     --color-shadow: theme(borderColor.base);
 
     & input {
-      @apply bg-base text-base !border !border-solid !rounded-sm !border-base focus:!border-primary !shadow-none;
-
       padding: 0 4px !important;
+
       line-height: 2;
+      color: theme(textColor.base);
+
+      background-color: theme(backgroundColor.base);
+      border: 1px solid theme(borderColor.base);
+      border-radius: theme(borderRadius.sm);
+      box-shadow: none;
+
+      &:focus {
+        border-color: theme(borderColor.primary.DEFAULT);
+      }
     }
 
     & label {
-      @apply !text-base;
+      color: theme(textColor.base);
     }
 
     & :global(.flexbox-fix) {
-      @apply !border-t-muted justify-center;
+      justify-content: center;
+      border-color: theme(borderColor.muted);
 
       & > div > div {
-        @apply text-center;
+        text-align: center;
       }
 
       & span > div {

package/src/input/Field.tsx

@@ -25,8 +25,9 @@ import {
   type ChildrenProp,
   type CssProp,
 } from "@react-fabric/core/dist/types/types";
+import { cloneChildren } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { Children, cloneElement } from "react";
+import { cloneElement } from "react";
 import classes from "../internal/Field.module.css";
 import { FieldWrapper } from "../internal/FieldWrapper";
 
@@ -90,13 +91,10 @@ export const Field = ({
           !vertical && "flex flex-nowrap",
         )}
       >
-        {Children.map(
-          children,
-          (child) =>
-            child &&
-            cloneElement(child as AnyObject, {
-              "data-inner": true,
-            }),
+        {cloneChildren(children, (child: AnyObject) =>
+          cloneElement(child, {
+            "data-inner": true,
+          }),
         )}
       </div>
     </FieldWrapper>

package/src/input/File.module.css

@@ -24,19 +24,33 @@
 @layer comp {
   .fileInput {
     &::-webkit-file-upload-button {
-      @apply bg-primary-500 opacity-80 hover:opacity-90 text-white rounded border-none py-0 cursor-pointer;
+      cursor: pointer;
+
+      padding-block: 0;
+
+      color: theme(textColor.white);
+
+      opacity: 0.8;
+      background-color: theme(backgroundColor.primary.500);
+      border: 0;
+      border-radius: theme(borderRadius.DEFAULT);
+
+      &:hover {
+        opacity: 0.9;
+      }
     }
 
     &[aria-invalid="true"]::-webkit-file-upload-button {
-      @apply bg-danger-500;
+      background-color: theme(backgroundColor.danger.500);
     }
 
     &:disabled::-webkit-file-upload-button {
-      @apply bg-muted pointer-events-none;
+      pointer-events: none;
+      background-color: theme(backgroundColor.muted);
     }
 
     &[readOnly] {
-      @apply pointer-events-none;
+      pointer-events: none;
     }
   }
 }

package/src/input/RadioGroup.tsx

@@ -25,7 +25,8 @@ import {
   type ChildrenProp,
   type CssProp,
 } from "@react-fabric/core/dist/types/types";
-import { Children, cloneElement } from "react";
+import { cloneChildren } from "@react-fabric/utilities";
+import { cloneElement } from "react";
 import { FieldWrapper } from "../internal/FieldWrapper";
 import { type Radio } from "./Radio";
 
@@ -84,8 +85,8 @@ export const RadioGroup = ({
   return (
     <FieldWrapper {...rest}>
       <div className={className}>
-        {Children.map(children, (child) =>
-          cloneElement(child as AnyObject, {
+        {cloneChildren(children, (child: AnyObject) =>
+          cloneElement(child, {
             name,
             onChange,
             width: optionWidth,