goobs-frontend 0.9.24 → 0.9.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.24",
+  "version": "0.9.25",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",
@@ -37,10 +37,10 @@
     "otplib": "^12",
     "react-datepicker": "^8",
     "react-qr-code": "^2",
-    "slate": "^0.112",
-    "slate-dom": "^0.112",
-    "slate-history": "^0.110",
-    "slate-react": "^0.112",
+    "slate": "^0.114",
+    "slate-dom": "^0.114",
+    "slate-history": "^0.113",
+    "slate-react": "^0.114",
     "storybook": "^8",
     "zod": "^3",
     "zod-formik-adapter": "^1"

package/src/components/DataGrid/Table/ColumnHeaderRow/index.tsx

@@ -38,8 +38,7 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
   // If we're mobile, just render a single dropdown + "select all" checkbox
   if (isMobile) {
     const mobileOptions = allColumns.map(col => ({
-      value: col.field,
-      label: col.headerName ?? col.field,
+      value: col.headerName ?? col.field,
     }))
 
     // Find the currently-selected column as an object
@@ -47,7 +46,19 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
       mobileOptions.find(opt => opt.value === selectedOverflowField) || null
 
     const handleMobileChange = (value: { value: string } | null) => {
-      setSelectedOverflowField(value?.value || '')
+      if (value && value.value) {
+        // Try to find a column with matching headerName first
+        const matchingColumn = allColumns.find(
+          col => col.headerName === value.value || col.field === value.value
+        )
+
+        // If found, use its field property, otherwise use the value directly
+        setSelectedOverflowField(
+          matchingColumn ? matchingColumn.field : value.value
+        )
+      } else {
+        setSelectedOverflowField('')
+      }
     }
 
     return (
@@ -107,7 +118,20 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
   // Desktop logic
   // ---------------------------
   const handleOverflowChange = (value: { value: string } | null) => {
-    setSelectedOverflowField(value?.value || '')
+    // If using headerName for value in dropdown, we need to find the corresponding field
+    if (value && value.value) {
+      // Try to find a column with matching headerName first
+      const matchingColumn = overflowDesktopColumns.find(
+        col => col.headerName === value.value || col.field === value.value
+      )
+
+      // If found, use its field property, otherwise use the value directly
+      setSelectedOverflowField(
+        matchingColumn ? matchingColumn.field : value.value
+      )
+    } else {
+      setSelectedOverflowField('')
+    }
   }
 
   return (
@@ -150,8 +174,7 @@ const ColumnHeaderRow: React.FC<ColumnHeaderRowProps> = ({
               <SearchableDropdown
                 label="More Columns"
                 options={overflowDesktopColumns.map(oc => ({
-                  value: oc.field,
-                  label: oc.headerName ?? oc.field,
+                  value: oc.headerName ?? oc.field,
                 }))}
                 defaultValue={selectedOverflowField}
                 onChange={handleOverflowChange}

package/src/components/Field/Date/index.tsx

@@ -4,11 +4,38 @@ import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday'
 import TextField, { TextFieldProps } from '../../Field/Text'
+import { Box } from '@mui/material'
+
+/**
+ * DateRange interface for range mode
+ */
+export interface DateRange {
+  start: Date | null
+  end: Date | null
+}
 
 export interface DateFieldProps
   extends Omit<TextFieldProps, 'onChange' | 'value' | 'endAdornment'> {
-  onChange?: (date: Date | null) => void
-  value?: Date | null
+  /**
+   * Callback when date changes
+   */
+  onChange?: (date: Date | null | DateRange) => void
+  /**
+   * Current date value
+   */
+  value?: Date | null | DateRange
+  /**
+   * Whether to show date range picker instead of single date
+   */
+  isRange?: boolean
+  /**
+   * Start date label (for range mode)
+   */
+  startLabel?: string
+  /**
+   * End date label (for range mode)
+   */
+  endLabel?: string
 }
 
 interface CustomInputProps {
@@ -35,6 +62,9 @@ const DateField: React.FC<DateFieldProps> = ({
   onChange,
   label = 'Select Date',
   value,
+  isRange = false,
+  startLabel = 'Start Date',
+  endLabel = 'End Date',
   ...rest
 }) => {
   const formatDate = (date: Date | null) => {
@@ -49,22 +79,45 @@ const DateField: React.FC<DateFieldProps> = ({
     return ''
   }
 
-  const [selectedDate, setSelectedDate] = useState<Date>(value || new Date())
+  // Initialize state based on whether in range mode or single date mode
+  const [selectedDate, setSelectedDate] = useState<Date | null>(
+    isRange ? null : (value as Date | null) || new Date()
+  )
+  const [dateRange, setDateRange] = useState<DateRange>(
+    isRange
+      ? (value as DateRange) || { start: new Date(), end: new Date() }
+      : { start: new Date(), end: new Date() }
+  )
   const [isOpen, setIsOpen] = useState(false)
-  const [inputValue, setInputValue] = useState(formatDate(selectedDate))
+  const [isStartDateOpen, setIsStartDateOpen] = useState(false)
+  const [isEndDateOpen, setIsEndDateOpen] = useState(false)
+  const [inputValue, setInputValue] = useState(
+    isRange ? '' : formatDate(selectedDate)
+  )
+  const [startDateInputValue, setStartDateInputValue] = useState(
+    formatDate(dateRange.start)
+  )
+  const [endDateInputValue, setEndDateInputValue] = useState(
+    formatDate(dateRange.end)
+  )
 
+  // Single date mode handlers
   const handleChange = (date: Date | null) => {
-    if (date) {
-      setSelectedDate(date)
-      setInputValue(formatDate(date))
-      setIsOpen(false)
-      if (onChange) {
-        onChange(date)
+    if (!isRange) {
+      if (date) {
+        setSelectedDate(date)
+        setInputValue(formatDate(date))
+        setIsOpen(false)
+        if (onChange) {
+          onChange(date)
+        }
       }
     }
   }
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isRange) return // Only for single date mode
+
     const input = e.target
     const newValue = e.target.value
     const selectionStart = input.selectionStart || 0
@@ -103,6 +156,117 @@ const DateField: React.FC<DateFieldProps> = ({
     }, 0)
   }
 
+  // Range mode handlers
+  const handleStartDateChange = (date: Date | null) => {
+    if (isRange && date) {
+      const newRange = { ...dateRange, start: date }
+      setDateRange(newRange)
+      setStartDateInputValue(formatDate(date))
+      setIsStartDateOpen(false)
+      if (onChange) {
+        onChange(newRange)
+      }
+    }
+  }
+
+  const handleEndDateChange = (date: Date | null) => {
+    if (isRange && date) {
+      const newRange = { ...dateRange, end: date }
+      setDateRange(newRange)
+      setEndDateInputValue(formatDate(date))
+      setIsEndDateOpen(false)
+      if (onChange) {
+        onChange(newRange)
+      }
+    }
+  }
+
+  const handleStartDateInputChange = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (!isRange) return
+
+    const input = e.target
+    const newValue = e.target.value
+    const selectionStart = input.selectionStart || 0
+
+    setStartDateInputValue(newValue)
+
+    const parts = newValue.split('/')
+    if (parts.length === 3) {
+      const month = parseInt(parts[0], 10)
+      const day = parseInt(parts[1], 10)
+      const year = parseInt(parts[2], 10)
+
+      if (!isNaN(month) && !isNaN(day) && !isNaN(year)) {
+        const newDate = new Date(year, month - 1, day)
+        if (
+          newDate.getMonth() === month - 1 &&
+          newDate.getDate() === day &&
+          newDate.getFullYear() === year
+        ) {
+          const newRange = { ...dateRange, start: newDate }
+          setDateRange(newRange)
+          if (onChange) {
+            onChange(newRange)
+          }
+        }
+      }
+    }
+
+    setTimeout(() => {
+      if (selectionStart <= 2) {
+        input.setSelectionRange(selectionStart, selectionStart)
+      } else if (selectionStart <= 5) {
+        input.setSelectionRange(selectionStart, selectionStart)
+      } else {
+        input.setSelectionRange(selectionStart, selectionStart)
+      }
+    }, 0)
+  }
+
+  const handleEndDateInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!isRange) return
+
+    const input = e.target
+    const newValue = e.target.value
+    const selectionStart = input.selectionStart || 0
+
+    setEndDateInputValue(newValue)
+
+    const parts = newValue.split('/')
+    if (parts.length === 3) {
+      const month = parseInt(parts[0], 10)
+      const day = parseInt(parts[1], 10)
+      const year = parseInt(parts[2], 10)
+
+      if (!isNaN(month) && !isNaN(day) && !isNaN(year)) {
+        const newDate = new Date(year, month - 1, day)
+        if (
+          newDate.getMonth() === month - 1 &&
+          newDate.getDate() === day &&
+          newDate.getFullYear() === year
+        ) {
+          const newRange = { ...dateRange, end: newDate }
+          setDateRange(newRange)
+          if (onChange) {
+            onChange(newRange)
+          }
+        }
+      }
+    }
+
+    setTimeout(() => {
+      if (selectionStart <= 2) {
+        input.setSelectionRange(selectionStart, selectionStart)
+      } else if (selectionStart <= 5) {
+        input.setSelectionRange(selectionStart, selectionStart)
+      } else {
+        input.setSelectionRange(selectionStart, selectionStart)
+      }
+    }, 0)
+  }
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const input = e.currentTarget
     const selectionStart = input.selectionStart || 0
@@ -118,7 +282,120 @@ const DateField: React.FC<DateFieldProps> = ({
 
     if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
       e.preventDefault()
-      const newDate = new Date(selectedDate)
+
+      if (!isRange) {
+        // Single date mode
+        const newDate = new Date(selectedDate || new Date())
+        const increment = e.key === 'ArrowUp' ? 1 : -1
+
+        switch (selectedPart) {
+          case 'month':
+            newDate.setMonth(newDate.getMonth() + increment)
+            break
+          case 'day':
+            newDate.setDate(newDate.getDate() + increment)
+            break
+          case 'year':
+            newDate.setFullYear(newDate.getFullYear() + increment)
+            break
+        }
+
+        setSelectedDate(newDate)
+        setInputValue(formatDate(newDate))
+        if (onChange) {
+          onChange(newDate)
+        }
+      }
+
+      setTimeout(() => {
+        switch (selectedPart) {
+          case 'month':
+            input.setSelectionRange(0, 2)
+            break
+          case 'day':
+            input.setSelectionRange(3, 5)
+            break
+          case 'year':
+            input.setSelectionRange(6, 10)
+            break
+        }
+      }, 0)
+    }
+  }
+
+  const handleStartDateKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!isRange) return
+
+    const input = e.currentTarget
+    const selectionStart = input.selectionStart || 0
+
+    let selectedPart: 'month' | 'day' | 'year'
+    if (selectionStart <= 2) {
+      selectedPart = 'month'
+    } else if (selectionStart <= 5) {
+      selectedPart = 'day'
+    } else {
+      selectedPart = 'year'
+    }
+
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      const newDate = new Date(dateRange.start || new Date())
+      const increment = e.key === 'ArrowUp' ? 1 : -1
+
+      switch (selectedPart) {
+        case 'month':
+          newDate.setMonth(newDate.getMonth() + increment)
+          break
+        case 'day':
+          newDate.setDate(newDate.getDate() + increment)
+          break
+        case 'year':
+          newDate.setFullYear(newDate.getFullYear() + increment)
+          break
+      }
+
+      const newRange = { ...dateRange, start: newDate }
+      setDateRange(newRange)
+      setStartDateInputValue(formatDate(newDate))
+      if (onChange) {
+        onChange(newRange)
+      }
+
+      setTimeout(() => {
+        switch (selectedPart) {
+          case 'month':
+            input.setSelectionRange(0, 2)
+            break
+          case 'day':
+            input.setSelectionRange(3, 5)
+            break
+          case 'year':
+            input.setSelectionRange(6, 10)
+            break
+        }
+      }, 0)
+    }
+  }
+
+  const handleEndDateKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!isRange) return
+
+    const input = e.currentTarget
+    const selectionStart = input.selectionStart || 0
+
+    let selectedPart: 'month' | 'day' | 'year'
+    if (selectionStart <= 2) {
+      selectedPart = 'month'
+    } else if (selectionStart <= 5) {
+      selectedPart = 'day'
+    } else {
+      selectedPart = 'year'
+    }
+
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      const newDate = new Date(dateRange.end || new Date())
       const increment = e.key === 'ArrowUp' ? 1 : -1
 
       switch (selectedPart) {
@@ -133,10 +410,11 @@ const DateField: React.FC<DateFieldProps> = ({
           break
       }
 
-      setSelectedDate(newDate)
-      setInputValue(formatDate(newDate))
+      const newRange = { ...dateRange, end: newDate }
+      setDateRange(newRange)
+      setEndDateInputValue(formatDate(newDate))
       if (onChange) {
-        onChange(newDate)
+        onChange(newRange)
       }
 
       setTimeout(() => {
@@ -170,7 +448,23 @@ const DateField: React.FC<DateFieldProps> = ({
 
   const handleIconClick = (e: React.MouseEvent) => {
     e.stopPropagation()
-    setIsOpen(true)
+    if (!isRange) {
+      setIsOpen(true)
+    }
+  }
+
+  const handleStartIconClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (isRange) {
+      setIsStartDateOpen(true)
+    }
+  }
+
+  const handleEndIconClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (isRange) {
+      setIsEndDateOpen(true)
+    }
   }
 
   const calendarIcon = (
@@ -187,6 +481,94 @@ const DateField: React.FC<DateFieldProps> = ({
     />
   )
 
+  const startCalendarIcon = (
+    <CalendarTodayIcon
+      onClick={handleStartIconClick}
+      sx={{
+        cursor: 'pointer',
+        '&:hover': {
+          opacity: 0.8,
+        },
+        fontSize: '20px',
+        color: 'black',
+      }}
+    />
+  )
+
+  const endCalendarIcon = (
+    <CalendarTodayIcon
+      onClick={handleEndIconClick}
+      sx={{
+        cursor: 'pointer',
+        '&:hover': {
+          opacity: 0.8,
+        },
+        fontSize: '20px',
+        color: 'black',
+      }}
+    />
+  )
+
+  if (isRange) {
+    return (
+      <Box sx={{ display: 'flex', flexDirection: 'row', gap: 2 }}>
+        <Box sx={{ flex: 1 }}>
+          <TextField
+            label={startLabel}
+            value={startDateInputValue}
+            onChange={handleStartDateInputChange}
+            endAdornment={startCalendarIcon}
+            slotProps={{
+              input: {
+                readOnly: false,
+                style: { cursor: 'text', height: '40px' },
+                onKeyDown: handleStartDateKeyDown,
+                onClick: handleClick,
+              },
+            }}
+            {...rest}
+          />
+          <DatePicker
+            selected={dateRange.start ?? undefined}
+            onChange={handleStartDateChange}
+            dateFormat="MM/dd/yyyy"
+            customInput={<CustomInput />}
+            open={isStartDateOpen}
+            onClickOutside={() => setIsStartDateOpen(false)}
+            shouldCloseOnSelect
+          />
+        </Box>
+        <Box sx={{ flex: 1 }}>
+          <TextField
+            label={endLabel}
+            value={endDateInputValue}
+            onChange={handleEndDateInputChange}
+            endAdornment={endCalendarIcon}
+            slotProps={{
+              input: {
+                readOnly: false,
+                style: { cursor: 'text', height: '40px' },
+                onKeyDown: handleEndDateKeyDown,
+                onClick: handleClick,
+              },
+            }}
+            {...rest}
+          />
+          <DatePicker
+            selected={dateRange.end ?? undefined}
+            onChange={handleEndDateChange}
+            dateFormat="MM/dd/yyyy"
+            customInput={<CustomInput />}
+            open={isEndDateOpen}
+            onClickOutside={() => setIsEndDateOpen(false)}
+            shouldCloseOnSelect
+            minDate={dateRange.start ?? undefined}
+          />
+        </Box>
+      </Box>
+    )
+  }
+
   return (
     <>
       <TextField
@@ -205,7 +587,7 @@ const DateField: React.FC<DateFieldProps> = ({
         {...rest}
       />
       <DatePicker
-        selected={selectedDate}
+        selected={selectedDate ?? undefined}
         onChange={handleChange}
         dateFormat="MM/dd/yyyy"
         customInput={<CustomInput />}

package/src/components/Field/Text/index.tsx

@@ -16,6 +16,9 @@ export type TextFieldProps = (
   | OutlinedTextFieldProps
   | FilledTextFieldProps
 ) & {
+  /** element rendered on the left side of the input */
+  startAdornment?: React.ReactNode
+  /** element rendered on the right side of the input */
   endAdornment?: React.ReactNode
   value?: string | number | readonly string[] | undefined
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
@@ -89,7 +92,7 @@ const StyledMuiTextField = styled(MuiTextField, {
   }) => ({
     '& .MuiOutlinedInput-root': {
       minHeight: '40px',
-      height: 'auto', // allow vertical expansion
+      height: 'auto',
       backgroundColor: backgroundcolor || 'inherit',
       color: fontcolor || 'black',
       '& .MuiSelect-icon': {
@@ -100,9 +103,7 @@ const StyledMuiTextField = styled(MuiTextField, {
           outlinecolor ||
           (hasvalue === 'true' ? 'black' : 'rgba(0, 0, 0, 0.23)'),
         ...(shrunklabelposition === 'aboveNotch' && {
-          legend: {
-            width: '0px !important',
-          },
+          legend: { width: '0px !important' },
         }),
       },
       '&:hover fieldset': {
@@ -125,9 +126,7 @@ const StyledMuiTextField = styled(MuiTextField, {
     },
     '& .MuiInputLabel-root': {
       color: unshrunkfontcolor || 'black',
-      '&.Mui-focused': {
-        color: shrunkfontcolor || 'black',
-      },
+      '&.Mui-focused': { color: shrunkfontcolor || 'black' },
       '&.MuiInputLabel-shrink': {
         color: shrunkfontcolor || 'black',
         ...(shrunklabelposition === 'aboveNotch' && {
@@ -157,6 +156,7 @@ const TextField = React.memo<TextFieldProps>(props => {
     error,
     disabled,
     sx,
+    startAdornment,
     endAdornment,
     textAlign = 'left',
     slotProps: customSlotProps = {},
@@ -183,29 +183,15 @@ const TextField = React.memo<TextFieldProps>(props => {
   )
 
   const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (onChange) {
-        onChange(e)
-      }
-    },
+    (e: React.ChangeEvent<HTMLInputElement>) => onChange?.(e),
     [onChange]
   )
-
   const handleFocus = useCallback(
-    (e: React.FocusEvent<HTMLInputElement>) => {
-      if (onFocus) {
-        onFocus(e)
-      }
-    },
+    (e: React.FocusEvent<HTMLInputElement>) => onFocus?.(e),
     [onFocus]
   )
-
   const handleBlur = useCallback(
-    (e: React.FocusEvent<HTMLInputElement>) => {
-      if (onBlur) {
-        onBlur(e)
-      }
-    },
+    (e: React.FocusEvent<HTMLInputElement>) => onBlur?.(e),
     [onBlur]
   )
 
@@ -214,31 +200,36 @@ const TextField = React.memo<TextFieldProps>(props => {
   }, [])
 
   const mergedSlotProps = useMemo(() => {
+    const adornmentSx = {
+      color: '#000000 !important',
+      '& svg': {
+        color: '#000000 !important',
+        fill: '#000000 !important',
+        stroke: '#000000 !important',
+      },
+    }
+
     const defaultSlotProps = {
       input: {
         style: inputStyle,
-        endAdornment: endAdornment ? (
-          <InputAdornment
-            position="end"
-            sx={{
-              color: '#000000 !important',
-              '& svg': {
-                color: '#000000 !important',
-                fill: '#000000 !important',
-                stroke: '#000000 !important',
-              },
-            }}
-          >
-            {endAdornment}
-          </InputAdornment>
-        ) : undefined,
+        ...(startAdornment && {
+          startAdornment: (
+            <InputAdornment position="start" sx={adornmentSx}>
+              {startAdornment}
+            </InputAdornment>
+          ),
+        }),
+        ...(endAdornment && {
+          endAdornment: (
+            <InputAdornment position="end" sx={adornmentSx}>
+              {endAdornment}
+            </InputAdornment>
+          ),
+        }),
       },
       inputLabel: {
         sx: {
-          '&.MuiInputLabel-shrink': {
-            top: '0px',
-            left: '0px',
-          },
+          '&.MuiInputLabel-shrink': { top: '0px', left: '0px' },
           '&:not(.MuiInputLabel-shrink)': {
             transform: 'scale(1)',
             transformOrigin: 'top left',
@@ -260,7 +251,7 @@ const TextField = React.memo<TextFieldProps>(props => {
         ...(customSlotProps.inputLabel || {}),
       },
     }
-  }, [inputStyle, endAdornment, customSlotProps])
+  }, [inputStyle, startAdornment, endAdornment, customSlotProps])
 
   const hasValue = Boolean(value?.toString().length).toString()
 
@@ -269,11 +260,11 @@ const TextField = React.memo<TextFieldProps>(props => {
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: 'flex-start', // top-aligned so errors appear below
+        justifyContent: 'flex-start',
         width: '100%',
         marginTop: '15px',
-        height: 'auto', // allow expansion
-        overflow: 'visible', // ensure error messages are visible
+        height: 'auto',
+        overflow: 'visible',
         ...sx,
       }}
       onClick={handleClick}
@@ -308,5 +299,4 @@ const TextField = React.memo<TextFieldProps>(props => {
 })
 
 TextField.displayName = 'TextField'
-
 export default TextField

package/src/components/ProjectBoard/forms/ShowTask/client.tsx

@@ -191,7 +191,7 @@ const ShowTask: React.FC<ShowTaskProps> = ({
     teamMemberAssigned,
     nextActionDate,
   })
-  // 5) For editing an individual comment’s text
+  // 5) For editing an individual comment's text
   const [editingCommentId, setEditingCommentId] = useState<string | null>(null)
   const [editingCommentText, setEditingCommentText] = useState('')
   // 6) For selecting revisions for each comment
@@ -248,7 +248,7 @@ const ShowTask: React.FC<ShowTaskProps> = ({
     setNewComment('')
   }
 
-  /** Begin editing a comment’s text */
+  /** Begin editing a comment's text */
   const startEditingComment = (commentId: string, currentText: string) => {
     setEditingCommentId(commentId)
     setEditingCommentText(currentText)
@@ -1050,7 +1050,14 @@ const ShowTask: React.FC<ShowTaskProps> = ({
                     label="Next Action Date"
                     value={safeParseDate(formData.nextActionDate)}
                     onChange={date => {
-                      if (date) {
+                      // Check if date is a DateRange or a Date
+                      if (date && 'start' in date) {
+                        // It's a DateRange, but we're not using range mode
+                        return
+                      }
+
+                      // Handle Date type
+                      if (date instanceof Date) {
                         const mm = String(date.getMonth() + 1).padStart(2, '0')
                         const dd = String(date.getDate()).padStart(2, '0')
                         const yyyy = date.getFullYear()

package/src/index.ts

@@ -71,6 +71,10 @@ import AccountNumber, {
 import RoutingNumber, {
   RoutingNumberProps,
 } from './components/Field/Number/RoutingNumber'
+import PercentageField, {
+  PercentageFieldProps,
+} from './components/Field/Percentage'
+import { DateRange } from './components/Field/Date'
 
 // Add FormDataGrid import
 import FormDataGrid from './components/Form/DataGrid'
@@ -207,11 +211,14 @@ export type { MACAddressFieldProps }
 export type { VLANFieldProps }
 // NEW: Export AddTask / ShowTask / ManageTask
 export { ShowTask }
+export { PercentageField }
+
 export type { Task }
 export type { RawCustomer }
 export type { CheckboxProps }
 export type { AccountNumberProps }
 export type { RoutingNumberProps }
+export type { PercentageFieldProps }
 /* -------------------------------------------------------------------------- */
 /*                           Named Type Exports                               */
 /* -------------------------------------------------------------------------- */
@@ -223,6 +230,7 @@ export { RoutingNumber }
 export type { FormDataGridProps }
 export type { CustomDialogProps }
 
+export type { DateRange }
 // 2) All DataGrid Types
 export type { DatagridProps }
 export type { ColumnDef, RowData }