@manafishrov/ui 1.3.3 → 1.3.5

package/dist/components/form/NumberInputField.js

@@ -1,25 +1,26 @@
-import { createComponent as r, mergeProps as s, Show as d } from "solid-js/web";
-import { Field as c, FieldLabel as g, FieldContent as h, FieldError as b, FieldDescription as f } from "../Field.js";
+import { createComponent as t, mergeProps as d, Show as s } from "solid-js/web";
+import { Field as g, FieldLabel as c, FieldContent as h, FieldError as f, FieldDescription as b } from "../Field.js";
 import { NumberInput as V, NumberInputControl as C, NumberInputInput as N, NumberInputTriggers as I } from "../NumberInput.js";
 import { useFieldContext as O } from "./context.js";
-import { splitProps as m, createSignal as F, createEffect as v } from "solid-js";
-const P = ["min", "max", "step", "allowMouseWheel", "allowOverflow", "clampValueOnBlur", "formatOptions", "inputMode", "locale", "pattern", "spinOnPress", "focusInputOnChange", "translations", "form", "name", "onValueInvalid"], u = (e) => typeof e != "number" || !Number.isFinite(e) ? "" : String(e), B = (e) => {
-  const [l, n] = F(u(e().state.value));
-  return v(() => {
+import { WithTrailingAddon as F } from "./WithTrailingAddon.js";
+import { splitProps as m, createSignal as v, createEffect as P } from "solid-js";
+const B = ["min", "max", "step", "allowMouseWheel", "allowOverflow", "clampValueOnBlur", "formatOptions", "inputMode", "locale", "pattern", "spinOnPress", "focusInputOnChange", "translations", "form", "name", "onValueInvalid"], u = (e) => typeof e != "number" || !Number.isFinite(e) ? "" : String(e), w = (e) => {
+  const [l, n] = v(u(e().state.value));
+  return P(() => {
     n(u(e().state.value));
   }), {
     inputValue: l,
-    onValueChange: (t) => {
-      n(t.value);
+    onValueChange: (r) => {
+      n(r.value);
     },
-    onValueCommit: (t) => {
-      n(t.value), Number.isFinite(t.valueAsNumber) && e().handleChange(t.valueAsNumber);
+    onValueCommit: (r) => {
+      n(r.value), Number.isFinite(r.valueAsNumber) && e().handleChange(r.valueAsNumber);
     },
     onBlur: () => {
       n(u(e().state.value)), e().handleBlur();
     }
   };
-}, p = (e) => r(c, {
+}, p = (e) => t(g, {
   get invalid() {
     return e.field().state.meta.errors.length > 0;
   },
@@ -33,57 +34,64 @@ const P = ["min", "max", "step", "allowMouseWheel", "allowOverflow", "clampValue
     return e.local.readOnly ?? !1;
   },
   get children() {
-    return [r(g, {
+    return [t(c, {
       get children() {
         return e.local.label;
       }
-    }), r(h, {
+    }), t(h, {
       get children() {
-        return [r(V, s({
-          get value() {
-            return e.inputValue();
+        return [t(F, {
+          get addon() {
+            return e.local.trailingAddon;
           },
-          get onValueChange() {
-            return e.onValueChange;
-          },
-          get onValueCommit() {
-            return e.onValueCommit;
-          },
-          get onBlur() {
-            return e.onBlur;
-          },
-          get invalid() {
-            return e.field().state.meta.errors.length > 0;
-          },
-          get disabled() {
-            return e.local.disabled ?? !1;
-          },
-          get readOnly() {
-            return e.local.readOnly ?? !1;
-          },
-          get required() {
-            return e.local.required ?? !1;
-          }
-        }, () => e.rootProps, {
           get children() {
-            return r(C, {
+            return t(V, d({
+              get value() {
+                return e.inputValue();
+              },
+              get onValueChange() {
+                return e.onValueChange;
+              },
+              get onValueCommit() {
+                return e.onValueCommit;
+              },
+              get onBlur() {
+                return e.onBlur;
+              },
+              get invalid() {
+                return e.field().state.meta.errors.length > 0;
+              },
+              get disabled() {
+                return e.local.disabled ?? !1;
+              },
+              get readOnly() {
+                return e.local.readOnly ?? !1;
+              },
+              get required() {
+                return e.local.required ?? !1;
+              }
+            }, () => e.rootProps, {
               get children() {
-                return [r(N, s(() => e.inputProps)), r(d, {
-                  get when() {
-                    return e.local.showTriggers !== !1;
-                  },
+                return t(C, {
                   get children() {
-                    return r(I, {});
+                    return [t(N, d(() => e.inputProps)), t(s, {
+                      get when() {
+                        return e.local.showTriggers !== !1;
+                      },
+                      get children() {
+                        return t(I, {});
+                      }
+                    })];
                   }
-                })];
+                });
               }
-            });
+            }));
           }
-        })), r(b, {
+        }), t(f, {
           get errors() {
             return e.field().state.meta.errors;
           }
-        }), r(f, {
+        }), t(b, {
           get children() {
             return e.local.description;
           }
@@ -91,20 +99,20 @@ const P = ["min", "max", "step", "allowMouseWheel", "allowOverflow", "clampValue
       }
     })];
   }
-}), x = (e) => {
-  const l = O(), [n, a] = m(e, ["label", "description", "required", "disabled", "readOnly", "showTriggers"]), [o, i] = m(a, P), t = B(l);
+}), E = (e) => {
+  const l = O(), [n, a] = m(e, ["label", "description", "required", "disabled", "readOnly", "showTriggers", "trailingAddon"]), [o, i] = m(a, B), r = w(l);
   return p({
     field: l,
     local: n,
     rootProps: o,
     inputProps: i,
-    inputValue: t.inputValue,
-    onValueChange: t.onValueChange,
-    onValueCommit: t.onValueCommit,
-    onBlur: t.onBlur
+    inputValue: r.inputValue,
+    onValueChange: r.onValueChange,
+    onValueCommit: r.onValueCommit,
+    onBlur: r.onBlur
   });
 };
 export {
-  x as NumberInputField
+  E as NumberInputField
 };
 //# sourceMappingURL=NumberInputField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/form/NumberInputField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSX } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport {\n  NumberInput,\n  NumberInputControl,\n  NumberInputInput,\n  NumberInputTriggers,\n} from '@/components/NumberInput';\n\nimport { useFieldContext } from './context';\n\nconst NUMBER_INPUT_ROOT_PROPS = [\n  'min',\n  'max',\n  'step',\n  'allowMouseWheel',\n  'allowOverflow',\n  'clampValueOnBlur',\n  'formatOptions',\n  'inputMode',\n  'locale',\n  'pattern',\n  'spinOnPress',\n  'focusInputOnChange',\n  'translations',\n  'form',\n  'name',\n  'onValueInvalid',\n] as const;\n\nexport type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> &\n  Pick<ComponentProps<typeof NumberInput>, (typeof NUMBER_INPUT_ROOT_PROPS)[number]> & {\n    label?: string;\n    description?: string;\n    showTriggers?: boolean;\n  };\n\nconst toNumberInputValue = (value: number | undefined): string => {\n  if (typeof value !== 'number' || !Number.isFinite(value)) {\n    return '';\n  }\n\n  return String(value);\n};\n\ntype NumberInputFieldLocalProps = Pick<\n  NumberInputFieldProps,\n  'label' | 'description' | 'required' | 'disabled' | 'readOnly' | 'showTriggers'\n>;\n\ntype NumberInputFieldRootProps = Pick<\n  NumberInputFieldProps,\n  (typeof NUMBER_INPUT_ROOT_PROPS)[number]\n>;\n\ntype RenderNumberInputFieldProps = {\n  field: ReturnType<typeof useFieldContext<number>>;\n  local: NumberInputFieldLocalProps;\n  rootProps: NumberInputFieldRootProps;\n  inputProps: Omit<\n    NumberInputFieldProps,\n    keyof NumberInputFieldLocalProps | keyof NumberInputFieldRootProps\n  >;\n  inputValue: () => string;\n  onValueChange: NonNullable<ComponentProps<typeof NumberInput>['onValueChange']>;\n  onValueCommit: NonNullable<ComponentProps<typeof NumberInput>['onValueCommit']>;\n  onBlur: () => void;\n};\n\ntype NumberInputFieldState = Pick<\n  RenderNumberInputFieldProps,\n  'inputValue' | 'onValueChange' | 'onValueCommit' | 'onBlur'\n>;\n\nconst createNumberInputFieldState = (\n  field: ReturnType<typeof useFieldContext<number>>,\n): NumberInputFieldState => {\n  const [inputValue, setInputValue] = createSignal(toNumberInputValue(field().state.value));\n\n  createEffect(() => {\n    setInputValue(toNumberInputValue(field().state.value));\n  });\n\n  const onValueChange: NonNullable<ComponentProps<typeof NumberInput>['onValueChange']> = (\n    details,\n  ) => {\n    setInputValue(details.value);\n  };\n\n  const onValueCommit: NonNullable<ComponentProps<typeof NumberInput>['onValueCommit']> = (\n    details,\n  ) => {\n    setInputValue(details.value);\n\n    if (!Number.isFinite(details.valueAsNumber)) {\n      return;\n    }\n\n    field().handleChange(details.valueAsNumber);\n  };\n\n  const onBlur = (): void => {\n    setInputValue(toNumberInputValue(field().state.value));\n    field().handleBlur();\n  };\n\n  return {\n    inputValue,\n    onValueChange,\n    onValueCommit,\n    onBlur,\n  };\n};\n\nconst renderNumberInputField = (props: RenderNumberInputFieldProps): JSX.Element => (\n  <Field\n    invalid={props.field().state.meta.errors.length > 0}\n    required={props.local.required ?? false}\n    disabled={props.local.disabled ?? false}\n    readOnly={props.local.readOnly ?? false}\n  >\n    <FieldLabel>{props.local.label}</FieldLabel>\n    <FieldContent>\n      <NumberInput\n        value={props.inputValue()}\n        onValueChange={props.onValueChange}\n        onValueCommit={props.onValueCommit}\n        onBlur={props.onBlur}\n        invalid={props.field().state.meta.errors.length > 0}\n        disabled={props.local.disabled ?? false}\n        readOnly={props.local.readOnly ?? false}\n        required={props.local.required ?? false}\n        {...props.rootProps}\n      >\n        <NumberInputControl>\n          <NumberInputInput {...props.inputProps} />\n          <Show when={props.local.showTriggers !== false}>\n            <NumberInputTriggers />\n          </Show>\n        </NumberInputControl>\n      </NumberInput>\n      <FieldError errors={props.field().state.meta.errors} />\n      <FieldDescription>{props.local.description}</FieldDescription>\n    </FieldContent>\n  </Field>\n);\n\nexport const NumberInputField: Component<NumberInputFieldProps> = (props) => {\n  const field = useFieldContext<number>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'showTriggers',\n  ]);\n  const [rootProps, inputProps] = splitProps(others, NUMBER_INPUT_ROOT_PROPS);\n  const state = createNumberInputFieldState(field);\n\n  return renderNumberInputField({\n    field,\n    local,\n    rootProps,\n    inputProps,\n    inputValue: state.inputValue,\n    onValueChange: state.onValueChange,\n    onValueCommit: state.onValueCommit,\n    onBlur: state.onBlur,\n  });\n};\n"],"names":["NUMBER_INPUT_ROOT_PROPS","toNumberInputValue","value","Number","isFinite","String","createNumberInputFieldState","field","inputValue","setInputValue","createSignal","state","createEffect","onValueChange","details","onValueCommit","valueAsNumber","handleChange","onBlur","handleBlur","renderNumberInputField","props","_$createComponent","Field","invalid","meta","errors","length","required","local","disabled","readOnly","children","FieldLabel","label","FieldContent","NumberInput","_$mergeProps","rootProps","NumberInputControl","NumberInputInput","inputProps","_$Show","when","showTriggers","NumberInputTriggers","FieldError","FieldDescription","description","NumberInputField","useFieldContext","others","splitProps"],"mappings":"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"}
+{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/form/NumberInputField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSX, JSXElement } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport {\n  NumberInput,\n  NumberInputControl,\n  NumberInputInput,\n  NumberInputTriggers,\n} from '@/components/NumberInput';\n\nimport { useFieldContext } from './context';\nimport { WithTrailingAddon } from './WithTrailingAddon';\n\nconst NUMBER_INPUT_ROOT_PROPS = [\n  'min',\n  'max',\n  'step',\n  'allowMouseWheel',\n  'allowOverflow',\n  'clampValueOnBlur',\n  'formatOptions',\n  'inputMode',\n  'locale',\n  'pattern',\n  'spinOnPress',\n  'focusInputOnChange',\n  'translations',\n  'form',\n  'name',\n  'onValueInvalid',\n] as const;\n\nexport type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> &\n  Pick<ComponentProps<typeof NumberInput>, (typeof NUMBER_INPUT_ROOT_PROPS)[number]> & {\n    label?: string;\n    description?: string;\n    showTriggers?: boolean;\n    trailingAddon?: JSXElement;\n  };\n\nconst toNumberInputValue = (value: number | undefined): string => {\n  if (typeof value !== 'number' || !Number.isFinite(value)) {\n    return '';\n  }\n\n  return String(value);\n};\n\ntype NumberInputFieldLocalProps = Pick<\n  NumberInputFieldProps,\n  'label' | 'description' | 'required' | 'disabled' | 'readOnly' | 'showTriggers' | 'trailingAddon'\n>;\n\ntype NumberInputFieldRootProps = Pick<\n  NumberInputFieldProps,\n  (typeof NUMBER_INPUT_ROOT_PROPS)[number]\n>;\n\ntype RenderNumberInputFieldProps = {\n  field: ReturnType<typeof useFieldContext<number>>;\n  local: NumberInputFieldLocalProps;\n  rootProps: NumberInputFieldRootProps;\n  inputProps: Omit<\n    NumberInputFieldProps,\n    keyof NumberInputFieldLocalProps | keyof NumberInputFieldRootProps\n  >;\n  inputValue: () => string;\n  onValueChange: NonNullable<ComponentProps<typeof NumberInput>['onValueChange']>;\n  onValueCommit: NonNullable<ComponentProps<typeof NumberInput>['onValueCommit']>;\n  onBlur: () => void;\n};\n\ntype NumberInputFieldState = Pick<\n  RenderNumberInputFieldProps,\n  'inputValue' | 'onValueChange' | 'onValueCommit' | 'onBlur'\n>;\n\nconst createNumberInputFieldState = (\n  field: ReturnType<typeof useFieldContext<number>>,\n): NumberInputFieldState => {\n  const [inputValue, setInputValue] = createSignal(toNumberInputValue(field().state.value));\n\n  createEffect(() => {\n    setInputValue(toNumberInputValue(field().state.value));\n  });\n\n  const onValueChange: NonNullable<ComponentProps<typeof NumberInput>['onValueChange']> = (\n    details,\n  ) => {\n    setInputValue(details.value);\n  };\n\n  const onValueCommit: NonNullable<ComponentProps<typeof NumberInput>['onValueCommit']> = (\n    details,\n  ) => {\n    setInputValue(details.value);\n\n    if (!Number.isFinite(details.valueAsNumber)) {\n      return;\n    }\n\n    field().handleChange(details.valueAsNumber);\n  };\n\n  const onBlur = (): void => {\n    setInputValue(toNumberInputValue(field().state.value));\n    field().handleBlur();\n  };\n\n  return {\n    inputValue,\n    onValueChange,\n    onValueCommit,\n    onBlur,\n  };\n};\n\nconst renderNumberInputField = (props: RenderNumberInputFieldProps): JSX.Element => (\n  <Field\n    invalid={props.field().state.meta.errors.length > 0}\n    required={props.local.required ?? false}\n    disabled={props.local.disabled ?? false}\n    readOnly={props.local.readOnly ?? false}\n  >\n    <FieldLabel>{props.local.label}</FieldLabel>\n    <FieldContent>\n      <WithTrailingAddon addon={props.local.trailingAddon}>\n        <NumberInput\n          value={props.inputValue()}\n          onValueChange={props.onValueChange}\n          onValueCommit={props.onValueCommit}\n          onBlur={props.onBlur}\n          invalid={props.field().state.meta.errors.length > 0}\n          disabled={props.local.disabled ?? false}\n          readOnly={props.local.readOnly ?? false}\n          required={props.local.required ?? false}\n          {...props.rootProps}\n        >\n          <NumberInputControl>\n            <NumberInputInput {...props.inputProps} />\n            <Show when={props.local.showTriggers !== false}>\n              <NumberInputTriggers />\n            </Show>\n          </NumberInputControl>\n        </NumberInput>\n      </WithTrailingAddon>\n      <FieldError errors={props.field().state.meta.errors} />\n      <FieldDescription>{props.local.description}</FieldDescription>\n    </FieldContent>\n  </Field>\n);\n\nexport const NumberInputField: Component<NumberInputFieldProps> = (props) => {\n  const field = useFieldContext<number>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'showTriggers',\n    'trailingAddon',\n  ]);\n  const [rootProps, inputProps] = splitProps(others, NUMBER_INPUT_ROOT_PROPS);\n  const state = createNumberInputFieldState(field);\n\n  return renderNumberInputField({\n    field,\n    local,\n    rootProps,\n    inputProps,\n    inputValue: state.inputValue,\n    onValueChange: state.onValueChange,\n    onValueCommit: state.onValueCommit,\n    onBlur: state.onBlur,\n  });\n};\n"],"names":["NUMBER_INPUT_ROOT_PROPS","toNumberInputValue","value","Number","isFinite","String","createNumberInputFieldState","field","inputValue","setInputValue","createSignal","state","createEffect","onValueChange","details","onValueCommit","valueAsNumber","handleChange","onBlur","handleBlur","renderNumberInputField","props","_$createComponent","Field","invalid","meta","errors","length","required","local","disabled","readOnly","children","FieldLabel","label","FieldContent","WithTrailingAddon","addon","trailingAddon","NumberInput","_$mergeProps","rootProps","NumberInputControl","NumberInputInput","inputProps","_$Show","when","showTriggers","NumberInputTriggers","FieldError","FieldDescription","description","NumberInputField","useFieldContext","others","splitProps"],"mappings":"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"}

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

@@ -1,8 +1,9 @@
-import { Component, ComponentProps } from 'solid-js';
+import { Component, ComponentProps, JSXElement } from 'solid-js';
 import { PasswordInputInput } from '../PasswordInput';
 export type PasswordInputFieldProps = ComponentProps<typeof PasswordInputInput> & {
     label?: string;
     description?: string;
     showVisibilityTrigger?: boolean;
+    trailingAddon?: JSXElement;
 };
 export declare const PasswordInputField: Component<PasswordInputFieldProps>;

package/dist/components/form/PasswordInputField.js

@@ -1,78 +1,90 @@
-import { createComponent as e, mergeProps as d, Show as s } from "solid-js/web";
-import { splitProps as a } from "solid-js";
-import { Field as o, FieldLabel as u, FieldContent as g, FieldError as p, FieldDescription as h } from "../Field.js";
-import { PasswordInput as c, PasswordInputControl as m, PasswordInputInput as f, PasswordInputVisibilityTrigger as b, PasswordInputIndicator as w } from "../PasswordInput.js";
+import { createComponent as e, mergeProps as i, Show as d } from "solid-js/web";
+import { Field as a, FieldLabel as o, FieldContent as s, FieldError as u, FieldDescription as g } from "../Field.js";
+import { PasswordInput as c, PasswordInputControl as h, PasswordInputInput as f, PasswordInputVisibilityTrigger as m, PasswordInputIndicator as P } from "../PasswordInput.js";
 import { useFieldContext as I } from "./context.js";
-const C = (n) => {
-  const t = I(), [r, i] = a(n, ["label", "description", "required", "disabled", "readOnly", "showVisibilityTrigger"]);
-  return e(o, {
+import { WithTrailingAddon as b } from "./WithTrailingAddon.js";
+import { splitProps as w } from "solid-js";
+const F = ["label", "description", "required", "disabled", "readOnly", "showVisibilityTrigger", "trailingAddon"], y = (r) => e(b, {
+  get addon() {
+    return r.local.trailingAddon;
+  },
+  get children() {
+    return e(c, {
+      get invalid() {
+        return r.field().state.meta.errors.length > 0;
+      },
+      get disabled() {
+        return r.local.disabled ?? !1;
+      },
+      get readOnly() {
+        return r.local.readOnly ?? !1;
+      },
+      get required() {
+        return r.local.required ?? !1;
+      },
+      get children() {
+        return e(h, {
+          get children() {
+            return [e(f, i({
+              get value() {
+                return r.field().state.value;
+              },
+              onInput: (n) => {
+                r.field().handleChange(n.target.value);
+              },
+              onBlur: () => {
+                r.field().handleBlur();
+              }
+            }, () => r.others)), e(d, {
+              get when() {
+                return r.local.showVisibilityTrigger !== !1;
+              },
+              get children() {
+                return e(m, {
+                  get children() {
+                    return e(P, {});
+                  }
+                });
+              }
+            })];
+          }
+        });
+      }
+    });
+  }
+}), A = (r) => {
+  const n = I(), [t, l] = w(r, F);
+  return e(a, {
     get invalid() {
-      return t().state.meta.errors.length > 0;
+      return n().state.meta.errors.length > 0;
     },
     get required() {
-      return r.required ?? !1;
+      return t.required ?? !1;
     },
     get disabled() {
-      return r.disabled ?? !1;
+      return t.disabled ?? !1;
     },
     get readOnly() {
-      return r.readOnly ?? !1;
+      return t.readOnly ?? !1;
     },
     get children() {
-      return [e(u, {
+      return [e(o, {
         get children() {
-          return r.label;
+          return t.label;
         }
-      }), e(g, {
+      }), e(s, {
         get children() {
-          return [e(c, {
-            get invalid() {
-              return t().state.meta.errors.length > 0;
-            },
-            get disabled() {
-              return r.disabled ?? !1;
-            },
-            get readOnly() {
-              return r.readOnly ?? !1;
-            },
-            get required() {
-              return r.required ?? !1;
-            },
-            get children() {
-              return e(m, {
-                get children() {
-                  return [e(f, d({
-                    get value() {
-                      return t().state.value;
-                    },
-                    onInput: (l) => {
-                      t().handleChange(l.target.value);
-                    },
-                    onBlur: () => {
-                      t().handleBlur();
-                    }
-                  }, i)), e(s, {
-                    get when() {
-                      return r.showVisibilityTrigger !== !1;
-                    },
-                    get children() {
-                      return e(b, {
-                        get children() {
-                          return e(w, {});
-                        }
-                      });
-                    }
-                  })];
-                }
-              });
-            }
-          }), e(p, {
+          return [e(y, {
+            field: n,
+            local: t,
+            others: l
+          }), e(u, {
             get errors() {
-              return t().state.meta.errors;
+              return n().state.meta.errors;
             }
-          }), e(h, {
+          }), e(g, {
             get children() {
-              return r.description;
+              return t.description;
             }
           })];
         }
@@ -81,6 +93,6 @@ const C = (n) => {
   });
 };
 export {
-  C as PasswordInputField
+  A as PasswordInputField
 };
 //# sourceMappingURL=PasswordInputField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInputField.js","sources":["../../../src/components/form/PasswordInputField.tsx"],"sourcesContent":["import { splitProps, type Component, type ComponentProps } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport {\n  PasswordInput,\n  PasswordInputControl,\n  PasswordInputInput,\n  PasswordInputVisibilityTrigger,\n  PasswordInputIndicator,\n} from '@/components/PasswordInput';\n\nimport { useFieldContext } from './context';\n\nexport type PasswordInputFieldProps = ComponentProps<typeof PasswordInputInput> & {\n  label?: string;\n  description?: string;\n  showVisibilityTrigger?: boolean;\n};\n\nexport const PasswordInputField: Component<PasswordInputFieldProps> = (props) => {\n  const field = useFieldContext<string>();\n  const [local, others] = splitProps(props, [\n    'label',\n    'description',\n    'required',\n    'disabled',\n    'readOnly',\n    'showVisibilityTrigger',\n  ]);\n\n  return (\n    <Field\n      invalid={field().state.meta.errors.length > 0}\n      required={local.required ?? false}\n      disabled={local.disabled ?? false}\n      readOnly={local.readOnly ?? false}\n    >\n      <FieldLabel>{local.label}</FieldLabel>\n      <FieldContent>\n        <PasswordInput\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          <PasswordInputControl>\n            <PasswordInputInput\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            <Show when={local.showVisibilityTrigger !== false}>\n              <PasswordInputVisibilityTrigger>\n                <PasswordInputIndicator />\n              </PasswordInputVisibilityTrigger>\n            </Show>\n          </PasswordInputControl>\n        </PasswordInput>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["PasswordInputField","props","field","useFieldContext","local","others","splitProps","_$createComponent","Field","invalid","state","meta","errors","length","required","disabled","readOnly","children","FieldLabel","label","FieldContent","PasswordInput","PasswordInputControl","PasswordInputInput","_$mergeProps","value","onInput","event","handleChange","target","onBlur","handleBlur","_$Show","when","showVisibilityTrigger","PasswordInputVisibilityTrigger","PasswordInputIndicator","FieldError","FieldDescription","description"],"mappings":";;;;;AAmBO,MAAMA,IAA0DC,CAAAA,MAAU;AAC/E,QAAMC,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CACxC,SACA,eACA,YACA,YACA,YACA,uBAAuB,CACxB;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,GAAa;AAAA,YAAA,IACZZ,UAAO;AAAA,qBAAEP,EAAAA,EAAQQ,MAAMC,KAAKC,OAAOC,SAAS;AAAA,YAAC;AAAA,YAAA,IAC7CE,WAAQ;AAAA,qBAAEX,EAAMW,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAEZ,EAAMY,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCF,WAAQ;AAAA,qBAAEV,EAAMU,YAAY;AAAA,YAAK;AAAA,YAAA,IAAAG,WAAA;AAAA,qBAAAV,EAEhCe,GAAoB;AAAA,gBAAA,IAAAL,WAAA;AAAA,yBAAA,CAAAV,EAClBgB,GAAkBC,EAAA;AAAA,oBAAA,IACjBC,QAAK;AAAA,6BAAEvB,EAAAA,EAAQQ,MAAMe;AAAAA,oBAAK;AAAA,oBAC1BC,SAAUC,CAAAA,MAAU;AAClBzB,sBAAAA,EAAAA,EAAQ0B,aAAaD,EAAME,OAAOJ,KAAK;AAAA,oBACzC;AAAA,oBACAK,QAAQA,MAAM;AACZ5B,sBAAAA,EAAAA,EAAQ6B,WAAAA;AAAAA,oBACV;AAAA,kBAAA,GACI1B,CAAM,CAAA,GAAAE,EAEXyB,GAAI;AAAA,oBAAA,IAACC,OAAI;AAAA,6BAAE7B,EAAM8B,0BAA0B;AAAA,oBAAK;AAAA,oBAAA,IAAAjB,WAAA;AAAA,6BAAAV,EAC9C4B,GAA8B;AAAA,wBAAA,IAAAlB,WAAA;AAAA,iCAAAV,EAC5B6B,GAAsB,EAAA;AAAA,wBAAA;AAAA,sBAAA,CAAA;AAAA,oBAAA;AAAA,kBAAA,CAAA,CAAA;AAAA,gBAAA;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAA7B,EAK9B8B,GAAU;AAAA,YAAA,IAACzB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5C+B,GAAgB;AAAA,YAAA,IAAArB,WAAA;AAAA,qBAAEb,EAAMmC;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}
+{"version":3,"file":"PasswordInputField.js","sources":["../../../src/components/form/PasswordInputField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSXElement } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport {\n  PasswordInput,\n  PasswordInputControl,\n  PasswordInputInput,\n  PasswordInputVisibilityTrigger,\n  PasswordInputIndicator,\n} from '@/components/PasswordInput';\n\nimport { useFieldContext } from './context';\nimport { WithTrailingAddon } from './WithTrailingAddon';\n\nexport type PasswordInputFieldProps = ComponentProps<typeof PasswordInputInput> & {\n  label?: string;\n  description?: string;\n  showVisibilityTrigger?: boolean;\n  trailingAddon?: JSXElement;\n};\n\nconst PASSWORD_INPUT_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'showVisibilityTrigger',\n  'trailingAddon',\n] as const;\n\ntype PasswordInputFieldLocalProps = Pick<\n  PasswordInputFieldProps,\n  (typeof PASSWORD_INPUT_FIELD_PROPS)[number]\n>;\n\nconst PasswordInputFieldControl: Component<{\n  field: ReturnType<typeof useFieldContext<string>>;\n  local: PasswordInputFieldLocalProps;\n  others: Omit<PasswordInputFieldProps, keyof PasswordInputFieldLocalProps>;\n}> = (props) => (\n  <WithTrailingAddon addon={props.local.trailingAddon}>\n    <PasswordInput\n      invalid={props.field().state.meta.errors.length > 0}\n      disabled={props.local.disabled ?? false}\n      readOnly={props.local.readOnly ?? false}\n      required={props.local.required ?? false}\n    >\n      <PasswordInputControl>\n        <PasswordInputInput\n          value={props.field().state.value}\n          onInput={(event) => {\n            props.field().handleChange(event.target.value);\n          }}\n          onBlur={() => {\n            props.field().handleBlur();\n          }}\n          {...props.others}\n        />\n        <Show when={props.local.showVisibilityTrigger !== false}>\n          <PasswordInputVisibilityTrigger>\n            <PasswordInputIndicator />\n          </PasswordInputVisibilityTrigger>\n        </Show>\n      </PasswordInputControl>\n    </PasswordInput>\n  </WithTrailingAddon>\n);\n\nexport const PasswordInputField: Component<PasswordInputFieldProps> = (props) => {\n  const field = useFieldContext<string>();\n  const [local, others] = splitProps(props, PASSWORD_INPUT_FIELD_PROPS);\n\n  return (\n    <Field\n      invalid={field().state.meta.errors.length > 0}\n      required={local.required ?? false}\n      disabled={local.disabled ?? false}\n      readOnly={local.readOnly ?? false}\n    >\n      <FieldLabel>{local.label}</FieldLabel>\n      <FieldContent>\n        <PasswordInputFieldControl field={field} local={local} others={others} />\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["PASSWORD_INPUT_FIELD_PROPS","PasswordInputFieldControl","props","_$createComponent","WithTrailingAddon","addon","local","trailingAddon","children","PasswordInput","invalid","field","state","meta","errors","length","disabled","readOnly","required","PasswordInputControl","PasswordInputInput","_$mergeProps","value","onInput","event","handleChange","target","onBlur","handleBlur","others","_$Show","when","showVisibilityTrigger","PasswordInputVisibilityTrigger","PasswordInputIndicator","PasswordInputField","useFieldContext","splitProps","Field","FieldLabel","label","FieldContent","FieldError","FieldDescription","description"],"mappings":"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"}

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

@@ -1,8 +1,9 @@
-import { Component, ComponentProps } from 'solid-js';
+import { Component, ComponentProps, JSXElement } from 'solid-js';
 import { PinInput } from '../PinInput';
 export type PinInputFieldProps = ComponentProps<typeof PinInput> & {
     label?: string;
     description?: string;
     count?: number;
+    trailingAddon?: JSXElement;
 };
 export declare const PinInputField: Component<PinInputFieldProps>;

package/dist/components/form/PinInputField.js

@@ -1,19 +1,20 @@
-import { createComponent as e, mergeProps as o } from "solid-js/web";
-import { splitProps as d, Index as a } from "solid-js";
-import { Field as s, FieldLabel as c, FieldContent as g, FieldError as p, FieldDescription as h } from "../Field.js";
-import { PinInput as m, PinInputHiddenInput as I, PinInputControl as P, PinInputGroup as f, PinInputInput as F } from "../PinInput.js";
-import { useFieldContext as b } from "./context.js";
-const C = 6, O = ["label", "description", "required", "disabled", "readOnly", "count"], y = (n) => e(P, {
+import { createComponent as e, mergeProps as o, Index as u } from "solid-js/web";
+import { Field as a, FieldLabel as s, FieldContent as g, FieldError as c, FieldDescription as p } from "../Field.js";
+import { PinInput as h, PinInputHiddenInput as m, PinInputControl as f, PinInputGroup as I, PinInputInput as P } from "../PinInput.js";
+import { useFieldContext as F } from "./context.js";
+import { WithTrailingAddon as b } from "./WithTrailingAddon.js";
+import { splitProps as C } from "solid-js";
+const O = 6, y = ["label", "description", "required", "disabled", "readOnly", "count", "trailingAddon"], _ = (n) => e(f, {
   get children() {
-    return e(f, {
+    return e(I, {
       get children() {
-        return e(a, {
+        return e(u, {
           get each() {
             return Array.from({
               length: n.count
             });
           },
-          children: (t, r) => e(F, {
+          children: (t, r) => e(P, {
             index: r
           })
         });
@@ -21,8 +22,8 @@ const C = 6, O = ["label", "description", "required", "disabled", "readOnly", "c
     });
   }
 }), x = (n) => {
-  const t = b(), [r, i] = d(n, O), l = r.count ?? C;
-  return e(s, {
+  const t = F(), [r, l] = C(n, y), i = r.count ?? O;
+  return e(a, {
     get invalid() {
       return t().state.meta.errors.length > 0;
     },
@@ -36,46 +37,53 @@ const C = 6, O = ["label", "description", "required", "disabled", "readOnly", "c
       return r.required ?? !1;
     },
     get children() {
-      return [e(c, {
+      return [e(s, {
         get children() {
           return r.label;
         }
       }), e(g, {
         get children() {
-          return [e(m, o({
-            get value() {
-              return t().state.value;
+          return [e(b, {
+            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;
-            },
-            get required() {
-              return r.required ?? !1;
-            },
-            count: l
-          }, i, {
             get children() {
-              return [e(y, {
-                count: l
-              }), e(I, {})];
+              return e(h, o({
+                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;
+                },
+                get required() {
+                  return r.required ?? !1;
+                },
+                count: i
+              }, l, {
+                get children() {
+                  return [e(_, {
+                    count: i
+                  }), e(m, {})];
+                }
+              }));
             }
-          })), e(p, {
+          }), e(c, {
             get errors() {
               return t().state.meta.errors;
             }
-          }), e(h, {
+          }), e(p, {
             get children() {
               return r.description;
             }

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

@@ -1 +1 @@
-{"version":3,"file":"PinInputField.js","sources":["../../../src/components/form/PinInputField.tsx"],"sourcesContent":["import { splitProps, type Component, type ComponentProps, Index } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport {\n  PinInput,\n  PinInputControl,\n  PinInputInput,\n  PinInputGroup,\n  PinInputHiddenInput,\n} from '@/components/PinInput';\n\nimport { useFieldContext } from './context';\n\nexport type PinInputFieldProps = ComponentProps<typeof PinInput> & {\n  label?: string;\n  description?: string;\n  count?: number;\n};\n\nconst DEFAULT_PIN_COUNT = 6;\nconst PIN_INPUT_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'count',\n] as const;\n\nconst PinInputDigits: Component<{ count: number }> = (props) => (\n  <PinInputControl>\n    <PinInputGroup>\n      <Index each={Array.from({ length: props.count })}>\n        {(_, index) => <PinInputInput index={index} />}\n      </Index>\n    </PinInputGroup>\n  </PinInputControl>\n);\n\nexport const PinInputField: Component<PinInputFieldProps> = (props) => {\n  const field = useFieldContext<string[]>();\n  const [local, others] = splitProps(props, PIN_INPUT_FIELD_PROPS);\n  const pinCount = local.count ?? DEFAULT_PIN_COUNT;\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        <PinInput\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          count={pinCount}\n          {...others}\n        >\n          <PinInputDigits count={pinCount} />\n          <PinInputHiddenInput />\n        </PinInput>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["DEFAULT_PIN_COUNT","PIN_INPUT_FIELD_PROPS","PinInputDigits","props","_$createComponent","PinInputControl","children","PinInputGroup","Index","each","Array","from","length","count","_","index","PinInputInput","PinInputField","field","useFieldContext","local","others","splitProps","pinCount","Field","invalid","state","meta","errors","disabled","readOnly","required","FieldLabel","label","FieldContent","PinInput","_$mergeProps","value","onValueChange","details","handleChange","onBlur","handleBlur","PinInputHiddenInput","FieldError","FieldDescription","description"],"mappings":";;;;;AAmBA,MAAMA,IAAoB,GACpBC,IAAwB,CAC5B,SACA,eACA,YACA,YACA,YACA,OAAO,GAGHC,IAAgDC,CAAAA,MAAKC,EACxDC,GAAe;AAAA,EAAA,IAAAC,WAAA;AAAA,WAAAF,EACbG,GAAa;AAAA,MAAA,IAAAD,WAAA;AAAA,eAAAF,EACXI,GAAK;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEC,MAAMC,KAAK;AAAA,cAAEC,QAAQT,EAAMU;AAAAA,YAAAA,CAAO;AAAA,UAAC;AAAA,UAAAP,UAC7CA,CAACQ,GAAGC,MAAKX,EAAMY,GAAa;AAAA,YAACD,OAAAA;AAAAA,UAAAA,CAAY;AAAA,QAAA,CAAI;AAAA,MAAA;AAAA,IAAA,CAAA;AAAA,EAAA;AAAA,CAAA,GAMzCE,IAAgDd,CAAAA,MAAU;AACrE,QAAMe,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWnB,GAAOF,CAAqB,GACzDsB,IAAWH,EAAMP,SAASb;AAEhC,SAAAI,EACGoB,GAAK;AAAA,IAAA,IACJC,UAAO;AAAA,aAAEP,EAAAA,EAAQQ,MAAMC,KAAKC,OAAOhB,SAAS;AAAA,IAAC;AAAA,IAAA,IAC7CiB,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,IAAAzB,WAAA;AAAA,aAAA,CAAAF,EAEhC4B,GAAU;AAAA,QAAA,IAAA1B,WAAA;AAAA,iBAAEc,EAAMa;AAAAA,QAAK;AAAA,MAAA,CAAA,GAAA7B,EACvB8B,GAAY;AAAA,QAAA,IAAA5B,WAAA;AAAA,iBAAA,CAAAF,EACV+B,GAAQC,EAAA;AAAA,YAAA,IACPC,QAAK;AAAA,qBAAEnB,EAAAA,EAAQQ,MAAMW;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,IACDjB,UAAO;AAAA,qBAAEP,EAAAA,EAAQQ,MAAMC,KAAKC,OAAOhB,SAAS;AAAA,YAAC;AAAA,YAAA,IAC7CiB,WAAQ;AAAA,qBAAET,EAAMS,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAEV,EAAMU,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAEX,EAAMW,YAAY;AAAA,YAAK;AAAA,YACjClB,OAAOU;AAAAA,UAAAA,GACHF,GAAM;AAAA,YAAA,IAAAf,WAAA;AAAA,qBAAA,CAAAF,EAETF,GAAc;AAAA,gBAACW,OAAOU;AAAAA,cAAAA,CAAQ,GAAAnB,EAC9BuC,GAAmB,CAAA,CAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,CAAA,GAAAvC,EAErBwC,GAAU;AAAA,YAAA,IAAChB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAxB,EAC5CyC,GAAgB;AAAA,YAAA,IAAAvC,WAAA;AAAA,qBAAEc,EAAM0B;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}
+{"version":3,"file":"PinInputField.js","sources":["../../../src/components/form/PinInputField.tsx"],"sourcesContent":["import type { Component, ComponentProps, JSXElement } from 'solid-js';\n\nimport { Field, FieldLabel, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport {\n  PinInput,\n  PinInputControl,\n  PinInputInput,\n  PinInputGroup,\n  PinInputHiddenInput,\n} from '@/components/PinInput';\n\nimport { useFieldContext } from './context';\nimport { WithTrailingAddon } from './WithTrailingAddon';\n\nexport type PinInputFieldProps = ComponentProps<typeof PinInput> & {\n  label?: string;\n  description?: string;\n  count?: number;\n  trailingAddon?: JSXElement;\n};\n\nconst DEFAULT_PIN_COUNT = 6;\nconst PIN_INPUT_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'count',\n  'trailingAddon',\n] as const;\n\nconst PinInputDigits: Component<{ count: number }> = (props) => (\n  <PinInputControl>\n    <PinInputGroup>\n      <Index each={Array.from({ length: props.count })}>\n        {(_, index) => <PinInputInput index={index} />}\n      </Index>\n    </PinInputGroup>\n  </PinInputControl>\n);\n\nexport const PinInputField: Component<PinInputFieldProps> = (props) => {\n  const field = useFieldContext<string[]>();\n  const [local, others] = splitProps(props, PIN_INPUT_FIELD_PROPS);\n  const pinCount = local.count ?? DEFAULT_PIN_COUNT;\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          <PinInput\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            count={pinCount}\n            {...others}\n          >\n            <PinInputDigits count={pinCount} />\n            <PinInputHiddenInput />\n          </PinInput>\n        </WithTrailingAddon>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["DEFAULT_PIN_COUNT","PIN_INPUT_FIELD_PROPS","PinInputDigits","props","_$createComponent","PinInputControl","children","PinInputGroup","_$Index","each","Array","from","length","count","_","index","PinInputInput","PinInputField","field","useFieldContext","local","others","splitProps","pinCount","Field","invalid","state","meta","errors","disabled","readOnly","required","FieldLabel","label","FieldContent","WithTrailingAddon","addon","trailingAddon","PinInput","_$mergeProps","value","onValueChange","details","handleChange","onBlur","handleBlur","PinInputHiddenInput","FieldError","FieldDescription","description"],"mappings":"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"}

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

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