@react-fabric/form 1.0.0-beta.32 → 1.0.0-beta.33

package/dist/esm/input/DateInput.js

@@ -0,0 +1,183 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useFloating, autoUpdate, shift, flip, offset, arrow, useFocus, useClick, useDismiss, useInteractions, FloatingArrow } from '@floating-ui/react';
+import { DateUtil, DatePanel } from '@react-fabric/date';
+import { mergeRefs } from '@react-fabric/utilities';
+import { useState, useDeferredValue, useMemo, useEffect, useCallback, startTransition, useRef } from 'react';
+import { InputWrapper } from '../internal/InputWrapper.js';
+import { handleEnter } from '../utils/eventHandlers.js';
+import classNames from 'classnames';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onChange", "onEnterPressed", "format", "min", "max"];
+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 DateInput = function DateInput(_ref) {
+  var ref = _ref.ref,
+    name = _ref.name,
+    value = _ref.value,
+    invalid = _ref.invalid,
+    readOnly = _ref.readOnly,
+    disabled = _ref.disabled,
+    required = _ref.required,
+    placeholder = _ref.placeholder,
+    autoFocus = _ref.autoFocus,
+    error = _ref.error,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "date" : _ref$type,
+    onChange = _ref.onChange,
+    onEnterPressed = _ref.onEnterPressed;
+    _ref.format;
+    var min = _ref.min,
+    max = _ref.max,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    actualValue = _useState2[0],
+    setActualValue = _useState2[1];
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  var deferred = useDeferredValue(value);
+  var inputFormat = useMemo(function () {
+    return type === "datetime" ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd";
+  }, [type]);
+  useEffect(function () {
+    setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
+    setInputValue(deferred ? DateUtil.format(deferred, inputFormat) : "");
+  }, [deferred, inputFormat]);
+  var handleEnterPressed = useMemo(function () {
+    return handleEnter(onEnterPressed);
+  }, [onEnterPressed]);
+  var handleChange = useCallback(function (e) {
+    var value = e === null || e === void 0 ? void 0 : e.currentTarget.value;
+    if (value) {
+      var _parsed$toISOString;
+      var parsed = DateUtil.parseDate(value);
+      setActualValue(parsed === null || parsed === void 0 || (_parsed$toISOString = parsed.toISOString) === null || _parsed$toISOString === void 0 ? void 0 : _parsed$toISOString.call(parsed));
+      setInputValue(DateUtil.format(parsed, inputFormat));
+      onChange != null && startTransition(function () {
+        var _parsed$toISOString2;
+        return onChange(parsed === null || parsed === void 0 || (_parsed$toISOString2 = parsed.toISOString) === null || _parsed$toISOString2 === void 0 ? void 0 : _parsed$toISOString2.call(parsed));
+      });
+    } else {
+      setActualValue("");
+      setInputValue("");
+      onChange != null && startTransition(function () {
+        return onChange("");
+      });
+    }
+  }, [onChange, inputFormat]);
+  var handleDateChange = useCallback(function (value) {
+    if (value) {
+      var _parsed$toISOString3;
+      var parsed = DateUtil.parseDate(value);
+      setActualValue(parsed === null || parsed === void 0 || (_parsed$toISOString3 = parsed.toISOString) === null || _parsed$toISOString3 === void 0 ? void 0 : _parsed$toISOString3.call(parsed));
+      setInputValue(DateUtil.format(parsed, inputFormat));
+      onChange != null && startTransition(function () {
+        var _parsed$toISOString4;
+        return onChange(parsed === null || parsed === void 0 || (_parsed$toISOString4 = parsed.toISOString) === null || _parsed$toISOString4 === void 0 ? void 0 : _parsed$toISOString4.call(parsed));
+      });
+    } else {
+      setActualValue("");
+      setInputValue("");
+      onChange != null && startTransition(function () {
+        return onChange("");
+      });
+    }
+  }, [onChange, inputFormat]);
+  var arrowRef = useRef(null);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOpen = _useState6[0],
+    setIsOpen = _useState6[1];
+  var _useFloating = useFloating({
+      open: isOpen,
+      onOpenChange: function onOpenChange(open, _, reason) {
+        console.log(reason);
+        if (reason === "reference-press") return;
+        setIsOpen(open);
+      },
+      strategy: "fixed",
+      placement: "bottom-start",
+      whileElementsMounted: autoUpdate,
+      middleware: [shift({
+        padding: 8
+      }), flip(), offset(9), arrow({
+        element: arrowRef
+      })]
+    }),
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context;
+  var focus = useFocus(context, {
+    enabled: !disabled
+  });
+  var click = useClick(context, {
+    enabled: !disabled,
+    toggle: false
+  });
+  var dismiss = useDismiss(context, {
+    referencePress: true
+  });
+  var _useInteractions = useInteractions([dismiss, click, focus]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
+  return /*#__PURE__*/jsxs(InputWrapper, _objectSpread(_objectSpread({
+    showClear: !!actualValue,
+    onClear: handleChange,
+    invalid: invalid,
+    readOnly: readOnly,
+    disabled: disabled,
+    required: required,
+    error: error
+  }, rest), {}, {
+    children: [/*#__PURE__*/jsx("input", _objectSpread(_objectSpread({
+      className: classNames("appearance-none bg-transparent py-1 px-2 flex-1 border-none outline-none ring-0 peer", !value && "empty"),
+      "aria-invalid": invalid,
+      "aria-disabled": disabled,
+      "aria-readonly": readOnly,
+      "aria-errormessage": error,
+      placeholder: placeholder,
+      disabled: disabled,
+      readOnly: readOnly,
+      "data-testid": name,
+      name: name,
+      size: 1,
+      type: type === "datetime" ? "datetime-local" : "date",
+      autoComplete: "off",
+      autoFocus: autoFocus,
+      value: inputValue,
+      ref: mergeRefs(ref, refs.setReference)
+    }, getReferenceProps()), {}, {
+      onChange: handleChange,
+      onKeyDown: handleEnterPressed
+    })), isOpen && /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+      ref: refs.setFloating,
+      style: _objectSpread({
+        zIndex: "var(--z-popover)"
+      }, floatingStyles),
+      className: "shadow-lg bg-base ring-1 ring-tint-100",
+      "data-ref": "dropdownBody"
+    }, getFloatingProps()), {}, {
+      children: [/*#__PURE__*/jsx(DatePanel, {
+        withTime: type === "datetime",
+        value: actualValue,
+        max: max,
+        min: min,
+        onChange: handleDateChange
+      }), /*#__PURE__*/jsx(FloatingArrow, {
+        ref: arrowRef,
+        context: context,
+        strokeWidth: 0.5,
+        className: "fill-base stroke-muted"
+      })]
+    }))]
+  }));
+};
+
+export { DateInput };

