@manafishrov/ui 1.3.4 → 1.3.6

package/dist/components/form/RadioGroupField.js

@@ -1,13 +1,14 @@
-import { createComponent as t, mergeProps as i, memo as a } from "solid-js/web";
-import { splitProps as o } from "solid-js";
-import { Field as u, FieldContent as s, FieldError as g, FieldDescription as m } from "../Field.js";
-import { RadioGroup as p, RadioGroupLabel as c } from "../RadioGroup.js";
-import { useFieldContext as h } from "./context.js";
-const y = (l) => {
-  const r = h(), [e, n] = o(l, ["label", "description", "required", "disabled", "readOnly", "children"]);
-  return t(u, {
+import { createComponent as r, mergeProps as i, memo as a } from "solid-js/web";
+import { Field as o, FieldContent as u, FieldError as s, FieldDescription as g } from "../Field.js";
+import { RadioGroup as m, RadioGroupLabel as p } from "../RadioGroup.js";
+import { useFieldContext as c } from "./context.js";
+import { WithTrailingAddon as h } from "./WithTrailingAddon.js";
+import { splitProps as f } from "solid-js";
+const O = (n) => {
+  const t = c(), [e, l] = f(n, ["label", "description", "required", "disabled", "readOnly", "children", "trailingAddon"]);
+  return r(o, {
     get invalid() {
-      return r().state.meta.errors.length > 0;
+      return t().state.meta.errors.length > 0;
     },
     get required() {
       return e.required ?? !1;
@@ -19,43 +20,50 @@ const y = (l) => {
       return e.readOnly ?? !1;
     },
     get children() {
-      return t(s, {
+      return r(u, {
         get children() {
-          return [t(p, i({
-            get value() {
-              return r().state.value;
+          return [r(h, {
+            get addon() {
+              return e.trailingAddon;
             },
-            onValueChange: (d) => {
-              r().handleChange(d.value ?? "");
-            },
-            onBlur: () => {
-              r().handleBlur();
-            },
-            get invalid() {
-              return r().state.meta.errors.length > 0;
-            },
-            get disabled() {
-              return e.disabled ?? !1;
-            },
-            get readOnly() {
-              return e.readOnly ?? !1;
-            },
-            get required() {
-              return e.required ?? !1;
-            }
-          }, n, {
             get children() {
-              return [t(c, {
+              return r(m, i({
+                get value() {
+                  return t().state.value;
+                },
+                onValueChange: (d) => {
+                  t().handleChange(d.value ?? "");
+                },
+                onBlur: () => {
+                  t().handleBlur();
+                },
+                get invalid() {
+                  return t().state.meta.errors.length > 0;
+                },
+                get disabled() {
+                  return e.disabled ?? !1;
+                },
+                get readOnly() {
+                  return e.readOnly ?? !1;
+                },
+                get required() {
+                  return e.required ?? !1;
+                }
+              }, l, {
                 get children() {
-                  return e.label;
+                  return [r(p, {
+                    get children() {
+                      return e.label;
+                    }
+                  }), a(() => e.children)];
                 }
-              }), a(() => e.children)];
+              }));
             }
-          })), t(g, {
+          }), r(s, {
             get errors() {
-              return r().state.meta.errors;
+              return t().state.meta.errors;
             }
-          }), t(m, {
+          }), r(g, {
             get children() {
               return e.description;
             }
@@ -66,6 +74,6 @@ const y = (l) => {
   });
 };
 export {
-  y as RadioGroupField
+  O as RadioGroupField
 };
 //# sourceMappingURL=RadioGroupField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupField.js","sources":["../../../src/components/form/RadioGroupField.tsx"],"sourcesContent":["import { type Component, type ComponentProps, splitProps } from 'solid-js';\n\nimport { Field, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport { RadioGroup, RadioGroupLabel } from '@/components/RadioGroup';\n\nimport { useFieldContext } from './context';\n\nexport type RadioGroupFieldProps = ComponentProps<typeof RadioGroup> & {\n  label?: string;\n  description?: string;\n};\n\nexport const RadioGroupField: Component<RadioGroupFieldProps> = (props) => {\n  const field = useFieldContext<string>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'children',\n  ]);\n\n  return (\n    <Field\n      invalid={field().state.meta.errors.length > 0}\n      required={local.required ?? false}\n      disabled={local.disabled ?? false}\n      readOnly={local.readOnly ?? false}\n    >\n      <FieldContent>\n        <RadioGroup\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          required={local.required ?? false}\n          {...others}\n        >\n          <RadioGroupLabel>{local.label}</RadioGroupLabel>\n          {local.children}\n        </RadioGroup>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["RadioGroupField","props","field","useFieldContext","local","others","splitProps","_$createComponent","Field","invalid","state","meta","errors","length","required","disabled","readOnly","children","FieldContent","RadioGroup","_$mergeProps","value","onValueChange","details","handleChange","onBlur","handleBlur","RadioGroupLabel","label","_$memo","FieldError","FieldDescription","description"],"mappings":";;;;;AAYO,MAAMA,IAAoDC,CAAAA,MAAU;AACzE,QAAMC,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CACxC,SACA,eACA,YACA,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,aAAAV,EAEhCW,GAAY;AAAA,QAAA,IAAAD,WAAA;AAAA,iBAAA,CAAAV,EACVY,GAAUC,EAAA;AAAA,YAAA,IACTC,QAAK;AAAA,qBAAEnB,EAAAA,EAAQQ,MAAMW;AAAAA,YAAK;AAAA,YAC1BC,eAAgBC,CAAAA,MAAY;AAC1BrB,cAAAA,EAAAA,EAAQsB,aAAaD,EAAQF,SAAS,EAAE;AAAA,YAC1C;AAAA,YACAI,QAAQA,MAAM;AACZvB,cAAAA,EAAAA,EAAQwB,WAAAA;AAAAA,YACV;AAAA,YAAC,IACDjB,UAAO;AAAA,qBAAEP,EAAAA,EAAQQ,MAAMC,KAAKC,OAAOC,SAAS;AAAA,YAAC;AAAA,YAAA,IAC7CE,WAAQ;AAAA,qBAAEX,EAAMW,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAEZ,EAAMY,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCF,WAAQ;AAAA,qBAAEV,EAAMU,YAAY;AAAA,YAAK;AAAA,UAAA,GAC7BT,GAAM;AAAA,YAAA,IAAAY,WAAA;AAAA,qBAAA,CAAAV,EAEToB,GAAe;AAAA,gBAAA,IAAAV,WAAA;AAAA,yBAAEb,EAAMwB;AAAAA,gBAAK;AAAA,cAAA,CAAA,GAAAC,EAAA,MAC5BzB,EAAMa,QAAQ,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,CAAA,GAAAV,EAEhBuB,GAAU;AAAA,YAAA,IAAClB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5CwB,GAAgB;AAAA,YAAA,IAAAd,WAAA;AAAA,qBAAEb,EAAM4B;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}
+{"version":3,"file":"RadioGroupField.js","sources":["../../../src/components/form/RadioGroupField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSXElement } from 'solid-js';\n\nimport { Field, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport { RadioGroup, RadioGroupLabel } from '@/components/RadioGroup';\n\nimport { useFieldContext } from './context';\nimport { WithTrailingAddon } from './WithTrailingAddon';\n\nexport type RadioGroupFieldProps = ComponentProps<typeof RadioGroup> & {\n  label?: string;\n  description?: string;\n  trailingAddon?: JSXElement;\n};\n\nexport const RadioGroupField: Component<RadioGroupFieldProps> = (props) => {\n  const field = useFieldContext<string>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'children',\n    'trailingAddon',\n  ]);\n\n  return (\n    <Field\n      invalid={field().state.meta.errors.length > 0}\n      required={local.required ?? false}\n      disabled={local.disabled ?? false}\n      readOnly={local.readOnly ?? false}\n    >\n      <FieldContent>\n        <WithTrailingAddon addon={local.trailingAddon}>\n          <RadioGroup\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            required={local.required ?? false}\n            {...others}\n          >\n            <RadioGroupLabel>{local.label}</RadioGroupLabel>\n            {local.children}\n          </RadioGroup>\n        </WithTrailingAddon>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["RadioGroupField","props","field","useFieldContext","local","others","splitProps","_$createComponent","Field","invalid","state","meta","errors","length","required","disabled","readOnly","children","FieldContent","WithTrailingAddon","addon","trailingAddon","RadioGroup","_$mergeProps","value","onValueChange","details","handleChange","onBlur","handleBlur","RadioGroupLabel","label","_$memo","FieldError","FieldDescription","description"],"mappings":";;;;;;AAcO,MAAMA,IAAoDC,CAAAA,MAAU;AACzE,QAAMC,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CACxC,SACA,eACA,YACA,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,aAAAV,EAEhCW,GAAY;AAAA,QAAA,IAAAD,WAAA;AAAA,iBAAA,CAAAV,EACVY,GAAiB;AAAA,YAAA,IAACC,QAAK;AAAA,qBAAEhB,EAAMiB;AAAAA,YAAa;AAAA,YAAA,IAAAJ,WAAA;AAAA,qBAAAV,EAC1Ce,GAAUC,EAAA;AAAA,gBAAA,IACTC,QAAK;AAAA,yBAAEtB,EAAAA,EAAQQ,MAAMc;AAAAA,gBAAK;AAAA,gBAC1BC,eAAgBC,CAAAA,MAAY;AAC1BxB,kBAAAA,EAAAA,EAAQyB,aAAaD,EAAQF,SAAS,EAAE;AAAA,gBAC1C;AAAA,gBACAI,QAAQA,MAAM;AACZ1B,kBAAAA,EAAAA,EAAQ2B,WAAAA;AAAAA,gBACV;AAAA,gBAAC,IACDpB,UAAO;AAAA,yBAAEP,EAAAA,EAAQQ,MAAMC,KAAKC,OAAOC,SAAS;AAAA,gBAAC;AAAA,gBAAA,IAC7CE,WAAQ;AAAA,yBAAEX,EAAMW,YAAY;AAAA,gBAAK;AAAA,gBAAA,IACjCC,WAAQ;AAAA,yBAAEZ,EAAMY,YAAY;AAAA,gBAAK;AAAA,gBAAA,IACjCF,WAAQ;AAAA,yBAAEV,EAAMU,YAAY;AAAA,gBAAK;AAAA,cAAA,GAC7BT,GAAM;AAAA,gBAAA,IAAAY,WAAA;AAAA,yBAAA,CAAAV,EAETuB,GAAe;AAAA,oBAAA,IAAAb,WAAA;AAAA,6BAAEb,EAAM2B;AAAAA,oBAAK;AAAA,kBAAA,CAAA,GAAAC,EAAA,MAC5B5B,EAAMa,QAAQ,CAAA;AAAA,gBAAA;AAAA,cAAA,CAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAAV,EAGlB0B,GAAU;AAAA,YAAA,IAACrB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5C2B,GAAgB;AAAA,YAAA,IAAAjB,WAAA;AAAA,qBAAEb,EAAM+B;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}

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

@@ -1,8 +1,9 @@
-import { Component, ComponentProps } from 'solid-js';
+import { Component, ComponentProps, JSXElement } from 'solid-js';
 import { Select } from '../Select';
 export type SelectFieldProps = ComponentProps<typeof Select> & {
     label?: string;
     description?: string;
     placeholder?: string;
+    trailingAddon?: JSXElement;
 };
 export declare const SelectField: Component<SelectFieldProps>;

package/dist/components/form/SelectField.js

@@ -1,9 +1,10 @@
 import { createComponent as e, mergeProps as i } from "solid-js/web";
-import { Field as a, FieldLabel as o, FieldContent as c, FieldError as u, FieldDescription as s } from "../Field.js";
-import { Select as g, SelectControl as h, SelectTrigger as p, SelectValue as m, SelectPositioner as f, SelectContent as b } from "../Select.js";
+import { Field as o, FieldLabel as a, FieldContent as c, FieldError as u, FieldDescription as g } from "../Field.js";
+import { Select as s, SelectControl as h, SelectTrigger as p, SelectValue as m, SelectPositioner as f, SelectContent as b } from "../Select.js";
 import { useFieldContext as S } from "./context.js";
-import { splitProps as C } from "solid-js";
-const F = (l) => [e(h, {
+import { WithTrailingAddon as C } from "./WithTrailingAddon.js";
+import { splitProps as F } from "solid-js";
+const v = (l) => [e(h, {
   get children() {
     return e(p, {
       get children() {
@@ -23,9 +24,9 @@ const F = (l) => [e(h, {
       }
     });
   }
-})], x = (l) => {
-  const t = S(), [r, n] = C(l, ["label", "description", "required", "disabled", "readOnly", "placeholder", "children"]);
-  return e(a, {
+})], B = (l) => {
+  const t = S(), [r, n] = F(l, ["label", "description", "required", "disabled", "readOnly", "placeholder", "children", "trailingAddon"]);
+  return e(o, {
     get invalid() {
       return t().state.meta.errors.length > 0;
     },
@@ -39,47 +40,54 @@ const F = (l) => [e(h, {
       return r.required ?? !1;
     },
     get children() {
-      return [e(o, {
+      return [e(a, {
         get children() {
           return r.label;
         }
       }), e(c, {
         get children() {
-          return [e(g, i({
-            get value() {
-              return t().state.value;
+          return [e(C, {
+            get addon() {
+              return r.trailingAddon;
             },
-            onValueChange: (d) => {
-              t().handleChange(d.value);
-            },
-            onBlur: () => {
-              t().handleBlur();
-            },
-            get invalid() {
-              return t().state.meta.errors.length > 0;
-            },
-            get disabled() {
-              return r.disabled ?? !1;
-            },
-            get readOnly() {
-              return r.readOnly ?? !1;
-            }
-          }, n, {
             get children() {
-              return e(F, {
-                get placeholder() {
-                  return r.placeholder ?? "";
+              return e(s, i({
+                get value() {
+                  return t().state.value;
                 },
+                onValueChange: (d) => {
+                  t().handleChange(d.value);
+                },
+                onBlur: () => {
+                  t().handleBlur();
+                },
+                get invalid() {
+                  return t().state.meta.errors.length > 0;
+                },
+                get disabled() {
+                  return r.disabled ?? !1;
+                },
+                get readOnly() {
+                  return r.readOnly ?? !1;
+                }
+              }, n, {
                 get children() {
-                  return r.children;
+                  return e(v, {
+                    get placeholder() {
+                      return r.placeholder ?? "";
+                    },
+                    get children() {
+                      return r.children;
+                    }
+                  });
                 }
-              });
+              }));
             }
-          })), e(u, {
+          }), e(u, {
             get errors() {
               return t().state.meta.errors;
             }
-          }), e(s, {
+          }), e(g, {
             get children() {
               return r.description;
             }
@@ -90,6 +98,6 @@ const F = (l) => [e(h, {
   });
 };
 export {
-  x as SelectField
+  B as SelectField
 };
 //# sourceMappingURL=SelectField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sources":["../../../src/components/form/SelectField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSX } from 'solid-js';\n\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\nimport {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectPositioner,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/Select';\n\nimport { useFieldContext } from './context';\n\nconst SelectInput: Component<{ placeholder: string; children: JSX.Element }> = (props) => (\n  <>\n    <SelectControl>\n      <SelectTrigger>\n        <SelectValue placeholder={props.placeholder} />\n      </SelectTrigger>\n    </SelectControl>\n    <SelectPositioner>\n      <SelectContent>{props.children}</SelectContent>\n    </SelectPositioner>\n  </>\n);\n\nexport type SelectFieldProps = ComponentProps<typeof Select> & {\n  label?: string;\n  description?: string;\n  placeholder?: string;\n};\n\nexport const SelectField: Component<SelectFieldProps> = (props) => {\n  const field = useFieldContext<string[]>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'placeholder',\n    'children',\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        <Select\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          <SelectInput placeholder={local.placeholder ?? ''}>{local.children}</SelectInput>\n        </Select>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["SelectInput","props","_$createComponent","SelectControl","children","SelectTrigger","SelectValue","placeholder","SelectPositioner","SelectContent","SelectField","field","useFieldContext","local","others","splitProps","Field","invalid","state","meta","errors","length","disabled","readOnly","required","FieldLabel","label","FieldContent","Select","_$mergeProps","value","onValueChange","details","handleChange","onBlur","handleBlur","FieldError","FieldDescription","description"],"mappings":";;;;;AAcA,MAAMA,IAA0EC,CAAAA,MAAK,CAAAC,EAEhFC,GAAa;AAAA,EAAA,IAAAC,WAAA;AAAA,WAAAF,EACXG,GAAa;AAAA,MAAA,IAAAD,WAAA;AAAA,eAAAF,EACXI,GAAW;AAAA,UAAA,IAACC,cAAW;AAAA,mBAAEN,EAAMM;AAAAA,UAAW;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA;AAAA,EAAA;AAAA,CAAA,GAAAL,EAG9CM,GAAgB;AAAA,EAAA,IAAAJ,WAAA;AAAA,WAAAF,EACdO,GAAa;AAAA,MAAA,IAAAL,WAAA;AAAA,eAAEH,EAAMG;AAAAA,MAAQ;AAAA,IAAA,CAAA;AAAA,EAAA;AAAA,CAAA,CAAA,GAWvBM,IAA4CT,CAAAA,MAAU;AACjE,QAAMU,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWd,GAAO,CACxC,SACA,eACA,YACA,YACA,YACA,eACA,UAAU,CACX;AAED,SAAAC,EACGc,GAAK;AAAA,IAAA,IACJC,UAAO;AAAA,aAAEN,EAAAA,EAAQO,MAAMC,KAAKC,OAAOC,SAAS;AAAA,IAAC;AAAA,IAAA,IAC7CC,WAAQ;AAAA,aAAET,EAAMS,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEV,EAAMU,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEX,EAAMW,YAAY;AAAA,IAAK;AAAA,IAAA,IAAApB,WAAA;AAAA,aAAA,CAAAF,EAEhCuB,GAAU;AAAA,QAAA,IAAArB,WAAA;AAAA,iBAAES,EAAMa;AAAAA,QAAK;AAAA,MAAA,CAAA,GAAAxB,EACvByB,GAAY;AAAA,QAAA,IAAAvB,WAAA;AAAA,iBAAA,CAAAF,EACV0B,GAAMC,EAAA;AAAA,YAAA,IACLC,QAAK;AAAA,qBAAEnB,EAAAA,EAAQO,MAAMY;AAAAA,YAAK;AAAA,YAC1BC,eAAgBC,CAAAA,MAAY;AAC1BrB,cAAAA,IAAQsB,aAAaD,EAAQF,KAAK;AAAA,YACpC;AAAA,YACAI,QAAQA,MAAM;AACZvB,cAAAA,EAAAA,EAAQwB,WAAAA;AAAAA,YACV;AAAA,YAAC,IACDlB,UAAO;AAAA,qBAAEN,EAAAA,EAAQO,MAAMC,KAAKC,OAAOC,SAAS;AAAA,YAAC;AAAA,YAAA,IAC7CC,WAAQ;AAAA,qBAAET,EAAMS,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAEV,EAAMU,YAAY;AAAA,YAAK;AAAA,UAAA,GAC7BT,GAAM;AAAA,YAAA,IAAAV,WAAA;AAAA,qBAAAF,EAETF,GAAW;AAAA,gBAAA,IAACO,cAAW;AAAA,yBAAEM,EAAMN,eAAe;AAAA,gBAAE;AAAA,gBAAA,IAAAH,WAAA;AAAA,yBAAGS,EAAMT;AAAAA,gBAAQ;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,CAAA,GAAAF,EAEnEkC,GAAU;AAAA,YAAA,IAAChB,SAAM;AAAA,qBAAET,EAAAA,EAAQO,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAlB,EAC5CmC,GAAgB;AAAA,YAAA,IAAAjC,WAAA;AAAA,qBAAES,EAAMyB;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}
+{"version":3,"file":"SelectField.js","sources":["../../../src/components/form/SelectField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSX, JSXElement } from 'solid-js';\n\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\nimport {\n  Select,\n  SelectContent,\n  SelectControl,\n  SelectPositioner,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/Select';\n\nimport { useFieldContext } from './context';\nimport { WithTrailingAddon } from './WithTrailingAddon';\n\nconst SelectInput: Component<{ placeholder: string; children: JSX.Element }> = (props) => (\n  <>\n    <SelectControl>\n      <SelectTrigger>\n        <SelectValue placeholder={props.placeholder} />\n      </SelectTrigger>\n    </SelectControl>\n    <SelectPositioner>\n      <SelectContent>{props.children}</SelectContent>\n    </SelectPositioner>\n  </>\n);\n\nexport type SelectFieldProps = ComponentProps<typeof Select> & {\n  label?: string;\n  description?: string;\n  placeholder?: string;\n  trailingAddon?: JSXElement;\n};\n\nexport const SelectField: Component<SelectFieldProps> = (props) => {\n  const field = useFieldContext<string[]>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'placeholder',\n    'children',\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          <Select\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            <SelectInput placeholder={local.placeholder ?? ''}>{local.children}</SelectInput>\n          </Select>\n        </WithTrailingAddon>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["SelectInput","props","_$createComponent","SelectControl","children","SelectTrigger","SelectValue","placeholder","SelectPositioner","SelectContent","SelectField","field","useFieldContext","local","others","splitProps","Field","invalid","state","meta","errors","length","disabled","readOnly","required","FieldLabel","label","FieldContent","WithTrailingAddon","addon","trailingAddon","Select","_$mergeProps","value","onValueChange","details","handleChange","onBlur","handleBlur","FieldError","FieldDescription","description"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { Component, ComponentProps } from 'solid-js';
+import { Component, ComponentProps, JSXElement } from 'solid-js';
 import { Slider } from '../Slider';
 export type SliderFieldProps = ComponentProps<typeof Slider> & {
     label?: string;
@@ -8,5 +8,6 @@ export type SliderFieldProps = ComponentProps<typeof Slider> & {
         label?: string;
     }[];
     required?: boolean;
+    trailingAddon?: JSXElement;
 };
 export declare const SliderField: Component<SliderFieldProps>;

package/dist/components/form/SliderField.js

@@ -1,16 +1,17 @@
-import { createComponent as r, mergeProps as n, insert as a, For as i, memo as d, template as o } from "solid-js/web";
+import { createComponent as r, mergeProps as n, insert as a, For as i, memo as d, template as s } from "solid-js/web";
 import { Field as g, FieldError as m, FieldDescription as c } from "../Field.js";
-import { Slider as h, SliderLabel as b, SliderValueText as f, SliderControl as p, SliderTrack as v, SliderRange as S, SliderThumb as y, SliderMarkerGroup as k, SliderMarker as F } from "../Slider.js";
+import { Slider as h, SliderLabel as f, SliderValueText as b, SliderControl as p, SliderTrack as v, SliderRange as S, SliderThumb as y, SliderMarkerGroup as k, SliderMarker as F } from "../Slider.js";
 import { useFieldContext as C } from "./context.js";
+import { WithTrailingAddon as A } from "./WithTrailingAddon.js";
 import { splitProps as O } from "solid-js";
-var x = /* @__PURE__ */ o('<div class="flex items-center justify-between">');
-const q = (l) => [(() => {
+var x = /* @__PURE__ */ s('<div class="flex items-center justify-between">');
+const T = (l) => [(() => {
   var e = x();
-  return a(e, r(b, {
+  return a(e, r(f, {
     get children() {
       return l.label;
     }
-  }), null), a(e, r(f, {}), null), e;
+  }), null), a(e, r(b, {}), null), e;
 })(), r(p, {
   get children() {
     return [r(v, {
@@ -42,8 +43,8 @@ const q = (l) => [(() => {
       })
     });
   }
-}))], V = (l) => {
-  const e = C(), [t, u] = O(l, ["label", "description", "required", "disabled", "readOnly", "marks"]);
+}))], j = (l) => {
+  const e = C(), [t, u] = O(l, ["label", "description", "required", "disabled", "readOnly", "marks", "trailingAddon"]);
   return r(g, {
     get invalid() {
       return e().state.meta.errors.length > 0;
@@ -58,38 +59,45 @@ const q = (l) => [(() => {
       return t.required ?? !1;
     },
     get children() {
-      return [r(h, n({
-        get value() {
-          return e().state.value;
-        },
-        onValueChange: (s) => {
-          e().handleChange(s.value);
-        },
-        onFocusChange: () => {
-          e().handleBlur();
-        },
-        get invalid() {
-          return e().state.meta.errors.length > 0;
+      return [r(A, {
+        get addon() {
+          return t.trailingAddon;
         },
-        get disabled() {
-          return t.disabled ?? !1;
-        },
-        get readOnly() {
-          return t.readOnly ?? !1;
-        }
-      }, u, {
         get children() {
-          return r(q, n({
+          return r(h, n({
             get value() {
               return e().state.value;
+            },
+            onValueChange: (o) => {
+              e().handleChange(o.value);
+            },
+            onFocusChange: () => {
+              e().handleBlur();
+            },
+            get invalid() {
+              return e().state.meta.errors.length > 0;
+            },
+            get disabled() {
+              return t.disabled ?? !1;
+            },
+            get readOnly() {
+              return t.readOnly ?? !1;
+            }
+          }, u, {
+            get children() {
+              return r(T, n({
+                get value() {
+                  return e().state.value;
+                }
+              }, () => typeof t.label == "string" && {
+                label: t.label
+              }, () => Array.isArray(t.marks) && {
+                marks: t.marks
+              }));
             }
-          }, () => typeof t.label == "string" && {
-            label: t.label
-          }, () => Array.isArray(t.marks) && {
-            marks: t.marks
           }));
         }
-      })), r(m, {
+      }), r(m, {
         get errors() {
           return e().state.meta.errors;
         }
@@ -102,6 +110,6 @@ const q = (l) => [(() => {
   });
 };
 export {
-  V as SliderField
+  j as SliderField
 };
 //# sourceMappingURL=SliderField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SliderField.js","sources":["../../../src/components/form/SliderField.tsx"],"sourcesContent":["import type { Component, ComponentProps } from 'solid-js';\n\nimport { Field, FieldDescription, FieldError } from '@/components/Field';\nimport {\n  Slider,\n  SliderControl,\n  SliderLabel,\n  SliderMarker,\n  SliderMarkerGroup,\n  SliderRange,\n  SliderThumb,\n  SliderTrack,\n  SliderValueText,\n} from '@/components/Slider';\n\nimport { useFieldContext } from './context';\n\nconst SliderInput: Component<{\n  value: number[];\n  label?: string;\n  marks?: { value: number; label?: string }[] | undefined;\n}> = (props) => (\n  <>\n    <div class='flex items-center justify-between'>\n      <SliderLabel>{props.label}</SliderLabel>\n      <SliderValueText />\n    </div>\n    <SliderControl>\n      <SliderTrack>\n        <SliderRange />\n      </SliderTrack>\n      <For each={props.value.map((_, index) => index)}>\n        {(index) => <SliderThumb index={index} />}\n      </For>\n    </SliderControl>\n    {props.marks && (\n      <SliderMarkerGroup>\n        <For each={props.marks}>\n          {(mark) => <SliderMarker value={mark.value}>{mark.label}</SliderMarker>}\n        </For>\n      </SliderMarkerGroup>\n    )}\n  </>\n);\n\nexport type SliderFieldProps = ComponentProps<typeof Slider> & {\n  label?: string;\n  description?: string;\n  marks?: { value: number; label?: string }[];\n  required?: boolean;\n};\n\nexport const SliderField: Component<SliderFieldProps> = (props) => {\n  const field = useFieldContext<number[]>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'marks',\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      <Slider\n        value={field().state.value}\n        onValueChange={(details) => {\n          field().handleChange(details.value);\n        }}\n        onFocusChange={() => {\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        <SliderInput\n          value={field().state.value}\n          {...(typeof local.label === 'string' && { label: local.label })}\n          {...(Array.isArray(local.marks) && { marks: local.marks })}\n        />\n      </Slider>\n      <FieldError errors={field().state.meta.errors} />\n      <FieldDescription>{local.description}</FieldDescription>\n    </Field>\n  );\n};\n"],"names":["SliderInput","props","_el$","_tmpl$","_$insert","_$createComponent","SliderLabel","children","label","SliderValueText","SliderControl","SliderTrack","SliderRange","_$For","each","value","map","_","index","SliderThumb","_$memo","marks","SliderMarkerGroup","mark","SliderMarker","SliderField","field","useFieldContext","local","others","splitProps","Field","invalid","state","meta","errors","length","disabled","readOnly","required","Slider","_$mergeProps","onValueChange","details","handleChange","onFocusChange","handleBlur","Array","isArray","FieldError","FieldDescription","description"],"mappings":";;;;;;AAiBA,MAAMA,IAIAC,CAAAA,MAAK,EAAA,MAAA;AAAA,MAAAC,IAAAC,EAAAA;AAAAC,SAAAA,EAAAF,GAAAG,EAGJC,GAAW;AAAA,IAAA,IAAAC,WAAA;AAAA,aAAEN,EAAMO;AAAAA,IAAK;AAAA,EAAA,CAAA,GAAA,IAAA,GAAAJ,EAAAF,GAAAG,EACxBI,GAAe,CAAA,CAAA,GAAA,IAAA,GAAAP;AAAA,GAAA,GAAAG,EAEjBK,GAAa;AAAA,EAAA,IAAAH,WAAA;AAAA,WAAA,CAAAF,EACXM,GAAW;AAAA,MAAA,IAAAJ,WAAA;AAAA,eAAAF,EACTO,GAAW,EAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAAP,EAEbQ,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEb,EAAMc,MAAMC,IAAI,CAACC,GAAGC,MAAUA,CAAK;AAAA,MAAC;AAAA,MAAAX,UAC3CW,CAAAA,MAAKb,EAAMc,GAAW;AAAA,QAACD,OAAAA;AAAAA,MAAAA,CAAY;AAAA,IAAA,CAAI,CAAA;AAAA,EAAA;AAAA,CAAA,GAAAE,EAAA,MAG5CA,EAAA,MAAA,CAAA,CAAAnB,EAAMoB,KAAK,EAAA,KAAAhB,EACTiB,GAAiB;AAAA,EAAA,IAAAf,WAAA;AAAA,WAAAF,EACfQ,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEb,EAAMoB;AAAAA,MAAK;AAAA,MAAAd,UAClBgB,CAAAA,MAAIlB,EAAMmB,GAAY;AAAA,QAAA,IAACT,QAAK;AAAA,iBAAEQ,EAAKR;AAAAA,QAAK;AAAA,QAAA,IAAAR,WAAA;AAAA,iBAAGgB,EAAKf;AAAAA,QAAK;AAAA,MAAA,CAAA;AAAA,IAAA,CAAgB;AAAA,EAAA;AAAA,CAAA,CAG5E,CAAA,GAWQiB,IAA4CxB,CAAAA,MAAU;AACjE,QAAMyB,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAW7B,GAAO,CACxC,SACA,eACA,YACA,YACA,YACA,OAAO,CACR;AAED,SAAAI,EACG0B,GAAK;AAAA,IAAA,IACJC,UAAO;AAAA,aAAEN,EAAAA,EAAQO,MAAMC,KAAKC,OAAOC,SAAS;AAAA,IAAC;AAAA,IAAA,IAC7CC,WAAQ;AAAA,aAAET,EAAMS,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEV,EAAMU,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEX,EAAMW,YAAY;AAAA,IAAK;AAAA,IAAA,IAAAhC,WAAA;AAAA,aAAA,CAAAF,EAEhCmC,GAAMC,EAAA;AAAA,QAAA,IACL1B,QAAK;AAAA,iBAAEW,EAAAA,EAAQO,MAAMlB;AAAAA,QAAK;AAAA,QAC1B2B,eAAgBC,CAAAA,MAAY;AAC1BjB,UAAAA,IAAQkB,aAAaD,EAAQ5B,KAAK;AAAA,QACpC;AAAA,QACA8B,eAAeA,MAAM;AACnBnB,UAAAA,EAAAA,EAAQoB,WAAAA;AAAAA,QACV;AAAA,QAAC,IACDd,UAAO;AAAA,iBAAEN,EAAAA,EAAQO,MAAMC,KAAKC,OAAOC,SAAS;AAAA,QAAC;AAAA,QAAA,IAC7CC,WAAQ;AAAA,iBAAET,EAAMS,YAAY;AAAA,QAAK;AAAA,QAAA,IACjCC,WAAQ;AAAA,iBAAEV,EAAMU,YAAY;AAAA,QAAK;AAAA,MAAA,GAC7BT,GAAM;AAAA,QAAA,IAAAtB,WAAA;AAAA,iBAAAF,EAETL,GAAWyC,EAAA;AAAA,YAAA,IACV1B,QAAK;AAAA,qBAAEW,EAAAA,EAAQO,MAAMlB;AAAAA,YAAK;AAAA,UAAA,GAAA,MACrB,OAAOa,EAAMpB,SAAU,YAAY;AAAA,YAAEA,OAAOoB,EAAMpB;AAAAA,UAAAA,GAAO,MACzDuC,MAAMC,QAAQpB,EAAMP,KAAK,KAAK;AAAA,YAAEA,OAAOO,EAAMP;AAAAA,UAAAA,CAAO,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA,GAAAhB,EAG5D4C,GAAU;AAAA,QAAA,IAACd,SAAM;AAAA,iBAAET,EAAAA,EAAQO,MAAMC,KAAKC;AAAAA,QAAM;AAAA,MAAA,CAAA,GAAA9B,EAC5C6C,GAAgB;AAAA,QAAA,IAAA3C,WAAA;AAAA,iBAAEqB,EAAMuB;AAAAA,QAAW;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAG1C;"}
+{"version":3,"file":"SliderField.js","sources":["../../../src/components/form/SliderField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSXElement } from 'solid-js';\n\nimport { Field, FieldDescription, FieldError } from '@/components/Field';\nimport {\n  Slider,\n  SliderControl,\n  SliderLabel,\n  SliderMarker,\n  SliderMarkerGroup,\n  SliderRange,\n  SliderThumb,\n  SliderTrack,\n  SliderValueText,\n} from '@/components/Slider';\n\nimport { useFieldContext } from './context';\nimport { WithTrailingAddon } from './WithTrailingAddon';\n\nconst SliderInput: Component<{\n  value: number[];\n  label?: string;\n  marks?: { value: number; label?: string }[] | undefined;\n}> = (props) => (\n  <>\n    <div class='flex items-center justify-between'>\n      <SliderLabel>{props.label}</SliderLabel>\n      <SliderValueText />\n    </div>\n    <SliderControl>\n      <SliderTrack>\n        <SliderRange />\n      </SliderTrack>\n      <For each={props.value.map((_, index) => index)}>\n        {(index) => <SliderThumb index={index} />}\n      </For>\n    </SliderControl>\n    {props.marks && (\n      <SliderMarkerGroup>\n        <For each={props.marks}>\n          {(mark) => <SliderMarker value={mark.value}>{mark.label}</SliderMarker>}\n        </For>\n      </SliderMarkerGroup>\n    )}\n  </>\n);\n\nexport type SliderFieldProps = ComponentProps<typeof Slider> & {\n  label?: string;\n  description?: string;\n  marks?: { value: number; label?: string }[];\n  required?: boolean;\n  trailingAddon?: JSXElement;\n};\n\nexport const SliderField: Component<SliderFieldProps> = (props) => {\n  const field = useFieldContext<number[]>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'marks',\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      <WithTrailingAddon addon={local.trailingAddon}>\n        <Slider\n          value={field().state.value}\n          onValueChange={(details) => {\n            field().handleChange(details.value);\n          }}\n          onFocusChange={() => {\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          <SliderInput\n            value={field().state.value}\n            {...(typeof local.label === 'string' && { label: local.label })}\n            {...(Array.isArray(local.marks) && { marks: local.marks })}\n          />\n        </Slider>\n      </WithTrailingAddon>\n      <FieldError errors={field().state.meta.errors} />\n      <FieldDescription>{local.description}</FieldDescription>\n    </Field>\n  );\n};\n"],"names":["SliderInput","props","_el$","_tmpl$","_$insert","_$createComponent","SliderLabel","children","label","SliderValueText","SliderControl","SliderTrack","SliderRange","_$For","each","value","map","_","index","SliderThumb","_$memo","marks","SliderMarkerGroup","mark","SliderMarker","SliderField","field","useFieldContext","local","others","splitProps","Field","invalid","state","meta","errors","length","disabled","readOnly","required","WithTrailingAddon","addon","trailingAddon","Slider","_$mergeProps","onValueChange","details","handleChange","onFocusChange","handleBlur","Array","isArray","FieldError","FieldDescription","description"],"mappings":"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"}

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

@@ -1,10 +1,11 @@
-import { Component, ComponentProps } from 'solid-js';
+import { Component, ComponentProps, JSXElement } from 'solid-js';
 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;
+    trailingAddon?: JSXElement;
 };
 export declare const TagsInputField: Component<TagsInputFieldProps>;
 export {};

package/dist/components/form/TagsInputField.js

@@ -1,20 +1,21 @@
-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 { createComponent as e, mergeProps as d, For as g, Show as u, memo as h } from "solid-js/web";
+import { Field as p, FieldLabel as c, FieldContent as T, FieldError as m, FieldDescription as I } 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";
+import { useFieldContext as A } from "./context.js";
+import { WithTrailingAddon as S } from "./WithTrailingAddon.js";
+import { splitProps as o } from "solid-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"]);
+  const [t, r] = o(l, ["children", "showClearTrigger"]);
   return [e(f, {
     children: (a) => e(O, {
       get children() {
-        return [e(h, {
+        return [e(g, {
           get each() {
             return a().value;
           },
-          children: (n, o) => e(P, {
+          children: (n, i) => e(P, {
             get index() {
-              return o();
+              return i();
             },
             value: n,
             get children() {
@@ -27,19 +28,19 @@ const D = ["max", "maxLength", "delimiter", "addOnPaste", "blurBehavior", "valid
               }), e(v, {})];
             }
           })
-        }), e(x, r), e(g, {
+        }), e(x, r), e(u, {
           get when() {
             return t.showClearTrigger !== !1;
           },
           get children() {
             return e(y, {});
           }
-        }), d(() => t.children)];
+        }), h(() => t.children)];
       }
     })
   }), e(_, {})];
-}, B = ["label", "description", "required", "disabled", "readOnly", "showClearTrigger"], E = (l) => {
-  const t = S(), [r, a] = i(l, B), [n, o] = i(a, D);
+}, B = ["label", "description", "required", "disabled", "readOnly", "showClearTrigger", "trailingAddon"], N = (l) => {
+  const t = A(), [r, a] = o(l, B), [n, i] = o(a, D);
   return e(p, {
     get invalid() {
       return t().state.meta.errors.length > 0;
@@ -58,38 +59,45 @@ const D = ["max", "maxLength", "delimiter", "addOnPaste", "blurBehavior", "valid
         get children() {
           return r.label;
         }
-      }), e(I, {
+      }), e(T, {
         get children() {
-          return [e(C, s({
-            get value() {
-              return t().state.value;
+          return [e(S, {
+            get addon() {
+              return r.trailingAddon;
             },
-            onValueChange: (u) => {
-              t().handleChange(u.value);
-            },
-            onBlur: () => {
-              t().handleBlur();
-            },
-            get invalid() {
-              return t().state.meta.errors.length > 0;
-            },
-            get disabled() {
-              return r.disabled ?? !1;
-            },
-            get readOnly() {
-              return r.readOnly ?? !1;
-            }
-          }, n, {
             get children() {
-              return e(q, s(o, () => typeof r.showClearTrigger == "boolean" && {
-                showClearTrigger: r.showClearTrigger
+              return e(C, d({
+                get value() {
+                  return t().state.value;
+                },
+                onValueChange: (s) => {
+                  t().handleChange(s.value);
+                },
+                onBlur: () => {
+                  t().handleBlur();
+                },
+                get invalid() {
+                  return t().state.meta.errors.length > 0;
+                },
+                get disabled() {
+                  return r.disabled ?? !1;
+                },
+                get readOnly() {
+                  return r.readOnly ?? !1;
+                }
+              }, n, {
+                get children() {
+                  return e(q, d(i, () => typeof r.showClearTrigger == "boolean" && {
+                    showClearTrigger: r.showClearTrigger
+                  }));
+                }
               }));
             }
-          })), e(T, {
+          }), e(m, {
             get errors() {
               return t().state.meta.errors;
             }
-          }), e(m, {
+          }), e(I, {
             get children() {
               return r.description;
             }
@@ -100,6 +108,6 @@ const D = ["max", "maxLength", "delimiter", "addOnPaste", "blurBehavior", "valid
   });
 };
 export {
-  E as TagsInputField
+  N as TagsInputField
 };
 //# sourceMappingURL=TagsInputField.js.map