npm - nitro-web - Versions diffs - 0.0.72 → 0.0.74 - Mend

nitro-web 0.0.72 → 0.0.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/client/app.tsx +6 -12
package/components/partials/element/button.tsx +12 -9
package/components/partials/element/calendar.tsx +3 -1
package/components/partials/element/dropdown.tsx +56 -9
package/components/partials/element/filters.tsx +3 -3
package/components/partials/element/github-link.tsx +1 -1
package/components/partials/element/sidebar.tsx +2 -2
package/components/partials/form/checkbox.tsx +129 -102
package/components/partials/form/drop.tsx +2 -1
package/components/partials/form/field-currency.tsx +1 -1
package/components/partials/form/field-date.tsx +3 -2
package/components/partials/form/field.tsx +25 -21
package/components/partials/form/select.tsx +8 -7
package/components/partials/styleguide.tsx +11 -8
package/package.json +1 -1
package/types/util.d.ts +1 -6
package/types/util.d.ts.map +1 -1
package/util.js +67 -23

package/client/app.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { createBrowserRouter, createHashRouter, redirect, useParams, RouterProvider } from 'react-router-dom'
+import { createBrowserRouter, createHashRouter, redirect, RouterProvider } from 'react-router-dom'
 import { Fragment, ReactNode } from 'react'
 import ReactDOM from 'react-dom/client'
 import { axios, camelCase, pick, toArray, setTimeoutPromise } from 'nitro-web/util'
