nitro-web 0.0.195 → 0.0.196

package/components/partials/form/field.tsx

@@ -29,6 +29,8 @@ type FieldExtraProps = {
   placeholder?: string
   /** title used to find related error messages */
   errorTitle?: string|RegExp
+  /** class names to override the default class names */
+  inputClassName?: string
 }
 type IconWrapperProps = {
   iconPos: 'left' | 'right'
@@ -54,7 +56,7 @@ export const Field = memo(FieldBase, (prev, next) => {
   return isFieldCached(prev, next)
 })
 
-function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProps) {
+function FieldBase({ state, icon, iconPos: ip, errorTitle, inputClassName, ...props }: FieldProps) {
   // `type` must be kept as props.type for TS to be happy and follow the conditions below
   let value!: any
   let Icon!: React.ReactNode
@@ -104,8 +106,9 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProp
   }
 
   // Classname
-  const inputClassName = getInputClasses({ error, Icon, iconPos, type })
-  const commonProps = { id: id, value: value, className: inputClassName }
+  const inputClasses = getInputClasses({ error, Icon, iconPos, type })
+  const inputClassName2 = inputClassName ? twMerge(inputClasses, inputClassName) : inputClasses.replaceAll(/\(|\)/g, '')
+  const commonProps = { id: id, value: value, className: inputClassName2 }
 
   // Type has to be referenced as props.type for TS to be happy
   if (!type || type == 'text' || type == 'number' || type == 'password' || type == 'email' || type == 'filter' || type == 'search') {
@@ -160,9 +163,11 @@ function getInputClasses({ error, Icon, iconPos, type }: { error?: Error, Icon?:
   const py = 'py-[9px] py-input-y'
   return (
     'block col-start-1 row-start-1 w-full rounded-md bg-white disabled:bg-input-disabled-bg 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 ') +
+    '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 '

package/components/partials/form/select.tsx

@@ -3,7 +3,7 @@ import { css } from 'twin.macro'
 import { memo, useMemo, Fragment } from 'react'
 import ReactSelect, { 
   components, ControlProps, createFilter, OptionProps, SingleValueProps, ClearIndicatorProps,
-  DropdownIndicatorProps, MultiValueRemoveProps, ClassNamesConfig,
+  DropdownIndicatorProps, MultiValueRemoveProps, // ClassNamesConfig,
   ValueContainerProps,
 } from 'react-select'
 import { CheckCircleIcon } from '@heroicons/react/20/solid'
@@ -14,7 +14,6 @@ import { Errors } from 'nitro-web/types'
 
 const filterFn = createFilter()
 
-type NitroClassNamesConfig = ClassNamesConfig & { flag?: () => string }
 type GetSelectClassName = {
   name: string
   isFocused?: boolean
@@ -308,7 +307,7 @@ const selectClassNames = {
     error: 'outline-danger',
     disabled: 'cursor-not-allowed bg-input-disabled-bg',
   },
-  valueContainer: 'gap-1 py-[9px] px-[12px] py-input-y px-input-x', // dont twMerge (input-x is optional)
+  valueContainer: 'gap-1 (py-[9px] px-[12px] py-input-y px-input-x)', // dont twMerge (input-x is optional)
   // Input container objects
   input: {
     base: 'text-input',
@@ -341,28 +340,29 @@ const selectClassNames = {
   flag: 'align-middle text-[1.2em] leading-[1em] mr-1.5 flex-shrink-0',
 } as const
 
-type ClassNames = Partial<Omit<typeof selectClassNames, 'control' | 'input' | 'singleValue' | 'option'>> & {
-  control?: {
-    base?: string
-    focus?: string
-    error?: string
-    disabled?: string
-  }
-  input?: {
-    base?: string
-    error?: string
-    disabled?: string
-  }
-  singleValue?: {
-    base?: string
-    error?: string
-    disabled?: string
-  }
-  option?: {
-    base?: string
-    hover?: string
-    selected?: string
-  }
+type ClassNames = {
+  // Input container
+  control?: { base?: string, focus?: string, error?: string, disabled?: string }
+  valueContainer?: string
+  // Input container objects
+  input?: { base?: string, error?: string, disabled?: string }
+  multiValue?: string
+  multiValueLabel?: string
+  multiValueRemove?: string
+  placeholder?: string
+  singleValue?: { base?: string, error?: string, disabled?: string }
+  // Icon indicators
+  clearIndicator?: string
+  dropdownIndicator?: string
+  indicatorsContainer?: string
+  indicatorSeparator?: string
+  // Dropdown menu
+  menu?: string
+  groupHeading?: string
+  noOptionsMessage?: string
+  option?: { base?: string, hover?: string, selected?: string }
+  // Nitro specific
+  flag?: string
 }
 
 export function getSelectClassName({ name, isFocused, isSelected, isDisabled, hasError, usePrefixes, classNames }: GetSelectClassName) {
@@ -370,7 +370,9 @@ export function getSelectClassName({ name, isFocused, isSelected, isDisabled, ha
   // @ts-expect-error
   const obj = classNames?.[name] || selectClassNames[name]
   let output = obj?.base
-  if (typeof obj == 'string') return obj // no modifiers
+  
+  if (typeof obj == 'string' && obj.includes('(')) return obj.replaceAll(/\(|\)/g, '') // no modifiers & still has group wrappers
+  else if (typeof obj == 'string') return obj // no modifiers
 
   if (usePrefixes) {
     if (obj.focus) output += ' ' + obj.focus.split(' ').map((part: string) => `focus:${part}`).join(' ')

package/package.json

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