nitro-web 0.0.16 → 0.0.17

package/components/partials/form/input.tsx

@@ -1,134 +1,165 @@
-// @ts-nocheck
 import { css } from 'twin.macro'
-import { InputColor, InputCurrency, util } from 'nitro-web' // InputDate
-
+import { twMerge } from 'tailwind-merge'
+import { util, FieldCurrency, FieldCurrencyProps, FieldColor, FieldColorProps, FieldDate, FieldDateProps } from 'nitro-web'
+import { Errors, type Error } from 'types'
 import {
   EnvelopeIcon,
-  // CalendarIcon,
+  CalendarIcon,
   FunnelIcon,
   MagnifyingGlassIcon,
   EyeIcon,
   EyeSlashIcon,
 } from '@heroicons/react/20/solid'
 
-interface InputProps {
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
+type FieldExtraProps = {
+  // field name or path on state (used to match errors), e.g. 'date', 'company.email'
   name: string
-  state?: any
   id?: string
-  type?: string
-  [key: string]: any
+  // state object to get the value, and check errors against
+  state?: { errors: Errors, [key: string]: unknown }
+  type?: 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
+  icon?: React.ReactNode
+  iconPos?: 'left' | 'right'
+}
+type IconWrapperProps = {
+  iconPos: string
+  icon?: React.ReactNode
+  [key: string]: unknown
 }
+// Discriminated union (https://stackoverflow.com/a/77351290/1900648)
+export type FieldProps = (
+  | ({ type?: 'text' | 'password' | 'email' | 'filter' | 'search' } & InputProps & FieldExtraProps)
+  | ({ type: 'textarea' } & TextareaProps & FieldExtraProps)
+  | ({ type: 'currency' } & FieldCurrencyProps & FieldExtraProps)
+  | ({ type: 'color' } & FieldColorProps & FieldExtraProps)
+  | ({ type: 'date' } & FieldDateProps & FieldExtraProps)
+)
+
+export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
+  // type must be kept as props.type for TS to be happy and follow the conditions below
+  let error!: Error
+  let value!: string
+  let Icon!: React.ReactNode
+  const type = props.type
+  const iconPos = ip == 'left' || (type == 'color' && !ip) ? 'left' : 'right'
 
-export function Input({ name='', state, id, type='text', ...props }: InputProps) {
-  /**
-   * Input
-   * @param {string} name - field name or path on state (used to match errors), e.g. 'date', 'company.email'
-   * @param {object} state - State object to get the value, and check errors against
-   * @param {string} [id] - not required, name used if not provided
-   * @param {('password'|'email'|'text'|'date'|'filter'|'search'|'color'|'textarea'|'currency')} [type='text']
-   */
-  let IconSvg: React.ReactNode
-  let onClick: () => void
-  let iconDir = 'right'
-  let InputEl = 'input'
+  if (!props.name) {
+    throw new Error('Input component requires a `name` prop')
+  }
+  
+  // Input type
   const [inputType, setInputType] = useState(() => { // eslint-disable-line
-    return type == 'password' ? 'password' : (type == 'textarea' ? type : 'text')
+    return type == 'password' ? 'password' : (type == 'textarea' ? 'textarea' : 'text')
   })
-
-  if (!name) throw new Error('Input component requires a `name` prop')
   
-  // Input is always controlled if state is passed in
-  if (props.value) {
-    var value = props.value
-  } else if (typeof state == 'object') {
-    value = util.deepFind(state, name)
-    if (typeof value == 'undefined') value = ''
-  }
+  // Value: Input is always controlled if state is passed in
+  if (props.value) value = props.value as string
+  else if (typeof state == 'object') value = util.deepFind(state, props.name) ?? ''
 
-  // Find any errors that match this input path
+  // Errors: find any that match this input path
   for (const item of (state?.errors || [])) {
-    if (util.isRegex(name) && (item.title||'').match(name)) var error = item
-    else if (item.title == name) error = item
+    if (util.isRegex(props.name) && (item.title || '').match(props.name)) error = item
+    else if (item.title == props.name) error = item
   }
 
-  // Special input types
+  // Icon
   if (type == 'password') {
-    onClick = () => setInputType(o => o == 'password' ? 'text' : 'password')
-    IconSvg = inputType == 'password' ? <EyeSlashIcon /> : <EyeIcon />
-  } else if (type == 'email') { 
-    IconSvg = <EnvelopeIcon />
-  // } else if (type == 'date') { 
-  //   IconSvg = <CalendarIcon />
-  //   InputEl = InputDate
-  } else if (type == 'filter') { 
-    IconSvg = <FunnelIcon />
-  } else if (type == 'search') { 
-    IconSvg = <MagnifyingGlassIcon />
+    Icon = <IconWrapper 
+      iconPos={iconPos} 
+      icon={icon || inputType == 'password' ? <EyeSlashIcon /> : <EyeIcon />} 
+      onClick={() => setInputType(o => o == 'password' ? 'text' : 'password')}
+      className="pointer-events-auto"
+    />
+  } else if (type == 'email') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <EnvelopeIcon />} />
+  } else if (type == 'filter') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <FunnelIcon />} className="size-3"  />
+  } else if (type == 'search') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <MagnifyingGlassIcon />} className="size-4" />
   } else if (type == 'color') {
-    iconDir = 'left'
-    IconSvg = <ColorIcon hex={value}/>
-    InputEl = InputColor
-  } else if (type == 'textarea') {
-    InputEl = 'textarea'
-  } else if (type == 'currency') {
-    if (!props.config) throw new Error('Input: `config` is required when type=currency')
-    InputEl = InputCurrency
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <ColorSvg hex={value}/>} className="size-[17px]" />
+  } else if (type == 'date') {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <CalendarIcon />} className="size-4" />
+  } else {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon} />
   }
 