@@ -25,7 +25,7 @@ type Settings = {
 }
 type Route = {
-  component: React.FC<{ route?: Route; params?: object; location?: object; config?: Config }>
+  component: React.FC<{ route?: Route; config?: Config }>
   middleware: string[]
   name: string
   path: string
@@ -70,9 +70,7 @@ export function updateJwt(token?: string | null) {
 }
 function App({ settings, config, storeContainer }: { settings: Settings, config: Config, storeContainer: StoreContainer }): ReactNode {
-  // const themeNormalised = theme
-  const router = getRouter({ settings, config })
-  // const theme = pick(themeNormalised, []) // e.g. 'topPanelHeight'
+  const router = useMemo(() => getRouter({ settings, config }), [])
   useEffect(() => {
     /**
@@ -97,10 +95,8 @@ function App({ settings, config, storeContainer }: { settings: Settings, config:
   return (
     <storeContainer.Provider>
-      {/* <ThemeProvider theme={themeNormalised}> */}
-      { router && <RouterProvider router={router} /> }
+      { router && <RouterProvider router={router}/> }
       <AfterApp settings={settings} />
-      {/* </ThemeProvider> */}
     </storeContainer.Provider>
   )
 }
@@ -206,7 +202,7 @@ function getRouter({ settings, config }: { settings: Settings, config: Config })
           ),
           path: route.path,
           loader: async () => { // request
-            // wait for container/exposedStoreData to be setup
+            // wait for container/exposedStoreData to be setup (note that this causes ReactRouter to re-render, but not the page)
             if (!nonce) {
               nonce = true
               await setTimeoutPromise(() => {}, 0)
@@ -255,11 +251,9 @@ function RestoreScroll() {
 function RouteComponent({ route, config }: { route: Route, config: Config }) {
   const Component = route.component
-  const params = useParams()
-  const location = useLocation()
   document.title = route.meta?.title || ''
   return (
-    <Component route={route} params={params} location={location} config={config} />
+    <Component route={route} config={config} />
   )
 }

package/components/partials/element/button.tsx CHANGED Viewed

@@ -1,10 +1,11 @@
 import { twMerge } from 'nitro-web'
 import { ChevronDown, ChevronUp } from 'lucide-react'
-type Button = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+interface Button extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   color?: 'primary'|'secondary'|'black'|'dark'|'white'|'clear'|'custom'
-  size?: 'xs'|'sm'|'md'|'lg'
+  size?: 'xs'|'sm'|'md'|'lg'|'custom'
   customColor?: string
+  customSize?: string
   className?: string
   isLoading?: boolean
   IconLeft?: React.ReactNode|'v'
@@ -19,6 +20,7 @@ export function Button({
   size='md',
   color='primary',
   customColor,
+  customSize,
   className,
   isLoading,
   IconLeft,
@@ -49,26 +51,27 @@ export function Button({
   // Button sizes (px is better for height consistency)
   const sizes = {
-    xs: 'px-[6px]  h-[25px] px-button-x-xs h-button-h-xs text-xs !text-button-xs rounded',
-    sm: 'px-[10px] h-[32px] px-button-x-sm h-button-h-sm text-button-md text-button-sm rounded-md',
-    md: 'px-[12px] h-[38px] px-button-x-md h-button-h-md text-button-md rounded-md', // default
-    lg: 'px-[18px] h-[42px] px-button-x-lg h-button-h-lg text-button-md !text-button-lg rounded-md',
+    'xs': 'px-[6px]  h-[25px] text-xs !text-button-xs rounded',
+    'sm': 'px-[10px] h-[32px] text-md text-button-base rounded-md',
+    'md': 'px-[12px] h-[38px] text-md text-button-base rounded-md', // default
+    'lg': 'px-[18px] h-[42px] text-md text-button-base rounded-md',
   }
   const appliedColor = color === 'custom' ? customColor : colors[color]
+  const appliedSize = size === 'custom' ? customSize : sizes[size]
   const contentLayout = `gap-x-1.5 ${iconPosition == 'none' ? '' : ''}`
   const loading = isLoading ? '[&>*]:opacity-0 text-opacity-0' : ''
   function getIcon(Icon: React.ReactNode | 'v') {
-    if (Icon == 'v' || Icon == 'down') return <ChevronDown size={16.5} className="mt-[-1.4rem] mb-[-1.5rem] -mx-0.5" />
-    if (Icon == '^' || Icon == 'up') return <ChevronUp size={16.5} className="mt-[-1.4rem] mb-[-1.5rem] -mx-0.5" />
+    if (Icon == 'v' || Icon == 'down') return <ChevronDown size={16.5} className="mt-[-1.4rem] mb-[-1.5rem]" />
+    if (Icon == '^' || Icon == 'up') return <ChevronUp size={16.5} className="mt-[-1.4rem] mb-[-1.5rem]" />
     else return Icon
   }
   return (
     <button
       type={type}
-      class={twMerge(`${base} ${sizes[size]} ${appliedColor} ${contentLayout} ${loading} nitro-button ${className||''}`)}
+      class={twMerge(`${base} ${appliedSize} ${appliedColor} ${contentLayout} ${loading} nitro-button ${className||''}`)}
       {...props}
     >
       {

package/components/partials/element/calendar.tsx CHANGED Viewed

@@ -3,6 +3,8 @@ import { isValid } from 'date-fns'
 import 'react-day-picker/style.css'
 import { IsFirstRender } from 'nitro-web'
+export const dayButtonClassName = 'size-[33px] text-sm'
 type Mode = 'single'|'multiple'|'range'
 type ModeSelection<T extends Mode> = (
   T extends 'single' ? Date | undefined
@@ -94,7 +96,7 @@ export function Calendar({ mode='single', onChange, value, numberOfMonths, month
       // Days
       weekday: `${d.weekday} text-[11px] font-bold uppercase`,
       day: `${d.day} size-[33px]`,
-      day_button: `${d.day_button} size-[33px] text-sm`,
+      day_button: `${d.day_button} ${dayButtonClassName}`,
       // States
       focused: `${d.focused} [&>button]:bg-gray-200 [&>button]:border-gray-200`,

package/components/partials/element/dropdown.tsx CHANGED Viewed

@@ -14,14 +14,14 @@ type DropdownProps = {
   options?: { label: string|React.ReactNode, onClick?: Function, isSelected?: boolean, icon?: React.ReactNode, className?: string }[]
   /** Whether the dropdown is hoverable **/
   isHoverable?: boolean
-  /** The minimum width of the menu **/
-  minWidth?: number | string
   /** The content to render inside the top of the dropdown **/
   menuContent?: React.ReactNode
   menuClassName?: string
   menuOptionClassName?: string
   menuIsOpen?: boolean
   menuToggles?: boolean
+  /** The minimum width of the menu **/
+  minWidth?: number | string
   toggleCallback?: (isActive: boolean) => void
 }
@@ -30,15 +30,15 @@ export const Dropdown = forwardRef(function Dropdown({
   animate=true,
   children,
   className,
-  dir,
+  dir='bottom-left',
   options,
   isHoverable,
-  minWidth, // remove in favour of menuClassName
   menuClassName,
   menuOptionClassName,
   menuContent,
   menuIsOpen,
   menuToggles=true,
+  minWidth,
   toggleCallback,
 }: DropdownProps, ref) {
   // https://letsbuildui.dev/articles/building-a-dropdown-menu-component-with-react-hooks
@@ -46,6 +46,8 @@ export const Dropdown = forwardRef(function Dropdown({
   const dropdownRef = useRef<HTMLDivElement|null>(null)
   const [isActive, setIsActive] = useState(!!menuIsOpen)
   const menuStyle = getSelectStyle({ name: 'menu' })
+  const [direction, setDirection] = useState<null | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'>(null)
+  const [ready, setReady] = useState(false)
   // Expose the setIsActive function to the parent component
   useImperativeHandle(ref, () => ({ setIsActive }))
@@ -76,7 +78,50 @@ export const Dropdown = forwardRef(function Dropdown({
   useEffect(() => {
     if (toggleCallback) toggleCallback(isActive)
   }, [isActive])
+  useEffect(() => {
+    setReady(false)
+    if (!isActive || !dropdownRef.current) return
+    const ul = dropdownRef.current.querySelector('ul') as HTMLElement
+    if (!ul) return
+    // Temporarily show the ul for measurement
+    const originalMaxHeight = ul.style.maxHeight
+    const originalVisibility = ul.style.visibility
+    const originalOpacity = ul.style.opacity
+    const originalPointerEvents = ul.style.pointerEvents
+    ul.style.maxHeight = 'none'
+    ul.style.visibility = 'hidden'
+    ul.style.opacity = '0'
+    ul.style.pointerEvents = 'none'
+    const dropdownHeight = ul.getBoundingClientRect().height
+    // Revert styles
+    ul.style.maxHeight = originalMaxHeight
+    ul.style.visibility = originalVisibility
+    ul.style.opacity = originalOpacity
+    ul.style.pointerEvents = originalPointerEvents
+    const rect = dropdownRef.current.getBoundingClientRect()
+    const spaceBelow = window.innerHeight - rect.bottom
+    const spaceAbove = rect.top
+    const side = dir.endsWith('right') ? 'right' : 'left'
+    const newDirection = dir.startsWith('bottom')
+      ? `${spaceBelow < dropdownHeight && spaceAbove > dropdownHeight ? 'top' : 'bottom'}-${side}`
+      : `${spaceAbove < dropdownHeight && spaceBelow > dropdownHeight ? 'bottom' : 'top'}-${side}`
+    setDirection(newDirection as 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right')
+    requestAnimationFrame(() => {
+      setReady(true)
+    })
+  }, [isActive, dir])
   function onMouseDown(e: { key: string, preventDefault: Function }) {
     if (e.key && e.key != 'Enter') return
     if (e.key) e.preventDefault() // for button, stops buttons firing twice
@@ -87,12 +132,13 @@ export const Dropdown = forwardRef(function Dropdown({
     if (option.onClick) option.onClick(e)
     if (!menuIsOpen) setIsActive(!isActive)
   }
+  var ready2
   return (
     <div
       class={
-        'relative' +
-        (dir ? ` is-${dir}` : ' is-bottom-left') +
+        `relative is-${direction || dir}` + // until hovered, show the original direction to prevent scrollbars
+        (ready2 ? ' is-ready' : '') +
         (isHoverable ? ' is-hoverable' : '') +
         (isActive ? ' is-active' : '') +
         (!animate ? ' no-animation' : '') +
@@ -113,7 +159,8 @@ export const Dropdown = forwardRef(function Dropdown({
       }
       <ul
         style={{ minWidth }}
-        class={twMerge(`${menuStyle} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName}`)}
+        class={
+          twMerge(`${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
       >
         {menuContent}
         {
@@ -127,7 +174,7 @@ export const Dropdown = forwardRef(function Dropdown({
               >
                 <span class="flex-auto">{option.label}</span>
                 { !!option.icon && option.icon }
-                { option.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-1" /> }
+                { option.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-0.5" /> }
               </li>
             )
           })
@@ -172,7 +219,7 @@ const style = css`
   &>ul>li:hover,
   &>ul>li:focus,
   &>ul>li.is-active {
-    &>ul {
+    &>ul.is-ready {
       opacity: 1;
       visibility: visible;
       transition: transform 0.15s ease, opacity 0.15s ease;

package/components/partials/element/filters.tsx CHANGED Viewed

@@ -123,7 +123,7 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
       allowOverflow={true}
       // menuIsOpen={true}
       {...dropdownProps}
-      menuClassName={twMerge(`!rounded-lg min-w-[330px] ${dropdownProps?.menuClassName || ''}`)}
+      menuClassName={twMerge(`min-w-[330px] ${dropdownProps?.menuClassName || ''}`)}
       menuContent={
         <div>
           <div class="flex justify-between items-center border-b p-4 py-3.5">
@@ -146,7 +146,7 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
                     filter.type === 'select' &&
                     <Elements.Select
                       {...filter}
-                      class="mb-0"
+                      class="!mb-0"
                       state={state}
                       onChange={onInputChange}
                       type={undefined}
@@ -156,7 +156,7 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
                     filter.type !== 'select' &&
                     <Elements.Field
                       {...filter}
-                      class="mb-0"
+                      class="!mb-0"
                       state={state}
                       onChange={onInputChange}
                     />

package/components/partials/element/github-link.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import GithubIcon from 'nitro-web/client/imgs/github.svg'
 export function GithubLink({ filename }: { filename: string }) {
-  const base = 'https://github.com/boycce/nitro-web/blob/master/'
+  const base = 'https://github.com/boycce/nitro-web/blob/master/packages/'
   // Filenames are relative to the webpack start directory
   // 1. Remove ../ from filename (i.e. for _example build)
   // 2. Remove node_modules/nitro-web/ from filename (i.e. for packages using nitro-web)

package/components/partials/element/sidebar.tsx CHANGED Viewed

@@ -6,10 +6,10 @@ import {
   Bars3Icon,
   HomeIcon,
   UsersIcon,
-  XMarkIcon,
   ArrowLeftCircleIcon,
   PaintBrushIcon,
 } from '@heroicons/react/24/outline'
+import { XIcon } from 'lucide-react'
 const sidebarWidth = 'w-80'
@@ -42,7 +42,7 @@ export function Sidebar({ Logo, menu, links }: SidebarProps) {
           (sidebarOpen ? 'opacity-100' : 'opacity-0')
         }>
           <button type="button" onClick={() => setSidebarOpen(false)} className="-m-2.5 p-2.5">
-            <XMarkIcon aria-hidden="true" className="size-6 text-white" />
+            <XIcon aria-hidden="true" strokeWidth={1.5} size={24} className="text-white" />
           </button>
         </div>
         <SidebarContents Logo={Logo} menu={menu} links={links} />

package/components/partials/form/checkbox.tsx CHANGED Viewed

@@ -1,119 +1,146 @@
-type CheckboxProps = {
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { twMerge, deepFind, getErrorFromState } from 'nitro-web/util'
+import { Errors, type Error } from 'nitro-web/types'
+type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  /** field name or path on state (used to match errors), e.g. 'date', 'company.email' */
   name: string
-  /** name is applied if not provided. Used for radios */
+  /** name is applied if id is not provided. Used for radios */
   id?: string
-  size?: 'md' | 'sm'
+  /** state object to get the value, and check errors against */
+  state?: { errors?: Errors, [key: string]: any }
+  size?: number
   subtext?: string|React.ReactNode
   text?: string|React.ReactNode
   type?: 'checkbox' | 'radio' | 'toggle'
-  [key: string]: unknown
+  checkboxClassName?: string
+  svgClassName?: string
+  labelClassName?: string
 }
-export function Checkbox({ name, id, size='sm', subtext, text, type='checkbox', ...props }: CheckboxProps) {
+export function Checkbox({
+  state, size, subtext, text, type='checkbox', className, checkboxClassName, svgClassName, labelClassName, ...props
+}: CheckboxProps) {
   // Checkbox/radio/toggle component
-  // https://tailwindui.com/components/application-ui/forms/checkboxes#component-744ed4fa65ba36b925701eb4da5c6e31
-  if (!name) throw new Error('Checkbox requires a `name` prop')
-  id = id || name
+  let value!: boolean
+  const error = getErrorFromState(state, props.name)
+  const id = props.id || props.name
-  const sizeMap = {
-    sm: {
-      checkbox: 'size-[14px]',
-      toggleWidth: 'w-[32px]', // 4px border + (toggleAfterSize * 2)
-      toggleHeight: 'h-[18px]',
-      toggleAfterSize: 'after:size-[14px]', // account for 2px border
-    },
-    md: {
-      checkbox: 'size-[16px]',
-      toggleWidth: 'w-[40px]', // 4px border + (toggleAfterSize * 2)
-      toggleHeight: 'h-[22px]',
-      toggleAfterSize: 'after:size-[18px]', // account for 2px border
-    },
+  if (!props.name) throw new Error('Checkbox requires a `name` prop')
+  // Value: Input is always controlled if state is passed in
+  if (typeof props.checked !== 'undefined') value = props.checked
+  else if (typeof state == 'object') {
+    const v = deepFind(state, props.name) as boolean | undefined
+    value = v ?? false
   }
-  const _size = sizeMap[size]
+  const BORDER = 2
+  const checkboxSize = size ?? 14
+  const toggleHeight = size ?? 18
+  const toggleWidth = toggleHeight * 2 - BORDER * 2
+  const toggleAfterSize = toggleHeight - BORDER * 2
   return (
-    <div className={`mt-2.5 mb-6 mt-input-before mb-input-after flex gap-3 nitro-checkbox ${props.className || ''}`}>
-      <div className="flex shrink-0 mt-[2px]">
-        {
-          type !== 'toggle'
-            ? <div className={`group grid ${_size.checkbox} grid-cols-1`}>
-                <input
-                  {...props}
-                  id={id}
-                  name={name}
-                  type={type}
-                  className={
-                    `${type === 'radio' ? 'rounded-full' : 'rounded'} col-start-1 row-start-1 appearance-none border border-gray-300 bg-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto ` +
-                    // Default
-                    'checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 indeterminate:bg-blue-600 focus-visible:outline-blue-600 ' +
-                    // Variable-selected color defined?
-                    'checked:!border-variable-selected checked:!bg-variable-selected indeterminate:!border-variable-selected indeterminate:!bg-variable-selected focus-visible:!outline-variable-selected'
-                  }
-                />
-                <svg
-                  fill="none"
-                  viewBox="0 0 14 14"
-                  className={`pointer-events-none col-start-1 row-start-1 ${_size.checkbox} self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25`}
-                >
-                  {
-                    type === 'radio'
-                      ? <circle
-                          // cx={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
-                          // cy={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
-                          // r={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 6}
-                          cx={7}
-                          cy={7}
-                          r={2.5}
-                          className="fill-white opacity-0 group-has-[:checked]:opacity-100"
-                        />
-                      : <>
-                          <path
-                            d="M4 8L6 10L10 4.5"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            className="opacity-0 group-has-[:checked]:opacity-100"
-                          />
-                          <path
-                            d="M4 7H10"
-                            strokeWidth={2}
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            className="opacity-0 group-has-[:indeterminate]:opacity-100"
-                          />
-                        </>
-                  }
-                </svg>
-              </div>
-            : <div className="group grid grid-cols-1">
-                <input
-                  {...props}
-                  id={id}
-                  name={name}
-                  type="checkbox"
-                  class="sr-only peer"
-                />
-                <label
-                  for={id}
-                  className={
-                    `col-start-1 row-start-1 relative ${_size.toggleWidth} ${_size.toggleHeight} bg-gray-200 peer-focus-visible:outline-none peer-focus-visible:ring-4 rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full ${_size.toggleAfterSize} after:transition-all ` +
-                    // Default
-                    'peer-focus-visible:ring-blue-300 peer-checked:bg-blue-600 ' +
-                    // Variable-selected color defined?
-                    'peer-focus-visible:!ring-variable-selected peer-checked:!bg-variable-selected '
-                    // Dark mode not used yet...
-                    // 'dark:peer-focus-visible:ring-blue-800 dark:bg-gray-700 dark:border-gray-600 '
-                  }
-                />
-              </div>
+    <div
+      className={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after text-sm nitro-checkbox ${className}`)}
+    >
+      <div className="flex gap-3 items-baseline">
+        <div className="shrink-0 flex items-center">
+          <div className="w-0">&nbsp;</div>
+          <div className="group relative">
+            {
+              type !== 'toggle'
+                ? <>
+                    <input
+                      {...props}
+                      type={type}
+                      style={{ width: checkboxSize, height: checkboxSize }}
+                      checked={value}
+                      className={
+                        twMerge(
+                          `${type === 'radio' ? 'rounded-full' : 'rounded'} appearance-none border border-gray-300 bg-white forced-colors:appearance-auto disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ` +
+                          // Variable-selected theme colors (was .*-blue-600)
+                          'checked:border-variable-selected checked:bg-variable-selected indeterminate:border-variable-selected indeterminate:bg-variable-selected focus-visible:outline-variable-selected ' +
+                          // Dark mode not used yet... dark:focus-visible:outline-blue-800
+                          checkboxClassName
+                        )
+                      }
+                    />
+                    <svg
+                      fill="none"
+                      viewBox="0 0 14 14"
+                      style={{ width: checkboxSize, height: checkboxSize }}
+                      className={twMerge('absolute top-0 left-0 pointer-events-none justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25', svgClassName)}
+                    >
+                      {
+                        type === 'radio'
+                          ? <circle
+                              // cx={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
+                              // cy={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 2}
+                              // r={(_size.checkbox.match(/\d+/)?.[0] as unknown as number) / 6}
+                              cx={7}
+                              cy={7}
+                              r={2.5}
+                              className="fill-white opacity-0 group-has-[:checked]:opacity-100"
+                            />
+                          : <>
+                              <path
+                                d="M4 8L6 10L10 4.5"
+                                strokeWidth={2}
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className="opacity-0 group-has-[:checked]:opacity-100"
+                              />
+                              <path
+                                d="M4 7H10"
+                                strokeWidth={2}
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                className="opacity-0 group-has-[:indeterminate]:opacity-100"
+                              />
+                            </>
+                      }
+                    </svg>
+                  </>
+                : <>
+                    <input
+                      {...props}
+                      type="checkbox"
+                      className="sr-only peer"
+                      checked={value}
+                    />
+                    <label
+                      for={id}
+                      style={{ width: toggleWidth, height: toggleHeight }}
+                      className={
+                        twMerge(
+                          'block bg-gray-200 rounded-full transition-colors peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 ' +
+                          // Variable-selected theme colors (was .*-blue-600)
+                          'peer-checked:bg-variable-selected peer-focus-visible:outline-variable-selected ' +
+                          labelClassName
+                        )
+                      }
+                    >
+                      <span
+                        style={{ width: toggleAfterSize, height: toggleAfterSize }}
+                        className={
+                          'absolute top-[2px] start-[2px] bg-white border-gray-300 border rounded-full transition-all group-has-[:checked]:border-white group-has-[:checked]:translate-x-full '
+                        }
+                      />
+                    </label>
+                  </>
+            }
+          </div>
+        </div>
+        {text &&
+          <label for={id} className="text-[length:inherit] leading-[inherit] select-none">
+            <span className="text-gray-900">{text}</span>
+            <span className="ml-2 text-gray-500">{subtext}</span>
+          </label>
         }
       </div>
-      {text &&
-        <label for={id} className="self-center text-sm select-none">
-          <span className="text-gray-900">{text}</span>
-          <span className="ml-2 text-gray-500">{subtext}</span>
-        </label>
-      }
+      {error && <div class="mt-1.5 text-xs text-danger-foreground nitro-error">{error.detail}</div>}
     </div>
   )
 }

package/components/partials/form/drop.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ 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'
+import { twMerge } from 'nitro-web/util'
 type DropProps = {
   awsUrl?: string
@@ -93,7 +94,7 @@ export function Drop({ awsUrl, className, id, name, onChange, multiple, state, .
   // }
   return (
-    <div class={`mt-2.5 mb-6 mt-input-before mb-input-after nitro-field nitro-drop ${className || ''}`}>
+    <div class={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after nitro-field nitro-drop ${className || ''}`)}>
       <input
         {...props}
         id={inputId}

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

@@ -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-input-base ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
+        class={`absolute top-0 bottom-0 left-[12px] left-input-x inline-flex items-center select-none text-gray-500 text-input-base ${dollars !== null && settings.prefix == '$' ? 'text-foreground' : ''}`}
       >
         {settings.prefix || settings.suffix}
       </span>

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

@@ -2,6 +2,7 @@
 import { format, isValid, parse } from 'date-fns'
 import { getPrefixWidth } from 'nitro-web/util'
 import { Calendar, Dropdown } from 'nitro-web'
+import { dayButtonClassName } from '../element/calendar'
 type Mode = 'single' | 'multiple' | 'range'
 type DropdownRef = {
@@ -160,7 +161,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-input-base ml-3">
+          <span className="z-[0] col-start-1 row-start-1 self-center select-none justify-self-start text-input-base ml-[12px] ml-input-x">
             {prefix}
           </span>
         }
@@ -234,7 +235,7 @@ function TimePicker({ date, onChange }: TimePickerProps) {
                 <button
                   key={item}
                   className={
-                    'size-[33px] rounded-full flex justify-center items-center group-hover:bg-gray-100 '
+                    `${dayButtonClassName} rounded-full flex justify-center items-center group-hover:bg-gray-100 `
                     + (item === currentValue ? '!bg-input-border-focus text-white' : '')
                   }
                   onClick={() => handleTimeChange(type, item)}

package/components/partials/form/field.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-// Maybe use fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
+// fill-current tw class for lucide icons (https://github.com/lucide-icons/lucide/discussions/458)
 import { css } from 'twin.macro'
 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 { MailIcon, CalendarIcon, FunnelIcon, SearchIcon, EyeIcon, EyeOffIcon } from 'lucide-react'
 import { memo } from 'react'
 type FieldType = 'text' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'date' | 'color'
@@ -27,7 +27,7 @@ type FieldExtraProps = {
   placeholder?: string
 }
 type IconWrapperProps = {
-  iconPos: string
+  iconPos: 'left' | 'right'
   icon?: React.ReactNode
   [key: string]: unknown
 }
@@ -77,22 +77,22 @@ function FieldBase({ state, icon, iconPos: ip, ...props }: FieldProps) {
   if (type == 'password') {
     Icon = <IconWrapper
       iconPos={iconPos}
-      icon={icon || inputType == 'password' ? <EyeSlashIcon /> : <EyeIcon />}
+      icon={icon || inputType == 'password' ? <EyeOffIcon /> : <EyeIcon />}
       onClick={() => setInputType(o => o == 'password' ? 'text' : 'password')}
-      className="pointer-events-auto"
+      className="size-[15px] size-input-icon pointer-events-auto"
     />
   } else if (type == 'email') {
-    Icon = <IconWrapper iconPos={iconPos} icon={icon || <EnvelopeIcon />} />
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <MailIcon />} className="size-[14px] size-input-icon" />
   } else if (type == 'filter') {
-    Icon = <IconWrapper iconPos={iconPos} icon={icon || <FunnelIcon />} className="size-3"  />
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <FunnelIcon />} className="size-[14px] size-input-icon" />
   } else if (type == 'search') {
-    Icon = <IconWrapper iconPos={iconPos} icon={icon || <MagnifyingGlassIcon />} className="size-4" />
+    Icon = <IconWrapper iconPos={iconPos} icon={icon || <SearchIcon />} className="size-[14px] size-input-icon" />
   } else if (type == 'color') {
     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 = <IconWrapper iconPos={iconPos} icon={icon || <CalendarIcon />} className="size-[14px] size-input-icon" />
+  } else if (icon) {
+    Icon = <IconWrapper iconPos={iconPos} icon={icon} className="size-[14px] size-input-icon" />
   }
   // Classname
@@ -135,7 +135,7 @@ function FieldBase({ state, icon, iconPos: ip, ...props }: FieldProps) {
 function FieldContainer({ children, className, error }: { children: React.ReactNode, className?: string, error?: Error }) {
   return (
-    <div css={style} className={twMerge(`mt-2.5 mb-6 mt-input-before mb-input-after grid grid-cols-1 nitro-field ${className || ''}`)}>
+    <div css={style} className={'mt-2.5 mb-6 ' + twMerge(`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>
@@ -143,15 +143,15 @@ 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-[12px] pl-input-x'
-  const pr = 'pr-[12px] pr-input-x'
+  // not twMerge
+  const px = 'px-[12px]'
   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-input-base 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} `)) +
+    'block col-start-1 row-start-1 w-full rounded-md bg-white text-input-base outline outline-1 -outline-offset-1 ' +
+    'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 ' + `${py} ${px} ` +
+    (iconPos == 'right' && Icon ? 'pr-[32px] pr-input-x-icon pl-input-x ' : '') +
+    (iconPos == 'left' && Icon ? 'pl-[32px] pl-input-x-icon pr-input-x ' : 'px-input-x ') +
+    (iconPos == 'left' && Icon && type == 'color' ? 'indent-[5px] ' : '') +
     (error
       ? 'text-danger-foreground outline-danger focus:outline-danger '
       : 'text-input outline-input-border focus:outline-input-border-focus ') +
@@ -166,8 +166,8 @@ function IconWrapper({ icon, iconPos, ...props }: IconWrapperProps) {
     <div
       {...props}
       className={
-        'z-[0] size-[14px] col-start-1 row-start-1 self-center text-[#c6c8ce] select-none ' +
-        (iconPos == 'right' ? 'justify-self-end mr-3 ' : 'justify-self-start ml-3 ') +
+        'z-[0] col-start-1 row-start-1 self-center text-[#c6c8ce] text-input-icon select-none [&>svg]:size-full ' +
+        (iconPos == 'right' ? 'justify-self-end mr-[12px] mr-input-x ' : 'justify-self-start ml-[12px] ml-input-x ') +
         props.className || ''
       }
     >{icon}</div>
@@ -220,4 +220,8 @@ const style = css`
     -webkit-appearance: none;
     margin: 0;
   }
+  /* tw4 we can use calc to determine the padding-left with css variables...
+  .inputt {
+    padding-left: calc(var(--input-x) * 2);
+  } */
 `

package/components/partials/form/select.tsx CHANGED Viewed

@@ -5,7 +5,8 @@ import ReactSelect, {
   components, ControlProps, createFilter, OptionProps, SingleValueProps, ClearIndicatorProps,
   DropdownIndicatorProps, MultiValueRemoveProps,
 } from 'react-select'
-import { ChevronUpDownIcon, CheckCircleIcon, XMarkIcon } from '@heroicons/react/20/solid'
+import { CheckCircleIcon } from '@heroicons/react/20/solid'
+import { ChevronsUpDownIcon, XIcon } from 'lucide-react'
 import { isFieldCached } from 'nitro-web'
 import { getErrorFromState, deepFind, twMerge } from 'nitro-web/util'
 import { Errors } from 'nitro-web/types'
@@ -67,7 +68,7 @@ function SelectBase({ id, containerId, minMenuWidth, name, prefix='', onChange,
   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||''}`)}>
+    <div css={style} class={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after nitro-select ${props.className||''}`)}>
       <ReactSelect
         /**
          * react-select prop quick reference (https://react-select.com/props#api):
@@ -211,7 +212,7 @@ function Option(props: OptionProps) {
     <components.Option className={data.className} {...props}>
       { _nitro?.mode == 'country' && <Flag flag={data.flag} /> }
       <span class="flex-auto">{props.label}</span>
-      {props.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-1" />}
+      {props.isSelected && <CheckCircleIcon className="size-[22px] text-primary -my-1 -mx-0.5" />}
     </components.Option>
   )
 }
@@ -219,7 +220,7 @@ function Option(props: OptionProps) {
 const DropdownIndicator = (props: DropdownIndicatorProps) => {
   return (
     <components.DropdownIndicator {...props}>
-      <ChevronUpDownIcon className="text-gray-400 size-[17px] -my-0.5 -mx-0.5" />
+      <ChevronsUpDownIcon size={15} className="text-gray-400 -my-0.5 -mx-[1px]" />
     </components.DropdownIndicator>
   )
 }
@@ -227,7 +228,7 @@ const DropdownIndicator = (props: DropdownIndicatorProps) => {
 const ClearIndicator = (props: ClearIndicatorProps) => {
   return (
     <components.ClearIndicator {...props}>
-      <XMarkIcon className="size-4" />
+      <XIcon size={14} />
     </components.ClearIndicator>
   )
 }
@@ -235,7 +236,7 @@ const ClearIndicator = (props: ClearIndicatorProps) => {
 const MultiValueRemove = (props: MultiValueRemoveProps) => {
   return (
     <components.MultiValueRemove {...props}>
-      <XMarkIcon className="size-[1em] p-[1px]" />
+      <XIcon className="size-[1em] p-[1px]" />
     </components.MultiValueRemove>
   )
 }
@@ -258,7 +259,7 @@ const selectStyles = {
     focus: 'outline-2 -outline-offset-2 outline-input-border-focus',
     error: 'outline-danger',
   },
-  valueContainer: 'py-[9px] px-[12px] py-input-y px-input-x gap-1',
+  valueContainer: 'py-[9px] px-[12px] py-input-y px-input-x gap-1', // dont twMerge (input-x is optional)
   // Input container objects
   input: {
     base: 'text-input',

package/components/partials/styleguide.tsx CHANGED Viewed

@@ -187,10 +187,10 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
         <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 -mx-0.5" />}>IconLeft</Button></div>
-        <div><Button IconLeft={<Check size={19} className="-my-5 -mx-0.5" />}
+        <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 -mx-0.5" />}
+        <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>
@@ -204,18 +204,21 @@ export function Styleguide({ className, elements, children }: StyleguideProps) {
       <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." />
+          <Checkbox name="input2" type="toggle" text="Toggle sm" subtext="some additional text here." class="!mb-0"
+            state={state} onChange={(e) => onChange(setState, e)} />
+          <Checkbox name="input3" type="toggle" text="Toggle 22px" subtext="some additional text here." size={22} />
         </div>
         <div>
           <label for="input1">Label</label>
-          <Checkbox name="input1" type="radio" text="Radio 1" subtext="some additional text here 1." id="input1-1" class="!mb-0"
+          <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 2" subtext="some additional text here 2." id="input1-2" class="!mt-0" />
+          <Checkbox name="input1" type="radio" text="Radio 16px" subtext="some additional text here 2." id="input1-2"  size={16} />
         </div>
         <div>
           <label for="input0">Label</label>
-          <Checkbox name="input0" type="checkbox" text="Checkbox" subtext="some additional text here." defaultChecked />
+          <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>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "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 CHANGED Viewed

@@ -721,18 +721,13 @@ export function toArray<T>(variable: T | undefined): (T extends any[] ? T : T[])
  * @returns {string}
  */
 export function trim(string: string): string;
-/**
- * Merge tailwind classes, but ignore classes that shouldn't be merged, and intended as an override
- * @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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"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~~AAED~~;;;;GAIG;AACH,~~iCAHe,MAAM,EAAA,GACR,MAAM,CAqBlB;AAED;;;;GAIG;AACH,~~gCAHW,MAAM,GACJ,MAAM,CAKlB;;;;~~yBAj8BY~~;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;;;;oBAoNxD,CAAC,MAAM,EAAE,MAAM,CAAC;;;;kBAChB;IAAC,UAAU,EAAE,KAAK,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAA;CAAC;;;;oBAigBpC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAC"}
1	+ {"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../util.js"],"names":[],"mappings":"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"}

package/util.js CHANGED Viewed

@@ -1675,31 +1675,75 @@ export function trim (string) {
   return string.trim().replace(/\n\s+\n/g, '\n\n')
 }
-/**
- * Merge tailwind classes, but ignore classes that shouldn't be merged, and intended as an override
- * @param  {...string} args
- * @returns {string}
- */
-export function twMerge(...args) {
-  const ignoredClasses = /** @type {string[]} */([])
-  const ignoreClasses = [
-    'text-button-xs',
-    'text-button-sm',
-    'text-button-md',
-    'text-button-lg',
-    'text-input-base',
-  ]
-  const classes = args.filter(Boolean).join(' ').split(' ')
+import { createTailwindMerge, getDefaultConfig } from 'tailwind-merge'
-  const filteredClasses = classes.filter(c => {
-    if (ignoreClasses.includes(c)) {
-      ignoredClasses.push(c)
-      return false
+// Create a custom twMerge instance
+export const twMerge = createTailwindMerge(() => {
+  const config = getDefaultConfig()
+  /**
+   * @param {string[]} baseNames - base names for x-axis (e.g. 'input-x')
+   * @returns {object} extended classGroups with new spacing classes
+   */
+  function newSpacingSizes(baseNames) {
+    const obj = {
+      pl: [...(/** @type {any} */(config.classGroups.pl) ?? [])],
+      pr: [...(/** @type {any} */(config.classGroups.pr) ?? [])],
+      pt: [...(/** @type {any} */(config.classGroups.pt) ?? [])],
+      pb: [...(/** @type {any} */(config.classGroups.pb) ?? [])],
+      px: [...(/** @type {any} */(config.classGroups.px) ?? [])],
+      py: [...(/** @type {any} */(config.classGroups.py) ?? [])],
+      p: [...(/** @type {any} */(config.classGroups.p) ?? [])],
+      ml: [...(/** @type {any} */(config.classGroups.ml) ?? [])],
+      mr: [...(/** @type {any} */(config.classGroups.mr) ?? [])],
+      mt: [...(/** @type {any} */(config.classGroups.mt) ?? [])],
+      mb: [...(/** @type {any} */(config.classGroups.mb) ?? [])],
+      mx: [...(/** @type {any} */(config.classGroups.mx) ?? [])],
+      my: [...(/** @type {any} */(config.classGroups.my) ?? [])],
+      m: [...(/** @type {any} */(config.classGroups.m) ?? [])],
+      gap: [...(/** @type {any} */(config.classGroups.gap) ?? [])],
     }
-    return true
-  })
-  return _twMerge(...filteredClasses) + ' ' + ignoredClasses.join(' ')
-}
+    // Add both axes classes
+    for (const baseName of baseNames) {
+      obj.pl.push(`pl-${baseName}`)
+      obj.pr.push(`pr-${baseName}`)
+      obj.pt.push(`pt-${baseName}`)
+      obj.pb.push(`pb-${baseName}`)
+      obj.px.push(`px-${baseName}`)
+      obj.py.push(`py-${baseName}`)
+      obj.p.push(`p-${baseName}`)
+      obj.ml.push(`ml-${baseName}`)
+      obj.mr.push(`mr-${baseName}`)
+      obj.mt.push(`mt-${baseName}`)
+      obj.mb.push(`mb-${baseName}`)
+      obj.mx.push(`mx-${baseName}`)
+      obj.my.push(`my-${baseName}`)
+      obj.m.push(`m-${baseName}`)
+      obj.gap.push(`gap-${baseName}`)
+    }
+    return obj
+  }
+  return {
+    ...config,
+    classGroups: {
+      ...config.classGroups,
+      ...newSpacingSizes(['input-x', 'input-x-icon', 'input-y', 'input-before', 'input-after', 'input-icon']),
+      'shadow': [...(config.classGroups.shadow || []), 'shadow-dropdown-ul'],
+      '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'))
+})
 /**
  * Capitalize the first letter of a string