goobs-frontend 0.9.14 → 0.9.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.14",
+  "version": "0.9.16",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",

package/src/components/Checkbox/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { Checkbox } from '@mui/material'
+import { Checkbox, styled } from '@mui/material'
 import React from 'react'
 import * as palette from '../../styles/palette'
 
@@ -12,6 +12,40 @@ export interface CheckboxProps {
   disabled?: boolean
 }
 
+// Create a styled version of MUI Checkbox with our custom styles
+const StyledCheckbox = styled(Checkbox)(() => ({
+  padding: '8px',
+  '& .MuiSvgIcon-root': {
+    fontSize: '24px',
+  },
+  // Style for unchecked state
+  '&:not(.Mui-checked):not(.Mui-indeterminate):not(.Mui-disabled)': {
+    '& .MuiSvgIcon-root': {
+      color: 'transparent',
+      // Add a visible background to make it obvious it's a checkbox
+      backgroundColor: palette.grey.light,
+      border: `2px solid ${palette.marine.main}`,
+      borderRadius: '3px',
+    },
+  },
+  '&.Mui-checked .MuiSvgIcon-root': {
+    color: palette.marine.main,
+    border: 'none',
+  },
+  '&.Mui-indeterminate .MuiSvgIcon-root': {
+    color: palette.marine.main,
+    border: 'none',
+  },
+  '&.Mui-disabled .MuiSvgIcon-root': {
+    color: palette.grey.main,
+    border: `2px solid ${palette.grey.main}`,
+    borderRadius: '3px',
+  },
+  '&:hover': {
+    backgroundColor: `${palette.marine.light}33`,
+  },
+}))
+
 function CustomCheckbox({
   onClick,
   checked,
@@ -35,28 +69,13 @@ function CustomCheckbox({
   }
 
   return (
-    <Checkbox
-      sx={{
-        color: palette.marine.main,
-        '&.Mui-checked': {
-          color: palette.marine.main,
-        },
-        '&.Mui-indeterminate': {
-          color: palette.marine.main,
-        },
-        '&.Mui-disabled': {
-          color: palette.grey.main,
-        },
-        '&:hover': {
-          backgroundColor: palette.marine.light,
-          opacity: 0.1,
-        },
-      }}
+    <StyledCheckbox
       checked={checked}
       indeterminate={indeterminate}
       onClick={handleClick}
       onChange={handleChange}
       disabled={disabled}
+      disableRipple
       {...props}
     />
   )

package/src/components/ConfirmationCodeInput/index.tsx

@@ -1,8 +1,7 @@
 'use client'
-import React, { ChangeEvent, useState, useEffect, FC } from 'react'
-import { Box, Typography } from '@mui/material'
+import React, { useState, useEffect, FC, useRef } from 'react'
+import { Box, Typography, styled } from '@mui/material'
 import { CheckCircleOutline } from '@mui/icons-material'
-import { red, grey } from '../../styles/palette'
 import CustomButton, { CustomButtonProps } from '../Button'
 
 export interface ConfirmationCodeInputsProps {
@@ -47,8 +46,31 @@ export interface ConfirmationCodeInputsProps {
 
   /** Whether to show the success state UI */
   showSuccessState?: boolean
+
+  /** Custom styling for the input fields */
+  inputStyle?: React.CSSProperties
 }
 
+// Custom styled input for verification code digits
+const CodeInput = styled('input')(() => ({
+  width: '40px',
+  height: '50px',
+  padding: '0',
+  textAlign: 'center',
+  fontSize: '16px',
+  fontWeight: 'normal',
+  color: 'black',
+  backgroundColor: 'white',
+  border: '1px solid black',
+  borderRadius: '4px',
+  outline: 'none',
+  // The cursor is visible (not hiding with caretColor)
+  '&:focus': {
+    borderColor: 'black',
+    borderWidth: '2px',
+  },
+}))
+
 const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
   codeLength = 6,
   isValid,
@@ -68,40 +90,190 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
   showSendResendButton = true,
   successMessage = 'Verification Successful',
   showSuccessState = false,
-  ...props
+  inputStyle = {},
 }) => {
   // Initialize internal state with the value prop
   const [internalValue, setInternalValue] = useState(value)
-  const [isFocused, setIsFocused] = useState(false)
-  const [cursorPosition, setCursorPosition] = useState(value.length)
-  const inputRef = React.useRef<HTMLInputElement>(null)
+  const inputRefs = useRef<(HTMLInputElement | null)[]>([])
+
+  // Initialize refs array
+  useEffect(() => {
+    inputRefs.current = Array(codeLength).fill(
+      null
+    ) as (HTMLInputElement | null)[]
+  }, [codeLength])
 
   // Update internal state when value prop changes
   useEffect(() => {
     if (internalValue !== value) {
       setInternalValue(value)
-      setCursorPosition(value.length)
     }
   }, [value, internalValue])
 
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    // Only allow digits and limit to codeLength
-    const newValue = event.target.value.replace(/\D/g, '').slice(0, codeLength)
+  // Auto-focus first input field when component mounts
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (inputRefs.current[0] && internalValue.length === 0) {
+        inputRefs.current[0].focus()
+      }
+    }, 100)
+    return () => clearTimeout(timer)
+  }, [internalValue.length])
 