package/dist/esm/input/Field.js

@@ -20,7 +20,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", "flex-1 rounded", !vertical && "flex flex-nowrap"),
+      className: classNames(classes.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/{Range.js → RangeSlider.js}

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /**
  * Number Range input
  */
-var Range = function Range(_ref) {
+var RangeSlider = function RangeSlider(_ref) {
   var error = _ref.error;
     _ref.name;
     var value = _ref.value,
@@ -166,4 +166,4 @@ var Range = function Range(_ref) {
   }));
 };
 
-export { Range };
+export { RangeSlider };

package/dist/esm/input/Switch.js

@@ -10,7 +10,7 @@ import '@react-fabric/utilities';
 import { getBgClass, getColor, getColorClass } from '../utils/getColor.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "label", "checked", "invalid", "disabled", "error", "width", "color", "name", "onLabel", "offLabel", "onLabelColor", "offLabelColor", "defaultColor", "onChange"];
+var _excluded = ["ref", "label", "checked", "invalid", "disabled", "error", "width", "color", "name", "onLabel", "offLabel", "onLabelColor", "offLabelColor", "defaultColor", "required", "onChange"];
 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 Switch = function Switch(_ref) {
@@ -27,8 +27,9 @@ var Switch = function Switch(_ref) {
     offLabel = _ref.offLabel,
     onLabelColor = _ref.onLabelColor,
     offLabelColor = _ref.offLabelColor,
-    defaultColor = _ref.defaultColor,
-    onChange = _ref.onChange,
+    defaultColor = _ref.defaultColor;
+    _ref.required;
+    var onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),

package/dist/esm/internal/Field.module.css

@@ -1 +1 @@
-@layer comp{}@layer var{.inputWrapper{&:after{inset-inline:50%;transition:all .3s;transition-delay:.1s}& .decorate:has([data-ref=button]){align-self:stretch;display:flex}&:has(input[disabled],textarea[disabled]){background-color:theme(colors.tint.50);cursor:not-allowed;& input,& textarea{cursor:not-allowed}}&:focus-within,&:has([data-open=true]){background-color:var(--fabric-input-focus);outline-color:var(--primary);z-index:1;&:not(:has([aria-readonly=true]:not([hidden]))):after{inset-inline:0}}&:global(.fixed){box-shadow:0 0 2rem .5rem var(--fabric-shadow)}& input,& textarea{max-width:100%}&>input[type=number]+.inputClear{margin-inline:-3rem 2rem}& input::-ms-clear,& select::-ms-clear,& textarea::-ms-clear{display:none}& input[type=search]::-webkit-search-cancel-button{display:none}& input[type=password]:not(:placeholder-shown){font-family:caption;letter-spacing:2px}& input:-webkit-autofill{box-shadow:0 0 0 999em var(--fabric-input) inset;-webkit-text-fill-color:theme(colors.accent.700)}& input:-webkit-autofill:focus{box-shadow:0 0 0 999em var(--fabric-input-focus) inset;-webkit-text-fill-color:theme(colors.accent.700)}&.invalidWrapper{outline-color:theme(colors.danger.500);&:after{background-color:theme(colors.danger.500)}}}.fieldGroup{>*{line-height:1}>:not(:first-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-start-radius:0;border-start-start-radius:0}}>:not(:last-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-end-radius:0;border-start-end-radius:0}}}}
+@layer comp{}@layer var{.inputWrapper{&:after{inset-inline:50%;transition:all .3s;transition-delay:.1s}& .decorate:has([data-ref=button]){align-self:stretch;display:flex}&:has(input[disabled],textarea[disabled]){background-color:theme(colors.tint.50);cursor:not-allowed;& input,& textarea{cursor:not-allowed}}&:focus-within,&:has([data-open=true]){background-color:var(--fabric-input-focus);outline-color:var(--primary);z-index:1;&:not(:has([aria-readonly=true]:not([hidden]))):after{inset-inline:0}}&:global(.fixed){box-shadow:0 0 2rem .5rem var(--fabric-shadow)}& input,& textarea{max-width:100%}&>input[type=number]+.inputClear{margin-inline:-3rem 0}& input::-ms-clear,& select::-ms-clear,& textarea::-ms-clear{display:none}& input[type=search]::-webkit-search-cancel-button{display:none}& input[type=password]:not(:placeholder-shown){font-family:caption;letter-spacing:2px}& input[type=date]::-webkit-calendar-picker-indicator,& input[type=datetime-local]::-webkit-calendar-picker-indicator{appearance:none;display:none}& input[type=date]:global(.empty)::-webkit-datetime-edit,& input[type=datetime-local]:global(.empty)::-webkit-datetime-edit{color:theme(colors.tint.400)}& input:-webkit-autofill{box-shadow:0 0 0 999em var(--fabric-input) inset;-webkit-text-fill-color:theme(colors.accent.700)}& input:-webkit-autofill:focus{box-shadow:0 0 0 999em var(--fabric-input-focus) inset;-webkit-text-fill-color:theme(colors.accent.700)}&.invalidWrapper{outline-color:theme(colors.danger.500);&:after{background-color:theme(colors.danger.500)}}}.fieldGroup{>*{line-height:1}>:not(:first-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-start-radius:0;border-start-start-radius:0}}>:not(:last-child){&,&>[data-ref=button]>[role=button],&>[role=button],&>div{border-end-end-radius:0;border-start-end-radius:0}}}}