-  // Icon
-  const iconEl = <IconEl iconDir={iconDir} IconSvg={IconSvg} onClick={onClick} type={type} />
+  // Classname
+  const inputClassName = getInputClasses({ error, Icon, iconPos, type })
+  const commonProps = { id: props.name || props.id, value: value, className: inputClassName }
 
-  // Create base props object
-  const inputProps = {
-    ...props,
-    // autoComplete: props.autoComplete || 'off',
-    id: id || name,
-    type: inputType,
-    value: value,
-    iconEl: iconEl,
-    className: 
-      'col-start-1 row-start-1 block w-full rounded-md bg-white py-2 text-sm outline outline-1 -outline-offset-1 ' +
-      'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 sm:text-sm/6 ' +
-      (iconDir == 'right' && IconSvg ? 'sm:pr-9 pl-3 pr-10 ' : IconSvg ? 'sm:pl-9 pl-10 pr-3 ' : 'px-3 ') +
-      (error ? 'text-red-900 outline-danger focus:outline-danger ' : 'text-input outline-input-border focus:outline-primary ') + 
-      (iconDir == 'right' ? 'justify-self-start ' : 'justify-self-end '),
+  // Type has to be referenced as props.type for TS to be happy
+  if (!type || type == 'text' || type == 'password' || type == 'email' || type == 'filter' || type == 'search') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        {Icon}<input {...props} {...commonProps} type={inputType} />
+      </FieldContainer>
+    )
+  } else if (type == 'textarea') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        {Icon}<textarea {...props} {...commonProps} />
+      </FieldContainer>
+    )
+  } else if (type == 'currency') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        {Icon}<FieldCurrency {...props} {...commonProps} />
+      </FieldContainer>
+    )
+  } else if (type == 'color') {
+    return (
+      <FieldContainer error={error} className={props.className}>
+        <FieldColor {...props} {...commonProps} Icon={Icon} />
+      </FieldContainer>
+    )
+  } else if (type == 'date') { 
+    return (
+      <FieldContainer error={error} className={props.className}>
+        <FieldDate {...props} {...commonProps} Icon={Icon} />
+      </FieldContainer>
+    )
   }
+}
 
-  // Only add iconEl prop for custom components
-  if (!['color', 'date'].includes(type)) delete inputProps.iconEl
-
+function FieldContainer({ children, className, error }: { children: React.ReactNode, className?: string, error?: Error }) {
   return (
-    // https://tailwindui.com/components/application-ui/forms/input-groups#component-474bd025b849b44eb3c46df09a496b7a
-    <div css={style} className={`mt-input-before mb-input-after grid grid-cols-1 ${props?.className || ''}`}>
-      { !inputProps.iconEl && iconEl }
-      <InputEl {...inputProps} />
+    <div css={style} className={`mt-input-before mb-input-after grid grid-cols-1 ${className || ''}`}>
+      {children}
       {error && <div class="mt-1.5 text-xs text-danger">{error.detail}</div>}
     </div>
   )
 }
 