-    if (internalValue !== newValue) {
-      setInternalValue(newValue)
-      setCursorPosition(event.target.selectionStart || newValue.length)
-      onChange?.(newValue)
+  // Handle input change for a specific digit
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const target = e.target
+    const val = target.value
+
+    // Only accept numbers
+    if (!/^\d*$/.test(val)) {
+      return
+    }
+
+    // Create a copy of the current value as an array of characters
+    let newValueArr = internalValue.padEnd(codeLength, '').split('')
+
+    // If input has multiple characters (from paste), process them
+    if (val.length > 1) {
+      const digits = val.split('')
+      for (let i = 0; i < digits.length; i++) {
+        if (index + i < codeLength) {
+          newValueArr[index + i] = digits[i]
+        }
+      }
+    } else {
+      // Only replace the single character at the index
+      newValueArr[index] = val.charAt(val.length - 1)
+    }
+
+    // Convert back to string and remove trailing spaces
+    const newValue = newValueArr.join('').trimEnd()
+
+    // Update internal state and call onChange
+    setInternalValue(newValue)
+    onChange?.(newValue)
+
+    // Move focus to next input if we have a value and there's a next input
+    if (val && index < codeLength - 1) {
+      inputRefs.current[index + 1]?.focus()
     }
   }
 
-  const handleSelect = () => {
-    if (inputRef.current) {
-      setCursorPosition(inputRef.current.selectionStart || internalValue.length)
+  // Handle key down events for navigation
+  const handleKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const target = e.target as HTMLInputElement
+
+    switch (e.key) {
+      case 'Backspace': {
+        if (target.value === '') {
+          // If current field is empty and not the first field, move to previous field
+          if (index > 0) {
+            e.preventDefault()
+            inputRefs.current[index - 1]?.focus()
+
+            // Also clear the previous field if needed
+            const newValueArr = internalValue.split('')
+            newValueArr[index - 1] = ''
+            const newValue = newValueArr.join('').trimEnd()
+            setInternalValue(newValue)
+            onChange?.(newValue)
+          }
+        } else {
+          // Clear current field but don't move
+          const newValueArr = internalValue.split('')
+          newValueArr[index] = ''
+          const newValue = newValueArr.join('').trimEnd()
+          setInternalValue(newValue)
+          onChange?.(newValue)
+        }
+        break
+      }
+
+      case 'Delete': {
+        // Clear current field
+        const newValueArr = internalValue.split('')
+        newValueArr[index] = ''
+        const newValue = newValueArr.join('').trimEnd()
+        setInternalValue(newValue)
+        onChange?.(newValue)
+        break
+      }
+
+      case 'ArrowLeft':
+        // Move to previous input if exists
+        if (index > 0) {
+          e.preventDefault()
+          inputRefs.current[index - 1]?.focus()
+        }
+        break
+
+      case 'ArrowRight':
+        // Move to next input if exists
+        if (index < codeLength - 1) {
+          e.preventDefault()
+          inputRefs.current[index + 1]?.focus()
+        }
+        break
+
+      default: {
+        // For number keys, handle them directly
+        if (/^\d$/.test(e.key)) {
+          e.preventDefault()
+
+          // Update the value at this index
+          const newValueArr = internalValue.padEnd(codeLength, '').split('')
+          newValueArr[index] = e.key
+          const newValue = newValueArr.join('').trimEnd()
+
+          setInternalValue(newValue)
+          onChange?.(newValue)
+
+          // Move to next input if there's one
+          if (index < codeLength - 1) {
+            inputRefs.current[index + 1]?.focus()
+          }
+        }
+        break
+      }
     }
   }
 
-  // Calculate container width based on number of inputs
+  // Handle paste event to distribute digits across inputs
+  const handlePaste = (
+    e: React.ClipboardEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    e.preventDefault()
+    const pastedData = e.clipboardData.getData('text')
+    const digits = pastedData.replace(/\D/g, '').slice(0, codeLength - index)
+
+    if (digits) {
+      // Update the value from the current index onwards
+      const newValueArr = internalValue.padEnd(codeLength, '').split('')
+
+      for (let i = 0; i < digits.length; i++) {
+        if (index + i < codeLength) {
+          newValueArr[index + i] = digits[i]
+        }
+      }
+
+      const newValue = newValueArr.join('').trimEnd()
+      setInternalValue(newValue)
+      onChange?.(newValue)
+
+      // Focus the input after the last pasted digit or the last input
+      const focusIndex = Math.min(index + digits.length, codeLength - 1)
+      inputRefs.current[focusIndex]?.focus()
+    }
+  }
+
+  // Calculate container width based on number of inputs and spacing
   const inputAreaWidth = codeLength * 40 + (codeLength - 1) * 8 + 44
 
   // Calculate button container width
@@ -110,8 +282,8 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
     ? Math.max(inputAreaWidth, minButtonWidth * 2 + 16)
     : Math.max(inputAreaWidth, minButtonWidth)
 
-  // Split the value into individual digits for display
-  const digits = internalValue.padEnd(codeLength, ' ').split('')
+  // Split the value into individual digits
+  const digits = internalValue.padEnd(codeLength, '').split('')
 
   // Check if all code fields are filled
   const allFieldsFilled = internalValue.length >= codeLength
@@ -149,6 +321,17 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
     )
   }
 
