@manafishrov/ui 1.3.4 → 1.3.6

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\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":";;;;;AAmBA,MAAMA,IAAwB,CAC5B,OACA,aACA,aACA,cACA,gBACA,YACA,aACA,YACA,iBACA,gBACA,OACA,kBACA,qBACA,sBACA,qBACA,wBACA,gBAAgB,GAUZC,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,GAC1D,CAACI,GAAWC,CAAU,IAAI3B,EAAWD,GAAQJ,CAAqB;AAExE,SAAAM,EACG2B,GAAK;AAAA,IAAA,IACJC,UAAO;AAAA,aAAEL,EAAAA,EAAQM,MAAMC,KAAKC,OAAOC,SAAS;AAAA,IAAC;AAAA,IAAA,IAC7CC,WAAQ;AAAA,aAAEpC,EAAMoC,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAErC,EAAMqC,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEtC,EAAMsC,YAAY;AAAA,IAAK;AAAA,IAAA,IAAAjC,WAAA;AAAA,aAAA,CAAAF,EAEhCoC,GAAU;AAAA,QAAA,IAAAlC,WAAA;AAAA,iBAAEL,EAAMwC;AAAAA,QAAK;AAAA,MAAA,CAAA,GAAArC,EACvBsC,GAAY;AAAA,QAAA,IAAApC,WAAA;AAAA,iBAAA,CAAAF,EACVuC,GAASC,EAAA;AAAA,YAAA,IACRjC,QAAK;AAAA,qBAAEgB,EAAAA,EAAQM,MAAMtB;AAAAA,YAAK;AAAA,YAC1BkC,eAAgBC,CAAAA,MAAY;AAC1BnB,cAAAA,IAAQoB,aAAaD,EAAQnC,KAAK;AAAA,YACpC;AAAA,YACAqC,QAAQA,MAAM;AACZrB,cAAAA,EAAAA,EAAQsB,WAAAA;AAAAA,YACV;AAAA,YAAC,IACDjB,UAAO;AAAA,qBAAEL,EAAAA,EAAQM,MAAMC,KAAKC,OAAOC,SAAS;AAAA,YAAC;AAAA,YAAA,IAC7CC,WAAQ;AAAA,qBAAEpC,EAAMoC,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAErC,EAAMqC,YAAY;AAAA,YAAK;AAAA,UAAA,GAC7BT,GAAS;AAAA,YAAA,IAAAvB,WAAA;AAAA,qBAAAF,EAEZL,GAAc6C,EACTd,GAAU,MACT,OAAO7B,EAAMoB,oBAAqB,aAAa;AAAA,gBAClDA,kBAAkBpB,EAAMoB;AAAAA,cAAAA,CACzB,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,CAAA,GAAAjB,EAGJ8C,GAAU;AAAA,YAAA,IAACf,SAAM;AAAA,qBAAER,EAAAA,EAAQM,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAA/B,EAC5C+C,GAAgB;AAAA,YAAA,IAAA7C,WAAA;AAAA,qBAAEL,EAAMmD;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}
+{"version":3,"file":"TagsInputField.js","sources":["../../../src/components/form/TagsInputField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSXElement } 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';\nimport { WithTrailingAddon } from './WithTrailingAddon';\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    trailingAddon?: JSXElement;\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  'trailingAddon',\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        <WithTrailingAddon addon={local.trailingAddon}>\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        </WithTrailingAddon>\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","WithTrailingAddon","addon","trailingAddon","TagsInput","_$mergeProps","onValueChange","details","handleChange","onBlur","handleBlur","FieldError","FieldDescription","description"],"mappings":"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"}

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

@@ -1,7 +1,8 @@
-import { Component, ComponentProps } from 'solid-js';
+import { Component, ComponentProps, JSXElement } from 'solid-js';
 import { TextInputInput } from '../TextInput';
 export type TextInputFieldProps = ComponentProps<typeof TextInputInput> & {
     label?: string;
     description?: string;
+    trailingAddon?: JSXElement;
 };
 export declare const TextInputField: Component<TextInputFieldProps>;

package/dist/components/form/TextInputField.js

