nitro-web 0.0.138 → 0.0.140

package/components/partials/form/field.tsx

@@ -157,7 +157,10 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProp
 
 function FieldContainer({ children, className, error }: { children: React.ReactNode, className?: string, error?: Error }) {
   return (
-    <div css={style} className={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after grid grid-cols-1 nitro-field ${className || ''}`)}>
+    <div
+      css={style}
+      className={twMerge('(mt-2.5 mb-6 mt-input-before mb-input-after) grid grid-cols-1 nitro-field', className || '')}
+    >
       {children}
       {error && <div class="mt-1.5 text-xs text-danger-foreground nitro-error">{error.detail}</div>}
     </div>
@@ -246,4 +249,4 @@ const style = css`
   .inputt {
     padding-left: calc(var(--input-x) * 2);
   } */
-`
+`

package/components/partials/form/select.tsx

@@ -20,14 +20,27 @@ type GetSelectStyle = {
   hasError?: boolean
   usePrefixes?: boolean
 }
-export type SelectOption = { 
-  value: unknown, 
-  label: string | React.ReactNode, 
-  fixed?: boolean, 
-  data?: { [key: string]: unknown } 
+export type SelectOption<TValue, TData = unknown> = {
+  value: TValue
+  label: string | React.ReactNode
+  fixed?: boolean
+  data?: TData
 }
+
+// Example of what the generic types need to handle:
+  // title: 'Employee Name', 
+  // name: 'employee', 
+  // type: 'select', 
+  // value: state.employee?._id,
+  // options: userOptions, 
+  // onChange: (e) => handleSelectChange(e, setState, (value): TimesheetState['employee'] => {
+  //   const employeeValue = value as Id | undefined
+  //   const employee = userOptions?.find(o => o._id === employeeValue)
+  //   return employee
+  // }),
+
 /** Select (all other props are passed to react-select) **/
-export type SelectProps = {
+export type SelectProps<TValue = unknown, TOption extends SelectOption<TValue, TData> = SelectOption<TValue, TData>> = {
   /** field name or path on state (used to match errors), e.g. 'date', 'company.email' **/
   name: string
   /** inputId, the name is used if not provided **/
@@ -39,7 +52,13 @@ export type SelectProps = {
   /** The prefix to add to the input **/
   prefix?: string
   /** The onChange handler **/
-  onChange?: (event: { target: { name: string, value: unknown } }) => void
+ ////////
+  onChange?: (
+    event: { target: { name: string; value: TValue | TValue[] } },
+    option: TOption | TOption[] | null
+  ) => void
+  
+  onChange?: (event: { target: { name: string, value: unknown } }) => void // todo-ricky: add second parameter to return the selected option generic?
   /** The options to display in the dropdown, data is used to pass additional data to the option **/
   options: SelectOption[]
   /** The state object to get the value and check errors from **/

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,
@@ -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(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>
-
-      <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(e, setFilterState)
-            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(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." />
+          <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(e, setState)}
-          />
-        </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(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)}
-          />
+          <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(e, setState)} />
-        </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(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>
+      )}
 
-      <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(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) }
-            }} 
-          />
+          <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(e, setState)} 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(e, setState)}  />
+          <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(e, setState)} 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({ target: { name: 'calendar', value: value } }, setState)
-            }} 
+          <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"
+            />
+          </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(e, setState)} 
-          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.138",
+  "version": "0.0.140",
   "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

@@ -787,13 +787,18 @@ export function toArray<T>(variable: T | undefined): (T extends any[] ? T : T[])
  * @returns {string}
  */
 export function trim(string: string): string;
+/**
+ * Merge class conflicts together, but protect groups of classes from being merged together in the same argument. E.g. `(mb-1 mb-2) mx-1`
+ * @param {string[]} args
+ * @returns {string}
+ */
+export function twMerge(...args: string[]): string;
 /**
  * Capitalize the first letter of a string
  * @param {string} string
  * @returns {string}
  */
 export function ucFirst(string: string): string;
-export const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
 /**
  * Returns a list of response errors
  */

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":"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"}

package/util.js

@@ -2,7 +2,7 @@ import _axios from 'axios'
 import axiosRetry from 'axios-retry'
 import dateformat from 'dateformat'
 import { loadStripe } from '@stripe/stripe-js/pure.js' // pure removes ping
-import { twMerge as _twMerge } from 'tailwind-merge'
+import { twMerge as _twMerge, twJoin, createTailwindMerge, getDefaultConfig } from 'tailwind-merge'
 
 /** @typedef {import('react').Dispatch<import('react').SetStateAction<any>>} SetState */
 
