@manafishrov/ui 1.2.12 → 1.2.13

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

@@ -1,10 +1,12 @@
 import { ComboboxRootProps } from '@ark-ui/solid';
-import { Component } from 'solid-js';
-export type ComboboxFieldProps = ComboboxRootProps<string> & {
+import { Component, ComponentProps } from 'solid-js';
+import { ComboboxInput } from '../Combobox';
+export type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> & {
+    collection: ComboboxRootProps<string>['collection'];
     label?: string;
     description?: string;
     showTrigger?: boolean;
-    showClear?: boolean;
+    showClearTrigger?: boolean;
 } & {
     class?: string;
 };

package/dist/components/form/ComboboxField.js

@@ -1,66 +1,68 @@
-import { createComponent as r, mergeProps as d, insert as o, memo as n, template as u } from "solid-js/web";
-import { Combobox as s, ComboboxControl as g, ComboboxInput as h, ComboboxClearTrigger as c, ComboboxTrigger as m, ComboboxPositioner as b, ComboboxContent as C, ComboboxList as p } from "../Combobox.js";
-import { Field as x, FieldLabel as f, FieldContent as v, FieldError as O, FieldDescription as w } from "../Field.js";
+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 T } from "solid-js";
-var _ = /* @__PURE__ */ u('<div class="gap-1 flex items-center">');
-const y = (l) => [r(g, {
-  get children() {
-    return [r(h, {
-      get placeholder() {
-        return l.placeholder;
-      }
-    }), (() => {
-      var t = _();
-      return o(t, (() => {
-        var e = n(() => l.showClear === !0);
-        return () => e() && r(c, {});
-      })(), null), o(t, (() => {
-        var e = n(() => l.showTrigger === !0);
-        return () => e() && r(m, {});
-      })(), null), t;
-    })()];
-  }
-}), r(b, {
-  get children() {
-    return r(C, {
-      get children() {
-        return r(p, {
-          get children() {
-            return l.children;
-          }
-        });
-      }
-    });
-  }
-})], P = ["label", "description", "required", "disabled", "readOnly", "placeholder", "showTrigger", "showClear", "children"], D = (l) => {
-  const t = F(), [e, i] = T(l, P);
-  return r(x, {
+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, {
+    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 () => n() && e(b, {});
+        })(), null), o;
+      })()];
+    }
+  }), e(C, {
+    get children() {
+      return e(p, {
+        get children() {
+          return e(x, {
+            get children() {
+              return t.children;
+            }
+          });
+        }
+      });
+    }
+  })];
+}, P = ["label", "description", "required", "disabled", "readOnly", "collection", "showTrigger", "showClearTrigger", "children"], D = (l) => {
+  const t = F(), [r, o] = a(l, P);
+  return e(f, {
     get invalid() {
       return t().state.meta.errors.length > 0;
     },
     get disabled() {
-      return e.disabled ?? !1;
+      return r.disabled ?? !1;
     },
     get readOnly() {
-      return e.readOnly ?? !1;
+      return r.readOnly ?? !1;
     },
     get required() {
-      return e.required ?? !1;
+      return r.required ?? !1;
     },
     get children() {
-      return [r(f, {
+      return [e(T, {
         get children() {
-          return e.label;
+          return r.label;
         }
-      }), r(v, {
+      }), e(v, {
         get children() {
-          return [r(s, d({
+          return [e(u, {
+            get collection() {
+              return r.collection;
+            },
             get value() {
               return t().state.value;
             },
-            onValueChange: (a) => {
-              t().handleChange(a.value);
+            onValueChange: (n) => {
+              t().handleChange(n.value);
             },
             onBlur: () => {
               t().handleBlur();
@@ -69,35 +71,32 @@ const y = (l) => [r(g, {
               return t().state.meta.errors.length > 0;
             },
             get disabled() {
-              return e.disabled ?? !1;
+              return r.disabled ?? !1;
             },
             get readOnly() {
-              return e.readOnly ?? !1;
-            }
-          }, i, {
+              return r.readOnly ?? !1;
+            },
             get children() {
-              return r(y, {
-                get placeholder() {
-                  return e.placeholder;
-                },
+              return e(y, s({
                 get showTrigger() {
-                  return e.showTrigger;
-                },
-                get showClear() {
-                  return e.showClear;
+                  return r.showTrigger;
                 },
+                get showClearTrigger() {
+                  return r.showClearTrigger;
+                }
+              }, o, {
                 get children() {
-                  return e.children;
+                  return r.children;
                 }
-              });
+              }));
             }
-          })), r(O, {
+          }), e(w, {
             get errors() {
               return t().state.meta.errors;
             }
-          }), r(w, {
+          }), e(O, {
             get children() {
-              return e.description;
+              return r.description;
             }
           })];
         }

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 = ComboboxRootProps<string> & {\n  label?: string;\n  description?: string;\n  showTrigger?: boolean;\n  showClear?: boolean;\n} & { class?: string };\n\nconst ComboboxInputGroup: Component<\n  ComponentProps<typeof ComboboxInput> & {\n    showTrigger?: boolean | undefined;\n    showClear?: boolean | undefined;\n  }\n> = (props) => (\n  <>\n    <ComboboxControl>\n      <ComboboxInput placeholder={props.placeholder} />\n      <div class='gap-1 flex items-center'>\n        {props.showClear === true && <ComboboxClearTrigger />}\n        {props.showTrigger === true && <ComboboxTrigger />}\n      </div>\n    </ComboboxControl>\n    <ComboboxPositioner>\n      <ComboboxContent>\n        <ComboboxList>{props.children}</ComboboxList>\n      </ComboboxContent>\n    </ComboboxPositioner>\n  </>\n);\n\nconst COMBOBOX_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'placeholder',\n  'showTrigger',\n  'showClear',\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\n          value={field().state.value}\n          onValueChange={(details) => {\n            field().handleChange(details.value);\n          }}\n          onBlur={() => {\n            field().handleBlur();\n          }}\n          invalid={field().state.meta.errors.length > 0}\n          disabled={local.disabled ?? false}\n          readOnly={local.readOnly ?? false}\n          {...others}\n        >\n          <ComboboxInputGroup\n            placeholder={local.placeholder}\n            showTrigger={local.showTrigger}\n            showClear={local.showClear}\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","_$createComponent","ComboboxControl","children","ComboboxInput","placeholder","_el$","_tmpl$","_$insert","_c$","_$memo","showClear","ComboboxClearTrigger","_c$2","showTrigger","ComboboxTrigger","ComboboxPositioner","ComboboxContent","ComboboxList","COMBOBOX_FIELD_PROPS","ComboboxField","field","useFieldContext","local","others","splitProps","Field","invalid","state","meta","errors","length","disabled","readOnly","required","FieldLabel","label","FieldContent","Combobox","_$mergeProps","value","onValueChange","details","handleChange","onBlur","handleBlur","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\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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"}

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

@@ -1,7 +1,8 @@
-import { DatePickerRootProps } from '@ark-ui/solid';
+import { DatePickerInputProps } from '@ark-ui/solid';
 import { Component } from 'solid-js';
-export type DatePickerFieldProps = DatePickerRootProps & {
+export type DatePickerFieldProps = DatePickerInputProps & {
     label?: string;
     description?: string;
+    showTrigger?: boolean;
 };
 export declare const DatePickerField: Component<DatePickerFieldProps>;

package/dist/components/form/DatePickerField.js

@@ -1,23 +1,33 @@
-import { createComponent as e, mergeProps as a } from "solid-js/web";
-import { DatePicker as d, DatePickerControl as o, DatePickerInput as s, DatePickerTrigger as u, DatePickerPositioner as c, DatePickerContent as g, DatePickerViews as p } from "../DatePicker.js";
-import { Field as h, FieldLabel as m, FieldContent as P, FieldError as D, FieldDescription as f } from "../Field.js";
-import { useFieldContext as k } from "./context.js";
-import { splitProps as b } from "solid-js";
-const C = (n) => [e(o, {
-  get children() {
-    return [e(s, n), e(u, {})];
-  }
-}), e(c, {
-  get children() {
-    return e(g, {
-      get children() {
-        return e(p, {});
-      }
-    });
-  }
-})], F = ["label", "description", "required", "disabled", "readOnly", "placeholder"], q = (n) => {
-  const t = k(), [r, l] = b(n, F);
-  return e(h, {
+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, {
+    get children() {
+      return [e(u, r), e(d, {
+        get when() {
+          return t.showTrigger !== !1;
+        },
+        get children() {
+          return e(c, {});
+        }
+      })];
+    }
+  }), e(h, {
+    get children() {
+      return e(p, {
+        get children() {
+          return e(m, {});
+        }
+      });
+    }
+  })];
+}, F = ["label", "description", "required", "disabled", "readOnly", "placeholder", "showTrigger"], I = (n) => {
+  const t = w(), [r, i] = l(n, F);
+  return e(P, {
     get invalid() {
       return t().state.meta.errors.length > 0;
     },
@@ -31,18 +41,18 @@ const C = (n) => [e(o, {
       return r.required ?? !1;
     },
     get children() {
-      return [e(m, {
+      return [e(f, {
         get children() {
           return r.label;
         }
-      }), e(P, {
+      }), e(D, {
         get children() {
-          return [e(d, a({
+          return [e(s, {
             get value() {
               return t().state.value;
             },
-            onValueChange: (i) => {
-              t().handleChange(i.value);
+            onValueChange: (o) => {
+              t().handleChange(o.value);
             },
             onBlur: () => {
               t().handleBlur();
@@ -55,20 +65,21 @@ const C = (n) => [e(o, {
             },
             get readOnly() {
               return r.readOnly ?? !1;
-            }
-          }, l, {
+            },
             get children() {
-              return e(C, {
+              return e(C, a(i, {
                 get placeholder() {
                   return r.placeholder;
                 }
-              });
+              }, () => typeof r.showTrigger == "boolean" && {
+                showTrigger: r.showTrigger
+              }));
             }
-          })), e(D, {
+          }), e(b, {
             get errors() {
               return t().state.meta.errors;
             }
-          }), e(f, {
+          }), e(k, {
             get children() {
               return r.description;
             }
@@ -79,6 +90,6 @@ const C = (n) => [e(o, {
   });
 };
 export {
-  q as DatePickerField
+  I 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, DatePickerRootProps, 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 = DatePickerRootProps & {\n  label?: string;\n  description?: string;\n};\n\nconst DatePickerInputGroup: Component<DatePickerInputProps> = (props) => (\n  <>\n    <DatePickerControl>\n      <DatePickerInput {...props} />\n      <DatePickerTrigger />\n    </DatePickerControl>\n    <DatePickerPositioner>\n      <DatePickerContent>\n        <DatePickerViews />\n      </DatePickerContent>\n    </DatePickerPositioner>\n  </>\n);\n\nconst DATE_PICKER_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'placeholder',\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          {...others}\n        >\n          <DatePickerInputGroup placeholder={local.placeholder} />\n        </DatePicker>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["DatePickerInputGroup","props","_$createComponent","DatePickerControl","children","DatePickerInput","DatePickerTrigger","DatePickerPositioner","DatePickerContent","DatePickerViews","DATE_PICKER_FIELD_PROPS","DatePickerField","field","useFieldContext","local","others","splitProps","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":";;;;;AAqBA,MAAMA,IAAyDC,CAAAA,MAAK,CAAAC,EAE/DC,GAAiB;AAAA,EAAA,IAAAC,WAAA;AAAA,WAAA,CAAAF,EACfG,GAAoBJ,CAAK,GAAAC,EACzBI,GAAiB,CAAA,CAAA,CAAA;AAAA,EAAA;AAAA,CAAA,GAAAJ,EAEnBK,GAAoB;AAAA,EAAA,IAAAH,WAAA;AAAA,WAAAF,EAClBM,GAAiB;AAAA,MAAA,IAAAJ,WAAA;AAAA,eAAAF,EACfO,GAAe,EAAA;AAAA,MAAA;AAAA,IAAA,CAAA;AAAA,EAAA;AAAA,CAAA,CAAA,GAMlBC,IAA0B,CAC9B,SACA,eACA,YACA,YACA,YACA,aAAa,GAGFC,IAAoDV,CAAAA,MAAU;AACzE,QAAMW,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWf,GAAOS,CAAuB;AAEjE,SAAAR,EACGe,GAAK;AAAA,IAAA,IACJC,UAAO;AAAA,aAAEN,EAAAA,EAAQO,MAAMC,KAAKC,OAAOC,SAAS;AAAA,IAAC;AAAA,IAAA,IAC7CC,WAAQ;AAAA,aAAET,EAAMS,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEV,EAAMU,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEX,EAAMW,YAAY;AAAA,IAAK;AAAA,IAAA,IAAArB,WAAA;AAAA,aAAA,CAAAF,EAEhCwB,GAAU;AAAA,QAAA,IAAAtB,WAAA;AAAA,iBAAEU,EAAMa;AAAAA,QAAK;AAAA,MAAA,CAAA,GAAAzB,EACvB0B,GAAY;AAAA,QAAA,IAAAxB,WAAA;AAAA,iBAAA,CAAAF,EACV2B,GAAUC,EAAA;AAAA,YAAA,IACTC,QAAK;AAAA,qBAAEnB,EAAAA,EAAQO,MAAMY;AAAAA,YAAK;AAAA,YAC1BC,eAAgBC,CAAAA,MAAY;AAC1BrB,cAAAA,IAAQsB,aAAaD,EAAQF,KAAK;AAAA,YACpC;AAAA,YACAI,QAAQA,MAAM;AACZvB,cAAAA,EAAAA,EAAQwB,WAAAA;AAAAA,YACV;AAAA,YAAC,IACDlB,UAAO;AAAA,qBAAEN,EAAAA,EAAQO,MAAMC,KAAKC,OAAOC,SAAS;AAAA,YAAC;AAAA,YAAA,IAC7CC,WAAQ;AAAA,qBAAET,EAAMS,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAEV,EAAMU,YAAY;AAAA,YAAK;AAAA,UAAA,GAC7BT,GAAM;AAAA,YAAA,IAAAX,WAAA;AAAA,qBAAAF,EAETF,GAAoB;AAAA,gBAAA,IAACqC,cAAW;AAAA,yBAAEvB,EAAMuB;AAAAA,gBAAW;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,CAAA,GAAAnC,EAErDoC,GAAU;AAAA,YAAA,IAACjB,SAAM;AAAA,qBAAET,EAAAA,EAAQO,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAnB,EAC5CqC,GAAgB;AAAA,YAAA,IAAAnC,WAAA;AAAA,qBAAEU,EAAM0B;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}
+{"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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"}

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

@@ -1,8 +1,8 @@
 import { Component, ComponentProps } from 'solid-js';
-import { NumberInput } from '../NumberInput';
-export type NumberInputFieldProps = ComponentProps<typeof NumberInput> & {
+import { NumberInputInput } from '../NumberInput';
+export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & {
     label?: string;
     description?: string;
-    triggers?: boolean;
+    showTriggers?: boolean;
 };
 export declare const NumberInputField: Component<NumberInputFieldProps>;

package/dist/components/form/NumberInputField.js

@@ -1,11 +1,11 @@
-import { createComponent as e, mergeProps as u, Show as d } from "solid-js/web";
-import { Field as a, FieldLabel as o, FieldContent as s, FieldError as g, FieldDescription as m } from "../Field.js";
-import { NumberInput as p, NumberInputControl as h, NumberInputInput as c, NumberInputTriggers as b } from "../NumberInput.js";
-import { useFieldContext as f } from "./context.js";
-import { splitProps as F } from "solid-js";
-const y = (n) => {
-  const t = f(), [r, l] = F(n, ["label", "description", "required", "disabled", "readOnly", "triggers"]);
-  return e(a, {
+import { createComponent as e, Show as u } from "solid-js/web";
+import { Field as d, FieldLabel as a, FieldContent as o, FieldError as s, FieldDescription as g } from "../Field.js";
+import { NumberInput as m, NumberInputControl as h, NumberInputInput as p, NumberInputTriggers as c } from "../NumberInput.js";
+import { useFieldContext as b } from "./context.js";
+import { splitProps as f } from "solid-js";
+const v = (n) => {
+  const t = b(), [r, l] = f(n, ["label", "description", "required", "disabled", "readOnly", "showTriggers"]);
+  return e(d, {
     get invalid() {
       return t().state.meta.errors.length > 0;
     },
@@ -19,13 +19,13 @@ const y = (n) => {
       return r.readOnly ?? !1;
     },
     get children() {
-      return [e(o, {
+      return [e(a, {
         get children() {
           return r.label;
         }
-      }), e(s, {
+      }), e(o, {
         get children() {
-          return [e(p, u({
+          return [e(m, {
             get value() {
               return String(t().state.value);
             },
@@ -46,27 +46,26 @@ const y = (n) => {
             },
             get required() {
               return r.required ?? !1;
-            }
-          }, l, {
+            },
             get children() {
               return e(h, {
                 get children() {
-                  return [e(c, {}), e(d, {
+                  return [e(p, l), e(u, {
                     get when() {
-                      return r.triggers !== !1;
+                      return r.showTriggers !== !1;
                     },
                     get children() {
-                      return e(b, {});
+                      return e(c, {});
                     }
                   })];
                 }
               });
             }
-          })), e(g, {
+          }), e(s, {
             get errors() {
               return t().state.meta.errors;
             }
-          }), e(m, {
+          }), e(g, {
             get children() {
               return r.description;
             }
@@ -77,6 +76,6 @@ const y = (n) => {
   });
 };
 export {
-  y as NumberInputField
+  v 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 } 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 NumberInput> & {\n  label?: string;\n  description?: string;\n  triggers?: boolean;\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    'triggers',\n  ]);\n\n  return (\n    <Field\n      invalid={field().state.meta.errors.length > 0}\n      required={local.required ?? false}\n      disabled={local.disabled ?? false}\n      readOnly={local.readOnly ?? false}\n    >\n      <FieldLabel>{local.label}</FieldLabel>\n      <FieldContent>\n        <NumberInput\n          value={String(field().state.value)}\n          onValueChange={(details) => {\n            field().handleChange(details.valueAsNumber);\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          <NumberInputControl>\n            <NumberInputInput />\n            <Show when={local.triggers !== false}>\n              <NumberInputTriggers />\n            </Show>\n          </NumberInputControl>\n        </NumberInput>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["NumberInputField","props","field","useFieldContext","local","others","splitProps","_$createComponent","Field","invalid","state","meta","errors","length","required","disabled","readOnly","children","FieldLabel","label","FieldContent","NumberInput","_$mergeProps","value","String","onValueChange","details","handleChange","valueAsNumber","onBlur","handleBlur","NumberInputControl","NumberInputInput","_$Show","when","triggers","NumberInputTriggers","FieldError","FieldDescription","description"],"mappings":";;;;;AAkBO,MAAMA,IAAsDC,CAAAA,MAAU;AAC3E,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,aAAA,CAAAV,EAEhCW,GAAU;AAAA,QAAA,IAAAD,WAAA;AAAA,iBAAEb,EAAMe;AAAAA,QAAK;AAAA,MAAA,CAAA,GAAAZ,EACvBa,GAAY;AAAA,QAAA,IAAAH,WAAA;AAAA,iBAAA,CAAAV,EACVc,GAAWC,EAAA;AAAA,YAAA,IACVC,QAAK;AAAA,qBAAEC,OAAOtB,IAAQQ,MAAMa,KAAK;AAAA,YAAC;AAAA,YAClCE,eAAgBC,CAAAA,MAAY;AAC1BxB,cAAAA,IAAQyB,aAAaD,EAAQE,aAAa;AAAA,YAC5C;AAAA,YACAC,QAAQA,MAAM;AACZ3B,cAAAA,EAAAA,EAAQ4B,WAAAA;AAAAA,YACV;AAAA,YAAC,IACDrB,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,qBAAAV,EAETwB,GAAkB;AAAA,gBAAA,IAAAd,WAAA;AAAA,yBAAA,CAAAV,EAChByB,GAAgB,CAAA,CAAA,GAAAzB,EAChB0B,GAAI;AAAA,oBAAA,IAACC,OAAI;AAAA,6BAAE9B,EAAM+B,aAAa;AAAA,oBAAK;AAAA,oBAAA,IAAAlB,WAAA;AAAA,6BAAAV,EACjC6B,GAAmB,EAAA;AAAA,oBAAA;AAAA,kBAAA,CAAA,CAAA;AAAA,gBAAA;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,CAAA,GAAA7B,EAIzB8B,GAAU;AAAA,YAAA,IAACzB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5C+B,GAAgB;AAAA,YAAA,IAAArB,WAAA;AAAA,qBAAEb,EAAMmC;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}
+{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/form/NumberInputField.tsx"],"sourcesContent":["import type { Component, ComponentProps } 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\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\n  return (\n    <Field\n      invalid={field().state.meta.errors.length > 0}\n      required={local.required ?? false}\n      disabled={local.disabled ?? false}\n      readOnly={local.readOnly ?? false}\n    >\n      <FieldLabel>{local.label}</FieldLabel>\n      <FieldContent>\n        <NumberInput\n          value={String(field().state.value)}\n          onValueChange={(details) => {\n            field().handleChange(details.valueAsNumber);\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        >\n          <NumberInputControl>\n            <NumberInputInput {...others} />\n            <Show when={local.showTriggers !== false}>\n              <NumberInputTriggers />\n            </Show>\n          </NumberInputControl>\n        </NumberInput>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["NumberInputField","props","field","useFieldContext","local","others","splitProps","_$createComponent","Field","invalid","state","meta","errors","length","required","disabled","readOnly","children","FieldLabel","label","FieldContent","NumberInput","value","String","onValueChange","details","handleChange","valueAsNumber","onBlur","handleBlur","NumberInputControl","NumberInputInput","_$Show","when","showTriggers","NumberInputTriggers","FieldError","FieldDescription","description"],"mappings":";;;;;AAkBO,MAAMA,IAAsDC,CAAAA,MAAU;AAC3E,QAAMC,IAAQC,EAAAA,GACR,CAACC,GAAOC,CAAM,IAAIC,EAAWL,GAAO,CACxC,SACA,eACA,YACA,YACA,YACA,cAAc,CACf;AAED,SAAAM,EACGC,GAAK;AAAA,IAAA,IACJC,UAAO;AAAA,aAAEP,EAAAA,EAAQQ,MAAMC,KAAKC,OAAOC,SAAS;AAAA,IAAC;AAAA,IAAA,IAC7CC,WAAQ;AAAA,aAAEV,EAAMU,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEX,EAAMW,YAAY;AAAA,IAAK;AAAA,IAAA,IACjCC,WAAQ;AAAA,aAAEZ,EAAMY,YAAY;AAAA,IAAK;AAAA,IAAA,IAAAC,WAAA;AAAA,aAAA,CAAAV,EAEhCW,GAAU;AAAA,QAAA,IAAAD,WAAA;AAAA,iBAAEb,EAAMe;AAAAA,QAAK;AAAA,MAAA,CAAA,GAAAZ,EACvBa,GAAY;AAAA,QAAA,IAAAH,WAAA;AAAA,iBAAA,CAAAV,EACVc,GAAW;AAAA,YAAA,IACVC,QAAK;AAAA,qBAAEC,OAAOrB,IAAQQ,MAAMY,KAAK;AAAA,YAAC;AAAA,YAClCE,eAAgBC,CAAAA,MAAY;AAC1BvB,cAAAA,IAAQwB,aAAaD,EAAQE,aAAa;AAAA,YAC5C;AAAA,YACAC,QAAQA,MAAM;AACZ1B,cAAAA,EAAAA,EAAQ2B,WAAAA;AAAAA,YACV;AAAA,YAAC,IACDpB,UAAO;AAAA,qBAAEP,EAAAA,EAAQQ,MAAMC,KAAKC,OAAOC,SAAS;AAAA,YAAC;AAAA,YAAA,IAC7CE,WAAQ;AAAA,qBAAEX,EAAMW,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCC,WAAQ;AAAA,qBAAEZ,EAAMY,YAAY;AAAA,YAAK;AAAA,YAAA,IACjCF,WAAQ;AAAA,qBAAEV,EAAMU,YAAY;AAAA,YAAK;AAAA,YAAA,IAAAG,WAAA;AAAA,qBAAAV,EAEhCuB,GAAkB;AAAA,gBAAA,IAAAb,WAAA;AAAA,yBAAA,CAAAV,EAChBwB,GAAqB1B,CAAM,GAAAE,EAC3ByB,GAAI;AAAA,oBAAA,IAACC,OAAI;AAAA,6BAAE7B,EAAM8B,iBAAiB;AAAA,oBAAK;AAAA,oBAAA,IAAAjB,WAAA;AAAA,6BAAAV,EACrC4B,GAAmB,EAAA;AAAA,oBAAA;AAAA,kBAAA,CAAA,CAAA;AAAA,gBAAA;AAAA,cAAA,CAAA;AAAA,YAAA;AAAA,UAAA,CAAA,GAAA5B,EAIzB6B,GAAU;AAAA,YAAA,IAACxB,SAAM;AAAA,qBAAEV,EAAAA,EAAQQ,MAAMC,KAAKC;AAAAA,YAAM;AAAA,UAAA,CAAA,GAAAL,EAC5C8B,GAAgB;AAAA,YAAA,IAAApB,WAAA;AAAA,qBAAEb,EAAMkC;AAAAA,YAAW;AAAA,UAAA,CAAA,CAAA;AAAA,QAAA;AAAA,MAAA,CAAA,CAAA;AAAA,IAAA;AAAA,EAAA,CAAA;AAI5C;"}

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

@@ -3,5 +3,6 @@ import { PasswordInputInput } from '../PasswordInput';
 export type PasswordInputFieldProps = ComponentProps<typeof PasswordInputInput> & {
     label?: string;
     description?: string;
+    showVisibilityTrigger?: boolean;
 };
 export declare const PasswordInputField: Component<PasswordInputFieldProps>;

package/dist/components/form/PasswordInputField.js

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

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

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

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

@@ -1,8 +1,8 @@
-import { TagsInputRootProps } from '@ark-ui/solid';
-import { Component } from 'solid-js';
-export type TagsInputFieldProps = TagsInputRootProps & {
+import { Component, ComponentProps } from 'solid-js';
+import { TagsInputInput } from '../TagsInput';
+export type TagsInputFieldProps = ComponentProps<typeof TagsInputInput> & {
     label?: string;
     description?: string;
-    placeholder?: string;
+    showClearTrigger?: boolean;
 };
 export declare const TagsInputField: Component<TagsInputFieldProps>;

package/dist/components/form/TagsInputField.js

@@ -1,40 +1,46 @@
-import { createComponent as e, mergeProps as d } from "solid-js/web";
-import { splitProps as u, For as i } from "solid-js";
-import { Field as o, FieldLabel as s, FieldContent as g, FieldError as p, FieldDescription as c } from "../Field.js";
-import { TagsInput as h, TagsInputContext as I, TagsInputControl as m, TagsInputItem as T, TagsInputItemPreview as f, TagsInputItemText as F, TagsInputItemDeleteTrigger as b, TagsInputItemInput as C, TagsInputInput as v, TagsInputClearTrigger as O, TagsInputHiddenInput as P } from "../TagsInput.js";
-import { useFieldContext as x } from "./context.js";
-const y = (n) => [e(I, {
-  children: (t) => e(m, {
-    get children() {
-      return [e(i, {
-        get each() {
-          return t().value;
-        },
-        children: (r, l) => e(T, {
-          get index() {
-            return l();
+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) => {
+  const [t, r] = i(l, ["children", "showClearTrigger"]);
+  return [e(C, {
+    children: (a) => e(f, {
+      get children() {
+        return [e(d, {
+          get each() {
+            return a().value;
+          },
+          children: (n, g) => e(b, {
+            get index() {
+              return g();
+            },
+            value: n,
+            get children() {
+              return [e(w, {
+                get children() {
+                  return [e(F, {
+                    children: n
+                  }), e(v, {})];
+                }
+              }), e(y, {})];
+            }
+          })
+        }), e(O, r), e(s, {
+          get when() {
+            return t.showClearTrigger !== !1;
           },
-          value: r,
           get children() {
-            return [e(f, {
-              get children() {
-                return [e(F, {
-                  children: r
-                }), e(b, {})];
-              }
-            }), e(C, {})];
+            return e(P, {});
           }
-        })
-      }), e(v, {
-        get placeholder() {
-          return n.placeholder;
-        }
-      }), e(O, {})];
-    }
-  })
-}), e(P, {})], q = ["label", "description", "required", "disabled", "readOnly", "placeholder"], L = (n) => {
-  const t = x(), [r, l] = u(n, q);
-  return e(o, {
+        }), u(() => t.children)];
+      }
+    })
+  }), e(x, {})];
+}, S = ["label", "description", "required", "disabled", "readOnly", "showClearTrigger"], A = (l) => {
+  const t = q(), [r, a] = i(l, S);
+  return e(h, {
     get invalid() {
       return t().state.meta.errors.length > 0;
     },
@@ -48,18 +54,18 @@ const y = (n) => [e(I, {
       return r.required ?? !1;
     },
     get children() {
-      return [e(s, {
+      return [e(p, {
         get children() {
           return r.label;
         }
-      }), e(g, {
+      }), e(c, {
         get children() {
-          return [e(h, d({
+          return [e(m, {
             get value() {
               return t().state.value;
             },
-            onValueChange: (a) => {
-              t().handleChange(a.value);
+            onValueChange: (n) => {
+              t().handleChange(n.value);
             },
             onBlur: () => {
               t().handleBlur();
@@ -72,20 +78,17 @@ const y = (n) => [e(I, {
             },
             get readOnly() {
               return r.readOnly ?? !1;
-            }
-          }, l, {
+            },
             get children() {
-              return e(y, {
-                get placeholder() {
-                  return r.placeholder;
-                }
-              });
+              return e(D, o(a, () => typeof r.showClearTrigger == "boolean" && {
+                showClearTrigger: r.showClearTrigger
+              }));
             }
-          })), e(p, {
+          }), e(T, {
             get errors() {
               return t().state.meta.errors;
             }
-          }), e(c, {
+          }), e(I, {
             get children() {
               return r.description;
             }
@@ -96,6 +99,6 @@ const y = (n) => [e(I, {
   });
 };
 export {
-  L as TagsInputField
+  A 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 { TagsInputRootProps } from '@ark-ui/solid';\n\nimport { type Component, 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 = TagsInputRootProps & {\n  label?: string;\n  description?: string;\n  placeholder?: string;\n};\n\nconst TagsInputGroup: Component<{ placeholder?: string | undefined }> = (props) => (\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 placeholder={props.placeholder} />\n          <TagsInputClearTrigger />\n        </TagsInputControl>\n      )}\n    </TagsInputContext>\n    <TagsInputHiddenInput />\n  </>\n);\n\nconst TAGS_INPUT_FIELD_PROPS = [\n  'label',\n  'description',\n  'required',\n  'disabled',\n  'readOnly',\n  'placeholder',\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          {...others}\n        >\n          <TagsInputGroup placeholder={local.placeholder} />\n        </TagsInput>\n        <FieldError errors={field().state.meta.errors} />\n        <FieldDescription>{local.description}</FieldDescription>\n      </FieldContent>\n    </Field>\n  );\n};\n"],"names":["TagsInputGroup","props","_$createComponent","TagsInputContext","children","context","TagsInputControl","For","each","value","index","TagsInputItem","TagsInputItemPreview","TagsInputItemText","TagsInputItemDeleteTrigger","TagsInputItemInput","TagsInputInput","placeholder","TagsInputClearTrigger","TagsInputHiddenInput","TAGS_INPUT_FIELD_PROPS","TagsInputField","field","useFieldContext","local","others","splitProps","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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"}
+{"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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"}

package/package.json

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

package/src/components/form/ComboboxField.tsx

@@ -15,34 +15,39 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@
 
 import { useFieldContext } from './context';
 
-export type ComboboxFieldProps = ComboboxRootProps<string> & {
+export type ComboboxFieldProps = ComponentProps<typeof ComboboxInput> & {
+  collection: ComboboxRootProps<string>['collection'];
   label?: string;
   description?: string;
   showTrigger?: boolean;
-  showClear?: boolean;
+  showClearTrigger?: boolean;
 } & { class?: string };
 
 const ComboboxInputGroup: Component<
   ComponentProps<typeof ComboboxInput> & {
     showTrigger?: boolean | undefined;
-    showClear?: boolean | undefined;
+    showClearTrigger?: boolean | undefined;
   }
-> = (props) => (
-  <>
-    <ComboboxControl>
-      <ComboboxInput placeholder={props.placeholder} />
-      <div class='gap-1 flex items-center'>
-        {props.showClear === true && <ComboboxClearTrigger />}
-        {props.showTrigger === true && <ComboboxTrigger />}
-      </div>
-    </ComboboxControl>
-    <ComboboxPositioner>
-      <ComboboxContent>
-        <ComboboxList>{props.children}</ComboboxList>
-      </ComboboxContent>
-    </ComboboxPositioner>
-  </>
-);
+> = (props) => {
+  const [local, others] = splitProps(props, ['showTrigger', 'showClearTrigger', 'children']);
+
+  return (
+    <>
+      <ComboboxControl>
+        <ComboboxInput {...others} />
+        <div class='gap-1 flex items-center'>
+          {local.showClearTrigger === true && <ComboboxClearTrigger />}
+          {local.showTrigger === true && <ComboboxTrigger />}
+        </div>
+      </ComboboxControl>
+      <ComboboxPositioner>
+        <ComboboxContent>
+          <ComboboxList>{local.children}</ComboboxList>
+        </ComboboxContent>
+      </ComboboxPositioner>
+    </>
+  );
+};
 
 const COMBOBOX_FIELD_PROPS = [
   'label',
@@ -50,9 +55,9 @@ const COMBOBOX_FIELD_PROPS = [
   'required',
   'disabled',
   'readOnly',
-  'placeholder',
+  'collection',
   'showTrigger',
-  'showClear',
+  'showClearTrigger',
   'children',
 ] as const;
 
@@ -69,7 +74,8 @@ export const ComboboxField: Component<ComboboxFieldProps> = (props) => {
     >
       <FieldLabel>{local.label}</FieldLabel>
       <FieldContent>
-        <Combobox
+        <Combobox<string>
+          collection={local.collection}
           value={field().state.value}
           onValueChange={(details) => {
             field().handleChange(details.value);
@@ -80,12 +86,11 @@ export const ComboboxField: Component<ComboboxFieldProps> = (props) => {
           invalid={field().state.meta.errors.length > 0}
           disabled={local.disabled ?? false}
           readOnly={local.readOnly ?? false}
-          {...others}
         >
           <ComboboxInputGroup
-            placeholder={local.placeholder}
             showTrigger={local.showTrigger}
-            showClear={local.showClear}
+            showClearTrigger={local.showClearTrigger}
+            {...others}
           >
             {local.children}
           </ComboboxInputGroup>

package/src/components/form/DatePickerField.tsx

@@ -1,4 +1,4 @@
-import type { DatePickerInputProps, DatePickerRootProps, DateValue } from '@ark-ui/solid';
+import type { DatePickerInputProps, DateValue } from '@ark-ui/solid';
 import type { Component } from 'solid-js';
 
 import {
@@ -14,24 +14,33 @@ import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@
 
 import { useFieldContext } from './context';
 
-export type DatePickerFieldProps = DatePickerRootProps & {
+export type DatePickerFieldProps = DatePickerInputProps & {
   label?: string;
   description?: string;
+  showTrigger?: boolean;
 };
 
-const DatePickerInputGroup: Component<DatePickerInputProps> = (props) => (
-  <>
-    <DatePickerControl>
-      <DatePickerInput {...props} />
-      <DatePickerTrigger />
-    </DatePickerControl>
-    <DatePickerPositioner>
-      <DatePickerContent>
-        <DatePickerViews />
-      </DatePickerContent>
-    </DatePickerPositioner>
-  </>
-);
+const DatePickerInputGroup: Component<DatePickerInputProps & { showTrigger?: boolean }> = (
+  props,
+) => {
+  const [local, others] = splitProps(props, ['showTrigger']);
+
+  return (
+    <>
+      <DatePickerControl>
+        <DatePickerInput {...others} />
+        <Show when={local.showTrigger !== false}>
+          <DatePickerTrigger />
+        </Show>
+      </DatePickerControl>
+      <DatePickerPositioner>
+        <DatePickerContent>
+          <DatePickerViews />
+        </DatePickerContent>
+      </DatePickerPositioner>
+    </>
+  );
+};
 
 const DATE_PICKER_FIELD_PROPS = [
   'label',
@@ -40,6 +49,7 @@ const DATE_PICKER_FIELD_PROPS = [
   'disabled',
   'readOnly',
   'placeholder',
+  'showTrigger',
 ] as const;
 
 export const DatePickerField: Component<DatePickerFieldProps> = (props) => {
@@ -66,9 +76,12 @@ export const DatePickerField: Component<DatePickerFieldProps> = (props) => {
           invalid={field().state.meta.errors.length > 0}
           disabled={local.disabled ?? false}
           readOnly={local.readOnly ?? false}
-          {...others}
         >
-          <DatePickerInputGroup placeholder={local.placeholder} />
+          <DatePickerInputGroup
+            {...others}
+            placeholder={local.placeholder}
+            {...(typeof local.showTrigger === 'boolean' && { showTrigger: local.showTrigger })}
+          />
         </DatePicker>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>

package/src/components/form/NumberInputField.tsx

@@ -10,10 +10,10 @@ import {
 
 import { useFieldContext } from './context';
 
-export type NumberInputFieldProps = ComponentProps<typeof NumberInput> & {
+export type NumberInputFieldProps = ComponentProps<typeof NumberInputInput> & {
   label?: string;
   description?: string;
-  triggers?: boolean;
+  showTriggers?: boolean;
 };
 
 export const NumberInputField: Component<NumberInputFieldProps> = (props) => {
@@ -24,7 +24,7 @@ export const NumberInputField: Component<NumberInputFieldProps> = (props) => {
     'required',
     'disabled',
     'readOnly',
-    'triggers',
+    'showTriggers',
   ]);
 
   return (
@@ -48,11 +48,10 @@ export const NumberInputField: Component<NumberInputFieldProps> = (props) => {
           disabled={local.disabled ?? false}
           readOnly={local.readOnly ?? false}
           required={local.required ?? false}
-          {...others}
         >
           <NumberInputControl>
-            <NumberInputInput />
-            <Show when={local.triggers !== false}>
+            <NumberInputInput {...others} />
+            <Show when={local.showTriggers !== false}>
               <NumberInputTriggers />
             </Show>
           </NumberInputControl>

package/src/components/form/PasswordInputField.tsx

@@ -14,6 +14,7 @@ import { useFieldContext } from './context';
 export type PasswordInputFieldProps = ComponentProps<typeof PasswordInputInput> & {
   label?: string;
   description?: string;
+  showVisibilityTrigger?: boolean;
 };
 
 export const PasswordInputField: Component<PasswordInputFieldProps> = (props) => {
@@ -24,6 +25,7 @@ export const PasswordInputField: Component<PasswordInputFieldProps> = (props) =>
     'required',
     'disabled',
     'readOnly',
+    'showVisibilityTrigger',
   ]);
 
   return (
@@ -52,9 +54,11 @@ export const PasswordInputField: Component<PasswordInputFieldProps> = (props) =>
               }}
               {...others}
             />
-            <PasswordInputVisibilityTrigger>
-              <PasswordInputIndicator />
-            </PasswordInputVisibilityTrigger>
+            <Show when={local.showVisibilityTrigger !== false}>
+              <PasswordInputVisibilityTrigger>
+                <PasswordInputIndicator />
+              </PasswordInputVisibilityTrigger>
+            </Show>
           </PasswordInputControl>
         </PasswordInput>
         <FieldError errors={field().state.meta.errors} />

package/src/components/form/TagsInputField.tsx

@@ -1,6 +1,4 @@
-import type { TagsInputRootProps } from '@ark-ui/solid';
-
-import { type Component, splitProps, For } from 'solid-js';
+import { type Component, type ComponentProps, splitProps, For } from 'solid-js';
 
 import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from '@/components/Field';
 import {
@@ -19,36 +17,45 @@ import {
 
 import { useFieldContext } from './context';
 
-export type TagsInputFieldProps = TagsInputRootProps & {
+export type TagsInputFieldProps = ComponentProps<typeof TagsInputInput> & {
   label?: string;
   description?: string;
-  placeholder?: string;
+  showClearTrigger?: boolean;
 };
 
-const TagsInputGroup: Component<{ placeholder?: string | undefined }> = (props) => (
-  <>
-    <TagsInputContext>
-      {(context) => (
-        <TagsInputControl>
-          <For each={context().value}>
-            {(value, index) => (
-              <TagsInputItem index={index()} value={value}>
-                <TagsInputItemPreview>
-                  <TagsInputItemText>{value}</TagsInputItemText>
-                  <TagsInputItemDeleteTrigger />
-                </TagsInputItemPreview>
-                <TagsInputItemInput />
-              </TagsInputItem>
-            )}
-          </For>
-          <TagsInputInput placeholder={props.placeholder} />
-          <TagsInputClearTrigger />
-        </TagsInputControl>
-      )}
-    </TagsInputContext>
-    <TagsInputHiddenInput />
-  </>
-);
+const TagsInputGroup: Component<
+  ComponentProps<typeof TagsInputInput> & { showClearTrigger?: boolean }
+> = (props) => {
+  const [local, others] = splitProps(props, ['children', 'showClearTrigger']);
+
+  return (
+    <>
+      <TagsInputContext>
+        {(context) => (
+          <TagsInputControl>
+            <For each={context().value}>
+              {(value, index) => (
+                <TagsInputItem index={index()} value={value}>
+                  <TagsInputItemPreview>
+                    <TagsInputItemText>{value}</TagsInputItemText>
+                    <TagsInputItemDeleteTrigger />
+                  </TagsInputItemPreview>
+                  <TagsInputItemInput />
+                </TagsInputItem>
+              )}
+            </For>
+            <TagsInputInput {...others} />
+            <Show when={local.showClearTrigger !== false}>
+              <TagsInputClearTrigger />
+            </Show>
+            {local.children}
+          </TagsInputControl>
+        )}
+      </TagsInputContext>
+      <TagsInputHiddenInput />
+    </>
+  );
+};
 
 const TAGS_INPUT_FIELD_PROPS = [
   'label',
@@ -56,7 +63,7 @@ const TAGS_INPUT_FIELD_PROPS = [
   'required',
   'disabled',
   'readOnly',
-  'placeholder',
+  'showClearTrigger',
 ] as const;
 
 export const TagsInputField: Component<TagsInputFieldProps> = (props) => {
@@ -83,9 +90,13 @@ export const TagsInputField: Component<TagsInputFieldProps> = (props) => {
           invalid={field().state.meta.errors.length > 0}
           disabled={local.disabled ?? false}
           readOnly={local.readOnly ?? false}
-          {...others}
         >
-          <TagsInputGroup placeholder={local.placeholder} />
+          <TagsInputGroup
+            {...others}
+            {...(typeof local.showClearTrigger === 'boolean' && {
+              showClearTrigger: local.showClearTrigger,
+            })}
+          />
         </TagsInput>
         <FieldError errors={field().state.meta.errors} />
         <FieldDescription>{local.description}</FieldDescription>