@manafishrov/ui 1.3.1 → 1.3.2

package/dist/components/form/NumberInputField.js

@@ -1,81 +1,108 @@
-import { createComponent as e, Show as u } from "solid-js/web";
-import { Field as d, FieldLabel as a, FieldContent as o, FieldError as s, FieldDescription as g } from "../Field.js";
-import { NumberInput as m, NumberInputControl as h, NumberInputInput as p, NumberInputTriggers as c } from "../NumberInput.js";
-import { useFieldContext as b } from "./context.js";
-import { splitProps as f } from "solid-js";
-const v = (n) => {
-  const t = b(), [r, l] = f(n, ["label", "description", "required", "disabled", "readOnly", "showTriggers"]);
-  return e(d, {
-    get invalid() {
-      return t().state.meta.errors.length > 0;
+import { createComponent as r, mergeProps as o, Show as d } from "solid-js/web";
+import { Field as m, FieldLabel as g, FieldContent as c, FieldError as s, FieldDescription as h } from "../Field.js";
+import { NumberInput as b, NumberInputControl as V, NumberInputInput as f, NumberInputTriggers as C } from "../NumberInput.js";
+import { useFieldContext as N } from "./context.js";
+import { splitProps as F, createSignal as I, createEffect as v } from "solid-js";
+const a = (e) => typeof e != "number" || !Number.isFinite(e) ? "" : String(e), B = (e) => {
+  const [u, t] = I(a(e().state.value));
+  return v(() => {
+    t(a(e().state.value));
+  }), {
+    inputValue: u,
+    onValueChange: (l) => {
+      t(l.value);
     },
-    get required() {
-      return r.required ?? !1;
+    onValueCommit: (l) => {
+      t(l.value), Number.isFinite(l.valueAsNumber) && e().handleChange(l.valueAsNumber);
     },
-    get disabled() {
-      return r.disabled ?? !1;
-    },
-    get readOnly() {
-      return r.readOnly ?? !1;
-    },
-    get children() {
-      return [e(a, {
-        get children() {
-          return r.label;
-        }
-      }), e(o, {
-        get children() {
-          return [e(m, {
-            get value() {
-              return String(t().state.value);
-            },
-            onValueChange: (i) => {
-              t().handleChange(i.valueAsNumber);
-            },
-            onBlur: () => {
-              t().handleBlur();
-            },
-            get invalid() {
-              return t().state.meta.errors.length > 0;
-            },
-            get disabled() {
-              return r.disabled ?? !1;
-            },
-            get readOnly() {
-              return r.readOnly ?? !1;
-            },
-            get required() {
-              return r.required ?? !1;
-            },
-            get children() {
-              return e(h, {
-                get children() {
-                  return [e(p, l), e(u, {
-                    get when() {
-                      return r.showTriggers !== !1;
-                    },
-                    get children() {
-                      return e(c, {});
-                    }
-                  })];
-                }
-              });
-            }
-          }), e(s, {
-            get errors() {
-              return t().state.meta.errors;
-            }
-          }), e(g, {
-            get children() {
-              return r.description;
-            }
-          })];
-        }
-      })];
+    onBlur: () => {
+      t(a(e().state.value)), e().handleBlur();
     }
+  };
+}, y = (e) => r(m, {
+  get invalid() {
+    return e.field().state.meta.errors.length > 0;
+  },
+  get required() {
+    return e.local.required ?? !1;
+  },
+  get disabled() {
+    return e.local.disabled ?? !1;
+  },
+  get readOnly() {
+    return e.local.readOnly ?? !1;
+  },
+  get children() {
+    return [r(g, {
+      get children() {
+        return e.local.label;
+      }
+    }), r(c, {
+      get children() {
+        return [r(b, {
+          get value() {
+            return e.inputValue();
+          },
+          get onValueChange() {
+            return e.onValueChange;
+          },
+          get onValueCommit() {
+            return e.onValueCommit;
+          },
+          get onBlur() {
+            return e.onBlur;
+          },
+          get invalid() {
+            return e.field().state.meta.errors.length > 0;
+          },
+          get disabled() {
+            return e.local.disabled ?? !1;
+          },
+          get readOnly() {
+            return e.local.readOnly ?? !1;
+          },
+          get required() {
+            return e.local.required ?? !1;
+          },
+          get children() {
+            return r(V, {
+              get children() {
+                return [r(f, o(() => e.others)), r(d, {
+                  get when() {
+                    return e.local.showTriggers !== !1;
+                  },
+                  get children() {
+                    return r(C, {});
+                  }
+                })];
+              }
+            });
+          }
+        }), r(s, {
+          get errors() {
+            return e.field().state.meta.errors;
+          }
+        }), r(h, {
+          get children() {
+            return e.local.description;
+          }
+        })];
+      }
+    })];
+  }
+}), A = (e) => {
+  const u = N(), [t, i] = F(e, ["label", "description", "required", "disabled", "readOnly", "showTriggers"]), n = B(u);
+  return y({
+    field: u,
+    local: t,
+    others: i,
+    inputValue: n.inputValue,
+    onValueChange: n.onValueChange,
+    onValueCommit: n.onValueCommit,
+    onBlur: n.onBlur
   });
 };
 export {
-  v as NumberInputField
+  A as NumberInputField
 };
 //# sourceMappingURL=NumberInputField.js.map

package/dist/components/form/NumberInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/form/NumberInputField.tsx"],"sourcesContent":["import type { Component, ComponentProps } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport {\n  NumberInput,\n  NumberInputControl,\n  NumberInputInput,\n  NumberInputTriggers,\n} from '@/components/NumberInput';\n\nimport { useFieldContext } from './context';\n\nexport type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & {\n  label?: string;\n  description?: string;\n  showTriggers?: boolean;\n};\n\nexport const NumberInputField: Component<NumberInputFieldProps> = (props) => {\n  const field = useFieldContext<number>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'showTriggers',\n  ]);\n\n  return (\n    <Field\n      invalid={field().state.meta.errors.length > 0}\n      required={local.required ?? false}\n      disabled={local.disabled ?? false}\n      readOnly={local.readOnly ?? false}\n    >\n      <FieldLabel>{local.label}</FieldLabel>\n      <FieldContent>\n        <NumberInput\n          value={String(field().state.value)}\n          onValueChange={(details) => {\n            field().handleChange(details.valueAsNumber);\n          }}\n          onBlur={() => {\n            field().handleBlur();\n          }}\n          invalid={field().state.meta.errors.length > 0}\n          disabled={local.disabled ?? false}\n          readOnly={local.readOnly ?? false}\n          required={local.required ?? false}\n        >\n          <NumberInputControl>\n            <NumberInputInput {...others} />\n            <Show when={local.showTriggers !== false}>\n              <NumberInputTriggers />\n            </Show>\n          </NumberInputControl>\n        </NumberInput>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["NumberInputField","props","field","useFieldContext","local","others","splitProps","_$createComponent","Field","invalid","state","meta","errors","length","required","disabled","readOnly","children","FieldLabel","label","FieldContent","NumberInput","value","String","onValueChange","details","handleChange","valueAsNumber","onBlur","handleBlur","NumberInputControl","NumberInputInput","_$Show","when","showTriggers","NumberInputTriggers","FieldError","FieldDescription","description"],"mappings":";;;;;AAkBO,MAAMA,IAAsDC,CAAAA,MAAU;AAC3E,QAAMC,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CACxC,SACA,eACA,YACA,YACA,YACA,cAAc,CACf;AAED,SAAAM,EACGC,GAAK;AAAA,IAAA,IACJC,UAAO;AAAA,aAAEP,EAAAA,EAAQQ,MAAMC,KAAKC,OAAOC,SAAS;AAAA,IAAC;AAAA,IAAA,IAC7CC,WAAQ;AAAA,aAAEV,EAAMU,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEX,EAAMW,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEZ,EAAMY,YAAY;AAAA,IAAK;AAAA,IAAA,IAAAC,WAAA;AAAA,aAAA,CAAAV,EAEhCW,GAAU;AAAA,QAAA,IAAAD,WAAA;AAAA,iBAAEb,EAAMe;AAAAA,QAAK;AAAA,MAAA,CAAA,GAAAZ,EACvBa,GAAY;AAAA,QAAA,IAAAH,WAAA;AAAA,iBAAA,CAAAV,EACVc,GAAW;AAAA,YAAA,IACVC,QAAK;AAAA,qBAAEC,OAAOrB,IAAQQ,MAAMY,KAAK;AAAA,YAAC;AAAA,YAClCE,eAAgBC,CAAAA,MAAY;AAC1BvB,cAAAA,IAAQwB,aAAaD,EAAQE,aAAa;AAAA,YAC5C;AAAA,YACAC,QAAQA,MAAM;AACZ1B,cAAAA,EAAAA,EAAQ2B,WAAAA;AAAAA,YACV;AAAA,YAAC,IACDpB,UAAO;AAAA,qBAAEP,EAAAA,EAAQQ,MAAMC,KAAKC,OAAOC,SAAS;AAAA,YAAC;AAAA,YAAA,IAC7CE,WAAQ;AAAA,qBAAEX,EAAMW,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAEZ,EAAMY,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCF,WAAQ;AAAA,qBAAEV,EAAMU,YAAY;AAAA,YAAK;AAAA,YAAA,IAAAG,WAAA;AAAA,qBAAAV,EAEhCuB,GAAkB;AAAA,gBAAA,IAAAb,WAAA;AAAA,yBAAA,CAAAV,EAChBwB,GAAqB1B,CAAM,GAAAE,EAC3ByB,GAAI;AAAA,oBAAA,IAACC,OAAI;AAAA,6BAAE7B,EAAM8B,iBAAiB;AAAA,oBAAK;AAAA,oBAAA,IAAAjB,WAAA;AAAA,6BAAAV,EACrC4B,GAAmB,EAAA;AAAA,oBAAA;AAAA,kBAAA,CAAA,CAAA;AAAA,gBAAA;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAA5B,EAIzB6B,GAAU;AAAA,YAAA,IAACxB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5C8B,GAAgB;AAAA,YAAA,IAAApB,WAAA;AAAA,qBAAEb,EAAMkC;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}
+{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/form/NumberInputField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSX } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport {\n  NumberInput,\n  NumberInputControl,\n  NumberInputInput,\n  NumberInputTriggers,\n} from '@/components/NumberInput';\n\nimport { useFieldContext } from './context';\n\nexport type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & {\n  label?: string;\n  description?: string;\n  showTriggers?: boolean;\n};\n\nconst toNumberInputValue = (value: number | undefined): string => {\n  if (typeof value !== 'number' || !Number.isFinite(value)) {\n    return '';\n  }\n\n  return String(value);\n};\n\ntype NumberInputFieldLocalProps = Pick<\n  NumberInputFieldProps,\n  'label' | 'description' | 'required' | 'disabled' | 'readOnly' | 'showTriggers'\n>;\n\ntype RenderNumberInputFieldProps = {\n  field: ReturnType<typeof useFieldContext<number>>;\n  local: NumberInputFieldLocalProps;\n  others: Omit<NumberInputFieldProps, keyof NumberInputFieldLocalProps>;\n  inputValue: () => string;\n  onValueChange: NonNullable<ComponentProps<typeof NumberInput>['onValueChange']>;\n  onValueCommit: NonNullable<ComponentProps<typeof NumberInput>['onValueCommit']>;\n  onBlur: () => void;\n};\n\ntype NumberInputFieldState = Pick<\n  RenderNumberInputFieldProps,\n  'inputValue' | 'onValueChange' | 'onValueCommit' | 'onBlur'\n>;\n\nconst createNumberInputFieldState = (\n  field: ReturnType<typeof useFieldContext<number>>,\n): NumberInputFieldState => {\n  const [inputValue, setInputValue] = createSignal(toNumberInputValue(field().state.value));\n\n  createEffect(() => {\n    setInputValue(toNumberInputValue(field().state.value));\n  });\n\n  const onValueChange: NonNullable<ComponentProps<typeof NumberInput>['onValueChange']> = (\n    details,\n  ) => {\n    setInputValue(details.value);\n  };\n\n  const onValueCommit: NonNullable<ComponentProps<typeof NumberInput>['onValueCommit']> = (\n    details,\n  ) => {\n    setInputValue(details.value);\n\n    if (!Number.isFinite(details.valueAsNumber)) {\n      return;\n    }\n\n    field().handleChange(details.valueAsNumber);\n  };\n\n  const onBlur = (): void => {\n    setInputValue(toNumberInputValue(field().state.value));\n    field().handleBlur();\n  };\n\n  return {\n    inputValue,\n    onValueChange,\n    onValueCommit,\n    onBlur,\n  };\n};\n\nconst renderNumberInputField = (props: RenderNumberInputFieldProps): JSX.Element => (\n  <Field\n    invalid={props.field().state.meta.errors.length > 0}\n    required={props.local.required ?? false}\n    disabled={props.local.disabled ?? false}\n    readOnly={props.local.readOnly ?? false}\n  >\n    <FieldLabel>{props.local.label}</FieldLabel>\n    <FieldContent>\n      <NumberInput\n        value={props.inputValue()}\n        onValueChange={props.onValueChange}\n        onValueCommit={props.onValueCommit}\n        onBlur={props.onBlur}\n        invalid={props.field().state.meta.errors.length > 0}\n        disabled={props.local.disabled ?? false}\n        readOnly={props.local.readOnly ?? false}\n        required={props.local.required ?? false}\n      >\n        <NumberInputControl>\n          <NumberInputInput {...props.others} />\n          <Show when={props.local.showTriggers !== false}>\n            <NumberInputTriggers />\n          </Show>\n        </NumberInputControl>\n      </NumberInput>\n      <FieldError errors={props.field().state.meta.errors} />\n      <FieldDescription>{props.local.description}</FieldDescription>\n    </FieldContent>\n  </Field>\n);\n\nexport const NumberInputField: Component<NumberInputFieldProps> = (props) => {\n  const field = useFieldContext<number>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'showTriggers',\n  ]);\n  const state = createNumberInputFieldState(field);\n\n  return renderNumberInputField({\n    field,\n    local,\n    others,\n    inputValue: state.inputValue,\n    onValueChange: state.onValueChange,\n    onValueCommit: state.onValueCommit,\n    onBlur: state.onBlur,\n  });\n};\n"],"names":["toNumberInputValue","value","Number","isFinite","String","createNumberInputFieldState","field","inputValue","setInputValue","createSignal","state","createEffect","onValueChange","details","onValueCommit","valueAsNumber","handleChange","onBlur","handleBlur","renderNumberInputField","props","_$createComponent","Field","invalid","meta","errors","length","required","local","disabled","readOnly","children","FieldLabel","label","FieldContent","NumberInput","NumberInputControl","NumberInputInput","_$mergeProps","others","_$Show","when","showTriggers","NumberInputTriggers","FieldError","FieldDescription","description","NumberInputField","useFieldContext","splitProps"],"mappings":"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"}

package/dist/components/form/SubmitButton.js

@@ -1,20 +1,23 @@
-import { createComponent as n, mergeProps as s } from "solid-js/web";
+import { createComponent as s, mergeProps as n } from "solid-js/web";
 import { Button as a } from "../Button.js";
-import { useFormContext as m } from "./context.js";
-import { splitProps as d } from "solid-js";
-const p = (e) => {
-  const t = m(), [o, r] = d(e, ["children", "loading", "disabled"]), i = () => t.state.isSubmitting || t.state.isValidating || (o.loading ?? !1);
-  return n(a, s({
+import { useFormContext as l } from "./context.js";
+import { splitProps as m } from "solid-js";
+const p = (r) => {
+  const e = l(), [t, o] = m(r, ["children", "loading", "disabled", "class"]), i = () => e.state.isSubmitting || e.state.isValidating || (t.loading ?? !1);
+  return s(a, n({
     type: "submit",
     get loading() {
       return i();
     },
     get disabled() {
-      return o.disabled ?? !t.state.canSubmit;
+      return t.disabled ?? !e.state.canSubmit;
+    },
+    get class() {
+      return `min-w-24 ${t.class ?? ""}`;
     }
-  }, r, {
+  }, o, {
     get children() {
-      return o.children;
+      return t.children;
     }
   }));
 };

package/dist/components/form/SubmitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubmitButton.js","sources":["../../../src/components/form/SubmitButton.tsx"],"sourcesContent":["import type { Component, ComponentProps } from 'solid-js';\n\nimport { Button } from '@/components/Button';\n\nimport { useFormContext } from './context';\n\nexport type SubmitButtonProps = ComponentProps<typeof Button> & {\n  loading?: boolean;\n};\n\nexport const SubmitButton: Component<SubmitButtonProps> = (props) => {\n  const form = useFormContext();\n  const [local, others] = splitProps(props, ['children', 'loading', 'disabled']);\n\n  const isLoading = (): boolean =>\n    form.state.isSubmitting || form.state.isValidating || (local.loading ?? false);\n\n  return (\n    <Button\n      type='submit'\n      loading={isLoading()}\n      disabled={local.disabled ?? !form.state.canSubmit}\n      {...others}\n    >\n      {local.children}\n    </Button>\n  );\n};\n"],"names":["SubmitButton","props","form","useFormContext","local","others","splitProps","isLoading","state","isSubmitting","isValidating","loading","_$createComponent","Button","_$mergeProps","type","disabled","canSubmit","children"],"mappings":";;;;AAUO,MAAMA,IAA8CC,CAAAA,MAAU;AACnE,QAAMC,IAAOC,EAAAA,GACP,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CAAC,YAAY,WAAW,UAAU,CAAC,GAEvEM,IAAYA,MAChBL,EAAKM,MAAMC,gBAAgBP,EAAKM,MAAME,iBAAiBN,EAAMO,WAAW;AAE1E,SAAAC,EACGC,GAAMC,EAAA;AAAA,IACLC,MAAI;AAAA,IAAA,IACJJ,UAAO;AAAA,aAAEJ,EAAAA;AAAAA,IAAW;AAAA,IAAA,IACpBS,WAAQ;AAAA,aAAEZ,EAAMY,YAAY,CAACd,EAAKM,MAAMS;AAAAA,IAAS;AAAA,EAAA,GAC7CZ,GAAM;AAAA,IAAA,IAAAa,WAAA;AAAA,aAETd,EAAMc;AAAAA,IAAQ;AAAA,EAAA,CAAA,CAAA;AAGrB;"}
+{"version":3,"file":"SubmitButton.js","sources":["../../../src/components/form/SubmitButton.tsx"],"sourcesContent":["import type { Component, ComponentProps } from 'solid-js';\n\nimport { Button } from '@/components/Button';\n\nimport { useFormContext } from './context';\n\nexport type SubmitButtonProps = ComponentProps<typeof Button> & {\n  loading?: boolean;\n};\n\nexport const SubmitButton: Component<SubmitButtonProps> = (props) => {\n  const form = useFormContext();\n  const [local, others] = splitProps(props, ['children', 'loading', 'disabled', 'class']);\n\n  const isLoading = (): boolean =>\n    form.state.isSubmitting || form.state.isValidating || (local.loading ?? false);\n\n  return (\n    <Button\n      type='submit'\n      loading={isLoading()}\n      disabled={local.disabled ?? !form.state.canSubmit}\n      class={`min-w-24 ${local.class ?? ''}`}\n      {...others}\n    >\n      {local.children}\n    </Button>\n  );\n};\n"],"names":["SubmitButton","props","form","useFormContext","local","others","splitProps","isLoading","state","isSubmitting","isValidating","loading","_$createComponent","Button","_$mergeProps","type","disabled","canSubmit","class","children"],"mappings":";;;;AAUO,MAAMA,IAA8CC,CAAAA,MAAU;AACnE,QAAMC,IAAOC,EAAAA,GACP,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CAAC,YAAY,WAAW,YAAY,OAAO,CAAC,GAEhFM,IAAYA,MAChBL,EAAKM,MAAMC,gBAAgBP,EAAKM,MAAME,iBAAiBN,EAAMO,WAAW;AAE1E,SAAAC,EACGC,GAAMC,EAAA;AAAA,IACLC,MAAI;AAAA,IAAA,IACJJ,UAAO;AAAA,aAAEJ,EAAAA;AAAAA,IAAW;AAAA,IAAA,IACpBS,WAAQ;AAAA,aAAEZ,EAAMY,YAAY,CAACd,EAAKM,MAAMS;AAAAA,IAAS;AAAA,IAAA,IAAA,QAAA;AAAA,aAC1C,YAAYb,EAAMc,SAAS,EAAE;AAAA,IAAE;AAAA,EAAA,GAClCb,GAAM;AAAA,IAAA,IAAAc,WAAA;AAAA,aAETf,EAAMe;AAAAA,IAAQ;AAAA,EAAA,CAAA,CAAA;AAGrB;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@manafishrov/ui",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Styled component library for Manafish interfaces ",
   "license": "AGPL-3.0-or-later",
   "repository": {

package/src/components/form/NumberInputField.tsx

@@ -1,4 +1,4 @@
-import type { Component, ComponentProps } from 'solid-js';
+import type { Component, ComponentProps, JSX } from 'solid-js';
 
 import { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';
 import {
@@ -16,6 +16,106 @@ export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & {
   showTriggers?: boolean;
 };
 
+const toNumberInputValue = (value: number | undefined): string => {
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    return '';
+  }
+
+  return String(value);
+};
+
+type NumberInputFieldLocalProps = Pick<
+  NumberInputFieldProps,
+  'label' | 'description' | 'required' | 'disabled' | 'readOnly' | 'showTriggers'
+>;
+
+type RenderNumberInputFieldProps = {
+  field: ReturnType<typeof useFieldContext<number>>;
+  local: NumberInputFieldLocalProps;
+  others: Omit<NumberInputFieldProps, keyof NumberInputFieldLocalProps>;
+  inputValue: () => string;
+  onValueChange: NonNullable<ComponentProps<typeof NumberInput>['onValueChange']>;
+  onValueCommit: NonNullable<ComponentProps<typeof NumberInput>['onValueCommit']>;
+  onBlur: () => void;
+};
+
+type NumberInputFieldState = Pick<
+  RenderNumberInputFieldProps,
+  'inputValue' | 'onValueChange' | 'onValueCommit' | 'onBlur'
+>;
+
+const createNumberInputFieldState = (
+  field: ReturnType<typeof useFieldContext<number>>,
+): NumberInputFieldState => {
+  const [inputValue, setInputValue] = createSignal(toNumberInputValue(field().state.value));
+
+  createEffect(() => {
+    setInputValue(toNumberInputValue(field().state.value));
+  });
+
+  const onValueChange: NonNullable<ComponentProps<typeof NumberInput>['onValueChange']> = (
+    details,
+  ) => {
+    setInputValue(details.value);
+  };
+
+  const onValueCommit: NonNullable<ComponentProps<typeof NumberInput>['onValueCommit']> = (
+    details,
+  ) => {
+    setInputValue(details.value);
+
+    if (!Number.isFinite(details.valueAsNumber)) {
+      return;
+    }
+
+    field().handleChange(details.valueAsNumber);
+  };
+
+  const onBlur = (): void => {
+    setInputValue(toNumberInputValue(field().state.value));
+    field().handleBlur();
+  };
+
+  return {
+    inputValue,
+    onValueChange,
+    onValueCommit,
+    onBlur,
+  };
+};
+
+const renderNumberInputField = (props: RenderNumberInputFieldProps): JSX.Element => (
+  <Field
+    invalid={props.field().state.meta.errors.length > 0}
+    required={props.local.required ?? false}
+    disabled={props.local.disabled ?? false}
+    readOnly={props.local.readOnly ?? false}
+  >
+    <FieldLabel>{props.local.label}</FieldLabel>
+    <FieldContent>
+      <NumberInput
+        value={props.inputValue()}
+        onValueChange={props.onValueChange}
+        onValueCommit={props.onValueCommit}
+        onBlur={props.onBlur}
+        invalid={props.field().state.meta.errors.length > 0}
+        disabled={props.local.disabled ?? false}
+        readOnly={props.local.readOnly ?? false}
+        required={props.local.required ?? false}
+      >
+        <NumberInputControl>
+          <NumberInputInput {...props.others} />
+          <Show when={props.local.showTriggers !== false}>
+            <NumberInputTriggers />
+          </Show>
+        </NumberInputControl>
+      </NumberInput>
+      <FieldError errors={props.field().state.meta.errors} />
+      <FieldDescription>{props.local.description}</FieldDescription>
+    </FieldContent>
+  </Field>
+);
+
 export const NumberInputField: Component<NumberInputFieldProps> = (props) => {
   const field = useFieldContext<number>();
   const [local, others] = splitProps(props, [
@@ -26,39 +126,15 @@ export const NumberInputField: Component<NumberInputFieldProps> = (props) => {
     'readOnly',
     'showTriggers',
   ]);
+  const state = createNumberInputFieldState(field);
 
-  return (
-    <Field
-      invalid={field().state.meta.errors.length > 0}
-      required={local.required ?? false}
-      disabled={local.disabled ?? false}
-      readOnly={local.readOnly ?? false}
-    >
-      <FieldLabel>{local.label}</FieldLabel>
-      <FieldContent>
-        <NumberInput
-          value={String(field().state.value)}
-          onValueChange={(details) => {
-            field().handleChange(details.valueAsNumber);
-          }}
-          onBlur={() => {
-            field().handleBlur();
-          }}
-          invalid={field().state.meta.errors.length > 0}
-          disabled={local.disabled ?? false}
-          readOnly={local.readOnly ?? false}
-          required={local.required ?? false}
-        >
-          <NumberInputControl>
-            <NumberInputInput {...others} />
-            <Show when={local.showTriggers !== false}>
-              <NumberInputTriggers />
-            </Show>
-          </NumberInputControl>
-        </NumberInput>
-        <FieldError errors={field().state.meta.errors} />
-        <FieldDescription>{local.description}</FieldDescription>
-      </FieldContent>
-    </Field>
-  );
+  return renderNumberInputField({
+    field,
+    local,
+    others,
+    inputValue: state.inputValue,
+    onValueChange: state.onValueChange,
+    onValueCommit: state.onValueCommit,
+    onBlur: state.onBlur,
+  });
 };

package/src/components/form/SubmitButton.tsx

@@ -10,7 +10,7 @@ export type SubmitButtonProps = ComponentProps<typeof Button> & {
 
 export const SubmitButton: Component<SubmitButtonProps> = (props) => {
   const form = useFormContext();
-  const [local, others] = splitProps(props, ['children', 'loading', 'disabled']);
+  const [local, others] = splitProps(props, ['children', 'loading', 'disabled', 'class']);
 
   const isLoading = (): boolean =>
     form.state.isSubmitting || form.state.isValidating || (local.loading ?? false);
@@ -20,6 +20,7 @@ export const SubmitButton: Component<SubmitButtonProps> = (props) => {
       type='submit'
       loading={isLoading()}
       disabled={local.disabled ?? !form.state.canSubmit}
+      class={`min-w-24 ${local.class ?? ''}`}
       {...others}
     >
       {local.children}