nitro-web 0.0.137 → 0.0.139

package/components/auth/reset.tsx

@@ -1,5 +1,6 @@
 import { Topbar, Field, FormError, Button, request, onChange } from 'nitro-web'
 import { Errors } from 'nitro-web/types'
+import { Fragment } from 'react'
 
 type resetInstructionsProps = {
   className?: string,
@@ -29,12 +30,12 @@ export function ResetInstructions({ className, elements, redirectTo }: resetInst
 
   return (
     <div className={className}>
-      <Topbar title={<>Reset your Password</>} />
+      <Topbar title={<Fragment>Reset your Password</Fragment>} />
 
       <form onSubmit={onSubmit} class="mb-0">
         <div>
           <label for="email">Email Address</label>
-          <Field name="email" type="email" state={state} onChange={(e) => onChange(setState, e)} placeholder="Your email address..." />
+          <Field name="email" type="email" state={state} onChange={(e) => onChange(e, setState)} placeholder="Your email address..." />
         </div>
         
         <div class="mb-14">
@@ -76,16 +77,16 @@ export function ResetPassword({ className, elements, redirectTo }: resetInstruct
 
   return (
     <div className={className}>
-      <Topbar title={<>Reset your Password</>} />
+      <Topbar title={<Fragment>Reset your Password</Fragment>} />
 
       <form onSubmit={onSubmit} class="mb-0">
         <div>
           <label for="password">Your New Password</label>
-          <Field name="password" type="password" state={state} onChange={(e) => onChange(setState, e)} />
+          <Field name="password" type="password" state={state} onChange={(e) => onChange(e, setState)} />
         </div>
         <div>
           <label for="password2">Repeat Your New Password</label>
-          <Field name="password2" type="password" state={state} onChange={(e) => onChange(setState, e)} />
+          <Field name="password2" type="password" state={state} onChange={(e) => onChange(e, setState)} />
         </div>
 
         <div class="mb-14">

package/components/auth/signin.tsx

@@ -1,5 +1,6 @@
 import { Topbar, Field, Button, FormError, request, queryObject, injectedConfig, updateJwt, onChange } from 'nitro-web'
 import { Errors } from 'nitro-web/types'
+import { Fragment } from 'react'
 
 type signinProps = {
   className?: string,
@@ -58,12 +59,12 @@ export function Signin({ className, elements, redirectTo }: signinProps) {
 
   return (
     <div className={className}>
-      <Topbar title={<>Sign in to your Account</>} />
+      <Topbar title={<Fragment>Sign in to your Account</Fragment>} />
 
       <form onSubmit={onSubmit} class="mb-0">
         <div>
           <label for="email">Email Address</label>
-          <Field name="email" type="email" state={state} onChange={(e) => onChange(setState, e)}
+          <Field name="email" type="email" state={state} onChange={(e) => onChange(e, setState)}
             placeholder="Your email address..." />
         </div>
         <div>
@@ -71,7 +72,7 @@ export function Signin({ className, elements, redirectTo }: signinProps) {
             <label for="password">Password</label>
             <Link to="/reset" class="label underline2">Forgot?</Link>
           </div>
-          <Field name="password" type="password" state={state} onChange={(e) => onChange(setState, e)}/>
+          <Field name="password" type="password" state={state} onChange={(e) => onChange(e, setState)}/>
         </div>
         
         <div class="mb-14">

package/components/auth/signup.tsx

@@ -1,5 +1,6 @@
 import { Button, Field, FormError, Topbar, request, injectedConfig, onChange } from 'nitro-web'
 import { Errors } from 'nitro-web/types'
+import { Fragment } from 'react'
 
 type signupProps = {
   className?: string,
@@ -35,29 +36,29 @@ export function Signup({ className, elements, redirectTo }: signupProps) {
   
   return (
     <div className={className}>
-      <Topbar title={<>Start your 21 day Free Trial</>} />
+      <Topbar title={<Fragment>Start your 21 day Free Trial</Fragment>} />
 
       <form onSubmit={onSubmit} class="mb-0">
         <div class="grid grid-cols-2 gap-6">  
           <div>
             <label for="name">Your Name</label>
             <Field name="name" placeholder="E.g. Bruce Wayne" state={state} 
-              onChange={(e) => onChange(setState, e)} 
+              onChange={(e) => onChange(e, setState)} 
               errorTitle={/^(name|firstName|lastName)$/} // if different from `name`
             />
           </div>
           <div>
             <label for="business.name">Company Name</label>
-            <Field name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={(e) => onChange(setState, e)} />
+            <Field name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={(e) => onChange(e, setState)} />
           </div>
         </div>
         <div>
           <label for="email">Email Address</label>
-          <Field name="email" type="email" state={state} onChange={(e) => onChange(setState, e)} placeholder="Your email address..." />
+          <Field name="email" type="email" state={state} onChange={(e) => onChange(e, setState)} placeholder="Your email address..." />
         </div>
         <div>
           <label for="password">Password</label>
-          <Field name="password" type="password" state={state} onChange={(e) => onChange(setState, e)}/>
+          <Field name="password" type="password" state={state} onChange={(e) => onChange(e, setState)}/>
         </div>
         
         <div class="mb-14">

package/components/partials/styleguide.tsx

@@ -35,6 +35,21 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
   const [, setStore] = useTracked()
   const [customerSearch, setCustomerSearch] = useState('')
   const [showModal1, setShowModal1] = useState(false)
+  // Tip: handy when developing or updating components, you can hide/show the groups you want to see
+  const groups = [
+    'Links',
+    'Dropdowns',
+    'Filters',
+    'Buttons',
+    'Varients',
+    'Selects',
+    'Inputs',
+    'Date Inputs',
+    'File Inputs & Calendar',
+    'Tables',
+    'Modals',
+    'Custom Components',
+  ]
   const [state, setState] = useState({
     address: '',
     amount: 100,
@@ -130,7 +145,7 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
       e.target.value = null // clear the select's selected value
       setTimeout(() => alert('Adding new customer...'), 0)
     }
-    onChange(setState, e)
+    onChange(e, setState)
   }
 
   const onCustomerSearch = (search: string) => {
@@ -180,378 +195,425 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
   // }, [])
 
   return (
-    <div class={`text-left max-w-[1100px] ${className}`}>
-      <Modal show={showModal1} setShow={setShowModal1}>
-        <h3 class="h3">Edit Profile</h3>
-        <p class="mb-5">An example modal containing a basic form for editing profiles.</p>
-        <form class="mb-8 text-left">
-          <div>
-            <label for="firstName2">First Name</label>
-            <Field name="firstName2" state={state} onChange={(e) => onChange(setState, e)} />
-          </div>
-          <div>
-            <label for="email2">Email Address</label>
-            <Field name="email2" type="email" placeholder="Your email address..."/>
-          </div>
-        </form>
-        <div class="flex justify-end">
-          <Button color="primary" onClick={() => setShowModal1(false)}>Save</Button>
-        </div>
-      </Modal>
-
-      <GithubLink filename={__filename} />
-      <div class="mb-7">
+    <div class={`text-left max-w-[1100px] flex flex-col gap-4 pb-2 ${className}`}>
+      <div>
         <h1 class="h1">{injectedConfig.isDemo ? 'Design System' : 'Style Guide'}</h1>
-        <p>
+        <p class="mb-3">
           Components are styled using&nbsp;
           <a href="https://v3.tailwindcss.com/docs/configuration" class="underline" target="_blank" rel="noreferrer">TailwindCSS</a>. 
         </p>
       </div>
 
-      <h2 class="h3">Links</h2>
-      <div class="mb-10">
-        <a class="mr-2" href="#">Default</a>
-        <a class="underline1 is-active mr-2" href="#">Underline1</a>
-        <a class="underline2 is-active mr-2" href="#">Underline2</a>
-      </div>
-
-      <h2 class="h3">Modals</h2>
-      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-10">
-        <div><Button color="primary" onClick={() => setShowModal1(true)}>Modal (default)</Button></div>
-      </div>
-
-      <h2 class="h3">Dropdowns</h2>
-      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-10">
+      {groups.includes('Links') && (
         <div>
-          <Dropdown options={options} minWidth="250px">
-            <Button IconRight="v" class="gap-x-3">Dropdown</Button>
-          </Dropdown>
-        </div>
-        <div>
-          <Dropdown 
-            // menuIsOpen={true}
-            dir="bottom-right"
-            minWidth="330px" 
-            options={[{ label: <><b>New Customer</b> / Add <b>Bruce Lee</b></>, className: 'border-bottom-with-space' }, ...options]}
-          >
-            <Button color="white" IconRight="v" class="gap-x-3">Dropdown bottom-right</Button>
-          </Dropdown>
+          <h2 class="h3">Links</h2>
+          <div class="mb-6">
+            <a class="mr-2" href="#">Default</a>
+            <a class="underline1 is-active mr-2" href="#">Underline1</a>
+            <a class="underline2 is-active mr-2" href="#">Underline2</a>
+          </div>
         </div>
+      )}
+  
+      {groups.includes('Dropdowns') && (
         <div>
-          <Dropdown options={options} dir="top-left" minWidth="250px">
-            <Button color="white" IconRight="v" class="gap-x-3">Dropdown top-left</Button>
-          </Dropdown>
+          <h2 class="h3">Dropdowns</h2>
+          <div class="flex flex-wrap gap-x-6 gap-y-4 mb-6">
+            <div>
+              <Dropdown options={options} minWidth="250px">
+                <Button IconRight="v" class="gap-x-3">Dropdown</Button>
+              </Dropdown>
+            </div>
+            <div>
+              <Dropdown 
+                // menuIsOpen={true}
+                dir="bottom-right"
+                minWidth="330px" 
+                options={[{ label: <><b>New Customer</b> / Add <b>Bruce Lee</b></>, className: 'border-bottom-with-space' }, ...options]}
+              >
+                <Button color="white" IconRight="v" class="gap-x-3">Dropdown bottom-right</Button>
+              </Dropdown>
+            </div>
+            <div>
+              <Dropdown options={options} dir="top-left" minWidth="250px">
+                <Button color="white" IconRight="v" class="gap-x-3">Dropdown top-left</Button>
+              </Dropdown>
+            </div>
+          </div>
         </div>
-      </div>
-
-      <h2 class="h3">Filters</h2>
-      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-10">
-        {/* Filter dropdown */}
-        <Filters 
-          ref={filtersRef} 
-          filters={filters} 
-          state={filterState} 
-          setState={setFilterState}
-          dropdownProps={{ dir: 'bottom-left' }}
-          elements={{ Button: Button }}
-        />
-        {/* Search bar */}
-        <Field
-          class="!my-0 min-w-[242px]" 
-          type="search" 
-          name="search"
-          id="search2"
-          iconPos="left" 
-          state={filterState}
-          onChange={(e) => {
-            onChange(setFilterState, e)
-            filtersRef.current?.submit()
-          }}
-          placeholder="Linked search bar..."
-        />
-      </div>
-
-      <h2 class="h3">Buttons</h2>
-      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-10">
-        <div><Button color="primary">primary (default)</Button></div>
-        <div><Button color="secondary">secondary button</Button></div>
-        <div><Button color="black">black button</Button></div>
-        <div><Button color="dark">dark button</Button></div>
-        <div><Button color="white">white button</Button></div>
-        <div><Button color="clear">clear button</Button></div>
-        <div><Button color="primary" size="xs">*-xs button</Button></div>
-        <div><Button color="primary" size="sm">*-sm button</Button></div>
-        <div><Button color="primary">*-md (default)</Button></div>
-        <div><Button color="primary" size="lg">*-lg button</Button></div>
-        <div><Button IconLeft={<Check size={19} className="-my-5" />}>IconLeft</Button></div>
-        <div><Button IconLeft={<Check size={19} className="-my-5" />} 
-          className="w-[160px]">IconLeft 160px</Button></div>
-        <div><Button IconLeftEnd={<Check size={19} className="-my-5" />} 
-          className="w-[190px]">IconLeftEnd 190px</Button></div>
-        <div><Button IconRight="v">IconRight</Button></div>
-        <div><Button IconRightEnd="v" className="w-[190px]">IconRightEnd 190px</Button></div>
-        <div><Button color="primary" IconRight="v" isLoading>primary isLoading</Button></div>
-        <div><Button IconCenter={<FileEditIcon size={18}/>}></Button></div>
-        <div><Button size="sm" IconCenter={<FileEditIcon size={16}/>}></Button></div>
-        <div><Button size="xs" IconCenter={<FileEditIcon size={14}/>}></Button></div>
-      </div>
+      )}
 
-      <h2 class="h3">Varients</h2>
-      <div class="grid grid-cols-3 gap-x-6 mb-4">
+      {groups.includes('Filters') && (
         <div>
-          <label for="input2">Toggles</label>
-          <Checkbox name="input2" type="toggle" text="Toggle sm" subtext="some additional text here." class="!mb-0" 
-            state={state} onChange={(e) => onChange(setState, e)} />
-          <Checkbox name="input3" type="toggle" text="Toggle 22px" subtext="some additional text here." size={22} />
-        </div>
-        <div>
-          <label for="input1">Radios</label>
-          <Checkbox name="input1" type="radio" text="Radio" subtext="some additional text here 1." id="input1-1" class="!mb-0" 
-            defaultChecked />
-          <Checkbox name="input1" type="radio" text="Radio 16px" subtext="some additional text here 2." id="input1-2"  size={16} />
-        </div>
-        <div>
-          <label for="input0">Checkboxes</label>
-          <Checkbox name="input0" type="checkbox" text="Checkbox" subtext="some additional text here."  class="!mb-0" defaultChecked />
-          <Checkbox name="input0.1" type="checkbox" text="Checkbox 16px" size={16}
-            subtext="some additional text here which is a bit longer that will be line-wrap to the next line." />
+          <h2 class="h3">Filters</h2>
+          <div class="flex flex-wrap gap-x-6 gap-y-4 mb-6">
+            {/* Filter dropdown */}
+            <Filters 
+              ref={filtersRef} 
+              filters={filters} 
+              state={filterState} 
+              setState={setFilterState}
+              dropdownProps={{ dir: 'bottom-left' }}
+              elements={{ Button: Button }}
+            />
+            {/* Search bar */}
+            <Field
+              class="!my-0 min-w-[242px]" 
+              type="search" 
+              name="search"
+              id="search2"
+              iconPos="left" 
+              state={filterState}
+              onChange={(e) => {
+                onChange(e, setFilterState)
+                filtersRef.current?.submit()
+              }}
+              placeholder="Linked search bar..."
+            />
+          </div>
         </div>
-      </div>
+      )}
 
-      <h2 class="h3">Selects</h2>
-      <div class="grid grid-cols-3 lg:grid-cols-3 gap-x-6 mb-4">
-        <div>
-          <label for="action">Default</label>
-          <Select 
-            // menuIsOpen={true}
-            name="action"
-            isSearchable={false}
-            options={useMemo(() => [
-              { value: 'edit', label: 'Edit' },
-              { value: 'delete', label: 'Delete' },
-            ], [])}
-          />
-        </div>
-        <div>
-          <label for="colorsMulti">Mutli Select</label>
-          <Select 
-            name="colorsMulti"
-            isMulti={true}
-            state={state}
-            options={useMemo(() => [
-              { value: 'blue', label: 'Blue' },
-              { value: 'green', label: 'Green' },
-              { value: 'yellow', label: 'Yellow' },
-              { value: 'red', label: 'Red' },
-              { value: 'orange', label: 'Orange' },
-              { value: 'purple', label: 'Purple' },
-              { value: 'pink', label: 'Pink' },
-              { value: 'gray', label: 'Gray' },
-              { value: 'black', label: 'Black' },
-              { value: 'white', label: 'White' },
-            ], [])}
-            onChange={(e) => onChange(setState, e)}
-          />
-        </div>
+      {groups.includes('Buttons') && (
         <div>
-          <label for="country">Countries</label>
-          <Select
-            // https://github.com/lipis/flag-icons
-            name="country" 
-            mode="country"
-            state={state} 
-            options={useMemo(() => [{ value: 'nz', label: 'New Zealand' }, { value: 'au', label: 'Australia' }], [])} 
-            onChange={(e) => onChange(setState, e)}
-          />
-        </div>
-        <div>
-          <label for="customer">List Item with Action</label>
-          <Select
-            // menuIsOpen={true}
-            placeholder="Select or add customer..."
-            name="customer" 
-            mode="customer"
-            state={state}
-            onChange={onCustomerInputChange}
-            onInputChange={onCustomerSearch}
-            options={useMemo(() => [ 
-              { 
-                className: 'bb', 
-                fixed: true,
-                value: '0',
-                label: (
-                  <>
-                    <b>New Customer</b> (and clear select)
-                    {customerSearch ? <> / Add <b>{ucFirst(customerSearch)}</b></> : ''}
-                  </>
-                ), 
-              },
-              { value: '1', label: 'Iron Man Industries' },
-              { value: '2', label: 'Captain America' },
-              { value: '3', label: 'Thor Limited' },
-            ], [customerSearch])}
-          />
-        </div>
-        <div>
-          <label for="currency">Currencies</label>
-          <Select 
-            name="currency"
-            state={state} 
-            options={useMemo(() => (currencies ? getCurrencyOptions(currencies) : [{ value: 'nzd', label: 'New Zealand Dollar' }, { value: 'aud', label: 'Australian Dollar' }]), [])} 
-            onChange={(e) => onChange(setState, e)}
-          />
+          <h2 class="h3">Buttons</h2>
+          <div class="flex flex-wrap gap-x-6 gap-y-4 mb-6">
+            <div><Button color="primary">primary (default)</Button></div>
+            <div><Button color="secondary">secondary button</Button></div>
+            <div><Button color="black">black button</Button></div>
+            <div><Button color="dark">dark button</Button></div>
+            <div><Button color="white">white button</Button></div>
+            <div><Button color="clear">clear button</Button></div>
+            <div><Button color="primary" size="xs">*-xs button</Button></div>
+            <div><Button color="primary" size="sm">*-sm button</Button></div>
+            <div><Button color="primary">*-md (default)</Button></div>
+            <div><Button color="primary" size="lg">*-lg button</Button></div>
+            <div><Button IconLeft={<Check size={19} className="-my-5" />}>IconLeft</Button></div>
+            <div><Button IconLeft={<Check size={19} className="-my-5" />} 
+              className="w-[160px]">IconLeft 160px</Button></div>
+            <div><Button IconLeftEnd={<Check size={19} className="-my-5" />} 
+              className="w-[190px]">IconLeftEnd 190px</Button></div>
+            <div><Button IconRight="v">IconRight</Button></div>
+            <div><Button IconRightEnd="v" className="w-[190px]">IconRightEnd 190px</Button></div>
+            <div><Button color="primary" IconRight="v" isLoading>primary isLoading</Button></div>
+            <div><Button IconCenter={<FileEditIcon size={18}/>}></Button></div>
+            <div><Button size="sm" IconCenter={<FileEditIcon size={16}/>}></Button></div>
+            <div><Button size="xs" IconCenter={<FileEditIcon size={14}/>}></Button></div>
+          </div>
         </div>
-      </div>
+      )}
 
-      <h2 class="h3">Inputs</h2>
-      <div class="grid grid-cols-3 gap-x-6 mb-4">
-        <div>
-          <label for="firstName">First Name</label>
-          <Field name="firstName" state={state} onChange={(e) => onChange(setState, e)} />
-        </div>
-        <div>
-          <label for="email">Email Address</label>
-          <Field name="email" type="email" placeholder="Your email address..."/>
-        </div>
+      {groups.includes('Varients') && (
         <div>
-          <div class="flex justify-between"> 
-            <label for="password">Password</label>
-            <a href="#" class="label">Forgot?</a>
+          <h2 class="h3">Varients</h2>
+          <div class="grid grid-cols-3 gap-x-6">
+            <div>
+              <label for="input2">Toggles</label>
+              <Checkbox name="input2" type="toggle" text="Toggle sm" subtext="some additional text here." class="!mb-0" 
+                state={state} onChange={(e) => onChange(e, setState)} />
+              <Checkbox name="input3" type="toggle" text="Toggle 22px" subtext="some additional text here." size={22} />
+            </div>
+            <div>
+              <label for="input1">Radios</label>
+              <Checkbox name="input1" type="radio" text="Radio" subtext="some additional text here 1." id="input1-1" class="!mb-0" 
+                defaultChecked />
+              <Checkbox name="input1" type="radio" text="Radio 16px" subtext="some additional text here 2." id="input1-2"  size={16} />
+            </div>
+            <div>
+              <label for="input0">Checkboxes</label>
+              <Checkbox name="input0" type="checkbox" text="Checkbox" subtext="some additional text here."  class="!mb-0" defaultChecked />
+              <Checkbox name="input0.1" type="checkbox" text="Checkbox 16px" size={16}
+                subtext="some additional text here which is a bit longer that will be line-wrap to the next line." />
+            </div>
           </div>
-          <Field name="password" type="password"/>
-        </div>
-        <div>
-          <label for="search3number">Number</label>
-          <Field name="number" id="search3number" type="number" placeholder="Number..." />
-        </div>
-        <div>
-          <label for="search3">Search</label>
-          <Field name="search" id="search3" type="search" placeholder="Search..." />
-        </div>
-        <div>
-          <label for="filter">Filter by Code</label>
-          <Field name="filter" type="filter" iconPos="left"  />
-        </div>
-        <div>
-          <label for="address">Input Error</label>
-          <Field name="address" placeholder="Address..." state={state} onChange={(e) => onChange(setState, e)} />
         </div>
-        <div>
-          <label for="description">Description</label>
-          <Field name="description" type="textarea" rows={2} />
-        </div>
-        <div>
-          <label for="brandColor">Brand Color</label>
-          <Field name="brandColor" type="color" iconPos="left" state={state} onChange={(e) => onChange(setState, e)} />
-        </div>
-        <div>
-          <label for="amount">Amount ({state.amount})</label>
-          <Field 
-            name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={(e) => onChange(setState, e)} 
-            // Example of using a custom format and currencies, e.g. 
-            format={'¤#,##0.00'} 
-            currencies={currencies} 
-          />
-        </div>
-      </div>
+      )}
 
-      <h2 class="h3">Date Inputs</h2>
-      <div class="grid grid-cols-1 gap-x-6 mb-4 sm:grid-cols-3">
+      {groups.includes('Selects') && (
         <div>
-          <label for="date">Date with time</label>
-          <Field name="date-time" type="date" mode="single" showTime={true} state={state} onChange={(e) => onChange(setState, e)} />
-        </div>
-        <div>
-          <label for="date-range">Date range (with prefix & disabled days)</label>
-          <Field 
-            name="date-range" 
-            type="date" 
-            mode="range" 
-            prefix="Date:" 
-            state={state} 
-            onChange={(e) => onChange(setState, e)} 
-            DayPickerProps={{
-              disabled: { after: new Date(Date.now() + 1000 * 60 * 60 * 24 * 45) }
-            }} 
-          />
+          <h2 class="h3">Selects</h2>
+          <div class="grid grid-cols-3 lg:grid-cols-3 gap-x-6">
+            <div>
+              <label for="action">Default</label>
+              <Select 
+                // menuIsOpen={true}
+                name="action"
+                isSearchable={false}
+                options={useMemo(() => [
+                  { value: 'edit', label: 'Edit' },
+                  { value: 'delete', label: 'Delete' },
+                ], [])}
+              />
+            </div>
+            <div>
+              <label for="colorsMulti">Mutli Select</label>
+              <Select 
+                name="colorsMulti"
+                isMulti={true}
+                state={state}
+                options={useMemo(() => [
+                  { value: 'blue', label: 'Blue' },
+                  { value: 'green', label: 'Green' },
+                  { value: 'yellow', label: 'Yellow' },
+                  { value: 'red', label: 'Red' },
+                  { value: 'orange', label: 'Orange' },
+                  { value: 'purple', label: 'Purple' },
+                  { value: 'pink', label: 'Pink' },
+                  { value: 'gray', label: 'Gray' },
+                  { value: 'black', label: 'Black' },
+                  { value: 'white', label: 'White' },
+                ], [])}
+                onChange={(e) => onChange(e, setState)}
+              />
+            </div>
+            <div>
+              <label for="country">Countries</label>
+              <Select
+                // https://github.com/lipis/flag-icons
+                name="country" 
+                mode="country"
+                state={state} 
+                options={useMemo(() => [{ value: 'nz', label: 'New Zealand' }, { value: 'au', label: 'Australia' }], [])} 
+                onChange={(e) => onChange(e, setState)}
+              />
+            </div>
+            <div>
+              <label for="customer">List Item with Action</label>
+              <Select
+                // menuIsOpen={true}
+                placeholder="Select or add customer..."
+                name="customer" 
+                mode="customer"
+                state={state}
+                onChange={onCustomerInputChange}
+                onInputChange={onCustomerSearch}
+                options={useMemo(() => [ 
+                  { 
+                    className: 'bb', 
+                    fixed: true,
+                    value: '0',
+                    label: (
+                      <>
+                        <b>New Customer</b> (and clear select)
+                        {customerSearch ? <> / Add <b>{ucFirst(customerSearch)}</b></> : ''}
+                      </>
+                    ), 
+                  },
+                  { value: '1', label: 'Iron Man Industries' },
+                  { value: '2', label: 'Captain America' },
+                  { value: '3', label: 'Thor Limited' },
+                ], [customerSearch])}
+              />
+            </div>
+            <div>
+              <label for="currency">Currencies</label>
+              <Select 
+                name="currency"
+                state={state} 
+                options={useMemo(() => (currencies ? getCurrencyOptions(currencies) : [{ value: 'nzd', label: 'New Zealand Dollar' }, { value: 'aud', label: 'Australian Dollar' }]), [])} 
+                onChange={(e) => onChange(e, setState)}
+              />
+            </div>
+          </div>
         </div>
+      )}
+
+      {groups.includes('Inputs') && (
         <div>
-          <label for="date">Date multi-select (right aligned)</label>
-          <Field name="date" type="date" mode="multiple" state={state} onChange={(e) => onChange(setState, e)} dir="bottom-right" />
+          <h2 class="h3">Inputs</h2>
+          <div class="grid grid-cols-3 gap-x-6">
+            <div>
+              <label for="firstName">First Name</label>
+              <Field name="firstName" state={state} onChange={(e) => onChange(e, setState)} />
+            </div>
+            <div>
+              <label for="email">Email Address</label>
+              <Field name="email" type="email" placeholder="Your email address..."/>
+            </div>
+            <div>
+              <div class="flex justify-between"> 
+                <label for="password">Password</label>
+                <a href="#" class="label">Forgot?</a>
+              </div>
+              <Field name="password" type="password"/>
+            </div>
+            <div>
+              <label for="search3number">Number</label>
+              <Field name="number" id="search3number" type="number" placeholder="Number..." />
+            </div>
+            <div>
+              <label for="search3">Search</label>
+              <Field name="search" id="search3" type="search" placeholder="Search..." />
+            </div>
+            <div>
+              <label for="filter">Filter by Code</label>
+              <Field name="filter" type="filter" iconPos="left"  />
+            </div>
+            <div>
+              <label for="address">Input Error</label>
+              <Field name="address" placeholder="Address..." state={state} onChange={(e) => onChange(e, setState)} />
+            </div>
+            <div>
+              <label for="description">Description</label>
+              <Field name="description" type="textarea" rows={2} />
+            </div>
+            <div>
+              <label for="brandColor">Brand Color</label>
+              <Field name="brandColor" type="color" iconPos="left" state={state} onChange={(e) => onChange(e, setState)} />
+            </div>
+            <div>
+              <label for="amount">Amount ({state.amount})</label>
+              <Field 
+                name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={(e) => onChange(e, setState)} 
+                // Example of using a custom format and currencies, e.g. 
+                format={'¤#,##0.00'} 
+                currencies={currencies} 
+              />
+            </div>
+          </div>
         </div>
+      )}
+
+      {groups.includes('Date Inputs') && (
         <div>
-          <label for="time">Time</label>
-          <Field name="time" type="time" state={state} onChange={(e) => onChange(setState, e)}  />
+          <h2 class="h3">Date Inputs</h2>
+          <div class="grid grid-cols-1 gap-x-6 sm:grid-cols-3">
+            <div>
+              <label for="date">Date with time</label>
+              <Field name="date-time" type="date" mode="single" showTime={true} state={state} onChange={(e) => onChange(e, setState)} />
+            </div>
+            <div>
+              <label for="date-range">Date range (with prefix & disabled days)</label>
+              <Field 
+                name="date-range" 
+                type="date" 
+                mode="range" 
+                prefix="Date:" 
+                state={state} 
+                onChange={(e) => onChange(e, setState)} 
+                DayPickerProps={{
+                  disabled: { after: new Date(Date.now() + 1000 * 60 * 60 * 24 * 45) }
+                }} 
+              />
+            </div>
+            <div>
+              <label for="date">Date multi-select (right aligned)</label>
+              <Field name="date" type="date" mode="multiple" state={state} onChange={(e) => onChange(e, setState)} dir="bottom-right" />
+            </div>
+            <div>
+              <label for="time">Time</label>
+              <Field name="time" type="time" state={state} onChange={(e) => onChange(e, setState)}  />
+            </div>
+          </div>
         </div>
-      </div>
+      )}
 
-      <h2 class="h3">File Inputs & Calendar</h2>
-      <div class="grid grid-cols-3 gap-x-6 mb-4">
+      {groups.includes('File Inputs & Calendar') && (
         <div>
-          <label for="avatar">Avatar</label>
-          <Drop class="is-small" name="avatar" state={state} onChange={(e) => onChange(setState, e)} awsUrl={injectedConfig.awsUrl} />
+          <h2 class="h3">File Inputs & Calendar</h2>
+          <div class="grid grid-cols-3 gap-x-6">
+            <div>
+              <label for="avatar">Avatar</label>
+              <Drop class="is-small" name="avatar" state={state} onChange={(e) => onChange(e, setState)} awsUrl={injectedConfig.awsUrl} />
+            </div>
+            <div>
+              <label for="calendar">Calendar</label>
+              <Calendar mode="range" value={state.calendar} numberOfMonths={1} 
+                onChange={(value) => {
+                  onChange({ target: { name: 'calendar', value: value } }, setState)
+                }} 
+              />
+            </div>
+          </div>
         </div>
+      )}
+
+      {groups.includes('Tables') && (
         <div>
-          <label for="calendar">Calendar</label>
-          <Calendar mode="range" value={state.calendar} numberOfMonths={1} 
-            onChange={(value) => {
-              onChange(setState, { target: { name: 'calendar', value: value } })
-            }} 
+          <div class="flex justify-between items-start">
+            <h2 class="h3">Tables</h2>
+            <Field 
+              name="tableFilter"
+              type="search"
+              state={state}
+              placeholder="Basic table filter..."
+              onChange={(e) => onChange(e, setState)} 
+              className="!my-0 [&>input]:font-normal [&>input]:text-xs [&>input]:py-1.5" /////todo: need to allow twmerge here
+            />
+          </div>
+          <Table
+            rows={rows.slice(0, perPage)}
+            columns={thead}
+            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+            generateCheckboxActions={generateCheckboxActions}
+            generateTd={generateTd}
+            className="mb-6"
+          />
+          <Table
+            rows={[]}
+            columns={thead}
+            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+            generateCheckboxActions={generateCheckboxActions}
+            generateTd={generateTd}
+            className="mb-6"
+            isLoading={true}
+          />
+          <Table
+            rows={rows.slice(0, 2).map(row => ({ ...row, _id: row._id + '1' }))}
+            columns={thead}
+            rowLinesMax={1}
+            headerHeightMin={35}
+            rowGap={8}
+            rowHeightMin={42}
+            rowSideColor={(row) => ({ className: `rounded-l-xl ${statusColors(row?.status as string)}`, width: 10 })}
+            rowOnClick={useCallback((row: QuoteExample) => {setStore((s) => ({ ...s, message: `Row ${row?._id} clicked` }))}, [setStore])}
+            generateCheckboxActions={generateCheckboxActions}
+            generateTd={generateTd}
+            className="mb-5"
+            tableClassName="rounded-3px"
+            rowClassName="[&:hover>div]:bg-gray-50"
+            columnClassName="border-t-1 first:rounded-l-xl last:rounded-r-xl"
+            columnSelectedClassName="bg-gray-50 border-indigo-300"
+            columnHeaderClassName="text-gray-500 text-2xs uppercase border-none"
+            checkboxClassName="rounded-[2px] shadow-none"
           />
         </div>
-      </div>
+      )}
 
-      <div class="flex justify-between items-start">
-        <h2 class="h3">Tables</h2>
-        <Field 
-          name="tableFilter"
-          type="search"
-          state={state}
-          placeholder="Basic table filter..."
-          onChange={(e) => onChange(setState, e)} 
-          className="!my-0 [&>input]:font-normal [&>input]:text-xs [&>input]:py-1.5" /////todo: need to allow twmerge here
-        />
-      </div>
-      <div class="grid mb-4 last:mb-0">
-        <Table
-          rows={rows.slice(0, perPage)}
-          columns={thead}
-          rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
-          generateCheckboxActions={generateCheckboxActions}
-          generateTd={generateTd}
-          className="mb-6"
-        />
-        <Table
-          rows={[]}
-          columns={thead}
-          rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
-          generateCheckboxActions={generateCheckboxActions}
-          generateTd={generateTd}
-          className="mb-6"
-          isLoading={true}
-        />
-        <Table
-          rows={rows.slice(0, 2).map(row => ({ ...row, _id: row._id + '1' }))}
-          columns={thead}
-          rowLinesMax={1}
-          headerHeightMin={35}
-          rowGap={8}
-          rowHeightMin={42}
-          rowSideColor={(row) => ({ className: `rounded-l-xl ${statusColors(row?.status as string)}`, width: 10 })}
-          rowOnClick={useCallback((row: QuoteExample) => {setStore(s => ({ ...s, message: `Row ${row?._id} clicked` }))}, [setStore])}
-          generateCheckboxActions={generateCheckboxActions}
-          generateTd={generateTd}
-          className="mb-5"
-          tableClassName="rounded-3px"
-          rowClassName="[&:hover>div]:bg-gray-50"
-          columnClassName="border-t-1 first:rounded-l-xl last:rounded-r-xl"
-          columnSelectedClassName="bg-gray-50 border-indigo-300"
-          columnHeaderClassName="text-gray-500 text-2xs uppercase border-none"
-          checkboxClassName="rounded-[2px] shadow-none"
-        />
-      </div>
+      {groups.includes('Modals') && (
+        <>
+          <div>
+            <h2 class="h3">Modals</h2>
+            <div class="mb-6"><Button color="primary" onClick={() => setShowModal1(true)}>Modal (default)</Button></div>
+          </div>
+      
+          <Modal show={showModal1} setShow={setShowModal1}>
+            <h3 class="h3">Edit Profile</h3>
+            <p class="mb-5">An example modal containing a basic form for editing profiles.</p>
+            <form class="mb-8 text-left">
+              <div>
+                <label for="firstName2">First Name</label>
+                <Field name="firstName2" state={state} onChange={(e) => onChange(e, setState)} />
+              </div>
+              <div>
+                <label for="email2">Email Address</label>
+                <Field name="email2" type="email" placeholder="Your email address..."/>
+              </div>
+            </form>
+            <div class="flex justify-end">
+              <Button color="primary" onClick={() => setShowModal1(false)}>Save</Button>
+            </div>
+          </Modal>
+        </>
+      )}
 
-      {children}
+      {groups.includes('Custom Components') && (
+        <>
+          {children}
+        </>
+      )}
+
+      <GithubLink filename={__filename} />
     </div>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.137",
+  "version": "0.0.139",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",

package/types/util.d.ts

@@ -497,26 +497,23 @@ export function omit(obj: {
     [key: string]: unknown;
 };
 /**
- * Updates state from an input event (deep state properties are supported)
- * E.g. setState(s => ({ ...s, [e.target.id]: e.target.value }))
- *
+ * @typedef {({target: {name: string, value: unknown}} | [string, unknown])} EventOrPathValue
+ */
+/**
+ * Automatically updates a state object from a field event by using the input name/value (deep paths supported)
+ * E.g. setState(s => ({ ...s, [e.target.name]: e.target.value }))
  * @template T
+ * @param {EventOrPathValue} eventOrPathValue - The input/select change event or [path, value] to update the state with
  * @param {React.Dispatch<React.SetStateAction<T>>} setState
- * @param {{target: {name: string, value: unknown}}|[string, function|unknown]} eventOrPathValue
- *   - The input/select change event or path/value pair to update the state with
+ * @param {(value: unknown) => unknown} [beforeSetValue] - optional function to change the value before setting the state
  * @param {Function} [beforeSetState] - optional function to run before setting the state
  * @returns {Promise<T>}
  *
- * @example
- *   - <input onChange={(e) => onChange(setState, e)} />
- *   - <input onChange={() => onChange(setState, ['address.name', 'Joe'])} />
+ * @example usage:
+ *   - <input onChange={(e) => onChange(e, setState)} />
+ *   - <input onChange={() => onChange(['address.name', 'Joe'], setState)} />
  */
-export function onChange<T>(setState: React.Dispatch<React.SetStateAction<T>>, eventOrPathValue: {
-    target: {
-        name: string;
-        value: unknown;
-    };
-} | [string, Function | unknown], beforeSetState?: Function): Promise<T>;
+export function onChange<T>(eventOrPathValue: EventOrPathValue, setState: React.Dispatch<React.SetStateAction<T>>, beforeSetValue?: (value: unknown) => unknown, beforeSetState?: Function): Promise<T>;
 /**
  * Pads a number
  * @param {number} [num=0]
@@ -594,7 +591,7 @@ export function parseFilters(query: {
  *     sortBy: 'createdAt'
  *   }
  * @param {{ fieldsFlattened: object, name: string }} model - The Monastery model
- * @param {number} [limit=10] - if limit is falsy, exclude limit and skip to fetch regardless of pagination
+ * @param {number} [limit=10] - pass 0 to exclude limit/skip, regardless of pagination
  * @param {boolean} [hasMore] - hasMore parameter on parseSortOptions has been deprecated.
  * @example returned object (using the examples above):
  *   E.g. {
@@ -812,6 +809,12 @@ export type Box = {
     bottomLeft: Point;
     topRight: Point;
 };
+export type EventOrPathValue = ({
+    target: {
+        name: string;
+        value: unknown;
+    };
+} | [string, unknown]);
 /**
  * Build image URL from image array or object
  */

package/types/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"AA2CA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BC;AAED;;;;;;;;;GASG;AACH,yBARa,sBAAsB,CAoBlC;AAED;;;;;GAKG;AACH,8BAJW,MAAM,cACN;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,GACrB,MAAM,CAKlB;AAED;;;;;;GAMG;AACH,+BALW,MAAM,oBACN,OAAO,gBACP,OAAO,GACL,MAAM,CAelB;AAED;;;;;GAKG;AACH,sCAJW,MAAM,wBACN,OAAO,GACL,MAAM,CAMlB;AAED;;;;GAIG;AACH,sCAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;GAIG;AACH,iCAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;;GAMG;AACH,gCALW,MAAM,aACN,MAAM,oBACN,MAAM,GACJ,MAAM,CAUlB;AAED;;;;GAIG;AACH,0CAHW,MAAM,GACJ,MAAM,CAMlB;AAED;;;;;;;;;;;GAWG;AACH,4BAVW,MAAM,GAAC,IAAI,WACX,MAAM,aACN,MAAM,GACJ,MAAM,CAsBlB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,yBAnBuC,CAAC,SAA3B,CAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,QAI3B,CAAC,SACD,MAAM,YACN;IACN,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GACS,CAAC,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG;IACpD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,UAAU,CAAC,CAAC,CAAC,CAAA;CAC7B,CAwKH;AAED;;;;;GAKG;AACH,yBAJa,CAAC,OACH,CAAC,GACC,CAAC,CAgBb;AAED;;;;;GAKG;AACH,8BAJW,MAAM,GAAC,GAAG,EAAE,QACZ,MAAM,GACJ,OAAO,CAgBnB;AAED;;;;;;;GAOG;AACH,wBANa,CAAC,OACH,CAAC,QACD,MAAM,SACN,OAAO,WAAS,GACd,CAAC,CAKb;AAED;;;;;;;GAOG;AACH,gCANa,CAAC,QACH,CAAC,QACD,MAAM,SACN,OAAO,WAAS,GACd;IAAE,GAAG,EAAE,CAAC,CAAC;IAAC,MAAM,EAAE,CAAC,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAgCpD;AAED;;;;;;GAMG;AACH,0BALW;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,GAAC,EAAE,GAAC,IAAI,gCAE5B,MAAM,GACJ,MAAM,GAAC,EAAE,GAAC,IAAI,CAmB1B;AAED;;;;;;;;;GASG;AACH,mCARW,MAAM,GAAC,IAAI,GAAC,IAAI,GAAC,UAAU,CAAC,WAAW,CAAC,YACxC,MAAM,SACN,MAAM,QACN,MAAM,GACJ,IAAI,CA+BhB;AAED;;;;;GAKG;AACH,mCAJW,MAAM,iBACN,OAAO,GACL,MAAM,CAMlB;AAED;;;;GAIG;AACH,mCAHW,MAAM,GACJ,MAAM,CAWlB;AAED;;;;;;;;GAQG;AACH,8BAPW,MAAM,QACN;IAAE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAAC,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAAE,qBAC5G,QAAQ,cACR,MAAM,GACJ,QAAQ,CAwEpB;AAED;;;;GAIG;AACH,iCAHW;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAC,GACnC,MAAM,CAIlB;AAED;;;;GAIG;AACH,sCAHW,MAAM,GACJ,MAAM,EAAE,CASpB;AAED;;;;GAIG;AACH,6CAHW;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GACjC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAAE,CAS5D;AAED;;;;GAIG;AACH,+CAHW;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GACjC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAAE,CAS9C;AAED;;;;;GAKG;AACH,yCAJW;IAAE,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAAE,GAAC,SAAS,QAC1D,MAAM,GAAC,MAAM,GACX;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAC,SAAS,CAQvD;AAED;;;;;GAKG;AACH,uCAJW,MAAM,iBACN,MAAM,GACJ,MAAM,CAYlB;AAED;;;;;GAKG;AACH,qCAJW;IAAE,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,MAAM,EAAE,KAAK,MAAM,CAAA;CAAE,QACvC,MAAM,GACJ,MAAM,CAYlB;AAED;;;;GAIG;AACH,6DAHW,MAAM,GACJ,OAAO,CAAC,OAAO,mBAAmB,EAAE,MAAM,GAAC,IAAI,CAAC,CAI5D;AAED;;;;;;GAMG;AACH,wCAHW,aAAa,GACX,UAAU,EAAE,CAgCxB;AAED;;;;GAIG;AACH,4CAHW,UAAU,EAAE,GAAC,SAAS,GACpB,MAAM,CAMlB;AAED;;;;;;GAMG;AACH,+BALW,GAAG,EAAE,UACL,OAAO,QACP,MAAM,GACJ,OAAO,CAcnB;AAED;;;;GAIG;AACH,kCAHW,OAAO,GACL,OAAO,CAInB;AAED;;;;GAIG;AACH,iCAHW,OAAO,GACL,OAAO,CAInB;AAED;;;;GAIG;AACH,oCAHW,OAAO,GACL,OAAO,CAInB;AAED;;;;GAIG;AACH,+BAHW,MAAM,GACJ,OAAO,CAMnB;AAED;;;;;GAKG;AACH,8BAJW;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC,GAAC,IAAI,qBAC7B,OAAO,GACL,OAAO,CASnB;AAED;;;;GAIG;AACH,qCAHW,OAAO,GACL,OAAO,CAInB;AAED;;;;GAIG;AACH,+BAHW,OAAO,GACL,OAAO,CAmBnB;AAED;;;;GAIG;AACH,mCAHW,OAAO,GACL,OAAO,CAInB;AAED;;;;GAIG;AACH,mCAHW,OAAO,GACL,OAAO,CAKnB;AAED;;;;GAIG;AACH,kCAHW,OAAO,GACL,OAAO,CAInB;AAED;;;;GAIG;AACH,mCAHW,OAAO,GACL,OAAO,CAInB;AAED;;;;GAIG;AACH,gCAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;;GAMG;AACH,kCALW,MAAM,QACN,MAAM,iBACN,OAAO,GACL,MAAM,CAalB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qCAxBW,MAAM,mBACN,KAAK,GAAC,GAAG,aACT,KAAK,GACH,CAAC,KAAK,EAAE,KAAK,CAAC,GAAC,IAAI,CAuC/B;AAED;;;;;;;;;GASG;AACH,qDARW;IACN,IAAI,CAAC,EAAE;QAAC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAC,CAAA;IACjE,QAAQ,CAAC,EAAE;QAAC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAC,CAAA;CAC3C,MACO,MAAM,UACN,MAAM,OA+ChB;AAED;;;;;GAKG;AACH,6CAJW,MAAM,EAAE,UACR,MAAM,EAAE,GACP,MAAM,CAgBjB;AAED;;;;GAIG;AACH,kCAHW;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,MACtB,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,KAAK,GAAG;;EAS1C;AAED;;;;;GAKG;AACH,0BAJW;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,UAC1B,MAAM,EAAE,GACN;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAStC;AAED;;GAEG;AAEH;;;;;;;;;;;;;GAaG;AACH,yBAXa,CAAC,oBACH,gBAAgB,YAChB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,mBACvC,CAAC,KAAK,EAAE,OAAO,KAAK,OAAO,8BAEzB,OAAO,CAAC,CAAC,CAAC,CA+CtB;AAED;;;;;;GAMG;AACH,0BALW,MAAM,YACN,MAAM,eACN,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,oCAvCW;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,UAY1B;IACV,CAAK,GAAG,EAAE,MAAM,GAAG,QAAQ,GAAC,QAAQ,GAAC,SAAS,GAAC,QAAQ,GAAC,WAAW,GAAC,SAAS,GAAC;QAAE,IAAI,EAAE,KAAK,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,CAAA;CAC5G;;iBA6BmD,MAAM;;eAAY,MAAM;cAAQ,MAAM;eAAS,MAAM;cAAQ,MAAM;;aAC1G,QAAQ,EAAE;;EA+EzB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wCAhBW;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,GAAC,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,SAMnD;IAAE,eAAe,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,UACzC,MAAM,YACN,OAAO;;;;;;EAgCjB;AAED;;;;GAIG;AACH,0BAHW;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,QACtB,MAAM,GAAC,MAAM,GAAC,MAAM,EAAE,GAAC,MAAM,EAAE;;EAiBzC;AAED;;;;;;;;;;;;GAYG;AACH,0CAVW,MAAM,YAEd;IAA0B,iBAAiB,GAAnC,OAAO;IACW,mBAAmB,GAArC,OAAO;IACW,iBAAiB,GAAnC,OAAO;CAEf,GAAU;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAC,IAAI,GAAC,CAAC,MAAM,GAAC,IAAI,CAAC,EAAE,CAAA;CAAC,CAyCxD;AAED;;;;GAIG;AACH,yCAHW,MAAM,GACJ,MAAM,EAAE,CAOpB;AAED;;;;;;;;;GASG;AACH,iCARW;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC,UACxB,MAAM,YACN;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,YAE/B;IAA0B,iBAAiB,GAAnC,OAAO;CAEf,GAAU,MAAM,CAkBlB;AAED;;;;;;;;;;;;GAYG;AACH,+BAXW,MAAM,SACN;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,UACtB;IAAC,cAAc,CAAC,WAAU;CAAC,cAC3B,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC,aACnC,QAAQ,GACN,OAAO,CAAC,GAAG,CAAC,CAyDxB;AAED;;;;GAIG;AACH,0CAHW,EAAE,GAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,GACrB,EAAE,GAAC;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,CAcnC;AAED;;;;;;;;GAQG;AACH,gCANW,MAAM,gBACN,KAAK,EAAE,GAAC,KAAK,SACb,MAAM,MACN,MAAM,GACJ,MAAM,CAclB;AAED;;;;GAIG;AACH,qCAHW,MAAM,GACJ,MAAM,CAMlB;AAED;;;;;;;;GAQG;AACH,yCAPW,MAAM,gBACN,MAAM,wBAEN,MAAM,aADN,MAAM,GAEJ,MAAM,CA8ClB;AAED;;;;;GAKG;AACH,uCAJW,MAAM,cACN,OAAO,GACL,MAAM,CAelB;AAED;;;;;GAKG;AACH,gEAHW,MAAM,GACJ,OAAO,CAAC,IAAI,CAAC,CAMzB;AAED;;;;GAIG;AACH,oDAFW,aAAa,QAKvB;AAED;;;;;GAKG;AACH,sCAJW;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAC,EAAE,OACtB,MAAM,GACJ,MAAM,EAAE,CAQpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,yBAhBuC,CAAC,SAA3B,CAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,QAG3B,CAAC,SACD,MAAM,YACN;IACL,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACrB,GACS,CAAC,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG;IACpD,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,UAAU,CAAC,CAAC,CAAC,CAAA;CAC7B,CAmBH;AAED;;;;;GAKG;AACH,wBAJa,CAAC,YACH,CAAC,GAAG,SAAS,GACX,CAAC,CAAC,SAAS,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CASvC;AAED;;;;GAIG;AACH,6BAHW,MAAM,GACJ,MAAM,CAKlB;AAwED;;;;GAIG;AACH,gCAHW,MAAM,GACJ,MAAM,CAKlB;AA3ED,2FAiEE;;;;4BAzkCW,KAAK,GAAC,UAAU,EAAE,GAAC,UAAU,GAAC,eAAe,GAAC,MAAM,GAAC,GAAG;;;;oBA+NxD,CAAC,MAAM,EAAE,MAAM,CAAC;;;;kBAChB;IAAC,UAAU,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAA;CAAC;+BA0JpC,CAAC;IAAC,MAAM,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAC,CAAA;CAAC,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;;;;oBAic9D;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAC;uBA3kD7D,OAAO,OAAO,EAAE,QAAQ,CAAC,OAAO,OAAO,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;;;;4BAI9D,OAAO,OAAO,EAAE,aAAa;;;;iCAC7B,OAAO,OAAO,EAAE,kBAAkB;;;;4BAClC,OAAO,OAAO,EAAE,aAAa;;;;wCAC7B,OAAO,aAAa,EAAE,yBAAyB;;;;0CAG/C,kBAAkB,GAAG;IAAE,aAAa,CAAC,EAAE,yBAAyB,CAAA;CAAE;;;;qCAGlE,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,GAAG;IACrC,GAAG,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG,aAAa,EAAE,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,2BAA2B,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;CACzG;uBAGW,MAAM;sBACN,CAAC,KAAK,EAAE,MAAM,KAAK,QAAQ;;;;wBAC3B,CAAC,MAAM,GAAC,MAAM,GAAC,OAAO,CAAC,EAAE;yBACzB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE;yBACjC;IAAE,MAAM,EAAE,MAAM;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE;8BACrC;IAAE,QAAQ,EAAE;QAAE,IAAI,EAAE;YAAE,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC;YAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAA;CAAE"}

package/util.js

@@ -1166,60 +1166,62 @@ export function omit (obj, fields) {
 }
 
 /**
- * Updates state from an input event (deep state properties are supported)
- * E.g. setState(s => ({ ...s, [e.target.id]: e.target.value }))
- * 
+ * @typedef {({target: {name: string, value: unknown}} | [string, unknown])} EventOrPathValue
+ */
+
+/**
+ * Automatically updates a state object from a field event by using the input name/value (deep paths supported)
+ * E.g. setState(s => ({ ...s, [e.target.name]: e.target.value }))
  * @template T
+ * @param {EventOrPathValue} eventOrPathValue - The input/select change event or [path, value] to update the state with
  * @param {React.Dispatch<React.SetStateAction<T>>} setState
- * @param {{target: {name: string, value: unknown}}|[string, function|unknown]} eventOrPathValue 
- *   - The input/select change event or path/value pair to update the state with
+ * @param {(value: unknown) => unknown} [beforeSetValue] - optional function to change the value before setting the state
  * @param {Function} [beforeSetState] - optional function to run before setting the state
  * @returns {Promise<T>}
  * 
- * @example
- *   - <input onChange={(e) => onChange(setState, e)} />
- *   - <input onChange={() => onChange(setState, ['address.name', 'Joe'])} />
+ * @example usage:
+ *   - <input onChange={(e) => onChange(e, setState)} />
+ *   - <input onChange={() => onChange(['address.name', 'Joe'], setState)} />
  */
-export function onChange (setState, eventOrPathValue, beforeSetState) {
-  /** @type {unknown|function} */
+export function onChange (eventOrPathValue, setState, beforeSetValue, beforeSetState) {
+  /** @type {unknown} */
   let value
   /** @type {string} */
   let path = ''
-  /** @type {boolean} */
+  /** @type {boolean | undefined} */
   let hasFiles
   
   if (typeof eventOrPathValue === 'object' && 'target' in eventOrPathValue) {
-    const element = /** @type {HTMLInputElement & {_value?: unknown}} */(eventOrPathValue.target) // we need to assume this is an input
-    path = (element.name || element.id)
+    const element = /** @type {HTMLInputElement & {_value?: unknown}} */(eventOrPathValue.target)
+    path = element.name || element.id || ''
     hasFiles = !!element.files
-    value = element.files
-      ? element.files[0]
-      : typeof element._value !== 'undefined'
-        ? element._value
-        : element.type === 'checkbox'
-          ? element.checked
-          : element.value
-
+    value = (
+      element.files
+        ? element.files[0]
+        : typeof element._value !== 'undefined'
+          ? element._value
+          : element.type === 'checkbox'
+            ? element.checked
+            : element.value
+    )
   } else if (Array.isArray(eventOrPathValue)) {
     path = eventOrPathValue[0]
     value = eventOrPathValue[1]
   }
-  
-  // Removing leading zero(s) on number fields
-  // if (element.type == 'number' && !isFunction(value) && (value||'').match(/^0+([1-9])/)) {
-  //   value = value.replace(/^0+([1-9])/, '$1')
-  // }
 
   // Update state
   return new Promise((resolve) => {
     setState((state) => {
+      const newValue = beforeSetValue ? beforeSetValue(value) : value
+      const baseState = { ...state, ...(hasFiles ? { hasFiles } : {}) }
+
       /** @type {{[key: string]: any}} */
-      const { obj: newState, parent, fieldName } = deepSetWithInfo({ ...state, ...(hasFiles ? { hasFiles } : {}) }, path, value)
-      if (beforeSetState) {
-        beforeSetState({ newState, fieldName, parent })
-      }
-      resolve(/** @type {T} */(newState))
-      return /** @type {T} */(newState)
+      const { obj, parent, fieldName } = deepSetWithInfo(baseState, path, newValue)
+      
+      const newState = beforeSetState ? beforeSetState({ state: obj, parent: parent, key: fieldName }) : obj
+
+      resolve(newState)
+      return newState
     })
   })
 }
@@ -1377,7 +1379,7 @@ export function parseFilters(query, config) {
  *     sortBy: 'createdAt' 
  *   }
  * @param {{ fieldsFlattened: object, name: string }} model - The Monastery model
- * @param {number} [limit=10] - if limit is falsy, exclude limit and skip to fetch regardless of pagination
+ * @param {number} [limit=10] - pass 0 to exclude limit/skip, regardless of pagination
  * @param {boolean} [hasMore] - hasMore parameter on parseSortOptions has been deprecated.
  * @example returned object (using the examples above):
  *   E.g. {