package/dist/esm/internal/InputWrapper.js

@@ -12,7 +12,7 @@ import { ErrorIcon } from './ErrorIcon.js';
 import classes from './Field.module.css';
 import { FieldWrapper } from './FieldWrapper.js';
 
-var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "children", "onClear", "noOutline", "noBorder", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
+var _excluded = ["invalid", "error", "allowClear", "showClear", "decorateStart", "decorateEnd", "decorateEndShowWhenEmpty", "decorateEndHideWhenEmpty", "children", "onClear", "noOutline", "noBorder", "textarea", "textareaExpandable", "data-inner", "data-open", "floatingExpand", "wrapperRef", "width"];
 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 InputWrapper = function InputWrapper(_ref) {
@@ -22,6 +22,8 @@ var InputWrapper = function InputWrapper(_ref) {
     showClear = _ref.showClear,
     decorateStart = _ref.decorateStart,
     decorateEnd = _ref.decorateEnd,
+    decorateEndShowWhenEmpty = _ref.decorateEndShowWhenEmpty,
+    decorateEndHideWhenEmpty = _ref.decorateEndHideWhenEmpty,
     children = _ref.children,
     onClear = _ref.onClear,
     noOutline = _ref.noOutline,
@@ -84,7 +86,7 @@ var InputWrapper = function InputWrapper(_ref) {
       className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", classes.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"),
+      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"),
       children: decorateEnd
     }), textareaExpandable && /*#__PURE__*/jsx(Icon, {
       onClick: function onClick() {

package/dist/esm/types/schema.js

@@ -0,0 +1,40 @@
+'use client';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var DATA_TYPES = /*#__PURE__*/function (DATA_TYPES) {
+  DATA_TYPES["TEXT"] = "text";
+  DATA_TYPES["COLOR"] = "color";
+  DATA_TYPES["BOOL"] = "bool";
+  DATA_TYPES["DATE"] = "date";
+  DATA_TYPES["STRING"] = "string";
+  DATA_TYPES["NUMBER"] = "number";
+  DATA_TYPES["RANGE"] = "range";
+  DATA_TYPES["FILE"] = "file";
+  DATA_TYPES["AVATAR"] = "avatar";
+  DATA_TYPES["SCHEMA"] = "schema";
+  return DATA_TYPES;
+}({});
+
+export { DATA_TYPES };

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

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

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

@@ -1,9 +1,11 @@
 import { type UploadHandler } from "../hooks/useFileUploader";
+import { type BaseSelectProps } from "../types";
 import { type SchemaType } from "../types/schema";
-export declare const FormField: ({ id, label, required, inline, prefix, autoFocus, defaultValue, fileUrl, uploadHandler, ...rest }: SchemaType & {
+export declare const FormField: ({ id, label, required, inline, prefix, autoFocus, optionLists, fileUrl, uploadHandler, ...rest }: SchemaType & {
     inline?: boolean;
     prefix?: string;
     autoFocus?: boolean;
+    optionLists?: KeyValue<BaseSelectProps<any>>;
     fileUrl?: (path: string) => string;
     uploadHandler?: UploadHandler;
 }) => import("react/jsx-runtime").JSX.Element | undefined;

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

@@ -0,0 +1,10 @@
+import { DATA_TYPES, type FormSchema } from "../types/schema";
+interface Props {
+    schemaDef: FormSchema;
+    allowRemove?: boolean;
+    acceptableTypes?: DATA_TYPES[];
+    optionLists?: string[];
+    onChange: (schema: FormSchema) => void;
+}
+export declare const SchemaEditor: ({ schemaDef, allowRemove, acceptableTypes, optionLists, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/form/Controller.d.ts

@@ -14,7 +14,7 @@ export interface ControllerProps {
         disabled?: boolean;
         onBlur: () => void;
         onChange: (value: AnyObject) => void;
-        inputRef?: React.Ref<HTMLInputElement>;
+        ref?: React.Ref<HTMLInputElement>;
     }) => ReactElement);
 }
 export declare const Controller: ({ name, children, ...rest }: ControllerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/form/Form.d.ts

@@ -17,6 +17,10 @@ export interface FormProps<K extends KeyValue = KeyValue> {
      * form data schema
      */
     schema?: yup.ObjectSchema<K>;
+    /**
+     * current form model
+     */
+    values?: K;
     /**
      * default data values
      */
@@ -30,4 +34,4 @@ export interface FormProps<K extends KeyValue = KeyValue> {
      */
     onSubmit?: (values: K) => void;
 }
-export declare const Form: <K extends KeyValue<any>>({ formRef, schema, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: <K extends KeyValue<any>>({ formRef, schema, children, values, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/hooks/useFormBuilder.d.ts

@@ -1,11 +1,13 @@
 import { yup } from "@react-fabric/utilities";
+import { type BaseSelectProps } from "../types";
 import { type FormSchema } from "../types/schema";
 import { type UploadHandler } from "./useFileUploader";
-export declare const useFormBuilder: (schema: FormSchema[], options?: {
+export declare const useFormBuilder: <T extends unknown = string>(schema: FormSchema, options?: {
     prefix?: string;
     inline?: boolean;
     fileUrl?: (path: string) => string;
     uploadHandler?: UploadHandler;
+    optionLists?: KeyValue<BaseSelectProps<T>>;
 }) => {
     formDef: import("react/jsx-runtime").JSX.Element;
     schemaDef: yup.ObjectSchema<{

package/dist/types/index.d.ts

@@ -1,13 +1,15 @@
 import "./i18n";
 export { Controller } from "./form/Controller";
 export { Form, type FormRef } from "./form/Form";
+export { SchemaEditor } from "./builder/SchemaEditor";
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";
-export { type FormSchema } from "./types/schema";
+export { DATA_TYPES, type FormSchema, type SchemaDef } from "./types/schema";
 export { ArrayInput } from "./input/ArrayInput";
 export { Checkbox } from "./input/Checkbox";
 export { ColorInput } from "./input/ColorInput";
 export { ColorPicker } from "./input/ColorPicker";
+export { DateInput } from "./input/DateInput";
 export { Field } from "./input/Field";
 export { FileInput } from "./input/File";
 export { HiddenInput } from "./input/Hidden";
@@ -16,7 +18,7 @@ export { Number } from "./input/Number";
 export { Password } from "./input/Password";
 export { Radio } from "./input/Radio";
 export { RadioGroup } from "./input/RadioGroup";
-export { Range } from "./input/Range";
+export { RangeSlider } from "./input/RangeSlider";
 export { Search } from "./input/Search";
 export { Slider } from "./input/Slider";
 export { Switch } from "./input/Switch";

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type RefProp } from "@react-fabric/core/dist/types/types";
-export interface CheckboxProps extends RefProp<HTMLInputElement> {
+interface CheckboxProps extends RefProp<HTMLInputElement> {
     /**
      * checkbox label
      */
@@ -16,7 +16,7 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
     /**
      * on checked change
      */
-    onChange?: (checked: boolean | string | number) => void;
+    onChange?: (checked: boolean) => void;
     /**
      * disabled input
      */
@@ -43,4 +43,5 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
     iconChecked?: string;
     name?: string;
 }
-export declare const Checkbox: ({ ref, label, value, name, checked, invalid, disabled, error, width, icon, iconChecked, onChange, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: ({ ref, label, value, name, checked, invalid, disabled, error, width, icon, iconChecked, required, onChange, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type DateLike } from "@react-fabric/date";
+import { type InputProps } from "../types";
+export interface DateProps extends InputProps<string>, RefProp<HTMLInputElement> {
+    type?: "date" | "datetime";
+    /**
+     * date format
+     */
+    format?: string;
+    /**
+     * minimum value
+     */
+    min?: DateLike;
+    /**
+     * maximum value
+     */
+    max?: DateLike;
+}
+export declare const DateInput: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onChange, onEnterPressed, format, min, max, ...rest }: DateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/{Range.d.ts → RangeSlider.d.ts}

@@ -56,4 +56,4 @@ export interface RangeProps extends Omit<InputProps<[number, number]>, "placehol
 /**
  * Number Range input
  */
-export declare const Range: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, format, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, invalid, ...rest }: RangeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeSlider: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, format, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, invalid, ...rest }: RangeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -43,4 +43,4 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
     offLabel?: string;
     offLabelColor?: string | ColorType;
 }
-export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, onLabel, offLabel, onLabelColor, offLabelColor, defaultColor, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, onLabel, offLabel, onLabelColor, offLabelColor, defaultColor, required, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/internal/InputWrapper.d.ts

@@ -1 +1 @@
-export declare const InputWrapper: ({ invalid, error, allowClear, showClear, decorateStart, decorateEnd, children, onClear, noOutline, noBorder, textarea, textareaExpandable, "data-inner": isInner, "data-open": isOpen, floatingExpand, wrapperRef, width, ...rest }: KeyValue) => import("react/jsx-runtime").JSX.Element;
+export declare const InputWrapper: ({ invalid, error, allowClear, showClear, decorateStart, decorateEnd, decorateEndShowWhenEmpty, decorateEndHideWhenEmpty, children, onClear, noOutline, noBorder, textarea, textareaExpandable, "data-inner": isInner, "data-open": isOpen, floatingExpand, wrapperRef, width, ...rest }: KeyValue) => import("react/jsx-runtime").JSX.Element;

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

@@ -45,6 +45,8 @@ export interface InputProps<V = string> extends TestProps {
      *
      */
     decorateEnd?: JSX.Element | string | number | boolean;
+    decorateEndShowWhenEmpty?: boolean;
+    decorateEndHideWhenEmpty?: boolean;
     /**
      * info label at bottom
      */
@@ -90,7 +92,7 @@ export interface InputProps<V = string> extends TestProps {
      */
     labelWidth?: string;
 }
-export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<InputProps, "value" | "onChange"> {
+export interface BaseSelectProps<T extends AnyObject = string> {
     /**
      * list options
      */
@@ -132,7 +134,8 @@ export interface BaseSelectProps<T> extends RefProp<HTMLInputElement>, Omit<Inpu
      */
     matcher?: (option: T, query: string) => boolean;
 }
-export type SelectProps<T> = BaseSelectProps<T> & ({
+type BaseSelectType<T> = BaseSelectProps<T> & RefProp<HTMLInputElement> & Omit<InputProps, "value" | "onChange">;
+export type SelectProps<T> = BaseSelectType<T> & ({
     /**
      * is multiple selection
      */
@@ -167,3 +170,4 @@ export type SelectProps<T> = BaseSelectProps<T> & ({
      */
     onChange?: (value?: string[]) => void;
 });
+export {};

package/dist/types/types/schema.d.ts

@@ -1,59 +1,78 @@
-interface BaseSchemaDef {
+import { type DateLike } from "@react-fabric/date";
+export declare enum DATA_TYPES {
+    TEXT = "text",
+    COLOR = "color",
+    BOOL = "bool",
+    DATE = "date",
+    STRING = "string",
+    NUMBER = "number",
+    RANGE = "range",
+    FILE = "file",
+    AVATAR = "avatar",
+    SCHEMA = "schema"
+}
+interface SingleValue {
+    multiple?: false;
+    minItems?: never;
+    maxItems?: never;
+}
+interface MultipleValue {
+    multiple: true;
+    minItems?: number;
+    maxItems?: number;
+}
+export type ValueType = SingleValue | MultipleValue;
+interface BaseSchema {
     id: string;
     label: string;
     datatype: string;
     required?: boolean;
-    multiple?: boolean;
-    defaultValue?: AnyObject;
 }
-interface SchemaDef extends BaseSchemaDef {
-    datatype: "text" | "color";
+export interface DefaultSchema extends BaseSchema {
+    datatype: DATA_TYPES.TEXT | DATA_TYPES.COLOR;
 }
-interface BooleanSchema extends BaseSchemaDef {
-    datatype: "boolean";
-    defaultValue?: boolean;
+export interface BooleanSchema extends BaseSchema {
+    datatype: DATA_TYPES.BOOL;
 }
-interface StringSchema extends BaseSchemaDef {
-    datatype: "string";
-    options?: string[];
+export interface StringSchema extends BaseSchema {
+    datatype: DATA_TYPES.STRING;
     regex?: string;
-    identifierType?: string;
+    options?: string[];
+    optionList?: string;
+    allowCustom?: boolean;
 }
-interface RangeSchema extends BaseSchemaDef {
-    datatype: "range";
+export interface RangeSchema extends BaseSchema {
+    datatype: DATA_TYPES.RANGE;
     min?: number;
     max?: number;
     step?: number;
-    defaultValue?: [number, number];
 }
-interface NumberSchema extends BaseSchemaDef {
-    datatype: "number";
-    min?: number;
-    max?: number;
-    step?: number;
-    defaultValue?: number;
+export interface DateSchema extends BaseSchema {
+    datatype: DATA_TYPES.DATE;
+    type?: "date" | "datetime";
+    min?: DateLike;
+    max?: DateLike;
 }
-interface DecimalSchema extends BaseSchemaDef {
-    datatype: "decimal";
+export interface NumberSchema extends BaseSchema {
+    datatype: DATA_TYPES.NUMBER;
     min?: number;
     max?: number;
     step?: number;
-    defaultValue?: number;
 }
-export interface FileSchema extends BaseSchemaDef {
-    datatype: "file";
+export interface FileSchema extends BaseSchema {
+    datatype: DATA_TYPES.FILE;
     accept?: string;
 }
-export interface AvatarSchema extends BaseSchemaDef {
-    datatype: "avatar";
+export interface AvatarSchema extends BaseSchema {
+    datatype: DATA_TYPES.AVATAR;
     multiple?: false;
 }
-export type SchemaType = SchemaDef | BooleanSchema | StringSchema | RangeSchema | NumberSchema | DecimalSchema | FileSchema | AvatarSchema;
-export interface ChildSchema extends BaseSchemaDef {
-    datatype: "schema";
+export type SchemaType = (DefaultSchema & ValueType) | (BooleanSchema & ValueType) | (StringSchema & ValueType) | (RangeSchema & ValueType) | (DateSchema & ValueType) | (NumberSchema & ValueType) | (FileSchema & ValueType) | (AvatarSchema & ValueType);
+export interface ChildSchema extends BaseSchema {
+    datatype: DATA_TYPES.SCHEMA;
     inline?: boolean;
     schema: SchemaType[];
-    defaultValue?: never;
 }
-export type FormSchema = SchemaType | ChildSchema;
+export type SchemaDef = SchemaType | (ChildSchema & ValueType);
+export type FormSchema = SchemaDef[];
 export {};