@manafishrov/ui 1.3.2 → 1.3.4

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

@@ -1,7 +1,8 @@
 import { ComboboxRootProps } from '@ark-ui/solid';
 import { Component, ComponentProps } from 'solid-js';
-import { ComboboxInput } from '../Combobox';
-export type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> & {
+import { Combobox, ComboboxInput } from '../Combobox';
+declare const COMBOBOX_ROOT_PROPS: readonly ["placeholder", "inputBehavior", "openOnChange", "openOnClick", "openOnKeyPress", "closeOnSelect", "allowCustomValue", "multiple", "selectionBehavior", "autoFocus", "loopFocus", "positioning", "alwaysSubmitOnEnter", "composite", "defaultHighlightedValue", "defaultInputValue", "defaultOpen", "defaultValue", "disableLayer", "highlightedValue", "ids", "immediate", "inputValue", "lazyMount", "navigate", "onExitComplete", "onFocusOutside", "onHighlightChange", "onInputValueChange", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onSelect", "open", "present", "scrollToIndexFn", "skipAnimationOnMount", "translations", "unmountOnExit"];
+export type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> & Pick<ComponentProps<typeof Combobox<string>>, (typeof COMBOBOX_ROOT_PROPS)[number]> & {
     collection: ComboboxRootProps<string>['collection'];
     label?: string;
     description?: string;
@@ -11,3 +12,4 @@ export type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> & {
     class?: string;
 };
 export declare const ComboboxField: Component<ComboboxFieldProps>;
+export {};

package/dist/components/form/ComboboxField.js

@@ -1,27 +1,27 @@
-import { createComponent as e, mergeProps as s, insert as i, memo as g, template as d } from "solid-js/web";
-import { Combobox as u, ComboboxControl as c, ComboboxInput as h, ComboboxClearTrigger as m, ComboboxTrigger as b, ComboboxPositioner as C, ComboboxContent as p, ComboboxList as x } from "../Combobox.js";
-import { Field as f, FieldLabel as T, FieldContent as v, FieldError as w, FieldDescription as O } from "../Field.js";
-import { useFieldContext as F } from "./context.js";
-import { splitProps as a } from "solid-js";
-var _ = /* @__PURE__ */ d('<div class="gap-1 flex items-center">');
-const y = (l) => {
-  const [t, r] = a(l, ["showTrigger", "showClearTrigger", "children"]);
-  return [e(c, {
+import { createComponent as e, mergeProps as a, insert as s, memo as u, template as c } from "solid-js/web";
+import { Combobox as h, ComboboxControl as p, ComboboxInput as m, ComboboxClearTrigger as C, ComboboxTrigger as b, ComboboxPositioner as O, ComboboxContent as f, ComboboxList as x } from "../Combobox.js";
+import { Field as T, FieldLabel as v, FieldContent as w, FieldError as F, FieldDescription as P } from "../Field.js";
+import { useFieldContext as y } from "./context.js";
+import { splitProps as i } from "solid-js";
+var B = /* @__PURE__ */ c('<div class="gap-1 flex items-center">');
+const V = ["placeholder", "inputBehavior", "openOnChange", "openOnClick", "openOnKeyPress", "closeOnSelect", "allowCustomValue", "multiple", "selectionBehavior", "autoFocus", "loopFocus", "positioning", "alwaysSubmitOnEnter", "composite", "defaultHighlightedValue", "defaultInputValue", "defaultOpen", "defaultValue", "disableLayer", "highlightedValue", "ids", "immediate", "inputValue", "lazyMount", "navigate", "onExitComplete", "onFocusOutside", "onHighlightChange", "onInputValueChange", "onInteractOutside", "onOpenChange", "onPointerDownOutside", "onSelect", "open", "present", "scrollToIndexFn", "skipAnimationOnMount", "translations", "unmountOnExit"], _ = (l) => {
+  const [t, r] = i(l, ["showTrigger", "showClearTrigger", "children"]);
+  return [e(p, {
     get children() {
-      return [e(h, r), (() => {
-        var o = _();
-        return i(o, (() => {
-          var n = g(() => t.showClearTrigger === !0);
-          return () => n() && e(m, {});
-        })(), null), i(o, (() => {
-          var n = g(() => t.showTrigger === !0);
+      return [e(m, r), (() => {
+        var o = B();
+        return s(o, (() => {
+          var n = u(() => t.showClearTrigger === !0);
+          return () => n() && e(C, {});
+        })(), null), s(o, (() => {
+          var n = u(() => t.showTrigger === !0);
           return () => n() && e(b, {});
         })(), null), o;
       })()];
     }
-  }), e(C, {
+  }), e(O, {
     get children() {
-      return e(p, {
+      return e(f, {
         get children() {
           return e(x, {
             get children() {
@@ -32,9 +32,9 @@ const y = (l) => {
       });
     }
   })];
-}, P = ["label", "description", "required", "disabled", "readOnly", "collection", "showTrigger", "showClearTrigger", "children"], D = (l) => {
-  const t = F(), [r, o] = a(l, P);
-  return e(f, {
+}, I = ["label", "description", "required", "disabled", "readOnly", "collection", "showTrigger", "showClearTrigger", "children"], q = (l) => {
+  const t = y(), [r, o] = i(l, I), [n, g] = i(o, V);
+  return e(T, {
     get invalid() {
       return t().state.meta.errors.length > 0;
     },
@@ -48,21 +48,21 @@ const y = (l) => {
       return r.required ?? !1;
     },
     get children() {
-      return [e(T, {
+      return [e(v, {
         get children() {
           return r.label;
         }
-      }), e(v, {
+      }), e(w, {
         get children() {
-          return [e(u, {
+          return [e(h, a({
             get collection() {
               return r.collection;
             },
             get value() {
               return t().state.value;
             },
-            onValueChange: (n) => {
-              t().handleChange(n.value);
+            onValueChange: (d) => {
+              t().handleChange(d.value);
             },
             onBlur: () => {
               t().handleBlur();
@@ -75,26 +75,27 @@ const y = (l) => {
             },
             get readOnly() {
               return r.readOnly ?? !1;
-            },
+            }
+          }, n, {
             get children() {
-              return e(y, s({
+              return e(_, a({
                 get showTrigger() {
                   return r.showTrigger;
                 },
                 get showClearTrigger() {
                   return r.showClearTrigger;
                 }
-              }, o, {
+              }, g, {
                 get children() {
                   return r.children;
                 }
               }));
             }
-          }), e(w, {
+          })), e(F, {
             get errors() {
               return t().state.meta.errors;
             }
-          }), e(O, {
+          }), e(P, {
             get children() {
               return r.description;
             }
@@ -105,6 +106,6 @@ const y = (l) => {
   });
 };
 export {
-  D as ComboboxField
+  q as ComboboxField
 };
 //# sourceMappingURL=ComboboxField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ComboboxField.js","sources":["../../../src/components/form/ComboboxField.tsx"],"sourcesContent":["import type { ComboboxRootProps } from '@ark-ui/solid';\nimport type { Component, ComponentProps } from 'solid-js';\n\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxList,\n  ComboboxPositioner,\n  ComboboxControl,\n  ComboboxTrigger,\n  ComboboxClearTrigger,\n} from '@/components/Combobox';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\n\nimport { useFieldContext } from './context';\n\nexport type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> & {\n  collection: ComboboxRootProps<string>['collection'];\n  label?: string;\n  description?: string;\n  showTrigger?: boolean;\n  showClearTrigger?: boolean;\n} & { class?: string };\n\nconst ComboboxInputGroup: Component<\n  ComponentProps<typeof ComboboxInput> & {\n    showTrigger?: boolean | undefined;\n    showClearTrigger?: boolean | undefined;\n  }\n> = (props) => {\n  const [local, others] = splitProps(props, ['showTrigger', 'showClearTrigger', 'children']);\n\n  return (\n    <>\n      <ComboboxControl>\n        <ComboboxInput {...others} />\n        <div class='gap-1 flex items-center'>\n          {local.showClearTrigger === true && <ComboboxClearTrigger />}\n          {local.showTrigger === true && <ComboboxTrigger />}\n        </div>\n      </ComboboxControl>\n      <ComboboxPositioner>\n        <ComboboxContent>\n          <ComboboxList>{local.children}</ComboboxList>\n        </ComboboxContent>\n      </ComboboxPositioner>\n    </>\n  );\n};\n\nconst COMBOBOX_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'collection',\n  'showTrigger',\n  'showClearTrigger',\n  'children',\n] as const;\n\nexport const ComboboxField: Component<ComboboxFieldProps> = (props) => {\n  const field = useFieldContext<string[]>();\n  const [local, others] = splitProps(props, COMBOBOX_FIELD_PROPS);\n\n  return (\n    <Field\n      invalid={field().state.meta.errors.length > 0}\n      disabled={local.disabled ?? false}\n      readOnly={local.readOnly ?? false}\n      required={local.required ?? false}\n    >\n      <FieldLabel>{local.label}</FieldLabel>\n      <FieldContent>\n        <Combobox<string>\n          collection={local.collection}\n          value={field().state.value}\n          onValueChange={(details) => {\n            field().handleChange(details.value);\n          }}\n          onBlur={() => {\n            field().handleBlur();\n          }}\n          invalid={field().state.meta.errors.length > 0}\n          disabled={local.disabled ?? false}\n          readOnly={local.readOnly ?? false}\n        >\n          <ComboboxInputGroup\n            showTrigger={local.showTrigger}\n            showClearTrigger={local.showClearTrigger}\n            {...others}\n          >\n            {local.children}\n          </ComboboxInputGroup>\n        </Combobox>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["ComboboxInputGroup","props","local","others","splitProps","_$createComponent","ComboboxControl","children","ComboboxInput","_el$","_tmpl$","_$insert","_c$","_$memo","showClearTrigger","ComboboxClearTrigger","_c$2","showTrigger","ComboboxTrigger","ComboboxPositioner","ComboboxContent","ComboboxList","COMBOBOX_FIELD_PROPS","ComboboxField","field","useFieldContext","Field","invalid","state","meta","errors","length","disabled","readOnly","required","FieldLabel","label","FieldContent","Combobox","collection","value","onValueChange","details","handleChange","onBlur","handleBlur","_$mergeProps","FieldError","FieldDescription","description"],"mappings":"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"}
+{"version":3,"file":"ComboboxField.js","sources":["../../../src/components/form/ComboboxField.tsx"],"sourcesContent":["import type { ComboboxRootProps } from '@ark-ui/solid';\nimport type { Component, ComponentProps } from 'solid-js';\n\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxList,\n  ComboboxPositioner,\n  ComboboxControl,\n  ComboboxTrigger,\n  ComboboxClearTrigger,\n} from '@/components/Combobox';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\n\nimport { useFieldContext } from './context';\n\nconst COMBOBOX_ROOT_PROPS = [\n  'placeholder',\n  'inputBehavior',\n  'openOnChange',\n  'openOnClick',\n  'openOnKeyPress',\n  'closeOnSelect',\n  'allowCustomValue',\n  'multiple',\n  'selectionBehavior',\n  'autoFocus',\n  'loopFocus',\n  'positioning',\n  'alwaysSubmitOnEnter',\n  'composite',\n  'defaultHighlightedValue',\n  'defaultInputValue',\n  'defaultOpen',\n  'defaultValue',\n  'disableLayer',\n  'highlightedValue',\n  'ids',\n  'immediate',\n  'inputValue',\n  'lazyMount',\n  'navigate',\n  'onExitComplete',\n  'onFocusOutside',\n  'onHighlightChange',\n  'onInputValueChange',\n  'onInteractOutside',\n  'onOpenChange',\n  'onPointerDownOutside',\n  'onSelect',\n  'open',\n  'present',\n  'scrollToIndexFn',\n  'skipAnimationOnMount',\n  'translations',\n  'unmountOnExit',\n] as const;\n\nexport type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> &\n  Pick<ComponentProps<typeof Combobox<string>>, (typeof COMBOBOX_ROOT_PROPS)[number]> & {\n    collection: ComboboxRootProps<string>['collection'];\n    label?: string;\n    description?: string;\n    showTrigger?: boolean;\n    showClearTrigger?: boolean;\n  } & { class?: string };\n\nconst ComboboxInputGroup: Component<\n  ComponentProps<typeof ComboboxInput> & {\n    showTrigger?: boolean | undefined;\n    showClearTrigger?: boolean | undefined;\n  }\n> = (props) => {\n  const [local, others] = splitProps(props, ['showTrigger', 'showClearTrigger', 'children']);\n\n  return (\n    <>\n      <ComboboxControl>\n        <ComboboxInput {...others} />\n        <div class='gap-1 flex items-center'>\n          {local.showClearTrigger === true && <ComboboxClearTrigger />}\n          {local.showTrigger === true && <ComboboxTrigger />}\n        </div>\n      </ComboboxControl>\n      <ComboboxPositioner>\n        <ComboboxContent>\n          <ComboboxList>{local.children}</ComboboxList>\n        </ComboboxContent>\n      </ComboboxPositioner>\n    </>\n  );\n};\n\nconst COMBOBOX_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'collection',\n  'showTrigger',\n  'showClearTrigger',\n  'children',\n] as const;\n\nexport const ComboboxField: Component<ComboboxFieldProps> = (props) => {\n  const field = useFieldContext<string[]>();\n  const [local, others] = splitProps(props, COMBOBOX_FIELD_PROPS);\n  const [rootProps, inputProps] = splitProps(others, COMBOBOX_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        <Combobox<string>\n          collection={local.collection}\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          <ComboboxInputGroup\n            showTrigger={local.showTrigger}\n            showClearTrigger={local.showClearTrigger}\n            {...inputProps}\n          >\n            {local.children}\n          </ComboboxInputGroup>\n        </Combobox>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["COMBOBOX_ROOT_PROPS","ComboboxInputGroup","props","local","others","splitProps","_$createComponent","ComboboxControl","children","ComboboxInput","_el$","_tmpl$","_$insert","_c$","_$memo","showClearTrigger","ComboboxClearTrigger","_c$2","showTrigger","ComboboxTrigger","ComboboxPositioner","ComboboxContent","ComboboxList","COMBOBOX_FIELD_PROPS","ComboboxField","field","useFieldContext","rootProps","inputProps","Field","invalid","state","meta","errors","length","disabled","readOnly","required","FieldLabel","label","FieldContent","Combobox","_$mergeProps","collection","value","onValueChange","details","handleChange","onBlur","handleBlur","FieldError","FieldDescription","description"],"mappings":"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"}

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

@@ -1,8 +1,11 @@
 import { DatePickerInputProps } from '@ark-ui/solid';
-import { Component } from 'solid-js';
-export type DatePickerFieldProps = DatePickerInputProps & {
+import { Component, ComponentProps } from 'solid-js';
+import { DatePicker } from '../DatePicker';
+declare const DATE_PICKER_ROOT_PROPS: readonly ["min", "max", "locale", "timeZone", "format", "parse", "selectionMode", "numOfMonths", "fixedWeeks", "startOfWeek", "showWeekNumbers", "outsideDaySelectable", "isDateUnavailable", "openOnClick", "positioning", "closeOnSelect", "defaultFocusedValue", "defaultOpen", "defaultValue", "defaultView", "focusedValue", "ids", "immediate", "inline", "lazyMount", "maxSelectedDates", "maxView", "minView", "name", "onExitComplete", "onFocusChange", "onOpenChange", "onValueChange", "onViewChange", "onVisibleRangeChange", "open", "present", "skipAnimationOnMount", "translations", "unmountOnExit", "view"];
+export type DatePickerFieldProps = DatePickerInputProps & Pick<ComponentProps<typeof DatePicker>, (typeof DATE_PICKER_ROOT_PROPS)[number]> & {
     label?: string;
     description?: string;
     showTrigger?: boolean;
 };
 export declare const DatePickerField: Component<DatePickerFieldProps>;
+export {};

package/dist/components/form/DatePickerField.js

@@ -1,33 +1,33 @@
-import { createComponent as e, mergeProps as a, Show as d } from "solid-js/web";
-import { DatePicker as s, DatePickerControl as g, DatePickerInput as u, DatePickerTrigger as c, DatePickerPositioner as h, DatePickerContent as p, DatePickerViews as m } from "../DatePicker.js";
-import { Field as P, FieldLabel as f, FieldContent as D, FieldError as b, FieldDescription as k } from "../Field.js";
-import { useFieldContext as w } from "./context.js";
-import { splitProps as l } from "solid-js";
-const C = (n) => {
-  const [t, r] = l(n, ["showTrigger"]);
-  return [e(g, {
+import { createComponent as e, mergeProps as o, Show as u } from "solid-js/web";
+import { DatePicker as g, DatePickerControl as c, DatePickerInput as h, DatePickerTrigger as p, DatePickerPositioner as m, DatePickerContent as f, DatePickerViews as P } from "../DatePicker.js";
+import { Field as O, FieldLabel as C, FieldContent as D, FieldError as w, FieldDescription as k } from "../Field.js";
+import { useFieldContext as b } from "./context.js";
+import { splitProps as i } from "solid-js";
+const V = ["min", "max", "locale", "timeZone", "format", "parse", "selectionMode", "numOfMonths", "fixedWeeks", "startOfWeek", "showWeekNumbers", "outsideDaySelectable", "isDateUnavailable", "openOnClick", "positioning", "closeOnSelect", "defaultFocusedValue", "defaultOpen", "defaultValue", "defaultView", "focusedValue", "ids", "immediate", "inline", "lazyMount", "maxSelectedDates", "maxView", "minView", "name", "onExitComplete", "onFocusChange", "onOpenChange", "onValueChange", "onViewChange", "onVisibleRangeChange", "open", "present", "skipAnimationOnMount", "translations", "unmountOnExit", "view"], F = (n) => {
+  const [t, r] = i(n, ["showTrigger"]);
+  return [e(c, {
     get children() {
-      return [e(u, r), e(d, {
+      return [e(h, r), e(u, {
         get when() {
           return t.showTrigger !== !1;
         },
         get children() {
-          return e(c, {});
+          return e(p, {});
         }
       })];
     }
-  }), e(h, {
+  }), e(m, {
     get children() {
-      return e(p, {
+      return e(f, {
         get children() {
-          return e(m, {});
+          return e(P, {});
         }
       });
     }
   })];
-}, F = ["label", "description", "required", "disabled", "readOnly", "placeholder", "showTrigger"], I = (n) => {
-  const t = w(), [r, i] = l(n, F);
-  return e(P, {
+}, T = ["label", "description", "required", "disabled", "readOnly", "placeholder", "showTrigger"], S = (n) => {
+  const t = b(), [r, l] = i(n, T), [a, s] = i(l, V);
+  return e(O, {
     get invalid() {
       return t().state.meta.errors.length > 0;
     },
@@ -41,18 +41,18 @@ const C = (n) => {
       return r.required ?? !1;
     },
     get children() {
-      return [e(f, {
+      return [e(C, {
         get children() {
           return r.label;
         }
       }), e(D, {
         get children() {
-          return [e(s, {
+          return [e(g, o({
             get value() {
               return t().state.value;
             },
-            onValueChange: (o) => {
-              t().handleChange(o.value);
+            onValueChange: (d) => {
+              t().handleChange(d.value);
             },
             onBlur: () => {
               t().handleBlur();
@@ -65,9 +65,10 @@ const C = (n) => {
             },
             get readOnly() {
               return r.readOnly ?? !1;
-            },
+            }
+          }, a, {
             get children() {
-              return e(C, a(i, {
+              return e(F, o(s, {
                 get placeholder() {
                   return r.placeholder;
                 }
@@ -75,7 +76,7 @@ const C = (n) => {
                 showTrigger: r.showTrigger
               }));
             }
-          }), e(b, {
+          })), e(w, {
             get errors() {
               return t().state.meta.errors;
             }
@@ -90,6 +91,6 @@ const C = (n) => {
   });
 };
 export {
-  I as DatePickerField
+  S as DatePickerField
 };
 //# sourceMappingURL=DatePickerField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePickerField.js","sources":["../../../src/components/form/DatePickerField.tsx"],"sourcesContent":["import type { DatePickerInputProps, DateValue } from '@ark-ui/solid';\nimport type { Component } from 'solid-js';\n\nimport {\n  DatePicker,\n  DatePickerContent,\n  DatePickerControl,\n  DatePickerInput,\n  DatePickerPositioner,\n  DatePickerTrigger,\n  DatePickerViews,\n} from '@/components/DatePicker';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\n\nimport { useFieldContext } from './context';\n\nexport type DatePickerFieldProps = DatePickerInputProps & {\n  label?: string;\n  description?: string;\n  showTrigger?: boolean;\n};\n\nconst DatePickerInputGroup: Component<DatePickerInputProps & { showTrigger?: boolean }> = (\n  props,\n) => {\n  const [local, others] = splitProps(props, ['showTrigger']);\n\n  return (\n    <>\n      <DatePickerControl>\n        <DatePickerInput {...others} />\n        <Show when={local.showTrigger !== false}>\n          <DatePickerTrigger />\n        </Show>\n      </DatePickerControl>\n      <DatePickerPositioner>\n        <DatePickerContent>\n          <DatePickerViews />\n        </DatePickerContent>\n      </DatePickerPositioner>\n    </>\n  );\n};\n\nconst DATE_PICKER_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'placeholder',\n  'showTrigger',\n] as const;\n\nexport const DatePickerField: Component<DatePickerFieldProps> = (props) => {\n  const field = useFieldContext<DateValue[]>();\n  const [local, others] = splitProps(props, DATE_PICKER_FIELD_PROPS);\n\n  return (\n    <Field\n      invalid={field().state.meta.errors.length > 0}\n      disabled={local.disabled ?? false}\n      readOnly={local.readOnly ?? false}\n      required={local.required ?? false}\n    >\n      <FieldLabel>{local.label}</FieldLabel>\n      <FieldContent>\n        <DatePicker\n          value={field().state.value}\n          onValueChange={(details) => {\n            field().handleChange(details.value);\n          }}\n          onBlur={() => {\n            field().handleBlur();\n          }}\n          invalid={field().state.meta.errors.length > 0}\n          disabled={local.disabled ?? false}\n          readOnly={local.readOnly ?? false}\n        >\n          <DatePickerInputGroup\n            {...others}\n            placeholder={local.placeholder}\n            {...(typeof local.showTrigger === 'boolean' && { showTrigger: local.showTrigger })}\n          />\n        </DatePicker>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["DatePickerInputGroup","props","local","others","splitProps","_$createComponent","DatePickerControl","children","DatePickerInput","_$Show","when","showTrigger","DatePickerTrigger","DatePickerPositioner","DatePickerContent","DatePickerViews","DATE_PICKER_FIELD_PROPS","DatePickerField","field","useFieldContext","Field","invalid","state","meta","errors","length","disabled","readOnly","required","FieldLabel","label","FieldContent","DatePicker","value","onValueChange","details","handleChange","onBlur","handleBlur","_$mergeProps","placeholder","FieldError","FieldDescription","description"],"mappings":"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"}
+{"version":3,"file":"DatePickerField.js","sources":["../../../src/components/form/DatePickerField.tsx"],"sourcesContent":["import type { DatePickerInputProps, DateValue } from '@ark-ui/solid';\nimport type { Component, ComponentProps } from 'solid-js';\n\nimport {\n  DatePicker,\n  DatePickerContent,\n  DatePickerControl,\n  DatePickerInput,\n  DatePickerPositioner,\n  DatePickerTrigger,\n  DatePickerViews,\n} from '@/components/DatePicker';\nimport { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';\n\nimport { useFieldContext } from './context';\n\nconst DATE_PICKER_ROOT_PROPS = [\n  'min',\n  'max',\n  'locale',\n  'timeZone',\n  'format',\n  'parse',\n  'selectionMode',\n  'numOfMonths',\n  'fixedWeeks',\n  'startOfWeek',\n  'showWeekNumbers',\n  'outsideDaySelectable',\n  'isDateUnavailable',\n  'openOnClick',\n  'positioning',\n  'closeOnSelect',\n  'defaultFocusedValue',\n  'defaultOpen',\n  'defaultValue',\n  'defaultView',\n  'focusedValue',\n  'ids',\n  'immediate',\n  'inline',\n  'lazyMount',\n  'maxSelectedDates',\n  'maxView',\n  'minView',\n  'name',\n  'onExitComplete',\n  'onFocusChange',\n  'onOpenChange',\n  'onValueChange',\n  'onViewChange',\n  'onVisibleRangeChange',\n  'open',\n  'present',\n  'skipAnimationOnMount',\n  'translations',\n  'unmountOnExit',\n  'view',\n] as const;\n\nexport type DatePickerFieldProps = DatePickerInputProps &\n  Pick<ComponentProps<typeof DatePicker>, (typeof DATE_PICKER_ROOT_PROPS)[number]> & {\n    label?: string;\n    description?: string;\n    showTrigger?: boolean;\n  };\n\nconst DatePickerInputGroup: Component<DatePickerInputProps & { showTrigger?: boolean }> = (\n  props,\n) => {\n  const [local, others] = splitProps(props, ['showTrigger']);\n\n  return (\n    <>\n      <DatePickerControl>\n        <DatePickerInput {...others} />\n        <Show when={local.showTrigger !== false}>\n          <DatePickerTrigger />\n        </Show>\n      </DatePickerControl>\n      <DatePickerPositioner>\n        <DatePickerContent>\n          <DatePickerViews />\n        </DatePickerContent>\n      </DatePickerPositioner>\n    </>\n  );\n};\n\nconst DATE_PICKER_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'placeholder',\n  'showTrigger',\n] as const;\n\nexport const DatePickerField: Component<DatePickerFieldProps> = (props) => {\n  const field = useFieldContext<DateValue[]>();\n  const [local, others] = splitProps(props, DATE_PICKER_FIELD_PROPS);\n  const [rootProps, inputProps] = splitProps(others, DATE_PICKER_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        <DatePicker\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          <DatePickerInputGroup\n            {...inputProps}\n            placeholder={local.placeholder}\n            {...(typeof local.showTrigger === 'boolean' && { showTrigger: local.showTrigger })}\n          />\n        </DatePicker>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["DATE_PICKER_ROOT_PROPS","DatePickerInputGroup","props","local","others","splitProps","_$createComponent","DatePickerControl","children","DatePickerInput","_$Show","when","showTrigger","DatePickerTrigger","DatePickerPositioner","DatePickerContent","DatePickerViews","DATE_PICKER_FIELD_PROPS","DatePickerField","field","useFieldContext","rootProps","inputProps","Field","invalid","state","meta","errors","length","disabled","readOnly","required","FieldLabel","label","FieldContent","DatePicker","_$mergeProps","value","onValueChange","details","handleChange","onBlur","handleBlur","placeholder","FieldError","FieldDescription","description"],"mappings":"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"}

package/dist/components/form/Form.js

@@ -29,7 +29,7 @@ const y = (e) => {
       });
     }), l(o, f({
       get class() {
-        return u("space-y-6 relative", r.class);
+        return u("space-y-8 relative", r.class);
       }
     }, i), !1, !0), n(o, () => r.children), o;
   })();

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import { createFormHook } from '@tanstack/solid-form';\nimport { splitProps, type Component, type ComponentProps } from 'solid-js';\nimport { cn } from 'tailwind-variants';\n\nimport { AutoSubmit } from './AutoSubmit';\nimport { CheckboxField } from './CheckboxField';\nimport { ComboboxField } from './ComboboxField';\nimport { fieldContext, formContext, useFormContext } from './context';\nimport { DatePickerField } from './DatePickerField';\nimport { NumberInputField } from './NumberInputField';\nimport { PasswordInputField } from './PasswordInputField';\nimport { PinInputField } from './PinInputField';\nimport { RadioGroupField } from './RadioGroupField';\nimport { SelectField } from './SelectField';\nimport { SliderField } from './SliderField';\nimport { SubmitButton } from './SubmitButton';\nimport { SwitchField } from './SwitchField';\nimport { TagsInputField } from './TagsInputField';\nimport { TextareaField } from './TextareaField';\nimport { TextInputField } from './TextInputField';\n\nexport type FormProps = Omit<ComponentProps<'form'>, 'onSubmit'>;\n\nexport const Form: Component<FormProps> = (props) => {\n  const form = useFormContext();\n  const [local, formProps] = splitProps(props, ['children', 'class']);\n\n  return (\n    <form\n      class={cn('space-y-6 relative', local.class)}\n      onSubmit={(submitEvent) => {\n        submitEvent.preventDefault();\n        submitEvent.stopPropagation();\n        form.handleSubmit().catch((error: unknown) => {\n          throw error;\n        });\n      }}\n      {...formProps}\n    >\n      {local.children}\n    </form>\n  );\n};\n\nexport const { useAppForm, withForm, withFieldGroup } = createFormHook({\n  formContext,\n  fieldContext,\n  fieldComponents: {\n    CheckboxField,\n    ComboboxField,\n    DatePickerField,\n    NumberInputField,\n    PasswordInputField,\n    PinInputField,\n    RadioGroupField,\n    SelectField,\n    SliderField,\n    SwitchField,\n    TagsInputField,\n    TextInputField,\n    TextareaField,\n  },\n  formComponents: {\n    AutoSubmit,\n    Form,\n    SubmitButton,\n  },\n});\n"],"names":["Form","props","form","useFormContext","local","formProps","splitProps","_el$","_tmpl$","addEventListener","submitEvent","preventDefault","stopPropagation","handleSubmit","catch","error","_$spread","_$mergeProps","cn","class","_$insert","children","useAppForm","withForm","withFieldGroup","createFormHook","formContext","fieldContext","fieldComponents","CheckboxField","ComboboxField","DatePickerField","NumberInputField","PasswordInputField","PinInputField","RadioGroupField","SelectField","SliderField","SwitchField","TagsInputField","TextInputField","TextareaField","formComponents","AutoSubmit","SubmitButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBO,MAAMA,IAA8BC,CAAAA,MAAU;AACnD,QAAMC,IAAOC,EAAAA,GACP,CAACC,GAAOC,CAAS,IAAIC,EAAWL,GAAO,CAAC,YAAY,OAAO,CAAC;AAElE,UAAA,MAAA;AAAA,QAAAM,IAAAC,EAAAA;AAAAD,WAAAA,EAAAE,iBAAA,UAGeC,CAAAA,MAAgB;AACzBA,MAAAA,EAAYC,eAAAA,GACZD,EAAYE,gBAAAA,GACZV,EAAKW,aAAAA,EAAeC,MAAM,CAACC,MAAmB;AAC5C,cAAMA;AAAAA,MACR,CAAC;AAAA,IACH,CAAC,GAAAC,EAAAT,GAAAU,EAAA;AAAA,MAAA,IAAA,QAAA;AAAA,eAPMC,EAAG,sBAAsBd,EAAMe,KAAK;AAAA,MAAC;AAAA,IAAA,GAQxCd,CAAS,GAAA,IAAA,EAAA,GAAAe,EAAAb,GAAA,MAEZH,EAAMiB,QAAQ,GAAAd;AAAAA,EAAA,GAAA;AAGrB,GAEa;AAAA,EAAEe,YAAAA;AAAAA,EAAYC,UAAAA;AAAAA,EAAUC,gBAAAA;AAAe,IAAIC,EAAe;AAAA,EACrEC,aAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAiB;AAAA,IACfC,eAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,oBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,eAAAA;AAAAA,EAAAA;AAAAA,EAEFC,gBAAgB;AAAA,IACdC,YAAAA;AAAAA,IACA3C,MAAAA;AAAAA,IACA4C,cAAAA;AAAAA,EAAAA;AAEJ,CAAC;"}
+{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import { createFormHook } from '@tanstack/solid-form';\nimport { splitProps, type Component, type ComponentProps } from 'solid-js';\nimport { cn } from 'tailwind-variants';\n\nimport { AutoSubmit } from './AutoSubmit';\nimport { CheckboxField } from './CheckboxField';\nimport { ComboboxField } from './ComboboxField';\nimport { fieldContext, formContext, useFormContext } from './context';\nimport { DatePickerField } from './DatePickerField';\nimport { NumberInputField } from './NumberInputField';\nimport { PasswordInputField } from './PasswordInputField';\nimport { PinInputField } from './PinInputField';\nimport { RadioGroupField } from './RadioGroupField';\nimport { SelectField } from './SelectField';\nimport { SliderField } from './SliderField';\nimport { SubmitButton } from './SubmitButton';\nimport { SwitchField } from './SwitchField';\nimport { TagsInputField } from './TagsInputField';\nimport { TextareaField } from './TextareaField';\nimport { TextInputField } from './TextInputField';\n\nexport type FormProps = Omit<ComponentProps<'form'>, 'onSubmit'>;\n\nexport const Form: Component<FormProps> = (props) => {\n  const form = useFormContext();\n  const [local, formProps] = splitProps(props, ['children', 'class']);\n\n  return (\n    <form\n      class={cn('space-y-8 relative', local.class)}\n      onSubmit={(submitEvent) => {\n        submitEvent.preventDefault();\n        submitEvent.stopPropagation();\n        form.handleSubmit().catch((error: unknown) => {\n          throw error;\n        });\n      }}\n      {...formProps}\n    >\n      {local.children}\n    </form>\n  );\n};\n\nexport const { useAppForm, withForm, withFieldGroup } = createFormHook({\n  formContext,\n  fieldContext,\n  fieldComponents: {\n    CheckboxField,\n    ComboboxField,\n    DatePickerField,\n    NumberInputField,\n    PasswordInputField,\n    PinInputField,\n    RadioGroupField,\n    SelectField,\n    SliderField,\n    SwitchField,\n    TagsInputField,\n    TextInputField,\n    TextareaField,\n  },\n  formComponents: {\n    AutoSubmit,\n    Form,\n    SubmitButton,\n  },\n});\n"],"names":["Form","props","form","useFormContext","local","formProps","splitProps","_el$","_tmpl$","addEventListener","submitEvent","preventDefault","stopPropagation","handleSubmit","catch","error","_$spread","_$mergeProps","cn","class","_$insert","children","useAppForm","withForm","withFieldGroup","createFormHook","formContext","fieldContext","fieldComponents","CheckboxField","ComboboxField","DatePickerField","NumberInputField","PasswordInputField","PinInputField","RadioGroupField","SelectField","SliderField","SwitchField","TagsInputField","TextInputField","TextareaField","formComponents","AutoSubmit","SubmitButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAuBO,MAAMA,IAA8BC,CAAAA,MAAU;AACnD,QAAMC,IAAOC,EAAAA,GACP,CAACC,GAAOC,CAAS,IAAIC,EAAWL,GAAO,CAAC,YAAY,OAAO,CAAC;AAElE,UAAA,MAAA;AAAA,QAAAM,IAAAC,EAAAA;AAAAD,WAAAA,EAAAE,iBAAA,UAGeC,CAAAA,MAAgB;AACzBA,MAAAA,EAAYC,eAAAA,GACZD,EAAYE,gBAAAA,GACZV,EAAKW,aAAAA,EAAeC,MAAM,CAACC,MAAmB;AAC5C,cAAMA;AAAAA,MACR,CAAC;AAAA,IACH,CAAC,GAAAC,EAAAT,GAAAU,EAAA;AAAA,MAAA,IAAA,QAAA;AAAA,eAPMC,EAAG,sBAAsBd,EAAMe,KAAK;AAAA,MAAC;AAAA,IAAA,GAQxCd,CAAS,GAAA,IAAA,EAAA,GAAAe,EAAAb,GAAA,MAEZH,EAAMiB,QAAQ,GAAAd;AAAAA,EAAA,GAAA;AAGrB,GAEa;AAAA,EAAEe,YAAAA;AAAAA,EAAYC,UAAAA;AAAAA,EAAUC,gBAAAA;AAAe,IAAIC,EAAe;AAAA,EACrEC,aAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,iBAAiB;AAAA,IACfC,eAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,oBAAAA;AAAAA,IACAC,eAAAA;AAAAA,IACAC,iBAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,aAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,eAAAA;AAAAA,EAAAA;AAAAA,EAEFC,gBAAgB;AAAA,IACdC,YAAAA;AAAAA,IACA3C,MAAAA;AAAAA,IACA4C,cAAAA;AAAAA,EAAAA;AAEJ,CAAC;"}

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

@@ -1,8 +1,10 @@
 import { Component, ComponentProps } from 'solid-js';
-import { NumberInputInput } from '../NumberInput';
-export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & {
+import { NumberInput, NumberInputInput } from '../NumberInput';
+declare const NUMBER_INPUT_ROOT_PROPS: readonly ["min", "max", "step", "allowMouseWheel", "allowOverflow", "clampValueOnBlur", "formatOptions", "inputMode", "locale", "pattern", "spinOnPress", "focusInputOnChange", "translations", "form", "name", "onValueInvalid"];
+export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & Pick<ComponentProps<typeof NumberInput>, (typeof NUMBER_INPUT_ROOT_PROPS)[number]> & {
     label?: string;
     description?: string;
     showTriggers?: boolean;
 };
 export declare const NumberInputField: Component<NumberInputFieldProps>;
+export {};

package/dist/components/form/NumberInputField.js

@@ -1,25 +1,25 @@
-import { createComponent as r, mergeProps as o, Show as d } from "solid-js/web";
-import { Field as m, FieldLabel as g, FieldContent as c, FieldError as s, FieldDescription as h } from "../Field.js";
-import { NumberInput as b, NumberInputControl as V, NumberInputInput as f, NumberInputTriggers as C } from "../NumberInput.js";
-import { useFieldContext as N } from "./context.js";
-import { splitProps as F, createSignal as I, createEffect as v } from "solid-js";
-const a = (e) => typeof e != "number" || !Number.isFinite(e) ? "" : String(e), B = (e) => {
-  const [u, t] = I(a(e().state.value));
+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 { 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(() => {
-    t(a(e().state.value));
+    n(u(e().state.value));
   }), {
-    inputValue: u,
-    onValueChange: (l) => {
-      t(l.value);
+    inputValue: l,
+    onValueChange: (t) => {
+      n(t.value);
     },
-    onValueCommit: (l) => {
-      t(l.value), Number.isFinite(l.valueAsNumber) && e().handleChange(l.valueAsNumber);
+    onValueCommit: (t) => {
+      n(t.value), Number.isFinite(t.valueAsNumber) && e().handleChange(t.valueAsNumber);
     },
     onBlur: () => {
-      t(a(e().state.value)), e().handleBlur();
+      n(u(e().state.value)), e().handleBlur();
     }
   };
-}, y = (e) => r(m, {
+}, p = (e) => r(c, {
   get invalid() {
     return e.field().state.meta.errors.length > 0;
   },
@@ -37,9 +37,9 @@ const a = (e) => typeof e != "number" || !Number.isFinite(e) ? "" : String(e), B
       get children() {
         return e.local.label;
       }
-    }), r(c, {
+    }), r(h, {
       get children() {
-        return [r(b, {
+        return [r(V, s({
           get value() {
             return e.inputValue();
           },
@@ -63,26 +63,27 @@ const a = (e) => typeof e != "number" || !Number.isFinite(e) ? "" : String(e), B
           },
           get required() {
             return e.local.required ?? !1;
-          },
+          }
+        }, () => e.rootProps, {
           get children() {
-            return r(V, {
+            return r(C, {
               get children() {
-                return [r(f, o(() => e.others)), r(d, {
+                return [r(N, s(() => e.inputProps)), r(d, {
                   get when() {
                     return e.local.showTriggers !== !1;
                   },
                   get children() {
-                    return r(C, {});
+                    return r(I, {});
                   }
                 })];
               }
             });
           }
-        }), r(s, {
+        })), r(b, {
           get errors() {
             return e.field().state.meta.errors;
           }
-        }), r(h, {
+        }), r(f, {
           get children() {
             return e.local.description;
           }
@@ -90,19 +91,20 @@ const a = (e) => typeof e != "number" || !Number.isFinite(e) ? "" : String(e), B
       }
     })];
   }
-}), A = (e) => {
-  const u = N(), [t, i] = F(e, ["label", "description", "required", "disabled", "readOnly", "showTriggers"]), n = B(u);
-  return y({
-    field: u,
-    local: t,
-    others: i,
-    inputValue: n.inputValue,
-    onValueChange: n.onValueChange,
-    onValueCommit: n.onValueCommit,
-    onBlur: n.onBlur
+}), x = (e) => {
+  const l = O(), [n, a] = m(e, ["label", "description", "required", "disabled", "readOnly", "showTriggers"]), [o, i] = m(a, P), t = B(l);
+  return p({
+    field: l,
+    local: n,
+    rootProps: o,
+    inputProps: i,
+    inputValue: t.inputValue,
+    onValueChange: t.onValueChange,
+    onValueCommit: t.onValueCommit,
+    onBlur: t.onBlur
   });
 };
 export {
-  A as NumberInputField
+  x 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\nexport type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & {\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 RenderNumberInputFieldProps = {\n  field: ReturnType<typeof useFieldContext<number>>;\n  local: NumberInputFieldLocalProps;\n  others: Omit<NumberInputFieldProps, keyof NumberInputFieldLocalProps>;\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      >\n        <NumberInputControl>\n          <NumberInputInput {...props.others} />\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 state = createNumberInputFieldState(field);\n\n  return renderNumberInputField({\n    field,\n    local,\n    others,\n    inputValue: state.inputValue,\n    onValueChange: state.onValueChange,\n    onValueCommit: state.onValueCommit,\n    onBlur: state.onBlur,\n  });\n};\n"],"names":["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","NumberInputControl","NumberInputInput","_$mergeProps","others","_$Show","when","showTriggers","NumberInputTriggers","FieldError","FieldDescription","description","NumberInputField","useFieldContext","splitProps"],"mappings":"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"}
+{"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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"}

package/dist/components/form/RadioGroupField.js

@@ -1,11 +1,11 @@
-import { createComponent as t, mergeProps as i } from "solid-js/web";
-import { Field as a, FieldContent as o, FieldError as s, FieldDescription as u } from "../Field.js";
-import { RadioGroup as g } from "../RadioGroup.js";
-import { useFieldContext as m } from "./context.js";
-import { splitProps as p } from "solid-js";
-const q = (n) => {
-  const r = m(), [e, l] = p(n, ["description", "required", "disabled", "readOnly"]);
-  return t(a, {
+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, {
     get invalid() {
       return r().state.meta.errors.length > 0;
     },
@@ -19,9 +19,9 @@ const q = (n) => {
       return e.readOnly ?? !1;
     },
     get children() {
-      return t(o, {
+      return t(s, {
         get children() {
-          return [t(g, i({
+          return [t(p, i({
             get value() {
               return r().state.value;
             },
@@ -43,11 +43,19 @@ const q = (n) => {
             get required() {
               return e.required ?? !1;
             }
-          }, l)), t(s, {
+          }, n, {
+            get children() {
+              return [t(c, {
+                get children() {
+                  return e.label;
+                }
+              }), a(() => e.children)];
+            }
+          })), t(g, {
             get errors() {
               return r().state.meta.errors;
             }
-          }), t(u, {
+          }), t(m, {
             get children() {
               return e.description;
             }
@@ -58,6 +66,6 @@ const q = (n) => {
   });
 };
 export {
-  q as RadioGroupField
+  y 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, ComponentProps } from 'solid-js';\n\nimport { Field, FieldContent, FieldError, FieldDescription } from '@/components/Field';\nimport { RadioGroup } 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, ['description', 'required', 'disabled', 'readOnly']);\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        <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","FieldError","FieldDescription","description"],"mappings":";;;;;AAYO,MAAMA,IAAoDC,CAAAA,MAAU;AACzE,QAAMC,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CAAC,eAAe,YAAY,YAAY,UAAU,CAAC;AAE7F,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,CAAM,CAAA,GAAAE,EAEXoB,GAAU;AAAA,YAAA,IAACf,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5CqB,GAAgB;AAAA,YAAA,IAAAX,WAAA;AAAA,qBAAEb,EAAMyB;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, 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;"}

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

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

package/dist/components/form/TagsInputField.js

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

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

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

package/package.json

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

package/src/components/form/ComboboxField.tsx

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

package/src/components/form/DatePickerField.tsx

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

package/src/components/form/Form.tsx

@@ -27,7 +27,7 @@ export const Form: Component<FormProps> = (props) => {
 
   return (
     <form
-      class={cn('space-y-6 relative', local.class)}
+      class={cn('space-y-8 relative', local.class)}
       onSubmit={(submitEvent) => {
         submitEvent.preventDefault();
         submitEvent.stopPropagation();

package/src/components/form/NumberInputField.tsx

@@ -10,11 +10,31 @@ import {
 
 import { useFieldContext } from './context';
 
-export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & {
-  label?: string;
-  description?: string;
-  showTriggers?: boolean;
-};
+const NUMBER_INPUT_ROOT_PROPS = [
+  'min',
+  'max',
+  'step',
+  'allowMouseWheel',
+  'allowOverflow',
+  'clampValueOnBlur',
+  'formatOptions',
+  'inputMode',
+  'locale',
+  'pattern',
+  'spinOnPress',
+  'focusInputOnChange',
+  'translations',
+  'form',
+  'name',
+  'onValueInvalid',
+] as const;
+
+export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> &
+  Pick<ComponentProps<typeof NumberInput>, (typeof NUMBER_INPUT_ROOT_PROPS)[number]> & {
+    label?: string;
+    description?: string;
+    showTriggers?: boolean;
+  };
 
 const toNumberInputValue = (value: number | undefined): string => {
   if (typeof value !== 'number' || !Number.isFinite(value)) {
@@ -29,10 +49,19 @@ type NumberInputFieldLocalProps = Pick<
   'label' | 'description' | 'required' | 'disabled' | 'readOnly' | 'showTriggers'
 >;
 
+type NumberInputFieldRootProps = Pick<
+  NumberInputFieldProps,
+  (typeof NUMBER_INPUT_ROOT_PROPS)[number]
+>;
+
 type RenderNumberInputFieldProps = {
   field: ReturnType<typeof useFieldContext<number>>;
   local: NumberInputFieldLocalProps;
-  others: Omit<NumberInputFieldProps, keyof NumberInputFieldLocalProps>;
+  rootProps: NumberInputFieldRootProps;
+  inputProps: Omit<
+    NumberInputFieldProps,
+    keyof NumberInputFieldLocalProps | keyof NumberInputFieldRootProps
+  >;
   inputValue: () => string;
   onValueChange: NonNullable<ComponentProps<typeof NumberInput>['onValueChange']>;
   onValueCommit: NonNullable<ComponentProps<typeof NumberInput>['onValueCommit']>;
@@ -102,9 +131,10 @@ const renderNumberInputField = (props: RenderNumberInputFieldProps): JSX.Element
         disabled={props.local.disabled ?? false}
         readOnly={props.local.readOnly ?? false}
         required={props.local.required ?? false}
+        {...props.rootProps}
       >
         <NumberInputControl>
-          <NumberInputInput {...props.others} />
+          <NumberInputInput {...props.inputProps} />
           <Show when={props.local.showTriggers !== false}>
             <NumberInputTriggers />
           </Show>
@@ -126,12 +156,14 @@ export const NumberInputField: Component<NumberInputFieldProps> = (props) => {
     'readOnly',
     'showTriggers',
   ]);
+  const [rootProps, inputProps] = splitProps(others, NUMBER_INPUT_ROOT_PROPS);
   const state = createNumberInputFieldState(field);
 
   return renderNumberInputField({
     field,
     local,
-    others,
+    rootProps,
+    inputProps,
     inputValue: state.inputValue,
     onValueChange: state.onValueChange,
     onValueCommit: state.onValueCommit,

package/src/components/form/RadioGroupField.tsx

@@ -1,7 +1,7 @@
-import type { Component, ComponentProps } from 'solid-js';
+import { type Component, type ComponentProps, splitProps } from 'solid-js';
 
 import { Field, FieldContent, FieldError, FieldDescription } from '@/components/Field';
-import { RadioGroup } from '@/components/RadioGroup';
+import { RadioGroup, RadioGroupLabel } from '@/components/RadioGroup';
 
 import { useFieldContext } from './context';
 
@@ -12,7 +12,14 @@ export type RadioGroupFieldProps = ComponentProps<typeof RadioGroup> & {
 
 export const RadioGroupField: Component<RadioGroupFieldProps> = (props) => {
   const field = useFieldContext<string>();
-  const [local, others] = splitProps(props, ['description', 'required', 'disabled', 'readOnly']);
+  const [local, others] = splitProps(props, [
+    'label',
+    'description',
+    'required',
+    'disabled',
+    'readOnly',
+    'children',
+  ]);
 
   return (
     <Field
@@ -35,7 +42,10 @@ export const RadioGroupField: Component<RadioGroupFieldProps> = (props) => {
           readOnly={local.readOnly ?? false}
           required={local.required ?? false}
           {...others}
-        />
+        >
+          <RadioGroupLabel>{local.label}</RadioGroupLabel>
+          {local.children}
+        </RadioGroup>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>
       </FieldContent>

package/src/components/form/TagsInputField.tsx

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