@manafishrov/ui 1.3.1 → 1.3.3

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/dist/components/form/TagsInputField.d.ts

@@ -1,8 +1,10 @@
 import { Component, ComponentProps } from 'solid-js';
-import { TagsInputInput } from '../TagsInput';
-export type TagsInputFieldProps = ComponentProps<typeof TagsInputInput> & {
+import { TagsInput, TagsInputInput } from '../TagsInput';
+declare const TAGS_INPUT_ROOT_PROPS: readonly ["max", "maxLength", "delimiter", "addOnPaste", "blurBehavior", "validate", "autoFocus", "editable", "allowOverflow", "translations", "ids", "onFocusOutside", "onHighlightChange", "onInputValueChange", "onInteractOutside", "onPointerDownOutside", "onValueInvalid"];
+export type TagsInputFieldProps = ComponentProps<typeof TagsInputInput> & Pick<ComponentProps<typeof TagsInput>, (typeof TAGS_INPUT_ROOT_PROPS)[number]> & {
     label?: string;
     description?: string;
     showClearTrigger?: boolean;
 };
 export declare const TagsInputField: Component<TagsInputFieldProps>;
+export {};

package/dist/components/form/TagsInputField.js

@@ -1,46 +1,46 @@
-import { createComponent as e, mergeProps as o, Show as s, memo as u } from "solid-js/web";
-import { splitProps as i, For as d } from "solid-js";
-import { Field as h, FieldLabel as p, FieldContent as c, FieldError as T, FieldDescription as I } from "../Field.js";
-import { TagsInput as m, TagsInputContext as C, TagsInputControl as f, TagsInputItem as b, TagsInputItemPreview as w, TagsInputItemText as F, TagsInputItemDeleteTrigger as v, TagsInputItemInput as y, TagsInputInput as O, TagsInputClearTrigger as P, TagsInputHiddenInput as x } from "../TagsInput.js";
-import { useFieldContext as q } from "./context.js";
-const D = (l) => {
+import { createComponent as e, mergeProps as s, Show as g, memo as d } from "solid-js/web";
+import { splitProps as i, For as h } from "solid-js";
+import { Field as p, FieldLabel as c, FieldContent as I, FieldError as T, FieldDescription as m } from "../Field.js";
+import { TagsInput as C, TagsInputContext as f, TagsInputControl as O, TagsInputItem as P, TagsInputItemPreview as w, TagsInputItemText as b, TagsInputItemDeleteTrigger as F, TagsInputItemInput as v, TagsInputInput as x, TagsInputClearTrigger as y, TagsInputHiddenInput as _ } from "../TagsInput.js";
+import { useFieldContext as S } from "./context.js";
+const D = ["max", "maxLength", "delimiter", "addOnPaste", "blurBehavior", "validate", "autoFocus", "editable", "allowOverflow", "translations", "ids", "onFocusOutside", "onHighlightChange", "onInputValueChange", "onInteractOutside", "onPointerDownOutside", "onValueInvalid"], q = (l) => {
   const [t, r] = i(l, ["children", "showClearTrigger"]);
-  return [e(C, {
-    children: (a) => e(f, {
+  return [e(f, {
+    children: (a) => e(O, {
       get children() {
-        return [e(d, {
+        return [e(h, {
           get each() {
             return a().value;
           },
-          children: (n, g) => e(b, {
+          children: (n, o) => e(P, {
             get index() {
-              return g();
+              return o();
             },
             value: n,
             get children() {
               return [e(w, {
                 get children() {
-                  return [e(F, {
+                  return [e(b, {
                     children: n
-                  }), e(v, {})];
+                  }), e(F, {})];
                 }
-              }), e(y, {})];
+              }), e(v, {})];
             }
           })
-        }), e(O, r), e(s, {
+        }), e(x, r), e(g, {
           get when() {
             return t.showClearTrigger !== !1;
           },
           get children() {
-            return e(P, {});
+            return e(y, {});
           }
-        }), u(() => t.children)];
+        }), d(() => t.children)];
       }
     })
-  }), e(x, {})];
-}, S = ["label", "description", "required", "disabled", "readOnly", "showClearTrigger"], A = (l) => {
-  const t = q(), [r, a] = i(l, S);
-  return e(h, {
+  }), e(_, {})];
+}, B = ["label", "description", "required", "disabled", "readOnly", "showClearTrigger"], E = (l) => {
+  const t = S(), [r, a] = i(l, B), [n, o] = i(a, D);
+  return e(p, {
     get invalid() {
       return t().state.meta.errors.length > 0;
     },
@@ -54,18 +54,18 @@ const D = (l) => {
       return r.required ?? !1;
     },
     get children() {
-      return [e(p, {
+      return [e(c, {
         get children() {
           return r.label;
         }
-      }), e(c, {
+      }), e(I, {
         get children() {
-          return [e(m, {
+          return [e(C, s({
             get value() {
               return t().state.value;
             },
-            onValueChange: (n) => {
-              t().handleChange(n.value);
+            onValueChange: (u) => {
+              t().handleChange(u.value);
             },
             onBlur: () => {
               t().handleBlur();
@@ -78,17 +78,18 @@ const D = (l) => {
             },
             get readOnly() {
               return r.readOnly ?? !1;
-            },
+            }
+          }, n, {
             get children() {
-              return e(D, o(a, () => typeof r.showClearTrigger == "boolean" && {
+              return e(q, s(o, () => typeof r.showClearTrigger == "boolean" && {
                 showClearTrigger: r.showClearTrigger
               }));
             }
-          }), e(T, {
+          })), e(T, {
             get errors() {
               return t().state.meta.errors;
             }
-          }), e(I, {
+          }), e(m, {
             get children() {
               return r.description;
             }
@@ -99,6 +100,6 @@ const D = (l) => {
   });
 };
 export {
-  A as TagsInputField
+  E as TagsInputField
 };
 //# sourceMappingURL=TagsInputField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TagsInputField.js","sources":["../../../src/components/form/TagsInputField.tsx"],"sourcesContent":["import { type Component, type ComponentProps, splitProps, For } from 'solid-js';\n\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\nimport {\n  TagsInput,\n  TagsInputClearTrigger,\n  TagsInputContext,\n  TagsInputControl,\n  TagsInputHiddenInput,\n  TagsInputInput,\n  TagsInputItemInput,\n  TagsInputItemPreview,\n  TagsInputItemText,\n  TagsInputItem,\n  TagsInputItemDeleteTrigger,\n} from '@/components/TagsInput';\n\nimport { useFieldContext } from './context';\n\nexport type TagsInputFieldProps = ComponentProps<typeof TagsInputInput> & {\n  label?: string;\n  description?: string;\n  showClearTrigger?: boolean;\n};\n\nconst TagsInputGroup: Component<\n  ComponentProps<typeof TagsInputInput> & { showClearTrigger?: boolean }\n> = (props) => {\n  const [local, others] = splitProps(props, ['children', 'showClearTrigger']);\n\n  return (\n    <>\n      <TagsInputContext>\n        {(context) => (\n          <TagsInputControl>\n            <For each={context().value}>\n              {(value, index) => (\n                <TagsInputItem index={index()} value={value}>\n                  <TagsInputItemPreview>\n                    <TagsInputItemText>{value}</TagsInputItemText>\n                    <TagsInputItemDeleteTrigger />\n                  </TagsInputItemPreview>\n                  <TagsInputItemInput />\n                </TagsInputItem>\n              )}\n            </For>\n            <TagsInputInput {...others} />\n            <Show when={local.showClearTrigger !== false}>\n              <TagsInputClearTrigger />\n            </Show>\n            {local.children}\n          </TagsInputControl>\n        )}\n      </TagsInputContext>\n      <TagsInputHiddenInput />\n    </>\n  );\n};\n\nconst TAGS_INPUT_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'showClearTrigger',\n] as const;\n\nexport const TagsInputField: Component<TagsInputFieldProps> = (props) => {\n  const field = useFieldContext<string[]>();\n  const [local, others] = splitProps(props, TAGS_INPUT_FIELD_PROPS);\n\n  return (\n    <Field\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      <FieldLabel>{local.label}</FieldLabel>\n      <FieldContent>\n        <TagsInput\n          value={field().state.value}\n          onValueChange={(details) => {\n            field().handleChange(details.value);\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        >\n          <TagsInputGroup\n            {...others}\n            {...(typeof local.showClearTrigger === 'boolean' && {\n              showClearTrigger: local.showClearTrigger,\n            })}\n          />\n        </TagsInput>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["TagsInputGroup","props","local","others","splitProps","_$createComponent","TagsInputContext","children","context","TagsInputControl","For","each","value","index","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemDeleteTrigger","TagsInputItemInput","TagsInputInput","_$Show","when","showClearTrigger","TagsInputClearTrigger","_$memo","TagsInputHiddenInput","TAGS_INPUT_FIELD_PROPS","TagsInputField","field","useFieldContext","Field","invalid","state","meta","errors","length","disabled","readOnly","required","FieldLabel","label","FieldContent","TagsInput","onValueChange","details","handleChange","onBlur","handleBlur","_$mergeProps","FieldError","FieldDescription","description"],"mappings":"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"}
+{"version":3,"file":"TagsInputField.js","sources":["../../../src/components/form/TagsInputField.tsx"],"sourcesContent":["import { type Component, type ComponentProps, splitProps, For } from 'solid-js';\n\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\nimport {\n  TagsInput,\n  TagsInputClearTrigger,\n  TagsInputContext,\n  TagsInputControl,\n  TagsInputHiddenInput,\n  TagsInputInput,\n  TagsInputItemInput,\n  TagsInputItemPreview,\n  TagsInputItemText,\n  TagsInputItem,\n  TagsInputItemDeleteTrigger,\n} from '@/components/TagsInput';\n\nimport { useFieldContext } from './context';\n\nconst TAGS_INPUT_ROOT_PROPS = [\n  'max',\n  'maxLength',\n  'delimiter',\n  'addOnPaste',\n  'blurBehavior',\n  'validate',\n  'autoFocus',\n  'editable',\n  'allowOverflow',\n  'translations',\n  'ids',\n  'onFocusOutside',\n  'onHighlightChange',\n  'onInputValueChange',\n  'onInteractOutside',\n  'onPointerDownOutside',\n  'onValueInvalid',\n] as const;\n\nexport type TagsInputFieldProps = ComponentProps<typeof TagsInputInput> &\n  Pick<ComponentProps<typeof TagsInput>, (typeof TAGS_INPUT_ROOT_PROPS)[number]> & {\n    label?: string;\n    description?: string;\n    showClearTrigger?: boolean;\n  };\n\nconst TagsInputGroup: Component<\n  { showClearTrigger?: boolean } & ComponentProps<typeof TagsInputInput>\n> = (props) => {\n  const [local, others] = splitProps(props, ['children', 'showClearTrigger']);\n\n  return (\n    <>\n      <TagsInputContext>\n        {(context) => (\n          <TagsInputControl>\n            <For each={context().value}>\n              {(value, index) => (\n                <TagsInputItem index={index()} value={value}>\n                  <TagsInputItemPreview>\n                    <TagsInputItemText>{value}</TagsInputItemText>\n                    <TagsInputItemDeleteTrigger />\n                  </TagsInputItemPreview>\n                  <TagsInputItemInput />\n                </TagsInputItem>\n              )}\n            </For>\n            <TagsInputInput {...others} />\n            <Show when={local.showClearTrigger !== false}>\n              <TagsInputClearTrigger />\n            </Show>\n            {local.children}\n          </TagsInputControl>\n        )}\n      </TagsInputContext>\n      <TagsInputHiddenInput />\n    </>\n  );\n};\n\nconst TAGS_INPUT_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'showClearTrigger',\n] as const;\n\nexport const TagsInputField: Component<TagsInputFieldProps> = (props) => {\n  const field = useFieldContext<string[]>();\n  const [local, others] = splitProps(props, TAGS_INPUT_FIELD_PROPS);\n  const [rootProps, inputProps] = splitProps(others, TAGS_INPUT_ROOT_PROPS);\n\n  return (\n    <Field\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      <FieldLabel>{local.label}</FieldLabel>\n      <FieldContent>\n        <TagsInput\n          value={field().state.value}\n          onValueChange={(details) => {\n            field().handleChange(details.value);\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          {...rootProps}\n        >\n          <TagsInputGroup\n            {...inputProps}\n            {...(typeof local.showClearTrigger === 'boolean' && {\n              showClearTrigger: local.showClearTrigger,\n            })}\n          />\n        </TagsInput>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["TAGS_INPUT_ROOT_PROPS","TagsInputGroup","props","local","others","splitProps","_$createComponent","TagsInputContext","children","context","TagsInputControl","For","each","value","index","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemDeleteTrigger","TagsInputItemInput","TagsInputInput","_$Show","when","showClearTrigger","TagsInputClearTrigger","_$memo","TagsInputHiddenInput","TAGS_INPUT_FIELD_PROPS","TagsInputField","field","useFieldContext","rootProps","inputProps","Field","invalid","state","meta","errors","length","disabled","readOnly","required","FieldLabel","label","FieldContent","TagsInput","_$mergeProps","onValueChange","details","handleChange","onBlur","handleBlur","FieldError","FieldDescription","description"],"mappings":"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"}

package/package.json

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

package/src/components/form/ComboboxField.tsx

@@ -15,13 +15,56 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@
 
 import { useFieldContext } from './context';
 
-export type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> & {
-  collection: ComboboxRootProps<string>['collection'];
-  label?: string;
-  description?: string;
-  showTrigger?: boolean;
-  showClearTrigger?: boolean;
-} & { class?: string };
+const COMBOBOX_ROOT_PROPS = [
+  'placeholder',
+  'inputBehavior',
+  'openOnChange',
+  'openOnClick',
+  'openOnKeyPress',
+  'closeOnSelect',
+  'allowCustomValue',
+  'multiple',
+  'selectionBehavior',
+  'autoFocus',
+  'loopFocus',
+  'positioning',
+  'alwaysSubmitOnEnter',
+  'composite',
+  'defaultHighlightedValue',
+  'defaultInputValue',
+  'defaultOpen',
+  'defaultValue',
+  'disableLayer',
+  'highlightedValue',
+  'ids',
+  'immediate',
+  'inputValue',
+  'lazyMount',
+  'navigate',
+  'onExitComplete',
+  'onFocusOutside',
+  'onHighlightChange',
+  'onInputValueChange',
+  'onInteractOutside',
+  'onOpenChange',
+  'onPointerDownOutside',
+  'onSelect',
+  'open',
+  'present',
+  'scrollToIndexFn',
+  'skipAnimationOnMount',
+  'translations',
+  'unmountOnExit',
+] as const;
+
+export type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> &
+  Pick<ComponentProps<typeof Combobox<string>>, (typeof COMBOBOX_ROOT_PROPS)[number]> & {
+    collection: ComboboxRootProps<string>['collection'];
+    label?: string;
+    description?: string;
+    showTrigger?: boolean;
+    showClearTrigger?: boolean;
+  } & { class?: string };
 
 const ComboboxInputGroup: Component<
   ComponentProps<typeof ComboboxInput> & {
@@ -64,6 +107,7 @@ const COMBOBOX_FIELD_PROPS = [
 export const ComboboxField: Component<ComboboxFieldProps> = (props) => {
   const field = useFieldContext<string[]>();
   const [local, others] = splitProps(props, COMBOBOX_FIELD_PROPS);
+  const [rootProps, inputProps] = splitProps(others, COMBOBOX_ROOT_PROPS);
 
   return (
     <Field
@@ -86,11 +130,12 @@ export const ComboboxField: Component<ComboboxFieldProps> = (props) => {
           invalid={field().state.meta.errors.length > 0}
           disabled={local.disabled ?? false}
           readOnly={local.readOnly ?? false}
+          {...rootProps}
         >
           <ComboboxInputGroup
             showTrigger={local.showTrigger}
             showClearTrigger={local.showClearTrigger}
-            {...others}
+            {...inputProps}
           >
             {local.children}
           </ComboboxInputGroup>

package/src/components/form/DatePickerField.tsx

@@ -1,5 +1,5 @@
 import type { DatePickerInputProps, DateValue } from '@ark-ui/solid';
-import type { Component } from 'solid-js';
+import type { Component, ComponentProps } from 'solid-js';
 
 import {
   DatePicker,
@@ -14,11 +14,56 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@
 
 import { useFieldContext } from './context';
 
-export type DatePickerFieldProps = DatePickerInputProps & {
-  label?: string;
-  description?: string;
-  showTrigger?: boolean;
-};
+const DATE_PICKER_ROOT_PROPS = [
+  'min',
+  'max',
+  'locale',
+  'timeZone',
+  'format',
+  'parse',
+  'selectionMode',
+  'numOfMonths',
+  'fixedWeeks',
+  'startOfWeek',
+  'showWeekNumbers',
+  'outsideDaySelectable',
+  'isDateUnavailable',
+  'openOnClick',
+  'positioning',
+  'closeOnSelect',
+  'defaultFocusedValue',
+  'defaultOpen',
+  'defaultValue',
+  'defaultView',
+  'focusedValue',
+  'ids',
+  'immediate',
+  'inline',
+  'lazyMount',
+  'maxSelectedDates',
+  'maxView',
+  'minView',
+  'name',
+  'onExitComplete',
+  'onFocusChange',
+  'onOpenChange',
+  'onValueChange',
+  'onViewChange',
+  'onVisibleRangeChange',
+  'open',
+  'present',
+  'skipAnimationOnMount',
+  'translations',
+  'unmountOnExit',
+  'view',
+] as const;
+
+export type DatePickerFieldProps = DatePickerInputProps &
+  Pick<ComponentProps<typeof DatePicker>, (typeof DATE_PICKER_ROOT_PROPS)[number]> & {
+    label?: string;
+    description?: string;
+    showTrigger?: boolean;
+  };
 
 const DatePickerInputGroup: Component<DatePickerInputProps & { showTrigger?: boolean }> = (
   props,
@@ -55,6 +100,7 @@ const DATE_PICKER_FIELD_PROPS = [
 export const DatePickerField: Component<DatePickerFieldProps> = (props) => {
   const field = useFieldContext<DateValue[]>();
   const [local, others] = splitProps(props, DATE_PICKER_FIELD_PROPS);
+  const [rootProps, inputProps] = splitProps(others, DATE_PICKER_ROOT_PROPS);
 
   return (
     <Field
@@ -76,9 +122,10 @@ export const DatePickerField: Component<DatePickerFieldProps> = (props) => {
           invalid={field().state.meta.errors.length > 0}
           disabled={local.disabled ?? false}
           readOnly={local.readOnly ?? false}
+          {...rootProps}
         >
           <DatePickerInputGroup
-            {...others}
+            {...inputProps}
             placeholder={local.placeholder}
             {...(typeof local.showTrigger === 'boolean' && { showTrigger: local.showTrigger })}
           />

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 {
@@ -10,12 +10,142 @@ import {
 
 import { useFieldContext } from './context';
 
-export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & {
-  label?: string;
-  description?: string;
-  showTriggers?: boolean;
+const NUMBER_INPUT_ROOT_PROPS = [
+  'min',
+  'max',
+  'step',
+  'allowMouseWheel',
+  'allowOverflow',
+  'clampValueOnBlur',
+  'formatOptions',
+  'inputMode',
+  'locale',
+  'pattern',
+  'spinOnPress',
+  'focusInputOnChange',
+  'translations',
+  'form',
+  'name',
+  'onValueInvalid',
+] as const;
+
+export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> &
+  Pick<ComponentProps<typeof NumberInput>, (typeof NUMBER_INPUT_ROOT_PROPS)[number]> & {
+    label?: string;
+    description?: string;
+    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 NumberInputFieldRootProps = Pick<
+  NumberInputFieldProps,
+  (typeof NUMBER_INPUT_ROOT_PROPS)[number]
+>;
+
+type RenderNumberInputFieldProps = {
+  field: ReturnType<typeof useFieldContext<number>>;
+  local: NumberInputFieldLocalProps;
+  rootProps: NumberInputFieldRootProps;
+  inputProps: Omit<
+    NumberInputFieldProps,
+    keyof NumberInputFieldLocalProps | keyof NumberInputFieldRootProps
+  >;
+  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}
+        {...props.rootProps}
+      >
+        <NumberInputControl>
+          <NumberInputInput {...props.inputProps} />
+          <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 +156,17 @@ export const NumberInputField: Component<NumberInputFieldProps> = (props) => {
     'readOnly',
     'showTriggers',
   ]);
+  const [rootProps, inputProps] = splitProps(others, NUMBER_INPUT_ROOT_PROPS);
+  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,
+    rootProps,
+    inputProps,
+    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}

package/src/components/form/TagsInputField.tsx

@@ -17,14 +17,35 @@ import {
 
 import { useFieldContext } from './context';
 
-export type TagsInputFieldProps = ComponentProps<typeof TagsInputInput> & {
-  label?: string;
-  description?: string;
-  showClearTrigger?: boolean;
-};
+const TAGS_INPUT_ROOT_PROPS = [
+  'max',
+  'maxLength',
+  'delimiter',
+  'addOnPaste',
+  'blurBehavior',
+  'validate',
+  'autoFocus',
+  'editable',
+  'allowOverflow',
+  'translations',
+  'ids',
+  'onFocusOutside',
+  'onHighlightChange',
+  'onInputValueChange',
+  'onInteractOutside',
+  'onPointerDownOutside',
+  'onValueInvalid',
+] as const;
+
+export type TagsInputFieldProps = ComponentProps<typeof TagsInputInput> &
+  Pick<ComponentProps<typeof TagsInput>, (typeof TAGS_INPUT_ROOT_PROPS)[number]> & {
+    label?: string;
+    description?: string;
+    showClearTrigger?: boolean;
+  };
 
 const TagsInputGroup: Component<
-  ComponentProps<typeof TagsInputInput> & { showClearTrigger?: boolean }
+  { showClearTrigger?: boolean } & ComponentProps<typeof TagsInputInput>
 > = (props) => {
   const [local, others] = splitProps(props, ['children', 'showClearTrigger']);
 
@@ -69,6 +90,7 @@ const TAGS_INPUT_FIELD_PROPS = [
 export const TagsInputField: Component<TagsInputFieldProps> = (props) => {
   const field = useFieldContext<string[]>();
   const [local, others] = splitProps(props, TAGS_INPUT_FIELD_PROPS);
+  const [rootProps, inputProps] = splitProps(others, TAGS_INPUT_ROOT_PROPS);
 
   return (
     <Field
@@ -90,9 +112,10 @@ export const TagsInputField: Component<TagsInputFieldProps> = (props) => {
           invalid={field().state.meta.errors.length > 0}
           disabled={local.disabled ?? false}
           readOnly={local.readOnly ?? false}
+          {...rootProps}
         >
           <TagsInputGroup
-            {...others}
+            {...inputProps}
             {...(typeof local.showClearTrigger === 'boolean' && {
               showClearTrigger: local.showClearTrigger,
             })}