@@ -1817,10 +1817,8 @@ export function trim (string) {
   return string.trim().replace(/\n\s+\n/g, '\n\n')
 }
 
-import { createTailwindMerge, getDefaultConfig } from 'tailwind-merge'
-
 // Create a custom twMerge instance
-export const twMerge = createTailwindMerge(() => {
+const customTailwindMerge = createTailwindMerge(() => {
   const config = getDefaultConfig()
 
   /**
@@ -1875,18 +1873,84 @@ export const twMerge = createTailwindMerge(() => {
       'font-size': [...(config.classGroups['font-size'] || []), 'text-button-base', 'text-input-base'],
     },
   }
-  // console.dir(
-  //   newSpacingSizes(['input-x', 'input-y', 'input-before', 'input-after']),
-  //   { depth: null }
-  // )
-  // console.log(customTwMerge('mb-1 mb-2 mb-input-x')) // mb-input-x
-  // console.log(customTwMerge('mb-1 mb-2 my-input-y')) // my-input-y
-  // console.log(customTwMerge('mb-1 my-input-y mb-2')) // my-input-y mb-2 
-  // console.log(customTwMerge('mb-1 my-input-y mb-2 my-input-x')) // my-input-x
-  // console.log(customTwMerge('mx-1 my-input-y mb-2 my-input-x')) // mx-1 my-input-x
-  // console.log(customTwMerge('text-xs text-base text-input text-button-base'))
 })
 
+/**
+ * Merge class conflicts together, but protect groups of classes from being merged together in the same argument. E.g. `(mb-1 mb-2) mx-1`
+ * @param {string[]} args
+ * @returns {string}
+ */
+export function twMerge(...args) {
+  const raw = twJoin(args)
+  if (!raw.includes('(')) return customTailwindMerge(raw)
+
+  // 1) Tokenize: either "(...)" group chunks or normal non-space tokens.
+  /** @type {{ cls: string, groupId: number }[]} */
+  const tokens = []
+  let groupId = 0
+
+  const re = /\(([^()]*)\)|(\S+)/g
+  for (let m; (m = re.exec(raw)); ) {
+    const groupText = m[1]
+    const single = m[2]
+
+    if (groupText != null) {
+      const id = ++groupId
+      for (const cls of groupText.trim().split(/\s+/).filter(Boolean)) {
+        tokens.push({ cls: cls, groupId: id })
+      }
+    } else if (single) {
+      tokens.push({ cls: single, groupId: 0 })
+    }
+  }
+
+  // 3) Merge, except don't merge-away conflicts inside the same "( ... )" group.
+  /** @type {(string|null)[]} */
+  const out = []
+  /** @type {number[]} */
+  const groupIds = []
+
+  for (const t of tokens) {
+    for (let i = out.length - 1; i >= 0; i--) {
+      const prev = out[i]
+      const next = t.cls
+      if (!prev) continue
+
+      // Does next override prev, according to tailwind-merge?
+      const parts = customTailwindMerge(`${prev} ${next}`).trim().split(/\s+/).filter(Boolean)
+      const isOverride = !parts.includes(prev) && parts.includes(next)
+
+      if (isOverride) {
+        const sameProtectedGroup = t.groupId !== 0 && t.groupId === groupIds[i]
+        if (!sameProtectedGroup) out[i] = null
+      }
+    }
+
+    out.push(t.cls)
+    groupIds.push(t.groupId)
+  }
+
+  return out.filter(Boolean).join(' ')
+
+  // const testCases = [
+  //   [['mb-1 mb-2 mb-input-x'], 'mb-input-x'],
+  //   [['mb-1 mb-2 my-input-y'], 'my-input-y'],
+  //   [['mb-1 my-input-y mb-2'], 'my-input-y mb-2'],
+  //   [['mb-1 my-input-y mb-2 my-input-x'], 'my-input-x'],
+  //   [['mx-1 my-input-y mb-2 my-input-x'], 'mx-1 my-input-x'],
+  //   [['text-xs text-nonexistent text-input-base'], 'text-nonexistent text-input-base'],
+  //   [['(mb-1 mb-input-x) mx-1 mx-2', ''], 'mb-1 mb-input-x mx-2'],
+  //   [['(mb-1 mb-input-x) mx-1 mx-2', 'mb-2'], 'mx-2 mb-2'],
+  // ]
+  
+  // testCases.forEach(testCase => {
+  //   const value = twMerge(...testCase[0])
+  //   if (value !== testCase[1]) {
+  //     console.log(`Test: ${testCase[1]}, received: ${value}`)
+  //   }
+  // })
+}
+
 /**
  * Capitalize the first letter of a string
  * @param {string} string