@@ -1,51 +1,59 @@
-import { createComponent as e, mergeProps as o } from "solid-js/web";
-import { splitProps as d } from "solid-js";
-import { Field as a, FieldLabel as u, FieldContent as s, FieldError as p, FieldDescription as g } from "../Field.js";
-import { TextInputControl as m, TextInputInput as c } from "../TextInput.js";
-import { useFieldContext as h } from "./context.js";
-const I = (n) => {
-  const r = h(), [t, l] = d(n, ["label", "description", "required", "disabled", "readOnly"]);
-  return e(a, {
+import { createComponent as e, mergeProps as d } from "solid-js/web";
+import { Field as o, FieldLabel as a, FieldContent as u, FieldError as s, FieldDescription as g } from "../Field.js";
+import { TextInputControl as p, TextInputInput as m } from "../TextInput.js";
+import { useFieldContext as c } from "./context.js";
+import { WithTrailingAddon as h } from "./WithTrailingAddon.js";
+import { splitProps as f } from "solid-js";
+const T = (n) => {
+  const t = c(), [r, l] = f(n, ["label", "description", "trailingAddon", "required", "disabled", "readOnly"]);
+  return e(o, {
     get invalid() {
-      return r().state.meta.errors.length > 0;
+      return t().state.meta.errors.length > 0;
     },
     get disabled() {
-      return t.disabled ?? !1;
+      return r.disabled ?? !1;
     },
     get readOnly() {
-      return t.readOnly ?? !1;
+      return r.readOnly ?? !1;
     },
     get required() {
-      return t.required ?? !1;
+      return r.required ?? !1;
     },
     get children() {
-      return [e(u, {
+      return [e(a, {
         get children() {
-          return t.label;
+          return r.label;
         }
-      }), e(s, {
+      }), e(u, {
         get children() {
-          return [e(m, {
+          return [e(h, {
+            get addon() {
+              return r.trailingAddon;
+            },
             get children() {
-              return e(c, o({
-                get value() {
-                  return r().state.value;
-                },
-                onInput: (i) => {
-                  r().handleChange(i.target.value);
-                },
-                onBlur: () => {
-                  r().handleBlur();
+              return e(p, {
+                get children() {
+                  return e(m, d({
+                    get value() {
+                      return t().state.value;
+                    },
+                    onInput: (i) => {
+                      t().handleChange(i.target.value);
+                    },
+                    onBlur: () => {
+                      t().handleBlur();
+                    }
+                  }, l));
                 }
-              }, l));
+              });
             }
-          }), e(p, {
+          }), e(s, {
             get errors() {
-              return r().state.meta.errors;
+              return t().state.meta.errors;
             }
           }), e(g, {
             get children() {
-              return t.description;
+              return r.description;
             }
           })];
         }
@@ -54,6 +62,6 @@ const I = (n) => {
   });
 };
 export {
-  I as TextInputField
+  T as TextInputField
 };
 //# sourceMappingURL=TextInputField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputField.js","sources":["../../../src/components/form/TextInputField.tsx"],"sourcesContent":["import { type Component, type ComponentProps, splitProps } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport { TextInputControl, TextInputInput } from '@/components/TextInput';\n\nimport { useFieldContext } from './context';\n\nexport type TextInputFieldProps = ComponentProps<typeof TextInputInput> & {\n  label?: string;\n  description?: string;\n};\n\nexport const TextInputField: Component<TextInputFieldProps> = (props) => {\n  const field = useFieldContext<string>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n  ]);\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        <TextInputControl>\n          <TextInputInput\n            value={field().state.value}\n            onInput={(event) => {\n              field().handleChange(event.target.value);\n            }}\n            onBlur={() => {\n              field().handleBlur();\n            }}\n            {...others}\n          />\n        </TextInputControl>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["TextInputField","props","field","useFieldContext","local","others","splitProps","_$createComponent","Field","invalid","state","meta","errors","length","disabled","readOnly","required","children","FieldLabel","label","FieldContent","TextInputControl","TextInputInput","_$mergeProps","value","onInput","event","handleChange","target","onBlur","handleBlur","FieldError","FieldDescription","description"],"mappings":";;;;;AAYO,MAAMA,IAAkDC,CAAAA,MAAU;AACvE,QAAMC,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CACxC,SACA,eACA,YACA,YACA,UAAU,CACX;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,GAAgB;AAAA,YAAA,IAAAJ,WAAA;AAAA,qBAAAV,EACde,GAAcC,EAAA;AAAA,gBAAA,IACbC,QAAK;AAAA,yBAAEtB,EAAAA,EAAQQ,MAAMc;AAAAA,gBAAK;AAAA,gBAC1BC,SAAUC,CAAAA,MAAU;AAClBxB,kBAAAA,EAAAA,EAAQyB,aAAaD,EAAME,OAAOJ,KAAK;AAAA,gBACzC;AAAA,gBACAK,QAAQA,MAAM;AACZ3B,kBAAAA,EAAAA,EAAQ4B,WAAAA;AAAAA,gBACV;AAAA,cAAA,GACIzB,CAAM,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAE,EAGbwB,GAAU;AAAA,YAAA,IAACnB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5CyB,GAAgB;AAAA,YAAA,IAAAf,WAAA;AAAA,qBAAEb,EAAM6B;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}
+{"version":3,"file":"TextInputField.js","sources":["../../../src/components/form/TextInputField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSXElement } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport { TextInputControl, TextInputInput } from '@/components/TextInput';\n\nimport { useFieldContext } from './context';\nimport { WithTrailingAddon } from './WithTrailingAddon';\n\nexport type TextInputFieldProps = ComponentProps<typeof TextInputInput> & {\n  label?: string;\n  description?: string;\n  trailingAddon?: JSXElement;\n};\n\nexport const TextInputField: Component<TextInputFieldProps> = (props) => {\n  const field = useFieldContext<string>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'trailingAddon',\n    'required',\n    'disabled',\n    'readOnly',\n  ]);\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        <WithTrailingAddon addon={local.trailingAddon}>\n          <TextInputControl>\n            <TextInputInput\n              value={field().state.value}\n              onInput={(event) => {\n                field().handleChange(event.target.value);\n              }}\n              onBlur={() => {\n                field().handleBlur();\n              }}\n              {...others}\n            />\n          </TextInputControl>\n        </WithTrailingAddon>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["TextInputField","props","field","useFieldContext","local","others","splitProps","_$createComponent","Field","invalid","state","meta","errors","length","disabled","readOnly","required","children","FieldLabel","label","FieldContent","WithTrailingAddon","addon","trailingAddon","TextInputControl","TextInputInput","_$mergeProps","value","onInput","event","handleChange","target","onBlur","handleBlur","FieldError","FieldDescription","description"],"mappings":";;;;;;AAcO,MAAMA,IAAkDC,CAAAA,MAAU;AACvE,QAAMC,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CACxC,SACA,eACA,iBACA,YACA,YACA,UAAU,CACX;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,GAAiB;AAAA,YAAA,IAACC,QAAK;AAAA,qBAAElB,EAAMmB;AAAAA,YAAa;AAAA,YAAA,IAAAN,WAAA;AAAA,qBAAAV,EAC1CiB,GAAgB;AAAA,gBAAA,IAAAP,WAAA;AAAA,yBAAAV,EACdkB,GAAcC,EAAA;AAAA,oBAAA,IACbC,QAAK;AAAA,6BAAEzB,EAAAA,EAAQQ,MAAMiB;AAAAA,oBAAK;AAAA,oBAC1BC,SAAUC,CAAAA,MAAU;AAClB3B,sBAAAA,EAAAA,EAAQ4B,aAAaD,EAAME,OAAOJ,KAAK;AAAA,oBACzC;AAAA,oBACAK,QAAQA,MAAM;AACZ9B,sBAAAA,EAAAA,EAAQ+B,WAAAA;AAAAA,oBACV;AAAA,kBAAA,GACI5B,CAAM,CAAA;AAAA,gBAAA;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAE,EAIf2B,GAAU;AAAA,YAAA,IAACtB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5C4B,GAAgB;AAAA,YAAA,IAAAlB,WAAA;AAAA,qBAAEb,EAAMgC;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}

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

@@ -1,7 +1,8 @@
-import { Component, ComponentProps } from 'solid-js';
+import { Component, ComponentProps, JSXElement } from 'solid-js';
 import { TextInputArea } from '../TextInput';
 export type TextareaFieldProps = ComponentProps<typeof TextInputArea> & {
     label?: string;
     description?: string;
+    trailingAddon?: JSXElement;
 };
 export declare const TextareaField: Component<TextareaFieldProps>;

package/dist/components/form/TextareaField.js

@@ -1,51 +1,59 @@
-import { createComponent as e, mergeProps as o } from "solid-js/web";
-import { Field as a, FieldLabel as d, FieldContent as u, FieldError as s, FieldDescription as p } from "../Field.js";
-import { TextInputControl as g, TextInputArea as m } from "../TextInput.js";
+import { createComponent as e, mergeProps as d } from "solid-js/web";
+import { Field as o, FieldLabel as a, FieldContent as u, FieldError as s, FieldDescription as g } from "../Field.js";
+import { TextInputControl as p, TextInputArea as m } from "../TextInput.js";
 import { useFieldContext as c } from "./context.js";
-import { splitProps as h } from "solid-js";
-const v = (n) => {
-  const r = c(), [t, l] = h(n, ["label", "description", "required", "disabled", "readOnly"]);
-  return e(a, {
+import { WithTrailingAddon as h } from "./WithTrailingAddon.js";
+import { splitProps as f } from "solid-js";
+const T = (n) => {
+  const t = c(), [r, l] = f(n, ["label", "description", "required", "disabled", "readOnly", "trailingAddon"]);
+  return e(o, {
     get invalid() {
-      return r().state.meta.errors.length > 0;
+      return t().state.meta.errors.length > 0;
     },
     get disabled() {
-      return t.disabled ?? !1;
+      return r.disabled ?? !1;
     },
     get readOnly() {
-      return t.readOnly ?? !1;
+      return r.readOnly ?? !1;
     },
     get required() {
-      return t.required ?? !1;
+      return r.required ?? !1;
     },
     get children() {
-      return [e(d, {
+      return [e(a, {
         get children() {
-          return t.label;
+          return r.label;
         }
       }), e(u, {
         get children() {
-          return [e(g, {
+          return [e(h, {
+            get addon() {
+              return r.trailingAddon;
+            },
             get children() {
-              return e(m, o({
-                get value() {
-                  return r().state.value;
-                },
-                onInput: (i) => {
-                  r().handleChange(i.target.value);
-                },
-                onBlur: () => {
-                  r().handleBlur();
+              return e(p, {
+                get children() {
+                  return e(m, d({
+                    get value() {
+                      return t().state.value;
+                    },
+                    onInput: (i) => {
+                      t().handleChange(i.target.value);
+                    },
+                    onBlur: () => {
+                      t().handleBlur();
+                    }
+                  }, l));
                 }
-              }, l));
+              });
             }
           }), e(s, {
             get errors() {
-              return r().state.meta.errors;
+              return t().state.meta.errors;
             }
-          }), e(p, {
+          }), e(g, {
             get children() {
-              return t.description;
+              return r.description;
             }
           })];
         }
@@ -54,6 +62,6 @@ const v = (n) => {
   });
 };
 export {
-  v as TextareaField
+  T as TextareaField
 };
 //# sourceMappingURL=TextareaField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextareaField.js","sources":["../../../src/components/form/TextareaField.tsx"],"sourcesContent":["import type { Component, ComponentProps } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport { TextInputControl, TextInputArea } from '@/components/TextInput';\n\nimport { useFieldContext } from './context';\n\nexport type TextareaFieldProps = ComponentProps<typeof TextInputArea> & {\n  label?: string;\n  description?: string;\n};\n\nexport const TextareaField: Component<TextareaFieldProps> = (props) => {\n  const field = useFieldContext<string>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n  ]);\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        <TextInputControl>\n          <TextInputArea\n            value={field().state.value}\n            onInput={(event) => {\n              field().handleChange(event.target.value);\n            }}\n            onBlur={() => {\n              field().handleBlur();\n            }}\n            {...others}\n          />\n        </TextInputControl>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["TextareaField","props","field","useFieldContext","local","others","splitProps","_$createComponent","Field","invalid","state","meta","errors","length","disabled","readOnly","required","children","FieldLabel","label","FieldContent","TextInputControl","TextInputArea","_$mergeProps","value","onInput","event","handleChange","target","onBlur","handleBlur","FieldError","FieldDescription","description"],"mappings":";;;;;AAYO,MAAMA,IAAgDC,CAAAA,MAAU;AACrE,QAAMC,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CACxC,SACA,eACA,YACA,YACA,UAAU,CACX;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,GAAgB;AAAA,YAAA,IAAAJ,WAAA;AAAA,qBAAAV,EACde,GAAaC,EAAA;AAAA,gBAAA,IACZC,QAAK;AAAA,yBAAEtB,EAAAA,EAAQQ,MAAMc;AAAAA,gBAAK;AAAA,gBAC1BC,SAAUC,CAAAA,MAAU;AAClBxB,kBAAAA,EAAAA,EAAQyB,aAAaD,EAAME,OAAOJ,KAAK;AAAA,gBACzC;AAAA,gBACAK,QAAQA,MAAM;AACZ3B,kBAAAA,EAAAA,EAAQ4B,WAAAA;AAAAA,gBACV;AAAA,cAAA,GACIzB,CAAM,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAE,EAGbwB,GAAU;AAAA,YAAA,IAACnB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5CyB,GAAgB;AAAA,YAAA,IAAAf,WAAA;AAAA,qBAAEb,EAAM6B;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}
+{"version":3,"file":"TextareaField.js","sources":["../../../src/components/form/TextareaField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSXElement } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport { TextInputControl, TextInputArea } from '@/components/TextInput';\n\nimport { useFieldContext } from './context';\nimport { WithTrailingAddon } from './WithTrailingAddon';\n\nexport type TextareaFieldProps = ComponentProps<typeof TextInputArea> & {\n  label?: string;\n  description?: string;\n  trailingAddon?: JSXElement;\n};\n\nexport const TextareaField: Component<TextareaFieldProps> = (props) => {\n  const field = useFieldContext<string>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'trailingAddon',\n  ]);\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        <WithTrailingAddon addon={local.trailingAddon}>\n          <TextInputControl>\n            <TextInputArea\n              value={field().state.value}\n              onInput={(event) => {\n                field().handleChange(event.target.value);\n              }}\n              onBlur={() => {\n                field().handleBlur();\n              }}\n              {...others}\n            />\n          </TextInputControl>\n        </WithTrailingAddon>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["TextareaField","props","field","useFieldContext","local","others","splitProps","_$createComponent","Field","invalid","state","meta","errors","length","disabled","readOnly","required","children","FieldLabel","label","FieldContent","WithTrailingAddon","addon","trailingAddon","TextInputControl","TextInputArea","_$mergeProps","value","onInput","event","handleChange","target","onBlur","handleBlur","FieldError","FieldDescription","description"],"mappings":";;;;;;AAcO,MAAMA,IAAgDC,CAAAA,MAAU;AACrE,QAAMC,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CACxC,SACA,eACA,YACA,YACA,YACA,eAAe,CAChB;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,GAAiB;AAAA,YAAA,IAACC,QAAK;AAAA,qBAAElB,EAAMmB;AAAAA,YAAa;AAAA,YAAA,IAAAN,WAAA;AAAA,qBAAAV,EAC1CiB,GAAgB;AAAA,gBAAA,IAAAP,WAAA;AAAA,yBAAAV,EACdkB,GAAaC,EAAA;AAAA,oBAAA,IACZC,QAAK;AAAA,6BAAEzB,EAAAA,EAAQQ,MAAMiB;AAAAA,oBAAK;AAAA,oBAC1BC,SAAUC,CAAAA,MAAU;AAClB3B,sBAAAA,EAAAA,EAAQ4B,aAAaD,EAAME,OAAOJ,KAAK;AAAA,oBACzC;AAAA,oBACAK,QAAQA,MAAM;AACZ9B,sBAAAA,EAAAA,EAAQ+B,WAAAA;AAAAA,oBACV;AAAA,kBAAA,GACI5B,CAAM,CAAA;AAAA,gBAAA;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAE,EAIf2B,GAAU;AAAA,YAAA,IAACtB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5C4B,GAAgB;AAAA,YAAA,IAAAlB,WAAA;AAAA,qBAAEb,EAAMgC;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}

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

@@ -0,0 +1,6 @@
+import { Component, JSXElement } from 'solid-js';
+export type WithTrailingAddonProps = {
+    addon?: JSXElement;
+    children: JSXElement;
+};
+export declare const WithTrailingAddon: Component<WithTrailingAddonProps>;

package/dist/components/form/WithTrailingAddon.js

@@ -0,0 +1,18 @@
+import { createComponent as l, Show as r, insert as t, template as a } from "solid-js/web";
+var d = /* @__PURE__ */ a('<div class="gap-2 flex items-center">');
+const c = (e) => l(r, {
+  get when() {
+    return e.addon;
+  },
+  get fallback() {
+    return e.children;
+  },
+  get children() {
+    var n = d();
+    return t(n, () => e.children, null), t(n, () => e.addon, null), n;
+  }
+});
+export {
+  c as WithTrailingAddon
+};
+//# sourceMappingURL=WithTrailingAddon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WithTrailingAddon.js","sources":["../../../src/components/form/WithTrailingAddon.tsx"],"sourcesContent":["import type { Component, JSXElement } from 'solid-js';\n\nexport type WithTrailingAddonProps = {\n  addon?: JSXElement;\n  children: JSXElement;\n};\n\nexport const WithTrailingAddon: Component<WithTrailingAddonProps> = (props) => (\n  <Show when={props.addon} fallback={props.children}>\n    <div class='gap-2 flex items-center'>\n      {props.children}\n      {props.addon}\n    </div>\n  </Show>\n);\n"],"names":["WithTrailingAddon","props","_$createComponent","_$Show","when","addon","fallback","children","_el$","_tmpl$","_$insert"],"mappings":";;AAOO,MAAMA,IAAwDC,CAAAA,MAAKC,EACvEC,GAAI;AAAA,EAAA,IAACC,OAAI;AAAA,WAAEH,EAAMI;AAAAA,EAAK;AAAA,EAAA,IAAEC,WAAQ;AAAA,WAAEL,EAAMM;AAAAA,EAAQ;AAAA,EAAA,IAAAA,WAAA;AAAA,QAAAC,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAA,MAE5CP,EAAMM,UAAQ,IAAA,GAAAG,EAAAF,GAAA,MACdP,EAAMI,OAAK,IAAA,GAAAG;AAAAA,EAAA;AAAA,CAAA;"}

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

@@ -1,3 +1,4 @@
+export * from './WithTrailingAddon';
 export * from './Form';
 export * from './context';
 export * from './TextInputField';
@@ -15,3 +16,4 @@ export * from './ComboboxField';
 export * from './TagsInputField';
 export * from './SubmitButton';
 export * from './AutoSubmit';
+export * from './WithTrailingAddon';

package/dist/components/form/index.js

@@ -1,43 +1,45 @@
-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 I } from "./PasswordInputField.js";
-import { PinInputField as c } from "./PinInputField.js";
-import { SelectField as w } from "./SelectField.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 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";
+import { WithTrailingAddon as r } from "./WithTrailingAddon.js";
+import { Form as i, useAppForm as m, withFieldGroup as p, withForm as x } from "./Form.js";
+import { fieldContext as f, formContext as l, useFieldContext as F, useFormContext as u } from "./context.js";
+import { TextInputField as a } from "./TextInputField.js";
+import { TextareaField as s } from "./TextareaField.js";
+import { NumberInputField as h } from "./NumberInputField.js";
+import { PasswordInputField as S } from "./PasswordInputField.js";
+import { PinInputField as w } from "./PinInputField.js";
+import { SelectField as A } from "./SelectField.js";
+import { CheckboxField as g } from "./CheckboxField.js";
+import { SwitchField as G } from "./SwitchField.js";
+import { RadioGroupField as D } from "./RadioGroupField.js";
+import { SliderField as R } from "./SliderField.js";
+import { DatePickerField as j } from "./DatePickerField.js";
+import { ComboboxField as v } from "./ComboboxField.js";
+import { TagsInputField as z } from "./TagsInputField.js";
+import { SubmitButton as H } from "./SubmitButton.js";
+import { AutoSubmit as K } from "./AutoSubmit.js";
 export {
-  J as AutoSubmit,
-  T as CheckboxField,
-  q as ComboboxField,
-  R as DatePickerField,
-  r as Form,
-  s as NumberInputField,
-  I as PasswordInputField,
-  c as PinInputField,
-  g as RadioGroupField,
-  w as SelectField,
-  D as SliderField,
-  E as SubmitButton,
-  A as SwitchField,
-  y as TagsInputField,
-  u as TextInputField,
-  a as TextareaField,
-  x as fieldContext,
-  d as formContext,
-  t as useAppForm,
-  f as useFieldContext,
-  F as useFormContext,
-  m as withFieldGroup,
-  p as withForm
+  K as AutoSubmit,
+  g as CheckboxField,
+  v as ComboboxField,
+  j as DatePickerField,
+  i as Form,
+  h as NumberInputField,
+  S as PasswordInputField,
+  w as PinInputField,
+  D as RadioGroupField,
+  A as SelectField,
+  R as SliderField,
+  H as SubmitButton,
+  G as SwitchField,
+  z as TagsInputField,
+  a as TextInputField,
+  s as TextareaField,
+  r as WithTrailingAddon,
+  f as fieldContext,
+  l as formContext,
+  m as useAppForm,
+  F as useFieldContext,
+  u as useFormContext,
+  p as withFieldGroup,
+  x 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.3.4",
+  "version": "1.3.6",
   "description": "Styled component library for Manafish interfaces ",
   "license": "AGPL-3.0-or-later",
   "repository": {

package/src/components/form/AutoSubmit.tsx

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

package/src/components/form/ComboboxField.tsx

@@ -1,5 +1,5 @@
 import type { ComboboxRootProps } from '@ark-ui/solid';
-import type { Component, ComponentProps } from 'solid-js';
+import type { Component, ComponentProps, JSXElement } from 'solid-js';
 
 import {
   Combobox,
@@ -14,6 +14,7 @@ import {
 import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';
 
 import { useFieldContext } from './context';
+import { WithTrailingAddon } from './WithTrailingAddon';
 
 const COMBOBOX_ROOT_PROPS = [
   'placeholder',
@@ -64,6 +65,7 @@ export type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> &
     description?: string;
     showTrigger?: boolean;
     showClearTrigger?: boolean;
+    trailingAddon?: JSXElement;
   } & { class?: string };
 
 const ComboboxInputGroup: Component<
@@ -102,6 +104,7 @@ const COMBOBOX_FIELD_PROPS = [
   'showTrigger',
   'showClearTrigger',
   'children',
+  'trailingAddon',
 ] as const;
 
 export const ComboboxField: Component<ComboboxFieldProps> = (props) => {
@@ -118,28 +121,30 @@ export const ComboboxField: Component<ComboboxFieldProps> = (props) => {
     >
       <FieldLabel>{local.label}</FieldLabel>
       <FieldContent>
-        <Combobox<string>
-          collection={local.collection}
-          value={field().state.value}
-          onValueChange={(details) => {
-            field().handleChange(details.value);
-          }}
-          onBlur={() => {
-            field().handleBlur();
-          }}
-          invalid={field().state.meta.errors.length > 0}
-          disabled={local.disabled ?? false}
-          readOnly={local.readOnly ?? false}
-          {...rootProps}
-        >
-          <ComboboxInputGroup
-            showTrigger={local.showTrigger}
-            showClearTrigger={local.showClearTrigger}
-            {...inputProps}
+        <WithTrailingAddon addon={local.trailingAddon}>
+          <Combobox<string>
+            collection={local.collection}
+            value={field().state.value}
+            onValueChange={(details) => {
+              field().handleChange(details.value);
+            }}
+            onBlur={() => {
+              field().handleBlur();
+            }}
+            invalid={field().state.meta.errors.length > 0}
+            disabled={local.disabled ?? false}
+            readOnly={local.readOnly ?? false}
+            {...rootProps}
           >
-            {local.children}
-          </ComboboxInputGroup>
-        </Combobox>
+            <ComboboxInputGroup
+              showTrigger={local.showTrigger}
+              showClearTrigger={local.showClearTrigger}
+              {...inputProps}
+            >
+              {local.children}
+            </ComboboxInputGroup>
+          </Combobox>
+        </WithTrailingAddon>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>
       </FieldContent>