@manafishrov/ui 1.3.2 → 1.3.3

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/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/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":";;;;;AAmBA,MAAMA,IAAwB,CAC5B,OACA,aACA,aACA,cACA,gBACA,YACA,aACA,YACA,iBACA,gBACA,OACA,kBACA,qBACA,sBACA,qBACA,wBACA,gBAAgB,GAUZC,IAEDC,CAAAA,MAAU;AACb,QAAM,CAACC,GAAOC,CAAM,IAAIC,EAAWH,GAAO,CAAC,YAAY,kBAAkB,CAAC;AAE1E,SAAA,CAAAI,EAEKC,GAAgB;AAAA,IAAAC,UACbC,CAAAA,MAAOH,EACNI,GAAgB;AAAA,MAAA,IAAAF,WAAA;AAAA,eAAA,CAAAF,EACdK,GAAG;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEH,IAAUI;AAAAA,UAAK;AAAA,UAAAL,UACvBA,CAACK,GAAOC,MAAKR,EACXS,GAAa;AAAA,YAAA,IAACD,QAAK;AAAA,qBAAEA,EAAAA;AAAAA,YAAO;AAAA,YAAED,OAAAA;AAAAA,YAAY,IAAAL,WAAA;AAAA,qBAAA,CAAAF,EACxCU,GAAoB;AAAA,gBAAA,IAAAR,WAAA;AAAA,yBAAA,CAAAF,EAClBW,GAAiB;AAAA,oBAAAT,UAAEK;AAAAA,kBAAAA,CAAK,GAAAP,EACxBY,GAA0B,CAAA,CAAA,CAAA;AAAA,gBAAA;AAAA,cAAA,CAAA,GAAAZ,EAE5Ba,GAAkB,CAAA,CAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA;AAAA,QAAA,CAEtB,GAAAb,EAEFc,GAAmBhB,CAAM,GAAAE,EACzBe,GAAI;AAAA,UAAA,IAACC,OAAI;AAAA,mBAAEnB,EAAMoB,qBAAqB;AAAA,UAAK;AAAA,UAAA,IAAAf,WAAA;AAAA,mBAAAF,EACzCkB,GAAqB,EAAA;AAAA,UAAA;AAAA,QAAA,CAAA,GAAAC,EAAA,MAEvBtB,EAAMK,QAAQ,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAElB,GAAAF,EAEFoB,GAAoB,CAAA,CAAA,CAAA;AAG3B,GAEMC,IAAyB,CAC7B,SACA,eACA,YACA,YACA,YACA,kBAAkB,GAGPC,IAAkD1B,CAAAA,MAAU;AACvE,QAAM2B,IAAQC,EAAAA,GACR,CAAC3B,GAAOC,CAAM,IAAIC,EAAWH,GAAOyB,CAAsB,GAC1D,CAACI,GAAWC,CAAU,IAAI3B,EAAWD,GAAQJ,CAAqB;AAExE,SAAAM,EACG2B,GAAK;AAAA,IAAA,IACJC,UAAO;AAAA,aAAEL,EAAAA,EAAQM,MAAMC,KAAKC,OAAOC,SAAS;AAAA,IAAC;AAAA,IAAA,IAC7CC,WAAQ;AAAA,aAAEpC,EAAMoC,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAErC,EAAMqC,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEtC,EAAMsC,YAAY;AAAA,IAAK;AAAA,IAAA,IAAAjC,WAAA;AAAA,aAAA,CAAAF,EAEhCoC,GAAU;AAAA,QAAA,IAAAlC,WAAA;AAAA,iBAAEL,EAAMwC;AAAAA,QAAK;AAAA,MAAA,CAAA,GAAArC,EACvBsC,GAAY;AAAA,QAAA,IAAApC,WAAA;AAAA,iBAAA,CAAAF,EACVuC,GAASC,EAAA;AAAA,YAAA,IACRjC,QAAK;AAAA,qBAAEgB,EAAAA,EAAQM,MAAMtB;AAAAA,YAAK;AAAA,YAC1BkC,eAAgBC,CAAAA,MAAY;AAC1BnB,cAAAA,IAAQoB,aAAaD,EAAQnC,KAAK;AAAA,YACpC;AAAA,YACAqC,QAAQA,MAAM;AACZrB,cAAAA,EAAAA,EAAQsB,WAAAA;AAAAA,YACV;AAAA,YAAC,IACDjB,UAAO;AAAA,qBAAEL,EAAAA,EAAQM,MAAMC,KAAKC,OAAOC,SAAS;AAAA,YAAC;AAAA,YAAA,IAC7CC,WAAQ;AAAA,qBAAEpC,EAAMoC,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAErC,EAAMqC,YAAY;AAAA,YAAK;AAAA,UAAA,GAC7BT,GAAS;AAAA,YAAA,IAAAvB,WAAA;AAAA,qBAAAF,EAEZL,GAAc6C,EACTd,GAAU,MACT,OAAO7B,EAAMoB,oBAAqB,aAAa;AAAA,gBAClDA,kBAAkBpB,EAAMoB;AAAAA,cAAAA,CACzB,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,CAAA,GAAAjB,EAGJ8C,GAAU;AAAA,YAAA,IAACf,SAAM;AAAA,qBAAER,EAAAA,EAAQM,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAA/B,EAC5C+C,GAAgB;AAAA,YAAA,IAAA7C,WAAA;AAAA,qBAAEL,EAAMmD;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@manafishrov/ui",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "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/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/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,
             })}