nitro-web 0.0.50 → 0.0.51

package/client/index.ts

@@ -42,7 +42,7 @@ export { Checkbox } from '../components/partials/form/checkbox'
 export { Drop } from '../components/partials/form/drop'
 export { DropHandler } from '../components/partials/form/drop-handler'
 export { FormError } from '../components/partials/form/form-error'
-export { Field } from '../components/partials/form/field'
+export { Field, isFieldCached } from '../components/partials/form/field'
 export { FieldColor, type FieldColorProps } from '../components/partials/form/field-color'
 export { FieldCurrency, type FieldCurrencyProps } from '../components/partials/form/field-currency'
 export { FieldDate, type FieldDateProps } from '../components/partials/form/field-date'

package/components/auth/signin.tsx

@@ -7,7 +7,6 @@ export function Signin() {
   const isSignout = location.pathname == '/signout'
   const isLoading = useState(isSignout)
   const [, setStore] = useTracked()
-  
   const [state, setState] = useState({
     email: injectedConfig.env == 'development' ? (injectedConfig.placeholderEmail || '') : '',
     password: injectedConfig.env == 'development' ? '1234' : '',

package/components/partials/element/button.tsx

@@ -2,8 +2,9 @@ import { twMerge } from 'nitro-web'
 import { ChevronDown, ChevronUp } from 'lucide-react'
 
 type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  color?: 'primary'|'secondary'|'black'|'white'|'clear'
+  color?: 'primary'|'secondary'|'black'|'dark'|'white'|'clear'|'custom'
   size?: 'xs'|'sm'|'md'|'lg'
+  customColor?: string
   className?: string
   isLoading?: boolean
   IconLeft?: React.ReactNode|'v'
@@ -13,9 +14,10 @@ type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   children?: React.ReactNode|'v'
 }
 
-export function Button({ 
+export function Button({
   size='md', 
   color='primary',
+  customColor,
   className, 
   isLoading, 
   IconLeft, 
@@ -29,25 +31,27 @@ export function Button({
   const iconPosition = IconLeft ? 'left' : IconLeftEnd ? 'leftEnd' : IconRight ? 'right' : IconRightEnd ? 'rightEnd' : 'none'
   const base = 
     'relative inline-block text-center font-medium shadow-sm focus-visible:outline focus-visible:outline-2 ' +
-    'focus-visible:outline-offset-2 text-white [&>.loader]:border-white'
+    'focus-visible:outline-offset-2 text-white [&>.loader]:border-white ring-inset ring-1'
 
   // Button colors, you can use custom colors by using className instead
   const colors = {
-    primary: 'bg-primary hover:bg-primary-hover',
-    secondary: 'bg-secondary hover:bg-secondary-hover',
-    black: 'bg-black hover:bg-gray-700',
-    white: 'bg-white ring-1 ring-inset ring-gray-300 hover:bg-gray-50 text-gray-900 [&>.loader]:border-black',
-    clear: 'ring-1 ring-inset ring-gray-300 hover:bg-gray-50 text-foreground [&>.loader]:border-foreground !shadow-none',
+    'primary': 'bg-primary hover:bg-primary-hover ring-transparent !ring-button-primary-ring',
+    'secondary': 'bg-secondary hover:bg-secondary-hover ring-transparent !ring-button-secondary-ring',
+    'black': 'bg-black hover:bg-gray-700 ring-transparent !ring-button-black-ring',
+    'dark': 'bg-gray-800 !bg-button-dark hover:bg-gray-700 hover:!bg-button-dark-hover ring-transparent !ring-button-dark-ring',
+    'white': 'bg-white ring-gray-300 !ring-button-white-ring hover:bg-gray-50 text-gray-900 [&>.loader]:border-black',
+    'clear': 'ring-gray-300 !ring-button-clear-ring hover:bg-gray-50 text-foreground [&>.loader]:border-foreground !shadow-none',
   }
   
-  // Button sizes
+  // Button sizes (px is better for height consistency)
   const sizes = {
-    xs: 'px-2 py-1 px-button-x-xs py-button-y-xs text-xs rounded',
-    sm: 'px-2.5 py-1.5 px-button-x-sm py-button-y-sm text-sm text-sm-button rounded-md',
-    md: 'px-3 py-[0.58rem] px-button-x-md py-button-y-md text-sm text-sm-button rounded-md', // default
-    lg: 'px-3.5 py-2.5 px-button-x-lg py-button-y-lg text-sm text-sm-button rounded-md',
+    xs: 'px-[6px] py-[3px] px-button-x-xs py-button-y-xs text-xs rounded',
+    sm: 'px-[10px] py-[6px] px-button-x-sm py-button-y-sm text-button-size rounded-md',
+    md: 'px-[12px] py-[9px] px-button-x-md py-button-y-md text-button-size rounded-md', // default
+    lg: 'px-[18px] py-[11px] px-button-x-lg py-button-y-lg text-button-size rounded-md',
   }
-
+  
+  const appliedColor = color === 'custom' ? customColor : colors[color]
   const contentLayout = `gap-x-1.5 ${iconPosition == 'none' ? '' : 'inline-flex items-center justify-center'}`
   const loading = isLoading ? '[&>*]:opacity-0 text-opacity-0' : ''
 
@@ -58,7 +62,7 @@ export function Button({
   }
   
   return (
-    <button class={twMerge(`${base} ${colors[color]} ${sizes[size]} ${contentLayout} ${loading} nitro-button ${className||''}`)} {...props}>
+    <button class={twMerge(`${base} ${sizes[size]} ${appliedColor} ${contentLayout} ${loading} nitro-button ${className||''}`)} {...props}>
       {IconLeft && getIcon(IconLeft)}
       {IconLeftEnd && getIcon(IconLeftEnd)}
       <span class={`${iconPosition == 'leftEnd' || iconPosition == 'rightEnd' ? 'flex-1' : ''}`}>{children}</span>

package/components/partials/element/filters.tsx

@@ -169,9 +169,9 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
           {
             !!count && 
             <span 
-              class={twMerge(`inline-flex items-center justify-center rounded-full text-xs text-white bg-primary w-[19px] h-[19px] ${buttonCounterClassName || ''}`)}
+              class={twMerge(`inline-flex items-center justify-center rounded-full text-white bg-primary box-content w-[1em] h-[1em] p-[2px] ${buttonCounterClassName || ''}`)}
             >
-              {count}
+              <span class="text-xs">{count}</span>
             </span>
           }
         </span>

package/components/partials/form/drop.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { isRegex, deepFind, s3Image } from 'nitro-web/util'
+import { deepFind, s3Image, getErrorFromState } from 'nitro-web/util'
 import { DropHandler } from 'nitro-web'
 import noImage from 'nitro-web/client/imgs/no-image.svg'
 import { Errors, MonasteryImage } from 'nitro-web/types'
@@ -29,7 +29,7 @@ type Image = File | FileList | MonasteryImage | null
 export function Drop({ awsUrl, className, id, name, onChange, multiple, state, ...props }: DropProps) {
   if (!name) throw new Error('Drop component requires a `name` prop')
   let value: Image = null
-  let error: Error | unknown
+  const error = getErrorFromState(state, name)
   const inputId = id || name
   const [urls, setUrls] = useState([])
   const stateRef = useRef(state)
@@ -40,12 +40,6 @@ export function Drop({ awsUrl, className, id, name, onChange, multiple, state, .
   else if (typeof state == 'object') value = deepFind(state, name) as Image
   if (typeof value == 'undefined') value = null
 
-  // An error matches this input path
-  for (const item of (state?.errors as Errors[] || [])) {
-    if (isRegex(name) && (item.title||'').match(name)) error = item
-    else if (item.title == name) error = item
-  }
-
   useEffect(() => {
     (async () => setUrls(await getUrls(value as File | FileList | MonasteryImage | null)))()
   }, [value])

package/components/partials/form/field-currency.tsx

@@ -149,7 +149,7 @@ export function FieldCurrency({ config, currency='nzd', onChange, value, default
         defaultValue={defaultValue}
       />
       <span
-        class={`absolute top-0 bottom-0 left-3 inline-flex items-center select-none text-gray-500 text-sm text-sm-input ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
+        class={`absolute top-0 bottom-0 left-3 inline-flex items-center select-none text-gray-500 text-input-size ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
       >
         {settings.prefix || settings.suffix}
       </span>

package/components/partials/form/field-date.tsx

@@ -135,7 +135,7 @@ export function FieldDate({
         {
           prefix && 
           // Similar classNames to the input.tsx:IconWrapper()
-          <span className="z-[0] col-start-1 row-start-1 self-center select-none justify-self-start text-sm text-sm-input ml-3">
+          <span className="z-[0] col-start-1 row-start-1 self-center select-none justify-self-start text-input-size ml-3">
             {prefix}
           </span>
         }

package/components/partials/form/field.tsx

@@ -1,15 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { css } from 'twin.macro'
-import { util, FieldCurrency, FieldCurrencyProps, FieldColor, FieldColorProps, FieldDate, FieldDateProps, twMerge } from 'nitro-web'
+import { FieldCurrency, FieldCurrencyProps, FieldColor, FieldColorProps, FieldDate, FieldDateProps } from 'nitro-web'
+import { twMerge, getErrorFromState, deepFind } from 'nitro-web/util'
 import { Errors, type Error } from 'nitro-web/types'
-import {
-  EnvelopeIcon,
-  CalendarIcon,
-  FunnelIcon,
-  MagnifyingGlassIcon,
-  EyeIcon,
-  EyeSlashIcon,
-} from '@heroicons/react/20/solid'
+import { EnvelopeIcon, CalendarIcon, FunnelIcon, MagnifyingGlassIcon, EyeIcon, EyeSlashIcon } from '@heroicons/react/20/solid'
+import { memo } from 'react'
 // Maybe use fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>
@@ -24,6 +19,8 @@ type FieldExtraProps = {
   type?: 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
   icon?: React.ReactNode
   iconPos?: 'left' | 'right'
+  /** Pass dependencies to break memoization, handy for onChange/onInputChange **/
+  deps?: unknown[]
 }
 type IconWrapperProps = {
   iconPos: string
@@ -38,12 +35,21 @@ export type FieldProps = (
   | ({ type: 'color' } & FieldColorProps & FieldExtraProps)
   | ({ type: 'date' } & FieldDateProps & FieldExtraProps)
 )
+type IsFieldCachedProps = {
+  name: string
+  state?: FieldProps['state']
+  deps?: FieldProps['deps']
+}
+
+export const Field = memo(FieldBase, (prev, next) => {
+  return isFieldCached(prev, next)
+})
 
-export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
+function FieldBase({ 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 error = getErrorFromState(state, props.name)
   const type = props.type
   const iconPos = ip == 'left' || (type == 'color' && !ip) ? 'left' : 'right'
 
@@ -59,16 +65,10 @@ export function Field({ state, icon, iconPos: ip, ...props }: FieldProps) {
   // Value: Input is always controlled if state is passed in
   if (props.value) value = props.value as string
   else if (typeof state == 'object') {
-    const v = util.deepFind(state, props.name) as string | undefined
+    const v = deepFind(state, props.name) as string | undefined
     value = v ?? ''
   }
 
-  // Errors: find any that match this field path
-  for (const item of (state?.errors || [])) {
-    if (util.isRegex(props.name) && (item.title || '').match(props.name)) error = item
-    else if (item.title == props.name) error = item
-  }
-
   // Icon
   if (type == 'password') {
     Icon = <IconWrapper 
@@ -138,14 +138,14 @@ function FieldContainer({ children, className, error }: { children: React.ReactN
   )
 }
 
-function getInputClasses({ error, Icon, iconPos, type }: { error: Error, Icon?: React.ReactNode, iconPos: string, type?: string }) {
-  const pl = 'pl-3 pl-input-x'
-  const pr = 'pr-3 pr-input-x'
-  const py = 'py-[0.58rem] py-input-y'
+function getInputClasses({ error, Icon, iconPos, type }: { error?: Error, Icon?: React.ReactNode, iconPos: string, type?: string }) {
+  const pl = 'pl-[12px] pl-input-x'
+  const pr = 'pr-[12px] pr-input-x'
+  const py = 'py-[9px] py-input-y'
   const plWithIcon = type == 'color' ? 'pl-9' : 'pl-8' // was sm:pl-8 pl-8, etc
   const prWithIcon = type == 'color' ? 'pr-9' : 'pr-8'
   return (
-    `block ${py} col-start-1 row-start-1 w-full rounded-md bg-white text-sm text-sm-input outline outline-1 -outline-offset-1 ` +
+    `block ${py} col-start-1 row-start-1 w-full rounded-md bg-white text-input-size outline outline-1 -outline-offset-1 ` +
     'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 ' +
     (iconPos == 'right' && Icon ? `${pl} ${prWithIcon} ` : (Icon ? `${plWithIcon} ${pr} ` : `${pl} ${pr} `)) +
     (error 
@@ -176,6 +176,36 @@ function ColorSvg({ hex }: { hex?: string }) {
   )
 }
 
+export function isFieldCached(prev: IsFieldCachedProps, next: IsFieldCachedProps) {
+  const path = prev.name
+  const state = prev.state || {}
+  // If state/satte-error values have changed, re-render!
+  if (deepFind(state, path) !== deepFind(next.state || {}, path)) {
+    // console.log(1, 'state changed', path)
+    return false
+  }
+  if (getErrorFromState(state, path) !== getErrorFromState(next.state || {}, path)) {
+    // console.log(2, 'error changed', path)
+    return false
+  }
+  // If deps have changed, re-render!
+  if ((next.deps?.length !== prev.deps?.length) || next.deps?.some((v, i) => v !== prev.deps?.[i])) {
+    // console.log(3, 'deps changed', path)
+    return false
+  }
+  // If any other props have changed, except onChange/onInputChange, re-render!
+  // In most cases, onChange/onInputChange remain the same and reference the same function...
+  for (const k in prev) {
+    if (k === 'state' || k === 'onChange' || k === 'onInputChange') continue
+    if (prev[k as keyof typeof prev] !== next[k as keyof typeof next]) {
+      // console.log(4, 'changed', path, k)
+      return false
+    }
+  }
+  // All good, use cached version
+  return true
+}
+
 const style = css`
   input {
     appearance: textfield;

package/components/partials/form/form-error.tsx

@@ -1,7 +1,7 @@
 import { Errors } from 'nitro-web/types'
 
 type FormError = {
-  state: { errors: Errors },
+  state: { errors?: Errors },
   // display all errors except these field titles, e.g. ['name', 'address']
   fields?: Array<string>,
   className?: string,

package/components/partials/form/select.tsx

@@ -1,9 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { css } from 'twin.macro'
-import { twMerge } from 'nitro-web'
-import ReactSelect, { components, ControlProps, createFilter, OptionProps, SingleValueProps } from 'react-select'
-import { ClearIndicatorProps, DropdownIndicatorProps, MultiValueRemoveProps } from 'react-select'
+import { memo } from 'react'
+import ReactSelect, { components, ControlProps, createFilter, OptionProps, SingleValueProps, ClearIndicatorProps,
+  DropdownIndicatorProps, MultiValueRemoveProps } from 'react-select'
 import { ChevronUpDownIcon, CheckCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
-import { util } from 'nitro-web'
+import { isFieldCached } from 'nitro-web'
+import { getErrorFromState, deepFind, twMerge } from 'nitro-web/util'
 import { Errors } from 'nitro-web/types'
 
 const filterFn = createFilter()
@@ -31,31 +33,34 @@ type SelectProps = {
   /** The options to display in the dropdown **/
   options: { value: unknown, label: string | React.ReactNode, fixed?: boolean, [key: string]: unknown }[]
   /** The state object to get the value and check errors from **/
-  state?: { errors?: Errors, [key: string]: unknown }
+  state?: { errors?: Errors, [key: string]: any } // was unknown|unknown[]
   /** Select variations **/
   type?: 'country'|'customer'|''
+  /** Pass dependencies to break memoization, handy for onChange/onInputChange **/
+  deps?: unknown[]
   /** All other props are passed to react-select **/
   [key: string]: unknown
 }
 
-export function Select({ inputId, minMenuWidth, name, prefix='', onChange, options, state, type='', ...props }: SelectProps) {
-  let value: unknown
-  let hasError: { title: string, detail: string } | null = null
+export const Select = memo(SelectBase, (prev, next) => {
+  return isFieldCached(prev, next)
+})
+
+function SelectBase({ inputId, minMenuWidth, name, prefix='', onChange, options, state, type='', ...props }: SelectProps) {
+  let value: unknown|unknown[]
+  const error = getErrorFromState(state, name)
   if (!name) throw new Error('Select component requires a `name` and `options` prop')
 
+  // Get value from value or state
+  if ('value' in props) value = props.value
+  else if (typeof state == 'object') value = deepFind(state, name)
+
+  // If multi-select, filter options by value
+  if (Array.isArray(value)) value = options.filter(o => (value as unknown[]).includes(o.value))
+  else value = options.find(o => value === o.value)
+
   // Input is always controlled if state is passed in
-  if (props.value) {
-    value = props.value
-  } else if (typeof state == 'object') {
-    value = options.find(o => o.value == util.deepFind(state, name))
-    if (typeof value == 'undefined') value = ''
-  }
-  
-  // An error matches this input path
-  for (const item of (state?.errors || [])) {
-    if (util.isRegex(name) && (item.title||'').match(name)) hasError = item
-    else if (item.title == name) hasError = item
-  }
+  if (typeof state == 'object' && typeof value == 'undefined') value = ''
 
   return (
     <div css={style} class={twMerge(`mt-2.5 mb-6 mt-input-before mb-input-after nitro-select ${props.className||''}`)}>
@@ -83,20 +88,26 @@ export function Select({ inputId, minMenuWidth, name, prefix='', onChange, optio
         }}
         menuPlacement="auto"
         minMenuHeight={250}
-        onChange={!onChange ? undefined : (o) => onChange({ target: { name: name, value: (o as {value?: unknown})?.value || o }})}
+        onChange={!onChange ? undefined : (o) => {
+          // Array returned for multi-select
+          const value = Array.isArray(o) 
+            ? o.map(v => typeof v == 'object' && v !== null && 'value' in v ? v.value : v) 
+            : (typeof o == 'object' && o !== null && 'value' in o ? o.value : o)
+          return onChange({ target: { name: name, value: value }})
+        }}
         options={options}
         value={value}
         classNames={{
           // Input container
-          control: (p) => getSelectStyle({ name: 'control', hasError: !!hasError, ...p }),
+          control: (p) => getSelectStyle({ name: 'control', hasError: !!error, ...p }),
           valueContainer: () => getSelectStyle({ name: 'valueContainer' }),
           // Input container objects
-          input: () => getSelectStyle({ name: 'input', hasError: !!hasError }),
+          input: () => getSelectStyle({ name: 'input', hasError: !!error }),
           multiValue: () => getSelectStyle({ name: 'multiValue' }),
           multiValueLabel: () => '',
           multiValueRemove: () => getSelectStyle({ name: 'multiValueRemove' }),
           placeholder: () => getSelectStyle({ name: 'placeholder' }),
-          singleValue: () => getSelectStyle({ name: 'singleValue', hasError: !!hasError }),
+          singleValue: () => getSelectStyle({ name: 'singleValue', hasError: !!error }),
           // Indicators
           clearIndicator: () => getSelectStyle({ name: 'clearIndicator' }),
           dropdownIndicator: () => getSelectStyle({ name: 'dropdownIndicator' }),
@@ -140,7 +151,7 @@ export function Select({ inputId, minMenuWidth, name, prefix='', onChange, optio
         // isDisabled={true}
         // maxMenuHeight={200}
       />
-      {hasError && <div class="mt-1.5 text-xs text-danger">{hasError.detail}</div>}
+      {error && <div class="mt-1.5 text-xs text-danger">{error.detail}</div>}
     </div>
   )
 }
@@ -211,7 +222,7 @@ const DropdownIndicator = (props: DropdownIndicatorProps) => {
 const ClearIndicator = (props: ClearIndicatorProps) => {
   return (
     <components.ClearIndicator {...props}>
-      <XMarkIcon className="size-4 my-0.5" />
+      <XMarkIcon className="size-4" />
     </components.ClearIndicator>
   )
 }
@@ -219,7 +230,7 @@ const ClearIndicator = (props: ClearIndicatorProps) => {
 const MultiValueRemove = (props: MultiValueRemoveProps) => {
   return (
     <components.MultiValueRemove {...props}>
-      <XMarkIcon className="size-4 p-[1px]" />
+      <XMarkIcon className="size-[1em] p-[1px]" />
     </components.MultiValueRemove>
   )
 }
@@ -237,18 +248,19 @@ 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 text-sm-input outline outline-1 -outline-offset-1 outline-input-border',
+    base: 'rounded-md bg-white hover:cursor-pointer text-input-size outline outline-1 -outline-offset-1 '
+      + '!min-h-0 outline-input-border',
     focus: 'outline-2 -outline-offset-2 outline-input-border-focus',
     error: 'outline-danger',
   },
-  valueContainer: 'py-[0.58rem] px-3 py-input-y px-input-x gap-1',
+  valueContainer: 'py-[9px] px-[12px] py-input-y px-input-x gap-1',
   // Input container objects
   input: {
     base: 'text-input',
     error: 'text-red-900',
   },
   multiValue: 'bg-primary text-white rounded items-center pl-2 pr-1.5 gap-1.5',
-  multiValueLabel: '',
+  multiValueLabel: 'text-xs',
   multiValueRemove: 'border border-black/10 bg-clip-content bg-white rounded-md text-foreground hover:bg-red-50',
   placeholder: 'text-input-placeholder',
   singleValue: {
@@ -261,8 +273,8 @@ const selectStyles = {
   indicatorsContainer: 'p-1 px-2 gap-1',
   indicatorSeparator: 'py-0.5 before:content-[""] before:block before:bg-gray-100 before:w-px before:h-full',
   // Dropdown menu
-  menu: 'mt-1.5 border border-dropdown-ul-border bg-white rounded-md text-sm text-sm-input overflow-hidden shadow-dropdown-ul',
-  groupHeading: 'ml-3 mt-2 mb-1 text-gray-500 text-sm text-sm-input',
+  menu: 'mt-1.5 border border-dropdown-ul-border bg-white rounded-md text-input-size overflow-hidden shadow-dropdown-ul',
+  groupHeading: 'ml-3 mt-2 mb-1 text-gray-500 text-input-size',
   noOptionsMessage: 'm-1 text-gray-500 p-2 bg-gray-50 border border-dashed border-gray-200 rounded-sm',
   option: {
     base: 'relative px-3 py-2 !flex items-center gap-2 cursor-default',

package/components/partials/styleguide.tsx

@@ -1,18 +1,26 @@
 import { 
-  Drop, Dropdown, Field, Select, Button, Checkbox, GithubLink, Modal, Calendar, injectedConfig, 
-  Filters, FiltersHandleType,
-  FilterType,
+  Drop, Dropdown, Field, Select, Button as ButtonNitro, Checkbox, GithubLink, Modal, Calendar, injectedConfig, 
+  Filters, FiltersHandleType, FilterType,
 } from 'nitro-web'
 import { getCountryOptions, getCurrencyOptions, ucFirst } from 'nitro-web/util'
 import { Check } from 'lucide-react'
 
-export function Styleguide({ className }: { className?: string }) {
+type StyleguideProps = {
+  className?: string
+  elements?: {
+    Button?: typeof ButtonNitro
+  }
+  children?: React.ReactNode
+}
+
+export function Styleguide({ className, elements, children }: StyleguideProps) {
   const [customerSearch, setCustomerSearch] = useState('')
   const [showModal1, setShowModal1] = useState(false)
   const [state, setState] = useState({
     address: '',
     amount: 100,
     brandColor: '#F3CA5F',
+    colorsMulti: ['blue', 'green'],
     country: 'nz',
     currency: 'nzd', // can be commented too
     date: Date.now(),
@@ -26,7 +34,7 @@ export function Styleguide({ className }: { className?: string }) {
   })
   const [filterState, setFilterState] = useState({})
   const filtersRef = useRef<FiltersHandleType>(null)
-  const filters: FilterType[] = [
+  const filters: FilterType[] = useMemo(() => [
     { 
       name: 'dateRange',
       type: 'date',
@@ -46,16 +54,9 @@ export function Styleguide({ className }: { className?: string }) {
         { label: 'Rejected', value: 'rejected' },
       ],
     },
-  ]
+  ], [])
 
-  // Example of updating state
-  // useEffect(() => {
-  //   setTimeout(() => {
-  //     setState({ ...state, amount: 123456, currency: 'usd', brandColor: '#8656ED' })
-  //   }, 2000)
-  // }, [])
-
-  const options = [
+  const options = useMemo(() => [
     { label: 'Open customer preview' },
     { label: 'Add a payment', isSelected: true },
     { label: 'Email invoice' },
@@ -63,7 +64,9 @@ export function Styleguide({ className }: { className?: string }) {
     { label: 'Edit' },
     { label: 'Copy' },
     { label: 'Delete' },
-  ]
+  ], [])
+
+  const Button = elements?.Button || ButtonNitro
 
   function onCustomerInputChange (e: { target: { name: string, value: unknown } }) {
     if (e.target.name == 'customer' && e.target.value == '0') {
@@ -78,6 +81,13 @@ export function Styleguide({ className }: { className?: string }) {
     setCustomerSearch(search || '')
   }
 
+  // Example of updating state
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     setState({ ...state, amount: 123456, currency: 'usd', brandColor: '#8656ED' })
+  //   }, 2000)
+  // }, [])
+
   return (
     <div class={`text-left max-w-[1100px] ${className}`}>
       <GithubLink filename={__filename} />
@@ -155,7 +165,10 @@ export function Styleguide({ className }: { className?: string }) {
       <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>
@@ -197,22 +210,31 @@ export function Styleguide({ className }: { className?: string }) {
             // menuIsOpen={true}
             name="action"
             isSearchable={false}
-            options={[
+            options={useMemo(() => [
               { value: 'edit', label: 'Edit' },
               { value: 'delete', label: 'Delete' },
-            ]}
+            ], [])}
           />
         </div>
         <div>
-          <label for="multi">Mutli Select</label>
+          <label for="colorsMulti">Mutli Select</label>
           <Select 
-            name="multi"
+            name="colorsMulti"
             isMulti={true}
-            options={[
+            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>
         <div>
@@ -236,7 +258,7 @@ export function Styleguide({ className }: { className?: string }) {
             state={state}
             onChange={onCustomerInputChange}
             onInputChange={onCustomerSearch}
-            options={[ 
+            options={useMemo(() => [ 
               { 
                 className: 'bb', 
                 fixed: true,
@@ -251,7 +273,7 @@ export function Styleguide({ className }: { className?: string }) {
               { value: '1', label: 'Iron Man Industries' },
               { value: '2', label: 'Captain America' },
               { value: '3', label: 'Thor Limited' },
-            ]} 
+            ], [customerSearch])}
           />
         </div>
         <div>
@@ -325,22 +347,6 @@ export function Styleguide({ className }: { className?: string }) {
         </div>
       </div>
 
-      <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(setState, e)} awsUrl={injectedConfig.awsUrl} />
-        </div>
-        <div>
-          <label for="calendar">Calendar</label>
-          <Calendar mode="range" value={state.calendar} numberOfMonths={1} 
-            onChange={(mode, value) => {
-              onChange(setState, { target: { name: '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>
@@ -358,6 +364,24 @@ export function Styleguide({ className }: { className?: string }) {
           <Button color="primary" onClick={() => setShowModal1(false)}>Save</Button>
         </div>
       </Modal>
+
+      <h2 class="h3">File Inputs & Calendar</h2>
+      <div class="grid grid-cols-3 gap-x-6 mb-4 last:mb-0">
+        <div>
+          <label for="avatar">Avatar</label>
+          <Drop class="is-small" name="avatar" state={state} onChange={(e) => onChange(setState, e)} awsUrl={injectedConfig.awsUrl} />
+        </div>
+        <div>
+          <label for="calendar">Calendar</label>
+          <Calendar mode="range" value={state.calendar} numberOfMonths={1} 
+            onChange={(mode, value) => {
+              onChange(setState, { target: { name: 'calendar', value: value } })
+            }} 
+          />
+        </div>
+      </div>
+
+      {children}
     </div>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.50",
+  "version": "0.0.51",
   "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

@@ -257,6 +257,21 @@ export function getCurrencyOptions(currencies: {
     value: string;
     label: string;
 }[];
+/**
+ * Returns an error from a state object matching the path
+ * @param {{ errors?: { title: string, detail: string }[] }|undefined} state
+ * @param {string} path
+ * @returns {{ title: string, detail: string }|undefined}
+ */
+export function getErrorFromState(state: {
+    errors?: {
+        title: string;
+        detail: string;
+    }[];
+} | undefined, path: string): {
+    title: string;
+    detail: string;
+} | undefined;
 /**
  * Get the width of a prefix
  * @param {string} prefix

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":"AAkBA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BC;AAED;;;GAGG;AACH,yBAFa,OAAO,OAAO,EAAE,WAAW,CAevC;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,2BAVW,MAAM,GAAC,IAAI,WACX,MAAM,aACN,MAAM,GACJ,MAAM,CAsBlB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,yBAlBuC,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,CAuKH;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,yBANa,CAAC,OACH,CAAC,QACD,MAAM,SACN,OAAO,WAAS,GACd,CAAC,CA8Bb;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,YAChB,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,GACJ;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;;;;;;;;;;;GAWG;AACH,wCAHW,aAAa,GACX,UAAU,EAAE,CAiCxB;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;;;;;;;;;;;;;GAaG;AACH,yBAVa,CAAC,YACH,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,oBACvC;IAAC,MAAM,EAAE;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAC,CAAA;CAAC,GAAC,CAAC,MAAM,EAAE,WAAS,OAAO,CAAC,8BAEjE,OAAO,CAAC,CAAC,CAAC,CA2DtB;AAED;;;;;;GAMG;AACH,0BALW,MAAM,YACN,MAAM,eACN,MAAM,GACJ,MAAM,CAUlB;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;;;;;;;GAOG;AACH,0CALW,MAAM,iBACN,OAAO,GACL;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAC,IAAI,CAAA;CAAC,CA+BxC;AAED;;;;GAIG;AACH,yCAHW,MAAM,GACJ,MAAM,EAAE,CAOpB;AAED;;;;GAIG;AACH,kCAHW;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAC,GACtB,MAAM,CAclB;AAED;;;;;;;GAOG;AACH,+BANW,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,GACjC,OAAO,CAAC,GAAG,CAAC,CAqDxB;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;;;;;;;GAOG;AACH,wCANW,MAAM,eACN,MAAM,YACN,MAAM,GACJ,MAAM,CA6ClB;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;;;;;;;;;;;GAWG;AACH,+BAVW,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,SACvB,MAAM,YACN;IACL,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACrB,YAoBH;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;AAED;;;;GAIG;AACH,iCAHe,MAAM,EAAA,GACR,MAAM,CA4BlB;AAED;;;;GAIG;AACH,gCAHW,MAAM,GACJ,MAAM,CAKlB;;;;yBAl2BY;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;;;;4BAE7F,KAAK,GAAC,UAAU,EAAE,GAAC,UAAU,GAAC,eAAe,GAAC,MAAM,GAAC,GAAG;;;;oBAqNxD,CAAC,MAAM,EAAE,MAAM,CAAC;;;;kBAChB;IAAC,UAAU,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAA;CAAC;;;;oBA4ZpC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAC"}

package/types.ts

@@ -31,7 +31,7 @@ export type User = {
 }
 
 export type Error = { title: string, detail: string }
-export type Errors = Array<Error> | null
+export type Errors = Error[]
 
 export type MonasteryImage = {
   url: string

package/util.js

@@ -681,6 +681,20 @@ export function getCurrencyOptions (currencies) {
   return output
 }
 
+/**
+ * Returns an error from a state object matching the path
+ * @param {{ errors?: { title: string, detail: string }[] }|undefined} state
+ * @param {string} path
+ * @returns {{ title: string, detail: string }|undefined}
+ */
+export function getErrorFromState (state, path) {
+  if (!state || !state.errors) return undefined
+  for (const item of state.errors) {
+    if (isRegex(path) && (item.title || '').match(path)) return item
+    else if (item.title == path) return item
+  }
+}
+
 /**
  * Get the width of a prefix
  * @param {string} prefix
@@ -1561,7 +1575,20 @@ export function trim (string) {
  */
 export function twMerge(...args) {
   const ignoredClasses = /** @type {string[]} */([])
-  const ignoreClasses = ['text-sm-button', 'text-sm-input']
+  const ignoreClasses = [
+    'text-button-size', 
+    'text-input-size', 
+    
+    'ring-button-primary-ring', 
+    'ring-button-secondary-ring',
+    'ring-button-black-ring', 
+    'ring-button-dark-ring',
+    'ring-button-white-ring', 
+    'ring-button-clear-ring',
+
+    'bg-button-dark',
+    'bg-button-dark-hover',
+  ]
   const classes = args.filter(Boolean).join(' ').split(' ')
 
   const filteredClasses = classes.filter(c => {