-type IconElProps = {
-  iconDir: string
-  IconSvg: React.ReactNode
-  onClick: () => void
-  type: string
+function getInputClasses({ error, Icon, iconPos, type }: { error: Error, Icon?: React.ReactNode, iconPos: string, type?: string }) {
+  const paddingLeft = type == 'color' ? 'sm:pl-9 pl-9' : 'sm:pl-8 pl-8'
+  const paddingRight = type == 'color' ? 'sm:pr-9 pr-9' : 'sm:pr-8 pr-8'
+  return (
+    'col-start-1 row-start-1 block w-full rounded-md bg-white py-2 text-sm leading-[1.65] outline outline-1 -outline-offset-1 ' +
+    'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 ' +
+    (iconPos == 'right' && Icon ? `${paddingRight} pl-3 ` : (Icon ? `${paddingLeft} pr-3 ` : 'px-3 ')) +
+    (error ? 'text-red-900 outline-danger focus:outline-danger ' : 'text-input outline-input-border focus:outline-primary ') + 
+    (iconPos == 'right' ? 'justify-self-start ' : 'justify-self-end ')
+  )
 }
 
-function IconEl({ iconDir, IconSvg, onClick, type }: IconElProps) {
-  const iconSize = type == 'color' ? 'size-[18px]' : 'size-4'
+function IconWrapper({ icon, iconPos, ...props }: IconWrapperProps) {
   return (
-    !!IconSvg && 
-    <div 
-      className={`col-start-1 row-start-1 ${iconSize} self-center text-[#c6c8ce] select-none relative z-[1] ` +
-        `pointer-events-${type == 'password' ? 'auto' : 'none'} ` +
-        (iconDir == 'right' ? 'justify-self-end mr-3' : 'justify-self-start ml-3')
-      }
-      onClick={onClick}
-    >{IconSvg}</div>
+    !!icon && 
+    <div
+      {...props}
+      className={twMerge(
+        'relative size-[14px] col-start-1 row-start-1 self-center text-[#c6c8ce] select-none z-[1] ' +
+        (iconPos == 'right' ? 'justify-self-end mr-3 ' : 'justify-self-start ml-3 ') + 
+        props.className || ''
+      )}
+    >{icon}</div>
   )
 }
 
-function ColorIcon({ hex }: { hex: string }) {
+function ColorSvg({ hex }: { hex?: string }) {
   return (
     <span class="block size-full rounded-md" style={{ backgroundColor: hex ? hex : '#f1f1f1' }}></span>
   )

package/components/partials/form/select.tsx

@@ -2,7 +2,7 @@ import { css } from 'twin.macro'
 import { twMerge } from 'tailwind-merge'
 import ReactSelect, { components, ControlProps, createFilter, OptionProps, SingleValueProps } from 'react-select'
 import { ClearIndicatorProps, DropdownIndicatorProps, MultiValueRemoveProps } from 'react-select'
-import { ChevronDownIcon, CheckCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import { ChevronUpDownIcon, CheckCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import { util } from 'nitro-web'
 import { Errors } from 'types'
 
@@ -203,7 +203,7 @@ function Option(props: OptionProps) {
 const DropdownIndicator = (props: DropdownIndicatorProps) => {
   return (
     <components.DropdownIndicator {...props}>
-      <ChevronDownIcon className="size-6 -my-0.5 -mx-1" />
+      <ChevronUpDownIcon className="text-gray-400 size-[17px] -my-0.5 -mx-0.5" />
     </components.DropdownIndicator>
   )
 }
@@ -237,7 +237,7 @@ const selectStyles = {
   // Based off https://www.jussivirtanen.fi/writing/styling-react-select-with-tailwind
   // Input container
   control: {
-    base: 'rounded-md bg-white hover:cursor-pointer text-sm sm:text-sm/6 outline outline-1 -outline-offset-1 outline-input-border',
+    base: 'rounded-md bg-white hover:cursor-pointer text-sm leading-[1.65] outline outline-1 -outline-offset-1 outline-input-border',
     focus: 'outline-2 -outline-offset-2 outline-primary',
     error: 'outline-danger',
   },
@@ -249,7 +249,7 @@ const selectStyles = {
   },
   multiValue: 'bg-primary text-white rounded items-center pl-2 pr-1.5 gap-1.5',
   multiValueLabel: '',
-  multiValueRemove: 'border border-primary-dark bg-white rounded-md text-dark hover:bg-red-50',
+  multiValueRemove: 'border border-black/10 bg-clip-content bg-white rounded-md text-dark hover:bg-red-50',
   placeholder: 'text-input-placeholder',
   singleValue: {
     base: 'text-input',

package/components/partials/styleguide.tsx

@@ -1,21 +1,23 @@
-import { Drop, Dropdown, Input, Select, Button, Checkbox, GithubLink, isDemo } from 'nitro-web'
+import { Drop, Dropdown, Field, Select, Button, Checkbox, GithubLink, isDemo, Modal, Calendar } from 'nitro-web'
 import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
 import { CheckIcon } from '@heroicons/react/20/solid'
 import { Config } from 'types'
 
 export function Styleguide({ config }: { config: Config }) {
   const [customerSearch, setCustomerSearch] = useState('')
+  const [showModal1, setShowModal1] = useState(false)
   const [state, setState] = useState({
     address: '',
-    country: 'us',
-    currency: 'nzd', // can be commented too
     amount: 100,
     brandColor: '#F3CA5F',
-    firstName: 'Bruce',
+    country: 'us',
+    currency: 'nzd', // can be commented too
     date: Date.now(),
+    'date-range': [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 33],
+    calendar: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 8],
+    firstName: 'Bruce',
     errors: [
       { title: 'address', detail: 'Address is required' },
-      { title: 'currency', detail: 'Currency is required' },
     ],
   })
 
@@ -60,33 +62,19 @@ export function Styleguide({ config }: { config: Config }) {
       </div>
 
       <h2 class="h3">Links</h2>
-      <div class="mb-8">
+      <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">Checkboxes</h2>
-      <div class="grid grid-cols-3 gap-x-6">
-        <div>
-          <label for="input0">Label</label>
-          <Checkbox name="input0" type="checkbox" text="Checkbox" subtext="some additional text here." defaultChecked />
-        </div>
-        <div>
-          <label for="input1">Label</label>
-          <Checkbox name="input1" type="radio" text="Radio 1" subtext="some additional text here 1." id="input1-1" class="!mb-0" 
-            defaultChecked />
-          <Checkbox name="input1" type="radio" text="Radio 2" subtext="some additional text here 2." id="input1-2" class="!mt-0" />
-        </div>
-        <div>
-          <label for="input2">Label</label>
-          <Checkbox name="input2" type="toggle" text="Toggle sm" subtext="some additional text here." class="!mb-0"  defaultChecked />
-          <Checkbox name="input3" type="toggle" text="Toggle md" size="md" subtext="some additional text here." />
-        </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-8">
+      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-10">
         <div>
           <Dropdown options={options} minWidth="250px">
             <Button IconRight="v" class="gap-x-3">Dropdown</Button>
@@ -110,7 +98,7 @@ export function Styleguide({ config }: { config: Config }) {
       </div>
 
       <h2 class="h3">Buttons</h2>
-      <div class="flex flex-wrap gap-x-6 gap-y-4 mb-8">
+      <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="white">white button</Button></div>
@@ -124,8 +112,27 @@ export function Styleguide({ config }: { config: Config }) {
         <div><Button color="primary" IconRight="v" isLoading>primary isLoading</Button></div>
       </div>
 
+      <h2 class="h3">Checkboxes</h2>
+      <div class="grid grid-cols-3 gap-x-6 mb-4">
+        <div>
+          <label for="input2">Label</label>
+          <Checkbox name="input2" type="toggle" text="Toggle sm" subtext="some additional text here." class="!mb-0"  defaultChecked />
+          <Checkbox name="input3" type="toggle" text="Toggle md" size="md" subtext="some additional text here." />
+        </div>
+        <div>
+          <label for="input1">Label</label>
+          <Checkbox name="input1" type="radio" text="Radio 1" subtext="some additional text here 1." id="input1-1" class="!mb-0" 
+            defaultChecked />
+          <Checkbox name="input1" type="radio" text="Radio 2" subtext="some additional text here 2." id="input1-2" class="!mt-0" />
+        </div>
+        <div>
+          <label for="input0">Label</label>
+          <Checkbox name="input0" type="checkbox" text="Checkbox" subtext="some additional text here." defaultChecked />
+        </div>
+      </div>
+
       <h2 class="h3">Selects</h2>
-      <div class="grid grid-cols-3 lg:grid-cols-3 gap-x-6">
+      <div class="grid grid-cols-3 lg:grid-cols-3 gap-x-6 mb-4">
         <div>
           <label for="action">Default</label>
           <Select 
@@ -204,53 +211,88 @@ export function Styleguide({ config }: { config: Config }) {
       <div class="grid grid-cols-3 gap-x-6 mb-4">
         <div>
           <label for="firstName">First Name</label>
-          <Input name="firstName" state={state} onChange={onInputChange} />
+          <Field name="firstName" state={state} onChange={onInputChange} />
         </div>
         <div>
           <label for="email">Email Address</label>
-          <Input name="email" type="email" placeholder="Your email address..."/>
+          <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>
-          <Input name="password" type="password"/>
+          <Field name="password" type="password"/>
         </div>
         <div>
           <label for="search">Search</label>
-          <Input name="search" type="search" placeholder="Search..."/>
+          <Field name="search" type="search" placeholder="Search..." />
         </div>
         <div>
-          <label for="filter">Filter</label>
-          <Input name="filter" type="filter" />
+          <label for="filter">Filter by Code</label>
+          <Field name="filter" type="filter" iconPos="left"  />
         </div>
         <div>
           <label for="address">Input Error</label>
-          <Input name="address" type="address" placeholder="Address..." state={state} onChange={onInputChange} />
+          <Field name="address" placeholder="Address..." state={state} onChange={onInputChange} />
         </div>
-        {/* <div>
-          <label for="date">Date</label>
-          <Input name="date" type="date" prefix="Date:" state={state} onChange={onInputChange} />
-        </div> */}
         <div>
-          <label for="brandColor">Brand Color</label>
-          <Input name="brandColor" type="color" state={state} onChange={onInputChange} />
+          <label for="description">Description</label>
+          <Field name="description" type="textarea" rows={2} />
         </div>
         <div>
-          <label for="description">Description</label>
-          <Input name="description" type="textarea" />
+          <label for="brandColor">Brand Color</label>
+          <Field name="brandColor" type="color" state={state} iconPos="left" onChange={onInputChange} />
         </div>
         <div>
           <label for="amount">Amount ({state.amount})</label>
-          <Input name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} config={config} />
+          <Field name="amount" type="currency" state={state} currency={state.currency || 'nzd'} onChange={onInputChange} config={config} />
+        </div>
+      </div>
+
+      <h2 class="h3">Date Inputs</h2>
+      <div class="grid grid-cols-3 gap-x-6 mb-4">
+        <div>
+          <label for="date">Date</label>
+          <Field name="date" type="date" state={state} onChange={onInputChange} />
         </div>
+        <div>
+          <label for="date-range">Date range with prefix</label>
+          <Field name="date-range" type="date" mode="range" prefix="Date:" state={state} onChange={onInputChange} />
+        </div>
+      </div>
+
+      <h2 class="h3">File Inputs & Calendar</h2>
+      <div class="grid grid-cols-3 gap-x-6 mb-4">
         <div>
           <label for="avatar">Avatar</label>
           <Drop class="is-small" name="avatar" state={state} onChange={onInputChange} awsUrl={config.awsUrl} />
         </div>
+        <div>
+          <label for="calendar">Calendar</label>
+          <Calendar mode="range" value={state.calendar} numberOfMonths={1} onChange={(mode, value) => {
+            onInputChange({ target: { id: 'calendar', value: value } })
+          }} />
+        </div>
       </div>
 
+      <Modal show={showModal1} setShow={setShowModal1} class="p-9">
+        <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={onInputChange} />
+          </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>
     </div>
   )
 }

package/components/settings/settings-account.tsx

@@ -2,7 +2,7 @@
 // todo: finish tailwind conversion
 import * as util from 'nitro-web/util'
 import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
-import { Button, FormError, Input, Modal, Topbar, Tabbar } from 'nitro-web'
+import { Button, FormError, Field, Modal, Topbar, Tabbar } from 'nitro-web'
 
 export function SettingsAccount() {
   const isLoading = useState('')
@@ -48,21 +48,21 @@ export function SettingsAccount() {
           <div class="cols cols-6 cols-gap-3">
             <div class="col">
               <label for="firstName">First Name(s)</label>
-              <Input name="firstName" placeholder="E.g. Bruce" state={state} onChange={onChange(setState)} />
+              <Field name="firstName" placeholder="E.g. Bruce" state={state} onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <label for="lastName">Last Name</label>
-              <Input name="lastName" placeholder="E.g. Wayne" state={state} onChange={onChange(setState)} />
+              <Field name="lastName" placeholder="E.g. Wayne" state={state} onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <label for="email">Email Address</label>
-              <Input name="email" type="email" placeholder="Your email address..." state={state} 
-                onChange={onChange(setState)} />
+              <Field name="email" type="email" placeholder="Your email address..." state={state} 
+                onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <Link to="/reset" class="label-right link2 underline2 is-active">Reset Password?</Link>
               <label for="password">Password</label>
-              <Input name="password" placeholder="•••••••••••" disabled={true} />
+              <Field name="password" placeholder="•••••••••••" disabled={true} />
             </div>
           </div>
           

package/components/settings/settings-business.tsx

@@ -1,10 +1,10 @@
-// @ts-nocheck
+//@ts-nocheck
 // todo: finish tailwind conversio
 
 ////// look at the select type error below
 import * as util from 'nitro-web/util'
 import SvgTick from 'nitro-web/client/imgs/icons/tick.svg'
-import { Button, Input, Select, Topbar, Tabbar } from 'nitro-web'
+import { Button, Field, Select, Topbar, Tabbar } from 'nitro-web'
 
 export function SettingsBusiness({ config }) {
   const isLoading = useState('')
@@ -65,7 +65,7 @@ export function SettingsBusiness({ config }) {
                 type="country" 
                 state={state} 
                 options={useMemo(() => util.getCountryOptions(config.countries), [])} 
-                onChange={onChange(setState)}
+                onChange={onChange.bind(setState)}
               />
             </div>
             <div class="col">
@@ -75,37 +75,37 @@ export function SettingsBusiness({ config }) {
                 type="country" 
                 state={state} 
                 options={useMemo(() => util.getCurrencyOptions(config.currencies), [])}
-                onChange={onChange(setState)}
+                onChange={onChange.bind(setState)}
               />
             </div>
             <div class="col">
               <label for="business.name">Trading Name</label>
-              <Input name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange(setState)} />
+              <Field name="business.name" placeholder="E.g. Wayne Enterprises" state={state} onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <Link to="#" class="label-right link2 underline2 is-active">Custom Address</Link>
               <label for="business.address">Address (Start Typing...)</label>
-              <Input name="business.address.full" placeholder="" state={state} onChange={onChange(setState)} />
+              <Field name="business.address.full" placeholder="" state={state} onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <label for="business.website">Website</label>
-              <Input name="business.website" placeholder="https://" state={state} onChange={onChange(setState)} />
+              <Field name="business.website" placeholder="https://" state={state} onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <label for="business.phone">Mobile Number</label>
-              <Input name="business.phone" placeholder="" state={state} onChange={onChange(setState)} />
+              <Field name="business.phone" placeholder="" state={state} onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <Link to="#" class="label-right link2 underline2 is-active">What&apos;s this for?</Link>
               <label for="tax.number">GST Number</label>
-              <Input class="mb-0" name="tax.number" placeholder="Appears on your documents" state={state} 
-                onChange={onChange(setState)} />
+              <Field class="mb-0" name="tax.number" placeholder="Appears on your documents" state={state} 
+                onChange={onChange.bind(setState)} />
             </div>
             <div class="col">
               <Link to="#" class="label-right link2 underline2 is-active">What&apos;s this for?</Link>
               <label for="business.number">NZBN</label>
-              <Input class="mb-0" name="business.number" placeholder="Appears on your documents" state={state} 
-                onChange={onChange(setState)} />
+              <Field class="mb-0" name="business.number" type="text" rows="23" placeholder="Appears on your documents" state={state} 
+                onChange={onChange.bind(setState)} />
             </div>
           </div>
         </form>