@manafishrov/ui 1.2.12 → 1.3.0

package/dist/components/form/TagsInputField.js

@@ -1,40 +1,46 @@
-import { createComponent as e, mergeProps as d } from "solid-js/web";
-import { splitProps as u, For as i } from "solid-js";
-import { Field as o, FieldLabel as s, FieldContent as g, FieldError as p, FieldDescription as c } from "../Field.js";
-import { TagsInput as h, TagsInputContext as I, TagsInputControl as m, TagsInputItem as T, TagsInputItemPreview as f, TagsInputItemText as F, TagsInputItemDeleteTrigger as b, TagsInputItemInput as C, TagsInputInput as v, TagsInputClearTrigger as O, TagsInputHiddenInput as P } from "../TagsInput.js";
-import { useFieldContext as x } from "./context.js";
-const y = (n) => [e(I, {
-  children: (t) => e(m, {
-    get children() {
-      return [e(i, {
-        get each() {
-          return t().value;
-        },
-        children: (r, l) => e(T, {
-          get index() {
-            return l();
+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) => {
+  const [t, r] = i(l, ["children", "showClearTrigger"]);
+  return [e(C, {
+    children: (a) => e(f, {
+      get children() {
+        return [e(d, {
+          get each() {
+            return a().value;
+          },
+          children: (n, g) => e(b, {
+            get index() {
+              return g();
+            },
+            value: n,
+            get children() {
+              return [e(w, {
+                get children() {
+                  return [e(F, {
+                    children: n
+                  }), e(v, {})];
+                }
+              }), e(y, {})];
+            }
+          })
+        }), e(O, r), e(s, {
+          get when() {
+            return t.showClearTrigger !== !1;
           },
-          value: r,
           get children() {
-            return [e(f, {
-              get children() {
-                return [e(F, {
-                  children: r
-                }), e(b, {})];
-              }
-            }), e(C, {})];
+            return e(P, {});
           }
-        })
-      }), e(v, {
-        get placeholder() {
-          return n.placeholder;
-        }
-      }), e(O, {})];
-    }
-  })
-}), e(P, {})], q = ["label", "description", "required", "disabled", "readOnly", "placeholder"], L = (n) => {
-  const t = x(), [r, l] = u(n, q);
-  return e(o, {
+        }), u(() => t.children)];
+      }
+    })
+  }), e(x, {})];
+}, S = ["label", "description", "required", "disabled", "readOnly", "showClearTrigger"], A = (l) => {
+  const t = q(), [r, a] = i(l, S);
+  return e(h, {
     get invalid() {
       return t().state.meta.errors.length > 0;
     },
@@ -48,18 +54,18 @@ const y = (n) => [e(I, {
       return r.required ?? !1;
     },
     get children() {
-      return [e(s, {
+      return [e(p, {
         get children() {
           return r.label;
         }
-      }), e(g, {
+      }), e(c, {
         get children() {
-          return [e(h, d({
+          return [e(m, {
             get value() {
               return t().state.value;
             },
-            onValueChange: (a) => {
-              t().handleChange(a.value);
+            onValueChange: (n) => {
+              t().handleChange(n.value);
             },
             onBlur: () => {
               t().handleBlur();
@@ -72,20 +78,17 @@ const y = (n) => [e(I, {
             },
             get readOnly() {
               return r.readOnly ?? !1;
-            }
-          }, l, {
+            },
             get children() {
-              return e(y, {
-                get placeholder() {
-                  return r.placeholder;
-                }
-              });
+              return e(D, o(a, () => typeof r.showClearTrigger == "boolean" && {
+                showClearTrigger: r.showClearTrigger
+              }));
             }
-          })), e(p, {
+          }), e(T, {
             get errors() {
               return t().state.meta.errors;
             }
-          }), e(c, {
+          }), e(I, {
             get children() {
               return r.description;
             }
@@ -96,6 +99,6 @@ const y = (n) => [e(I, {
   });
 };
 export {
-  L as TagsInputField
+  A 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 { TagsInputRootProps } from '@ark-ui/solid';\n\nimport { type Component, 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 = TagsInputRootProps & {\n  label?: string;\n  description?: string;\n  placeholder?: string;\n};\n\nconst TagsInputGroup: Component<{ placeholder?: string | undefined }> = (props) => (\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 placeholder={props.placeholder} />\n          <TagsInputClearTrigger />\n        </TagsInputControl>\n      )}\n    </TagsInputContext>\n    <TagsInputHiddenInput />\n  </>\n);\n\nconst TAGS_INPUT_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'placeholder',\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          {...others}\n        >\n          <TagsInputGroup placeholder={local.placeholder} />\n        </TagsInput>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["TagsInputGroup","props","_$createComponent","TagsInputContext","children","context","TagsInputControl","For","each","value","index","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemDeleteTrigger","TagsInputItemInput","TagsInputInput","placeholder","TagsInputClearTrigger","TagsInputHiddenInput","TAGS_INPUT_FIELD_PROPS","TagsInputField","field","useFieldContext","local","others","splitProps","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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"}
+{"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":";;;;;AAyBA,MAAMA,IAEDC,CAAAA,MAAU;AACb,QAAM,CAACC,GAAOC,CAAM,IAAIC,EAAWH,GAAO,CAAC,YAAY,kBAAkB,CAAC;AAE1E,SAAA,CAAAI,EAEKC,GAAgB;AAAA,IAAAC,UACbC,CAAAA,MAAOH,EACNI,GAAgB;AAAA,MAAA,IAAAF,WAAA;AAAA,eAAA,CAAAF,EACdK,GAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEH,IAAUI;AAAAA,UAAK;AAAA,UAAAL,UACvBA,CAACK,GAAOC,MAAKR,EACXS,GAAa;AAAA,YAAA,IAACD,QAAK;AAAA,qBAAEA,EAAAA;AAAAA,YAAO;AAAA,YAAED,OAAAA;AAAAA,YAAY,IAAAL,WAAA;AAAA,qBAAA,CAAAF,EACxCU,GAAoB;AAAA,gBAAA,IAAAR,WAAA;AAAA,yBAAA,CAAAF,EAClBW,GAAiB;AAAA,oBAAAT,UAAEK;AAAAA,kBAAAA,CAAK,GAAAP,EACxBY,GAA0B,CAAA,CAAA,CAAA;AAAA,gBAAA;AAAA,cAAA,CAAA,GAAAZ,EAE5Ba,GAAkB,CAAA,CAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA,CAEtB,GAAAb,EAEFc,GAAmBhB,CAAM,GAAAE,EACzBe,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEnB,EAAMoB,qBAAqB;AAAA,UAAK;AAAA,UAAA,IAAAf,WAAA;AAAA,mBAAAF,EACzCkB,GAAqB,EAAA;AAAA,UAAA;AAAA,QAAA,CAAA,GAAAC,EAAA,MAEvBtB,EAAMK,QAAQ,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAElB,GAAAF,EAEFoB,GAAoB,CAAA,CAAA,CAAA;AAG3B,GAEMC,IAAyB,CAC7B,SACA,eACA,YACA,YACA,YACA,kBAAkB,GAGPC,IAAkD1B,CAAAA,MAAU;AACvE,QAAM2B,IAAQC,EAAAA,GACR,CAAC3B,GAAOC,CAAM,IAAIC,EAAWH,GAAOyB,CAAsB;AAEhE,SAAArB,EACGyB,GAAK;AAAA,IAAA,IACJC,UAAO;AAAA,aAAEH,EAAAA,EAAQI,MAAMC,KAAKC,OAAOC,SAAS;AAAA,IAAC;AAAA,IAAA,IAC7CC,WAAQ;AAAA,aAAElC,EAAMkC,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEnC,EAAMmC,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEpC,EAAMoC,YAAY;AAAA,IAAK;AAAA,IAAA,IAAA/B,WAAA;AAAA,aAAA,CAAAF,EAEhCkC,GAAU;AAAA,QAAA,IAAAhC,WAAA;AAAA,iBAAEL,EAAMsC;AAAAA,QAAK;AAAA,MAAA,CAAA,GAAAnC,EACvBoC,GAAY;AAAA,QAAA,IAAAlC,WAAA;AAAA,iBAAA,CAAAF,EACVqC,GAAS;AAAA,YAAA,IACR9B,QAAK;AAAA,qBAAEgB,EAAAA,EAAQI,MAAMpB;AAAAA,YAAK;AAAA,YAC1B+B,eAAgBC,CAAAA,MAAY;AAC1BhB,cAAAA,IAAQiB,aAAaD,EAAQhC,KAAK;AAAA,YACpC;AAAA,YACAkC,QAAQA,MAAM;AACZlB,cAAAA,EAAAA,EAAQmB,WAAAA;AAAAA,YACV;AAAA,YAAC,IACDhB,UAAO;AAAA,qBAAEH,EAAAA,EAAQI,MAAMC,KAAKC,OAAOC,SAAS;AAAA,YAAC;AAAA,YAAA,IAC7CC,WAAQ;AAAA,qBAAElC,EAAMkC,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAEnC,EAAMmC,YAAY;AAAA,YAAK;AAAA,YAAA,IAAA9B,WAAA;AAAA,qBAAAF,EAEhCL,GAAcgD,EACT7C,GAAM,MACL,OAAOD,EAAMoB,oBAAqB,aAAa;AAAA,gBAClDA,kBAAkBpB,EAAMoB;AAAAA,cAAAA,CACzB,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAjB,EAGJ4C,GAAU;AAAA,YAAA,IAACf,SAAM;AAAA,qBAAEN,EAAAA,EAAQI,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAA7B,EAC5C6C,GAAgB;AAAA,YAAA,IAAA3C,WAAA;AAAA,qBAAEL,EAAMiD;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}

package/dist/components/form/index.d.ts

@@ -14,3 +14,4 @@ export * from './DatePickerField';
 export * from './ComboboxField';
 export * from './TagsInputField';
 export * from './SubmitButton';
+export * from './AutoSubmit';

package/dist/components/form/index.js

@@ -1,40 +1,43 @@
-import { useAppForm as r, withFieldGroup as t, withForm as p } from "./Form.js";
-import { fieldContext as x, formContext as m, useFieldContext as d, useFormContext as f } from "./context.js";
-import { TextInputField as F } from "./TextInputField.js";
-import { TextareaField as n } from "./TextareaField.js";
+import { Form as r, useAppForm as t, withFieldGroup as m, withForm as p } from "./Form.js";
+import { fieldContext as x, formContext as d, useFieldContext as f, useFormContext as F } from "./context.js";
+import { TextInputField as u } from "./TextInputField.js";
+import { TextareaField as a } from "./TextareaField.js";
 import { NumberInputField as s } from "./NumberInputField.js";
-import { PasswordInputField as b } from "./PasswordInputField.js";
+import { PasswordInputField as I } from "./PasswordInputField.js";
 import { PinInputField as c } from "./PinInputField.js";
 import { SelectField as w } from "./SelectField.js";
-import { CheckboxField as P } from "./CheckboxField.js";
-import { SwitchField as k } from "./SwitchField.js";
+import { CheckboxField as T } from "./CheckboxField.js";
+import { SwitchField as A } from "./SwitchField.js";
 import { RadioGroupField as g } from "./RadioGroupField.js";
-import { SliderField as B } from "./SliderField.js";
-import { DatePickerField as N } from "./DatePickerField.js";
-import { ComboboxField as j } from "./ComboboxField.js";
-import { TagsInputField as v } from "./TagsInputField.js";
-import { SubmitButton as z } from "./SubmitButton.js";
+import { SliderField as D } from "./SliderField.js";
+import { DatePickerField as R } from "./DatePickerField.js";
+import { ComboboxField as q } from "./ComboboxField.js";
+import { TagsInputField as y } from "./TagsInputField.js";
+import { SubmitButton as E } from "./SubmitButton.js";
+import { AutoSubmit as J } from "./AutoSubmit.js";
 export {
-  P as CheckboxField,
-  j as ComboboxField,
-  N as DatePickerField,
+  J as AutoSubmit,
+  T as CheckboxField,
+  q as ComboboxField,
+  R as DatePickerField,
+  r as Form,
   s as NumberInputField,
-  b as PasswordInputField,
+  I as PasswordInputField,
   c as PinInputField,
   g as RadioGroupField,
   w as SelectField,
-  B as SliderField,
-  z as SubmitButton,
-  k as SwitchField,
-  v as TagsInputField,
-  F as TextInputField,
-  n as TextareaField,
+  D as SliderField,
+  E as SubmitButton,
+  A as SwitchField,
+  y as TagsInputField,
+  u as TextInputField,
+  a as TextareaField,
   x as fieldContext,
-  m as formContext,
-  r as useAppForm,
-  d as useFieldContext,
-  f as useFormContext,
-  t as withFieldGroup,
+  d as formContext,
+  t as useAppForm,
+  f as useFieldContext,
+  F as useFormContext,
+  m as withFieldGroup,
   p as withForm
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/package.json

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

package/src/components/form/AutoSubmit.tsx

@@ -0,0 +1,38 @@
+import { createEffect, onCleanup, type Component } from 'solid-js';
+
+import { useFormContext } from './context';
+
+const DEFAULT_DEBOUNCE_MS = 300;
+
+export type AutoSubmitProps = {
+  debounce?: number;
+};
+
+export const AutoSubmit: Component<AutoSubmitProps> = (props) => {
+  const form = useFormContext();
+  const values = form.useStore((state) => state.values);
+  const isTouched = form.useStore((state) => state.isTouched);
+
+  createEffect(() => {
+    values();
+
+    if (!isTouched()) {
+      return;
+    }
+
+    const debounceTimer = setTimeout(
+      () => {
+        form.handleSubmit().catch((error: unknown) => {
+          throw error;
+        });
+      },
+      Math.max(0, props.debounce ?? DEFAULT_DEBOUNCE_MS),
+    );
+
+    onCleanup(() => {
+      clearTimeout(debounceTimer);
+    });
+  });
+
+  return <></>;
+};

package/src/components/form/ComboboxField.tsx

@@ -15,34 +15,39 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@
 
 import { useFieldContext } from './context';
 
-export type ComboboxFieldProps = ComboboxRootProps<string> & {
+export type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> & {
+  collection: ComboboxRootProps<string>['collection'];
   label?: string;
   description?: string;
   showTrigger?: boolean;
-  showClear?: boolean;
+  showClearTrigger?: boolean;
 } & { class?: string };
 
 const ComboboxInputGroup: Component<
   ComponentProps<typeof ComboboxInput> & {
     showTrigger?: boolean | undefined;
-    showClear?: boolean | undefined;
+    showClearTrigger?: boolean | undefined;
   }
-> = (props) => (
-  <>
-    <ComboboxControl>
-      <ComboboxInput placeholder={props.placeholder} />
-      <div class='gap-1 flex items-center'>
-        {props.showClear === true && <ComboboxClearTrigger />}
-        {props.showTrigger === true && <ComboboxTrigger />}
-      </div>
-    </ComboboxControl>
-    <ComboboxPositioner>
-      <ComboboxContent>
-        <ComboboxList>{props.children}</ComboboxList>
-      </ComboboxContent>
-    </ComboboxPositioner>
-  </>
-);
+> = (props) => {
+  const [local, others] = splitProps(props, ['showTrigger', 'showClearTrigger', 'children']);
+
+  return (
+    <>
+      <ComboboxControl>
+        <ComboboxInput {...others} />
+        <div class='gap-1 flex items-center'>
+          {local.showClearTrigger === true && <ComboboxClearTrigger />}
+          {local.showTrigger === true && <ComboboxTrigger />}
+        </div>
+      </ComboboxControl>
+      <ComboboxPositioner>
+        <ComboboxContent>
+          <ComboboxList>{local.children}</ComboboxList>
+        </ComboboxContent>
+      </ComboboxPositioner>
+    </>
+  );
+};
 
 const COMBOBOX_FIELD_PROPS = [
   'label',
@@ -50,9 +55,9 @@ const COMBOBOX_FIELD_PROPS = [
   'required',
   'disabled',
   'readOnly',
-  'placeholder',
+  'collection',
   'showTrigger',
-  'showClear',
+  'showClearTrigger',
   'children',
 ] as const;
 
@@ -69,7 +74,8 @@ export const ComboboxField: Component<ComboboxFieldProps> = (props) => {
     >
       <FieldLabel>{local.label}</FieldLabel>
       <FieldContent>
-        <Combobox
+        <Combobox<string>
+          collection={local.collection}
           value={field().state.value}
           onValueChange={(details) => {
             field().handleChange(details.value);
@@ -80,12 +86,11 @@ export const ComboboxField: Component<ComboboxFieldProps> = (props) => {
           invalid={field().state.meta.errors.length > 0}
           disabled={local.disabled ?? false}
           readOnly={local.readOnly ?? false}
-          {...others}
         >
           <ComboboxInputGroup
-            placeholder={local.placeholder}
             showTrigger={local.showTrigger}
-            showClear={local.showClear}
+            showClearTrigger={local.showClearTrigger}
+            {...others}
           >
             {local.children}
           </ComboboxInputGroup>

package/src/components/form/DatePickerField.tsx

@@ -1,4 +1,4 @@
-import type { DatePickerInputProps, DatePickerRootProps, DateValue } from '@ark-ui/solid';
+import type { DatePickerInputProps, DateValue } from '@ark-ui/solid';
 import type { Component } from 'solid-js';
 
 import {
@@ -14,24 +14,33 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@
 
 import { useFieldContext } from './context';
 
-export type DatePickerFieldProps = DatePickerRootProps & {
+export type DatePickerFieldProps = DatePickerInputProps & {
   label?: string;
   description?: string;
+  showTrigger?: boolean;
 };
 
-const DatePickerInputGroup: Component<DatePickerInputProps> = (props) => (
-  <>
-    <DatePickerControl>
-      <DatePickerInput {...props} />
-      <DatePickerTrigger />
-    </DatePickerControl>
-    <DatePickerPositioner>
-      <DatePickerContent>
-        <DatePickerViews />
-      </DatePickerContent>
-    </DatePickerPositioner>
-  </>
-);
+const DatePickerInputGroup: Component<DatePickerInputProps & { showTrigger?: boolean }> = (
+  props,
+) => {
+  const [local, others] = splitProps(props, ['showTrigger']);
+
+  return (
+    <>
+      <DatePickerControl>
+        <DatePickerInput {...others} />
+        <Show when={local.showTrigger !== false}>
+          <DatePickerTrigger />
+        </Show>
+      </DatePickerControl>
+      <DatePickerPositioner>
+        <DatePickerContent>
+          <DatePickerViews />
+        </DatePickerContent>
+      </DatePickerPositioner>
+    </>
+  );
+};
 
 const DATE_PICKER_FIELD_PROPS = [
   'label',
@@ -40,6 +49,7 @@ const DATE_PICKER_FIELD_PROPS = [
   'disabled',
   'readOnly',
   'placeholder',
+  'showTrigger',
 ] as const;
 
 export const DatePickerField: Component<DatePickerFieldProps> = (props) => {
@@ -66,9 +76,12 @@ export const DatePickerField: Component<DatePickerFieldProps> = (props) => {
           invalid={field().state.meta.errors.length > 0}
           disabled={local.disabled ?? false}
           readOnly={local.readOnly ?? false}
-          {...others}
         >
-          <DatePickerInputGroup placeholder={local.placeholder} />
+          <DatePickerInputGroup
+            {...others}
+            placeholder={local.placeholder}
+            {...(typeof local.showTrigger === 'boolean' && { showTrigger: local.showTrigger })}
+          />
         </DatePicker>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>

package/src/components/form/Form.tsx

@@ -1,8 +1,11 @@
 import { createFormHook } from '@tanstack/solid-form';
+import { splitProps, type Component, type ComponentProps } from 'solid-js';
+import { cn } from 'tailwind-variants';
 
+import { AutoSubmit } from './AutoSubmit';
 import { CheckboxField } from './CheckboxField';
 import { ComboboxField } from './ComboboxField';
-import { formContext, fieldContext } from './context';
+import { fieldContext, formContext, useFormContext } from './context';
 import { DatePickerField } from './DatePickerField';
 import { NumberInputField } from './NumberInputField';
 import { PasswordInputField } from './PasswordInputField';
@@ -16,6 +19,29 @@ import { TagsInputField } from './TagsInputField';
 import { TextareaField } from './TextareaField';
 import { TextInputField } from './TextInputField';
 
+export type FormProps = Omit<ComponentProps<'form'>, 'onSubmit'>;
+
+export const Form: Component<FormProps> = (props) => {
+  const form = useFormContext();
+  const [local, formProps] = splitProps(props, ['children', 'class']);
+
+  return (
+    <form
+      class={cn('space-y-6 relative', local.class)}
+      onSubmit={(submitEvent) => {
+        submitEvent.preventDefault();
+        submitEvent.stopPropagation();
+        form.handleSubmit().catch((error: unknown) => {
+          throw error;
+        });
+      }}
+      {...formProps}
+    >
+      {local.children}
+    </form>
+  );
+};
+
 export const { useAppForm, withForm, withFieldGroup } = createFormHook({
   formContext,
   fieldContext,
@@ -35,6 +61,8 @@ export const { useAppForm, withForm, withFieldGroup } = createFormHook({
     TextareaField,
   },
   formComponents: {
+    AutoSubmit,
+    Form,
     SubmitButton,
   },
 });

package/src/components/form/NumberInputField.tsx

@@ -10,10 +10,10 @@ import {
 
 import { useFieldContext } from './context';
 
-export type NumberInputFieldProps = ComponentProps<typeof NumberInput> & {
+export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & {
   label?: string;
   description?: string;
-  triggers?: boolean;
+  showTriggers?: boolean;
 };
 
 export const NumberInputField: Component<NumberInputFieldProps> = (props) => {
@@ -24,7 +24,7 @@ export const NumberInputField: Component<NumberInputFieldProps> = (props) => {
     'required',
     'disabled',
     'readOnly',
-    'triggers',
+    'showTriggers',
   ]);
 
   return (
@@ -48,11 +48,10 @@ export const NumberInputField: Component<NumberInputFieldProps> = (props) => {
           disabled={local.disabled ?? false}
           readOnly={local.readOnly ?? false}
           required={local.required ?? false}
-          {...others}
         >
           <NumberInputControl>
-            <NumberInputInput />
-            <Show when={local.triggers !== false}>
+            <NumberInputInput {...others} />
+            <Show when={local.showTriggers !== false}>
               <NumberInputTriggers />
             </Show>
           </NumberInputControl>

package/src/components/form/PasswordInputField.tsx

@@ -14,6 +14,7 @@ import { useFieldContext } from './context';
 export type PasswordInputFieldProps = ComponentProps<typeof PasswordInputInput> & {
   label?: string;
   description?: string;
+  showVisibilityTrigger?: boolean;
 };
 
 export const PasswordInputField: Component<PasswordInputFieldProps> = (props) => {
@@ -24,6 +25,7 @@ export const PasswordInputField: Component<PasswordInputFieldProps> = (props) =>
     'required',
     'disabled',
     'readOnly',
+    'showVisibilityTrigger',
   ]);
 
   return (
@@ -52,9 +54,11 @@ export const PasswordInputField: Component<PasswordInputFieldProps> = (props) =>
               }}
               {...others}
             />
-            <PasswordInputVisibilityTrigger>
-              <PasswordInputIndicator />
-            </PasswordInputVisibilityTrigger>
+            <Show when={local.showVisibilityTrigger !== false}>
+              <PasswordInputVisibilityTrigger>
+                <PasswordInputIndicator />
+              </PasswordInputVisibilityTrigger>
+            </Show>
           </PasswordInputControl>
         </PasswordInput>
         <FieldError errors={field().state.meta.errors} />