@react-fabric/form 1.0.0-beta.36 → 1.0.0-beta.38

package/dist/esm/builder/FileField.js

@@ -4,26 +4,32 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { Button, Icon, ProgressBar } from '@react-fabric/core';
-import { FileUtil, Format } from '@react-fabric/utilities';
+import { Tooltip, Button, Icon, ProgressBar } from '@react-fabric/core';
+import { isString, FileUtil, Format } from '@react-fabric/utilities';
 import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useFileUploader } from '../hooks/useFileUploader.js';
 import { Field } from '../input/Field.js';
 import { HiddenInput } from '../input/Hidden.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple"];
+var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple", "invalid", "error"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FileField = function FileField(_ref) {
+  var _error$values$label, _error$values, _error$values2;
   var uploadHandler = _ref.uploadHandler,
     inline = _ref.inline,
     label = _ref.label,
     accept = _ref.accept,
     value = _ref.value;
     _ref.fileUrl;
-    var multiple = _ref.multiple,
+    var multiple = _ref.multiple;
+    _ref.invalid;
+    var error = _ref.error,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useFileUploader = useFileUploader( /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -49,32 +55,38 @@ var FileField = function FileField(_ref) {
     upload = _useFileUploader.upload,
     remove = _useFileUploader.remove;
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(Field, {
+    children: [/*#__PURE__*/jsx(Field, {
       plain: true,
       inline: inline,
       label: label,
-      className: "inline-block",
-      children: [/*#__PURE__*/jsx(HiddenInput, _objectSpread({
+      children: /*#__PURE__*/jsx(HiddenInput, _objectSpread({
         hiddenValue: multiple ? list : list === null || list === void 0 ? void 0 : list[0]
-      }, rest)), /*#__PURE__*/jsx("span", {
-        children: /*#__PURE__*/jsx(Button, {
-          badge: pending > 0 ? "".concat(pending) : undefined,
-          "data-ref": "filebtn",
-          children: /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx("span", {
-              children: "Add file"
-            }), /*#__PURE__*/jsx("input", {
-              type: "file",
-              accept: accept,
-              multiple: multiple,
-              className: "absolute inset-0 opacity-0 z-5",
-              onChange: function onChange(e) {
-                return [upload(e.target.files), e.target.value = ""];
-              }
-            })]
-          })
+      }, rest))
+    }), /*#__PURE__*/jsx(Tooltip, {
+      color: "danger-200",
+      content: isString(error) ? "".concat(error) : error && t(error === null || error === void 0 ? void 0 : error.key, error.values ? _objectSpread(_objectSpread({}, error === null || error === void 0 ? void 0 : error.values), {}, {
+        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)
+      }) : {}),
+      disabled: !error,
+      children: /*#__PURE__*/jsx(Button, {
+        badge: pending > 0 ? "".concat(pending) : undefined,
+        color: error ? "danger" : undefined,
+        variant: error ? "soft" : undefined,
+        "data-ref": "filebtn",
+        children: /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("span", {
+            children: "Add file"
+          }), /*#__PURE__*/jsx("input", {
+            type: "file",
+            accept: accept,
+            multiple: multiple,
+            className: "absolute inset-0 opacity-0 z-5",
+            onChange: function onChange(e) {
+              return [upload(e.target.files), e.target.value = ""];
+            }
+          })]
         })
-      })]
+      })
     }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("div", {
       className: "bg-alternate",
       children: files.map(function (file, idx) {

package/dist/esm/input/ArrayInput.js

@@ -11,7 +11,6 @@ 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';
-import classes from './ArrayInput.module.css';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { CSS } from '@dnd-kit/utilities';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -135,7 +134,7 @@ var ArrayInput = function ArrayInput(_ref) {
     return /*#__PURE__*/jsx("div", {
       className: "flex justify-end",
       children: /*#__PURE__*/jsx(Tooltip, {
-        color: "danger",
+        color: "danger-200",
         content: isString(error) ? "".concat(error) : t(error === null || error === void 0 ? void 0 : error.key, error !== null && error !== void 0 && error.values ? _objectSpread(_objectSpread({}, error === null || error === void 0 ? void 0 : error.values), {}, {
           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)
         }) : {}),
@@ -148,14 +147,14 @@ var ArrayInput = function ArrayInput(_ref) {
           },
           "data-invalid": !!error,
           disabled: !!disabled || readOnly || fields.length > maxItems,
-          className: classNames(classes.addButton, "me-10"),
+          className: classNames("fabric-addButton", "me-10"),
           children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
         })
       })
     });
   }, [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems]);
   return /*#__PURE__*/jsxs("div", {
-    className: classes.arrayInput,
+    className: "fabric-arrayInput",
     children: [/*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
       appendLabel: /*#__PURE__*/jsx("div", {
         className: "-me-2",

package/dist/esm/input/AvatarInput.js

@@ -80,7 +80,7 @@ var AvatarInput = function AvatarInput(_ref) {
         size: size,
         avatar: base64
       }), /*#__PURE__*/jsxs("div", {
-        className: "absolute inset-x-0 bottom-0 cursor-pointer bg-opacity-20 hover:bg-opacity-50 bg-black text-white text-xs text-center py-1",
+        className: "absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1",
         children: [/*#__PURE__*/jsx("span", {
           children: "Edit"
         }), /*#__PURE__*/jsx("input", {

package/dist/esm/input/Checkbox.js

@@ -67,7 +67,7 @@ var Checkbox = function Checkbox(_ref) {
       checked: actualValue,
       onChange: handleChange
     }, rest)), /*#__PURE__*/jsx(Icon, {
-      className: classNames("p-0.5", actualValue && icon && !iconChecked && "bg-primary-500 text-white"),
+      className: classNames("p-0.5", actualValue && icon && !iconChecked && "bg-primary-500 text-white!"),
       size: "1.25em",
       color: invalid ? "danger" : "primary",
       icon: actualValue ? iconOn : iconOff

package/dist/esm/input/ColorInput.js

@@ -77,7 +77,7 @@ var ColorInput = function ColorInput(_ref) {
     getReferenceProps = _useInteractions.getReferenceProps,
     getFloatingProps = _useInteractions.getFloatingProps;
   return /*#__PURE__*/jsxs("div", {
-    className: classNames("flex-content min-h-[1.5em] min-w-[3.5em] self-stretch flex items-center outline-tint-200 rounded", !disabled && "bg-base", !noOutline && "bg-[var(--fabric-input)] outline overflow-hidden"),
+    className: classNames("flex-content min-h-[1.5em] min-w-[3.5em] self-stretch flex items-center outline-tint-200 rounded", !disabled && "bg-base", !noOutline && "bg-(--fabric-input) outline overflow-hidden"),
     children: [decorateStart && /*#__PURE__*/jsx("div", {
       className: classNames("text-muted leading-none flex-content", isString(decorateStart) && "px-2"),
       children: decorateStart

package/dist/esm/input/ColorPicker.js

@@ -5,7 +5,6 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import Color from 'color';
 import { memo, useState, useDeferredValue, useEffect, useCallback, startTransition } from 'react';
 import { SketchPicker } from 'react-color';
-import classes from './ColorPicker.module.css';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["a"],
@@ -37,7 +36,7 @@ var ColorPicker = /*#__PURE__*/memo(function (_ref) {
   }, [onChange]);
   return /*#__PURE__*/jsx(SketchPicker, {
     width: "16rem",
-    className: classes.colorPicker,
+    className: "fabric-colorPicker",
     styles: {
       "default": {
         hue: {

package/dist/esm/input/Field.js

@@ -5,7 +5,6 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { cloneChildren } from '@react-fabric/core';
 import classNames from 'classnames';
 import { cloneElement } from 'react';
-import classes from '../internal/Field.module.css';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -20,7 +19,7 @@ var Field = function Field(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsx("div", {
-      className: classNames(classes.fieldGroup, !plain && !noOutline && "outline", !plain && "bg-base", plain && "flex-wrap", "flex-1 rounded", !vertical && "flex"),
+      className: classNames("fabric-fieldGroup", !plain && !noOutline && "outline", !plain && "bg-base", plain && "flex-wrap", "flex-1 rounded", !vertical && "flex"),
       children: cloneChildren(children, function (child) {
         return /*#__PURE__*/cloneElement(child, {
           "data-inner": true

package/dist/esm/input/File.js

@@ -9,7 +9,6 @@ import classNames from 'classnames';
 import { useRef, useState, useDeferredValue, useMemo, useEffect, useCallback, Fragment } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
 import { handleEnter } from '../utils/eventHandlers.js';
-import classes from './File.module.css';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "name", "accept", "showList", "multiple", "onChange", "onEnterPressed"];
@@ -139,7 +138,7 @@ var FileInput = function FileInput(_ref) {
     })
   }, rest), {}, {
     children: /*#__PURE__*/jsx("input", {
-      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0", classes.fileInput, isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-[var(--fabric-bg)]"),
+      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0", "fabric-fileInput", isArray(actualValue) && (actualValue === null || actualValue === void 0 ? void 0 : actualValue.length) && "text-(--fabric-bg)"),
       "aria-invalid": invalid,
       "aria-disabled": disabled,
       "aria-readonly": readOnly,

package/dist/esm/input/Radio.js

@@ -51,7 +51,7 @@ var Radio = function Radio(_ref) {
       autoComplete: "off",
       onChange: handleChange
     }, rest)), /*#__PURE__*/jsx(Icon, {
-      className: classNames("p-0.5 hidden peer-checked:inline-block", icon && !iconChecked && "bg-primary-500 text-white"),
+      className: classNames("p-0.5 hidden peer-checked:inline-block", icon && !iconChecked && "bg-primary-500 text-white!"),
       color: invalid ? "danger" : "primary",
       size: "1.25em",
       icon: iconOn

package/dist/esm/internal/ErrorIcon.js

@@ -20,7 +20,7 @@ var ErrorIcon = function ErrorIcon(_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)
     }) : {}),
     placement: "bottom",
-    color: "danger",
+    color: "danger-200",
     children: /*#__PURE__*/jsx(Icon, {
       className: "flex-content first:ms-2 self-center",
       color: "danger",

package/dist/esm/internal/FieldWrapper.js

@@ -1,7 +1,6 @@
 'use client';
 
 import classNames from 'classnames';
-import classes from './Field.module.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /*
@@ -42,7 +41,7 @@ var FieldWrapper = function FieldWrapper(_ref) {
     className = _ref.className,
     isInner = _ref["data-inner"];
   return /*#__PURE__*/jsxs("div", {
-    className: classNames(classes.fieldWrapper, className, inline ? "flex flex-nowrap gap-1" : "block"),
+    className: classNames("fabric-fieldWrapper", className, inline ? "flex flex-nowrap gap-1" : "block"),
     "data-ref": "fieldWrapper",
     style: {
       width: width,

package/dist/esm/internal/InputWrapper.js

@@ -9,7 +9,6 @@ import classNames from 'classnames';
 import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
 import { Fragment, jsxs, jsx } from 'react/jsx-runtime';
 import { ErrorIcon } from './ErrorIcon.js';
-import classes from './Field.module.css';
 import { FieldWrapper } from './FieldWrapper.js';
 
 var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
@@ -69,13 +68,13 @@ var InputWrapper = function InputWrapper(_ref) {
   var el = /*#__PURE__*/jsxs("div", {
     role: "none",
     ref: wrapperRef,
-    className: classNames(classes.inputWrapper, invalid && classes.invalidWrapper, !noOutline && !noBorder && "bg-[var(--fabric-input)] outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
+    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
     onKeyDown: function onKeyDown(e) {
       return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
     },
     children: [decorateStart && /*#__PURE__*/jsx("div", {
       onClickCapture: doFocus,
-      className: classNames(classes.decorate, "text-muted leading-none flex-content", isString(decorateStart) && "px-1"),
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content", isString(decorateStart) && "px-1"),
       children: decorateStart
     }), /*#__PURE__*/jsx(ErrorIcon, {
       invalid: invalid,
@@ -83,10 +82,10 @@ var InputWrapper = function InputWrapper(_ref) {
     }), children, allowClear && showClear && /*#__PURE__*/jsx(Icon, {
       icon: CoreIcons.close,
       onClick: handleClear,
-      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", classes.inputClear, textarea && "self-start mt-1 me-1")
+      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", "fabric-inputClear", textarea && "self-start mt-1 me-1")
     }), decorateEnd && /*#__PURE__*/jsx("div", {
       onClickCapture: doFocus,
-      className: classNames(classes.decorate, "text-muted leading-none flex-content", isString(decorateEnd) && "px-1", decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden", decorateEndShowWhenEmpty && "hidden peer-placeholder-shown:inline-block"),
+      className: classNames("fabric-decorate", "text-muted leading-none flex-content", isString(decorateEnd) && "px-1", decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden", decorateEndShowWhenEmpty && "hidden peer-placeholder-shown:inline-block"),
       children: decorateEnd
     }), textareaExpandable && /*#__PURE__*/jsx(Icon, {
       onClick: function onClick() {

package/dist/esm/select/AutoComplete.js

@@ -243,7 +243,7 @@ var AutoComplete = function AutoComplete(_ref) {
         visuallyHiddenDismiss: true,
         children: /*#__PURE__*/jsx(Options, _objectSpread(_objectSpread({
           ref: refs.setFloating,
-          className: "outline shadow-lg max-h-[40vh] z-[var(--z-popover)]",
+          className: "outline shadow-lg max-h-[40vh] z-(--z-popover)",
           style: _objectSpread({
             width: (_refs$reference$curre = refs.reference.current) === null || _refs$reference$curre === void 0 ? void 0 : _refs$reference$curre.getBoundingClientRect().width
           }, floatingStyles)

package/dist/esm/select/Select.js

@@ -262,7 +262,7 @@ var Select = function Select(_ref) {
         visuallyHiddenDismiss: true,
         children: /*#__PURE__*/jsx(Options, _objectSpread(_objectSpread({
           ref: refs.setFloating,
-          className: "outline shadow-lg max-h-[40vh] z-[var(--z-popover)]",
+          className: "outline shadow-lg max-h-[40vh] z-(--z-popover)",
           style: _objectSpread({
             width: (_refs$reference$curre = refs.reference.current) === null || _refs$reference$curre === void 0 ? void 0 : _refs$reference$curre.getBoundingClientRect().width
           }, floatingStyles)

package/dist/types/builder/FileField.d.ts

@@ -1,8 +1,10 @@
 import { type UploadHandler } from "../hooks/useFileUploader";
 import { type FileSchema, type ValueType } from "../types/schema";
-export declare const FileField: ({ uploadHandler, inline, label, accept, value, fileUrl, multiple, ...rest }: Partial<FileSchema & ValueType> & {
+export declare const FileField: ({ uploadHandler, inline, label, accept, value, fileUrl, multiple, invalid, error, ...rest }: Partial<FileSchema & ValueType> & {
     value?: AnyObject;
     inline?: boolean;
+    invalid?: boolean;
+    error?: AnyObject;
     fileUrl?: (path: string) => string;
     uploadHandler: UploadHandler;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/index.d.ts

@@ -8,7 +8,7 @@ export interface InputProps<V = string> extends TestProps {
     /**
      * change handler
      */
-    onChange?: (value?: V | null) => void;
+    onChange?: (value: V | null) => void;
     /**
      * on focus event handler
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.36",
+  "version": "1.0.0-beta.38",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -11,9 +11,11 @@
   "types": "dist/types/index.d.ts",
   "directories": {
     "src": "src",
+    "styles": "css",
     "test": "tests"
   },
   "files": [
+    "css",
     "src",
     "dist"
   ],
@@ -39,9 +41,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.36",
-    "@react-fabric/date": "^1.0.0-beta.36",
-    "@react-fabric/utilities": "^1.0.0-beta.36",
+    "@react-fabric/core": "^1.0.0-beta.38",
+    "@react-fabric/date": "^1.0.0-beta.38",
+    "@react-fabric/utilities": "^1.0.0-beta.38",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -61,5 +63,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "91a7cce216e21cbc6406226d8c3f56a1a26e410a"
+  "gitHead": "3be18ab7002b2aca45795376e8765dad79de92dc"
 }

package/src/builder/FileField.tsx

@@ -21,9 +21,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, Icon, ProgressBar } from "@react-fabric/core";
-import { FileUtil, Format } from "@react-fabric/utilities";
+import { Button, Icon, ProgressBar, Tooltip } from "@react-fabric/core";
+import { FileUtil, Format, isString } from "@react-fabric/utilities";
 import { Fragment } from "react";
+import { useTranslation } from "react-i18next";
 import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
 import { Field } from "../input/Field";
 import { HiddenInput } from "../input/Hidden";
@@ -37,13 +38,18 @@ export const FileField = ({
   value,
   fileUrl,
   multiple,
+  invalid,
+  error,
   ...rest
 }: Partial<FileSchema & ValueType> & {
   value?: AnyObject;
   inline?: boolean;
+  invalid?: boolean;
+  error?: AnyObject;
   fileUrl?: (path: string) => string;
   uploadHandler: UploadHandler;
 }) => {
+  const { t } = useTranslation();
   const { pending, files, list, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
     value,
@@ -52,29 +58,48 @@ export const FileField = ({
 
   return (
     <Fragment>
-      <Field plain inline={inline} label={label} className="inline-block">
+      <Field plain inline={inline} label={label}>
         <HiddenInput hiddenValue={multiple ? list : list?.[0]} {...rest} />
-        <span>
-          <Button
-            badge={pending > 0 ? `${pending}` : undefined}
-            data-ref="filebtn"
-          >
-            <Fragment>
-              <span>Add file</span>
-              <input
-                type="file"
-                accept={accept}
-                multiple={multiple}
-                className="absolute inset-0 opacity-0 z-5"
-                onChange={(e) => [
-                  upload(e.target.files),
-                  (e.target.value = ""),
-                ]}
-              />
-            </Fragment>
-          </Button>
-        </span>
       </Field>
+      <Tooltip
+        color="danger-200"
+        content={
+          isString(error)
+            ? `${error}`
+            : error &&
+              (t(
+                error?.key,
+                error.values
+                  ? {
+                      ...error?.values,
+                      label: t(
+                        error.values?.label ?? "form:badkey",
+                        error.values?.path,
+                      ),
+                    }
+                  : {},
+              ) as string)
+        }
+        disabled={!error}
+      >
+        <Button
+          badge={pending > 0 ? `${pending}` : undefined}
+          color={error ? "danger" : undefined}
+          variant={error ? "soft" : undefined}
+          data-ref="filebtn"
+        >
+          <Fragment>
+            <span>Add file</span>
+            <input
+              type="file"
+              accept={accept}
+              multiple={multiple}
+              className="absolute inset-0 opacity-0 z-5"
+              onChange={(e) => [upload(e.target.files), (e.target.value = "")]}
+            />
+          </Fragment>
+        </Button>
+      </Tooltip>
       <br />
       <div className="bg-alternate">
         {files.map((file, idx) => (

package/src/input/ArrayInput.tsx

@@ -44,7 +44,6 @@ import {
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { FieldWrapper } from "../internal/FieldWrapper";
-import classes from "./ArrayInput.module.css";
 
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
@@ -257,7 +256,7 @@ export const ArrayInput = ({
     () => (
       <div className="flex justify-end">
         <Tooltip
-          color="danger"
+          color="danger-200"
           content={
             isString(error)
               ? `${error}`
@@ -282,7 +281,7 @@ export const ArrayInput = ({
             onClick={() => handleAdd(onAdd?.())}
             data-invalid={!!error}
             disabled={!!disabled || readOnly || fields.length > maxItems}
-            className={classNames(classes.addButton, "me-10")}
+            className={classNames("fabric-addButton", "me-10")}
           >
             {addLabel ?? t("addArray")}
           </Button>
@@ -293,7 +292,7 @@ export const ArrayInput = ({
   );
 
   return (
-    <div className={classes.arrayInput}>
+    <div className={"fabric-arrayInput"}>
       <FieldWrapper
         {...rest}
         appendLabel={

package/src/input/AvatarInput.tsx

@@ -99,7 +99,7 @@ export const AvatarInput = ({
     <div className="flex flex-nowrap items-end">
       <div className="inline-block leading-none rounded-full relative outline overflow-hidden">
         <Avatar name="temp" size={size} avatar={base64} />
-        <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-opacity-20 hover:bg-opacity-50 bg-black text-white text-xs text-center py-1">
+        <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1">
           <span>Edit</span>
           <input
             type="file"

package/src/input/Checkbox.tsx

@@ -151,7 +151,7 @@ export const Checkbox = ({
       <Icon
         className={classNames(
           "p-0.5",
-          actualValue && icon && !iconChecked && "bg-primary-500 text-white",
+          actualValue && icon && !iconChecked && "bg-primary-500 text-white!",
         )}
         size="1.25em"
         color={invalid ? "danger" : "primary"}

package/src/input/ColorInput.tsx

@@ -127,7 +127,7 @@ export const ColorInput = ({
       className={classNames(
         "flex-content min-h-[1.5em] min-w-[3.5em] self-stretch flex items-center outline-tint-200 rounded",
         !disabled && "bg-base",
-        !noOutline && "bg-[var(--fabric-input)] outline overflow-hidden",
+        !noOutline && "bg-(--fabric-input) outline overflow-hidden",
       )}
     >
       {decorateStart && (

package/src/input/ColorPicker.tsx

@@ -32,7 +32,6 @@ import {
   type FC,
 } from "react";
 import { SketchPicker } from "react-color";
-import classes from "./ColorPicker.module.css";
 
 export interface ColorProps {
   /**
@@ -130,7 +129,7 @@ export const ColorPicker: FC<ColorProps> = memo(
     return (
       <SketchPicker
         width="16rem"
-        className={classes.colorPicker}
+        className={"fabric-colorPicker"}
         styles={
           {
             default: {

package/src/input/Field.tsx

@@ -28,7 +28,6 @@ import {
 } from "@react-fabric/core/dist/types/types";
 import classNames from "classnames";
 import { cloneElement } from "react";
-import classes from "../internal/Field.module.css";
 import { FieldWrapper } from "../internal/FieldWrapper";
 
 export interface FieldProps extends ChildrenProp, CssProp {
@@ -84,7 +83,7 @@ export const Field = ({
     <FieldWrapper {...rest}>
       <div
         className={classNames(
-          classes.fieldGroup,
+          "fabric-fieldGroup",
           !plain && !noOutline && "outline",
           !plain && "bg-base",
           plain && "flex-wrap",

package/src/input/File.tsx

@@ -44,7 +44,6 @@ import {
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
 import { handleEnter } from "../utils";
-import classes from "./File.module.css";
 
 export interface FileInputProps
   extends InputProps<AnyObject>,
@@ -195,10 +194,8 @@ export const FileInput = ({
       <input
         className={classNames(
           "appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0",
-          classes.fileInput,
-          isArray(actualValue) &&
-            actualValue?.length &&
-            "text-[var(--fabric-bg)]",
+          "fabric-fileInput",
+          isArray(actualValue) && actualValue?.length && "text-(--fabric-bg)",
         )}
         aria-invalid={invalid}
         aria-disabled={disabled}

package/src/input/Radio.tsx

@@ -126,7 +126,7 @@ export const Radio = ({
       <Icon
         className={classNames(
           "p-0.5 hidden peer-checked:inline-block",
-          icon && !iconChecked && "bg-primary-500 text-white",
+          icon && !iconChecked && "bg-primary-500 text-white!",
         )}
         color={invalid ? "danger" : "primary"}
         size="1.25em"

package/src/internal/ErrorIcon.tsx

@@ -48,7 +48,7 @@ export const ErrorIcon = ({ error = "", invalid }: KeyValue) => {
               ) as string)
         }
         placement="bottom"
-        color="danger"
+        color="danger-200"
       >
         <Icon
           className="flex-content first:ms-2 self-center"