nitro-web 0.0.188 → 0.0.190

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

@@ -20,6 +20,8 @@ type PreFieldDateProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onCh
   mode: 'single' | 'multiple' | 'range' | 'time'
   /** show the time picker for single mode*/
   showTime?: boolean
+  /** pattern to use for the date picker */
+  pattern?: string
   /** prefix to add to the input */
   prefix?: string
   /** number of months to show in the dropdown */
@@ -61,6 +63,7 @@ export function FieldDate({
   Icon,
   numberOfMonths,
   onChange: onChangeProp,
+  pattern: patternProp,
   prefix = '',
   showTime,
   DayPickerProps,
@@ -73,8 +76,10 @@ export function FieldDate({
   const [preventInputValueUpdates, setPreventInputValueUpdates] = useState(false)
   const [prefixWidth, setPrefixWidth] = useState(0)
   const dropdownRef = useRef<DropdownRef>(null)
-  const pattern = props.mode == 'time' ? 'hh:mmaa' :  `d MMM yyyy${showTime && props.mode == 'single' ? ' hh:mmaa' : ''}`
   const id = props.id || props.name
+  const pattern = patternProp || (
+    props.mode == 'time' ? 'hh:mmaa' :  `d MMM yyyy${showTime && props.mode == 'single' ? ' hh:mmaa' : ''}`
+  )
 
   // Since value and onChange are optional, we need need to create an internal value state
   const [internalValue, setInternalValue] = useState<Timestamp[]>(() => preInternalValue(props))

package/components/partials/form/field.tsx

@@ -159,14 +159,14 @@ function getInputClasses({ error, Icon, iconPos, type }: { error?: Error, Icon?:
   const px = 'px-[12px]'
   const py = 'py-[9px] py-input-y'
   return (
-    'block col-start-1 row-start-1 w-full rounded-md bg-white text-input-base outline outline-1 -outline-offset-1 ' +
+    '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 ') +
     (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 ') + 
+    (error
+      ? 'text-danger-foreground outline-danger focus:outline-danger '
+      : 'text-input outline-input-border focus:outline-input-border-focus disabled:text-input-disabled ') +
     (iconPos == 'right' ? 'justify-self-start ' : 'justify-self-end ') + 
     'nitro-input'
   )

package/components/partials/form/select.tsx

@@ -17,6 +17,7 @@ type GetSelectStyle = {
   name: string
   isFocused?: boolean
   isSelected?: boolean
+  isDisabled?: boolean
   hasError?: boolean
   usePrefixes?: boolean
 }
@@ -122,7 +123,7 @@ function SelectBase({
           multiValueLabel: () => '',
           multiValueRemove: () => getSelectStyle({ name: 'multiValueRemove' }),
           placeholder: () => getSelectStyle({ name: 'placeholder' }),
-          singleValue: () => getSelectStyle({ name: 'singleValue', hasError: !!error }),
+          singleValue: (p) => getSelectStyle({ name: 'singleValue', hasError: !!error, isDisabled: p.isDisabled }),
           // Indicators
           clearIndicator: () => getSelectStyle({ name: 'clearIndicator' }),
           dropdownIndicator: () => getSelectStyle({ name: 'dropdownIndicator' }),
@@ -267,6 +268,7 @@ const selectStyles = {
       + '!min-h-0 outline-input-border',
     focus: 'outline-2 -outline-offset-2 outline-input-border-focus',
     error: 'outline-danger',
+    disabled: 'cursor-not-allowed bg-input-disabled-bg',
   },
   valueContainer: 'py-[9px] px-[12px] py-input-y px-input-x gap-1', // dont twMerge (input-x is optional)
   // Input container objects
@@ -281,6 +283,7 @@ const selectStyles = {
   singleValue: {
     base: 'text-input',
     error: 'text-danger-foreground',
+    disabled: 'text-input-disabled',
   },
   // Icon indicators
   clearIndicator: 'text-gray-500 p-1 rounded-md hover:bg-red-50 hover:text-danger-foreground',
@@ -298,7 +301,7 @@ const selectStyles = {
   },
 }
 
-export function getSelectStyle({ name, isFocused, isSelected, hasError, usePrefixes }: GetSelectStyle) {
+export function getSelectStyle({ name, isFocused, isSelected, isDisabled, hasError, usePrefixes }: GetSelectStyle) {
   // Returns a class list that conditionally includes hover/focus modifier classes, or uses CSS modifiers, e.g. hover:, focus:
   // @ts-expect-error
   const obj = selectStyles[name]
@@ -314,7 +317,8 @@ export function getSelectStyle({ name, isFocused, isSelected, hasError, usePrefi
   }
   if (obj.error && hasError) output += ` ${obj.error}`
   if (obj.selected && isSelected) output += ` ${obj.selected}`
-  
+  if (obj.disabled && isDisabled) output += ` ${obj.disabled}`
+
   return twMerge(output)
 }
 

package/components/partials/styleguide.tsx

@@ -494,6 +494,17 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
                 onChange={(e) => onChange(e, setState)}
               />
             </div>
+            <div>
+              <label for="action">Disabled</label>
+              <Select 
+                name="action"
+                isDisabled={true}
+                options={useMemo(() => [
+                  { value: 'edit', label: 'Edit' },
+                  { value: 'delete', label: 'Delete' },
+                ], [])} 
+              />
+            </div>
           </div>
         </div>
       )}
@@ -547,9 +558,14 @@ export function Styleguide({ className, elements, children, currencies }: Styleg
                 name="amount" type="currency" state={state} currency={state.currency || 'nzd'} 
                 // Example of using a custom format and currencies, e.g. 
                 format={'¤#,##0.00'} 
-                currencies={currencies} 
+                currencies={currencies}
+                onChange={(e) => onChange(e, setState)}
               />
             </div>
+            <div>
+              <label for="firstName">First Name (disabled)</label>
+              <Field name="firstName" state={state} onChange={(e) => onChange(e, setState)} disabled />
+            </div>
           </div>
         </div>
       )}

package/package.json

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