+  const statusIndicator = (
+    <Box
+      width={20}
+      height={20}
+      borderRadius="50%"
+      bgcolor={isValid ? 'green' : 'red'}
+      role="status"
+      aria-label={isValid ? 'Code is valid' : 'Code is invalid'}
+    />
+  )
+
   return (
     <Box
       display="flex"
@@ -166,111 +349,33 @@ const ConfirmationCodeInputs: FC<ConfirmationCodeInputsProps> = ({
         position="relative"
         marginBottom={2}
       >
-        <Box
-          display="flex"
-          gap={1}
-          sx={{
-            position: 'relative',
-            width: '100%',
-          }}
-        >
-          {/* Hidden input for actual value */}
-          <input
-            ref={inputRef}
-            type="text"
-            inputMode="numeric"
-            pattern="[0-9]*"
-            value={internalValue}
-            onChange={handleChange}
-            onFocus={() => setIsFocused(true)}
-            onBlur={() => setIsFocused(false)}
-            onSelect={handleSelect}
-            onKeyUp={handleSelect}
-            onMouseUp={handleSelect}
-            aria-label={ariaLabel || 'Confirmation Code'}
-            aria-required={ariaRequired}
-            aria-invalid={ariaInvalid}
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              width: '100%',
-              height: '50px',
-              opacity: 0,
-              cursor: 'text',
-              fontSize: '16px',
-              letterSpacing: '39px',
-              paddingLeft: '15px',
-              zIndex: 1,
-            }}
-            {...props}
-          />
-
-          {/* Visual segments */}
-          {digits.map((digit, index) => (
-            <Box
-              key={index}
-              sx={{
-                border: '1px solid black',
-                borderRadius: 1,
-                width: 40,
-                height: 50,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                color: 'black',
-                backgroundColor: 'white',
-                fontSize: '16px',
-                userSelect: 'none',
-                pointerEvents: 'none',
-                position: 'relative',
-                '&::after':
-                  isFocused && index === cursorPosition
-                    ? {
-                        content: '""',
-                        position: 'absolute',
-                        right:
-                          index === cursorPosition && cursorPosition > 0
-                            ? '0'
-                            : 'auto',
-                        left:
-                          index === cursorPosition && cursorPosition === 0
-                            ? '0'
-                            : 'auto',
-                        transform: 'none',
-                        top: '15%',
-                        height: '70%',
-                        width: '1px',
-                        backgroundColor: 'black',
-                        animation: 'blink 1s step-end infinite',
-                      }
-                    : {},
-                '@keyframes blink': {
-                  'from, to': {
-                    opacity: 1,
-                  },
-                  '50%': {
-                    opacity: 0,
-                  },
-                },
-              }}
-            >
-              {digit.trim()}
-            </Box>
-          ))}
+        <Box display="flex" alignItems="center" width="100%">
+          <Box display="flex" gap={1} width="100%">
+            {Array.from({ length: codeLength }).map((_, index) => (
+              <CodeInput
+                key={index}
+                ref={el => {
+                  inputRefs.current[index] = el
+                }}
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                maxLength={1}
+                value={digits[index] || ''}
+                onChange={e => handleInputChange(e, index)}
+                onKeyDown={e => handleKeyDown(e, index)}
+                onPaste={e => handlePaste(e, index)}
+                aria-label={`${ariaLabel || 'Confirmation Code'} digit ${index + 1}`}
+                aria-required={ariaRequired}
+                aria-invalid={ariaInvalid}
+                style={{
+                  ...inputStyle,
+                }}
+              />
+            ))}
+          </Box>
+          <Box ml={2}>{statusIndicator}</Box>
         </Box>
-
-        <Box
-          width={20}
-          height={20}
-          borderRadius="50%"
-          bgcolor={isValid ? grey.main : red.main}
-          position="static"
-          role="status"
-          aria-label={isValid ? 'Code is valid' : 'Code is invalid'}
-          alignSelf="center"
-          marginRight={2}
-        />
       </Box>
 
       {showActionButtons && (

package/src/components/QRCode/index.tsx

@@ -4,6 +4,11 @@ import { Box, Paper } from '@mui/material'
 import { SxProps } from '@mui/system'
 import { authenticator } from 'otplib'
 import Typography from '../Typography'
+import CustomButton, { CustomButtonProps } from '../Button'
+import { CheckCircleOutline } from '@mui/icons-material'
+import ConfirmationCodeInputs, {
+  ConfirmationCodeInputsProps,
+} from '../ConfirmationCodeInput'
 
 /**
  * Props for the QRCodeComponent
@@ -14,6 +19,18 @@ import Typography from '../Typography'
  * @property {string} [title] - An optional title to display above the QR code
  * @property {SxProps} [sx] - Custom styles to apply to the component
  * @property {(secret: string) => void} [onSecretGenerated] - Callback function to receive the generated secret
+ * @property {boolean} [showVerifyButton] - Whether to show the verify button
+ * @property {() => void | Promise<void>} [onVerify] - Callback function for when the Verify button is clicked
+ * @property {() => void | Promise<void>} [onDisableVerification] - Required callback function for when verification is disabled
+ * @property {Partial<CustomButtonProps>} [verifyButtonProps] - Custom props for the Verify button
+ * @property {Partial<CustomButtonProps>} [disableVerificationButtonProps] - Custom props for the Disable Verification button
+ * @property {boolean} [showSuccessState] - Whether to show the success state UI
+ * @property {string} [successMessage] - Custom success message to display
+ * @property {boolean} [showConfirmationInput] - Whether to show the confirmation code input
+ * @property {string} [confirmationCode] - The current confirmation code value
+ * @property {(value: string) => void} [onConfirmationCodeChange] - Callback for when confirmation code changes
+ * @property {ConfirmationCodeInputsProps} [confirmationCodeProps] - Custom props for the confirmation code input
+ * @property {boolean} [showDisableConfirmation] - Whether to show the disable confirmation state
  */
 export interface QRCodeProps {
   username: string
@@ -22,6 +39,18 @@ export interface QRCodeProps {
   title?: string
   sx?: SxProps
   onSecretGenerated?: (secret: string) => void
+  showVerifyButton?: boolean
+  onVerify?: () => void | Promise<void>
+  onDisableVerification?: () => void | Promise<void>
+  verifyButtonProps?: Partial<CustomButtonProps>
+  disableVerificationButtonProps?: Partial<CustomButtonProps>
+  showSuccessState?: boolean
+  successMessage?: string
+  showConfirmationInput?: boolean
+  confirmationCode?: string
+  onConfirmationCodeChange?: (value: string) => void
+  confirmationCodeProps?: Partial<ConfirmationCodeInputsProps>
+  showDisableConfirmation?: boolean
 }
 
 /**
@@ -37,6 +66,18 @@ const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
     title,
     sx,
     onSecretGenerated,
+    showVerifyButton = false,
+    onVerify,
+    onDisableVerification,
+    verifyButtonProps = {},
+    disableVerificationButtonProps = {},
+    showSuccessState = false,
+    successMessage = 'Verification Successful',
+    showConfirmationInput = false,
+    confirmationCode = '',
+    onConfirmationCodeChange,
+    confirmationCodeProps = {},
+    showDisableConfirmation = false,
   }) => {
     // Generate the secret and OTP auth URL
     const { secret, otpAuth } = useMemo(() => {
@@ -75,6 +116,128 @@ const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
       )
     }
 
+    // If showing success state, render the success UI
+    if (showSuccessState) {
+      return (
+        <Box
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          gap={2}
+          padding={3}
+          width="100%"
+        >
+          <CheckCircleOutline sx={{ fontSize: 60, color: 'green' }} />
+          <Typography
+            text={successMessage}
+            fontvariant="merrih5"
+            align="center"
+          />
+          <Box sx={{ display: 'flex', gap: 2, width: '100%' }}>
+            <CustomButton
+              text="Disable Verification"
+              fontcolor="white"
+              backgroundcolor="black"
+              width="100%"
+              height="40px"
+              variant="outlined"
+              {...disableVerificationButtonProps}
+              onClick={() => {
+                if (onDisableVerification) void onDisableVerification()
+              }}
+            />
+          </Box>
+        </Box>
+      )
+    }
+
+    // If showing disable confirmation state, render QR with confirmation input
+    if (showDisableConfirmation) {
+      return (
+        <Paper
+          elevation={3}
+          sx={{
+            p: 3,
+            display: 'inline-block',
+            maxWidth: '100%',
+            boxSizing: 'border-box',
+            ...sx,
+          }}
+        >
+          {title && (
+            <Typography
+              text={title}
+              fontvariant="merrih5"
+              align="center"
+              gutterBottom
+            />
+          )}
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              width: responsiveSize,
+              height: responsiveSize,
+              margin: 'auto',
+            }}
+          >
+            <QRCode
+              value={otpAuth}
+              size={responsiveSize}
+              style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
+              aria-label={`QR Code for ${title || 'MFA Setup'}`}
+              data-testid="mfa-qrcode"
+            />
+          </Box>
+          <Box sx={{ mt: 2, textAlign: 'center' }}>
+            <Typography
+              text={`${appName}: ${username}`}
+              fontvariant="merriparagraph"
+              align="center"
+            />
+          </Box>
+
+          <Box
+            sx={{
+              mt: 3,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: 2,
+            }}
+          >
+            <ConfirmationCodeInputs
+              isValid={false}
+              codeLength={6}
+              value={confirmationCode}
+              onChange={onConfirmationCodeChange}
+              showActionButtons={false}
+              onDisableVerification={() => {}}
+              {...confirmationCodeProps}
+            />
+
+            <CustomButton
+              text="Verify & Disable"
+              fontcolor="white"
+              backgroundcolor="black"
+              width="100%"
+              height="40px"
+              {...verifyButtonProps}
+              onClick={() => {
+                if (onVerify) void onVerify()
+              }}
+              disableButton={
+                verifyButtonProps?.disableButton ||
+                (confirmationCode.length < 6 ? 'true' : 'false')
+              }
+            />
+          </Box>
+        </Paper>
+      )
+    }
+
+    // Default QR code view with optional confirmation input and buttons
     return (
       <Paper
         elevation={3}
@@ -119,6 +282,44 @@ const QRCodeComponent: React.FC<QRCodeProps> = React.memo(
             align="center"
           />
         </Box>
+
+        {showConfirmationInput && (
+          <Box sx={{ mt: 3, display: 'flex', justifyContent: 'center' }}>
+            <ConfirmationCodeInputs
+              isValid={false}
+              codeLength={6}
+              value={confirmationCode}
+              onChange={onConfirmationCodeChange}
+              showActionButtons={false}
+              onDisableVerification={() => {}}
+              {...confirmationCodeProps}
+            />
+          </Box>
+        )}
+
+        {showVerifyButton && (
+          <Box
+            sx={{ mt: 3, display: 'flex', justifyContent: 'center', gap: 2 }}
+          >
+            <CustomButton
+              text="Verify Code"
+              fontcolor="white"
+              backgroundcolor="black"
+              width="100%"
+              height="40px"
+              {...verifyButtonProps}
+              onClick={() => {
+                if (onVerify) void onVerify()
+              }}
+              disableButton={
+                verifyButtonProps?.disableButton ||
+                (showConfirmationInput && confirmationCode.length < 6
+                  ? 'true'
+                  : 'false')
+              }
+            />
+          </Box>
+        )}
       </Paper>
     )
   }
@@ -148,8 +349,8 @@ export function verifyMFAToken(token: string, secret: string): boolean {
     // Configure authenticator options to match Microsoft Authenticator
     authenticator.options = {
       window: 1, // Allow codes from 1 step before and after
-      digits: 6, // Microsoft Authenticator uses 6-digit codes
       step: 30, // 30-second interval for code generation
+      digits: 6, // Microsoft Authenticator uses 6-digit codes
     }
 
     return authenticator.verify({ token, secret })

package/src/components/Typography/index.tsx

@@ -229,9 +229,6 @@ const Typography = ({
   if (typeof actualVariant === 'string' && actualVariant.length > 0) {
     // First, try to get the variant from the theme
     try {
-      // Log the actual variant being used
-      console.log('Using variant:', actualVariant)
-
       // Check if we're using a custom font variant (e.g., 'merrih2')
       if (/^(arapey|inter|merri)/.test(actualVariant)) {
         // For custom variants, we need to check if they exist in the theme
@@ -246,7 +243,6 @@ const Typography = ({
           const themeVariant = themeTypography[
             actualVariant
           ] as TypographyVariantStyle
-          console.log('Found theme variant:', themeVariant)
 
           if (themeVariant) {
             variantStyle = {
@@ -259,8 +255,6 @@ const Typography = ({
           }
         } else {
           // Custom variant not in theme, fallback to hardcoded styles
-          console.log('Custom variant not found in theme, using fallback')
-
           const fontFamily = actualVariant.startsWith('arapey')
             ? 'arapey'
             : actualVariant.startsWith('inter')

package/src/index.ts

@@ -45,6 +45,7 @@ import { RawSeverityLevel } from './components/ProjectBoard/types'
 // Here is the new horizontal `Tabs` import
 import Tabs, { TabsProps } from './components/Tabs'
 import { Task } from './components/ProjectBoard/types'
+import Checkbox, { CheckboxProps } from './components/Checkbox'
 
 // New imports
 import DateField, { DateFieldProps } from './components/Field/Date'
@@ -172,7 +173,7 @@ export { CompanyAddTaskCustomerDropdown }
 export { CompanyAddTaskCustomerProvided }
 export { CustomerAddTask }
 export { NoUserAddTask }
-
+export { Checkbox }
 // New named exports
 export { DateField }
 export { Dropdown }
@@ -195,6 +196,7 @@ export type { SearchableDropdownProps }
 export { ShowTask }
 export type { Task }
 export type { RawCustomer }
+export type { CheckboxProps }
 /* -------------------------------------------------------------------------- */
 /*                           Named Type Exports                               */
 /* -------------------------------------------------------------------------- */