@cerebruminc/cerebellum 16.1.1 → 16.2.0

package/lib/esm/validateColorContrast.js

@@ -0,0 +1,50 @@
+import { contrast } from './pressedEnter.js';
+
+/**
+ * Validates that a color has sufficient contrast against a background color
+ * according to WCAG AA accessibility standards (4.5:1 ratio for normal text).
+ *
+ * @param color - The foreground color (hex format, e.g., "#ff0000")
+ * @param backgroundColor - The background color to check against (hex format, defaults to "#ffffff")
+ * @returns boolean - true if the contrast ratio is >= 4.5:1, false otherwise
+ */
+var validateColorContrast = function (color, backgroundColor) {
+    if (backgroundColor === void 0) { backgroundColor = "#ffffff"; }
+    if (!color) {
+        return true; // Allow empty values, let required validation handle this
+    }
+    try {
+        var contrastRatio = contrast(color, backgroundColor);
+        // WCAG AA requires 4.5:1 for normal text, 3:1 for large text
+        // Using 4.5 as the threshold for accessibility compliance
+        return contrastRatio >= 4.5;
+    }
+    catch (error) {
+        // If there's an error in contrast calculation (invalid color format, etc.)
+        // return true to avoid blocking the form, let other validation handle format issues
+        return true;
+    }
+};
+/**
+ * Validates that a color has sufficient contrast against a background color
+ * and returns an error message if validation fails.
+ *
+ * @param color - The foreground color (hex format, e.g., "#ff0000")
+ * @param backgroundColor - The background color to check against (hex format, defaults to "#ffffff")
+ * @param errorMessage - Custom error message (optional)
+ * @returns string | null - Error message if validation fails, null if valid
+ */
+var validateColorContrastWithMessage = function (color, backgroundColor, errorMessage) {
+    if (backgroundColor === void 0) { backgroundColor = "#ffffff"; }
+    if (!color) {
+        return null; // Allow empty values, let required validation handle this
+    }
+    var isValid = validateColorContrast(color, backgroundColor);
+    if (!isValid) {
+        return errorMessage || "This color does not have sufficient contrast for accessibility";
+    }
+    return null;
+};
+
+export { validateColorContrast, validateColorContrastWithMessage };
+//# sourceMappingURL=validateColorContrast.js.map

package/lib/esm/validateColorContrast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateColorContrast.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/validateColorContrastWithMessage.js

@@ -0,0 +1,3 @@
+import './pressedEnter.js';
+export { validateColorContrast, validateColorContrastWithMessage } from './validateColorContrast.js';
+//# sourceMappingURL=validateColorContrastWithMessage.js.map

package/lib/esm/validateColorContrastWithMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateColorContrastWithMessage.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/lib/types/src/components/ColorPickerInput/ColorPickerInput.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { ColorPickerInputType } from "./types";
+export declare const ColorPickerInput: FC<ColorPickerInputType>;

package/lib/types/src/components/ColorPickerInput/InlineColorPickerInput.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { InlineColorPickerInputType } from "./types";
+export declare const InlineColorPickerInput: FC<InlineColorPickerInputType>;

package/lib/types/src/components/ColorPickerInput/index.d.ts

@@ -0,0 +1,3 @@
+export { ColorPickerInput } from "./ColorPickerInput";
+export { InlineColorPickerInput } from "./InlineColorPickerInput";
+export type { ColorPickerInputType, InlineColorPickerInputType, ThemeOverride, ColorPickerInputThemeOverride } from "./types";

package/lib/types/src/components/ColorPickerInput/types.d.ts

@@ -0,0 +1,48 @@
+import { ReactElement, ReactNode } from "react";
+import { InlineInputType } from "../InlineInput";
+export interface InlineColorPickerInputType extends Omit<InlineInputType, "activeColor" | "characterLimit" | "clearButton" | "failColor" | "failColorSecondary" | "inputMode" | "LeadingIcon" | "lookLikeAButton" | "numberArrows" | "onValueChange" | "placeholder" | "placeholderColor" | "required" | "step" | "textColor" | "TrailingIcon" | "trailingIconColor" | "trailingIconFunction" | "trailingText" | "type" | "value"> {
+    /** If true, checks if the color is legible against the background color */
+    checkLegible?: boolean;
+    /** The background color to check legibility against. Defaults to #ffffff (white) */
+    legibleAgainst?: string;
+    /** Called when the value is changed & returns the new value. Required if you want to update `value`. If not present, `InlineColorPickerInput` becomes a display only component */
+    onValueChange?: (value: string) => void;
+    /** You can override the theme by passing a `themeOverride` object. */
+    themeOverride?: ThemeOverride;
+    /** Input value - a hex color string (e.g., "#ff0000") */
+    value: string;
+}
+export interface ColorPickerInputType extends Omit<InlineColorPickerInputType, "themeOverride"> {
+    /** Descriptive text for your input. Keep it short & concise */
+    helperText?: string | ReactElement;
+    /** A label for your input. Not required, but strongly recommended. */
+    inputLabel?: ReactNode;
+    /** Instructional text, that goes between the label and the color picker. */
+    instructionalText?: string;
+    /** You can override the theme by passing a `themeOverride` object. */
+    themeOverride?: ColorPickerInputThemeOverride;
+    /** A message for when the input fails validation. Only displays if `showValidationMessage: true`  */
+    validationMessage?: string;
+}
+export interface ThemeOverride {
+    activeBackgroundColor?: string;
+    activeBorderColor?: string;
+    activeColor?: string;
+    disabledBorderColor?: string;
+    disabledColor?: string;
+    failColor?: string;
+    failColorSecondary?: string;
+    hoverBorderColor?: string;
+    inactiveBorderColor?: string;
+    inputBackgroundColor?: string;
+    inputBorderRadius?: number;
+    inputHeight?: number;
+    inputPadding?: number;
+}
+export interface ColorPickerInputThemeOverride extends ThemeOverride {
+    helperTextColor?: string;
+    instructionalTextColor?: string;
+    instructionalTextFontSize?: number;
+    labelColor?: string;
+    legibilityFontSize?: number;
+}

package/lib/types/src/components/Form/fields/ColorPickerField/ColorPickerField.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ColorPickerFieldProps } from "../../types";
+export declare const ColorPickerField: FC<ColorPickerFieldProps>;
+export default ColorPickerField;

package/lib/types/src/components/Form/fields/ColorPickerField/index.d.ts

@@ -0,0 +1 @@
+export { ColorPickerField } from "./ColorPickerField";

package/lib/types/src/components/Form/fields/index.d.ts

@@ -1,6 +1,7 @@
 import { AddressField } from "./AddressField/AddressField";
 import { CheckboxField } from "./CheckboxField/CheckboxField";
 import { CheckboxGroupField } from "./CheckboxGroupField/CheckboxGroupField";
+import { ColorPickerField } from "./ColorPickerField/ColorPickerField";
 import { ConfigurableInputField } from "./ConfigurableInputField/ConfigurableInputField";
 import { CountrySelectField } from "./CountrySelectField/CountrySelectField";
 import { CountySelectField } from "./CountySelectField/CountySelectField";
@@ -28,4 +29,4 @@ import { TextareaField } from "./TextareaField/TextareaField";
 import { ToggleField } from "./ToggleField/ToggleField";
 import { ToggleGroupField } from "./ToggleGroupField/ToggleGroupField";
 import { ZipCodeField } from "./ZipCodeField/ZipCodeField";
-export { AddressField, CheckboxField, CheckboxGroupField, ConfigurableInputField, CountySelectField, CountrySelectField, CreditCardField, CurrencyField, DatePickerField, DescriptiveDropdownInputField, EmailField, HiddenField, ImagePickerField, MultiSelectField, NationalitySelectField, NumberField, PasswordField, PhoneField, RadioGroupField, RemovableField, SectionHeader, SelectField, SocialSecurityField, SplitLineField, StateSelectField, TextField, TextareaField, ToggleField, ToggleGroupField, ZipCodeField, };
+export { AddressField, CheckboxField, CheckboxGroupField, ColorPickerField, ConfigurableInputField, CountySelectField, CountrySelectField, CreditCardField, CurrencyField, DatePickerField, DescriptiveDropdownInputField, EmailField, HiddenField, ImagePickerField, MultiSelectField, NationalitySelectField, NumberField, PasswordField, PhoneField, RadioGroupField, RemovableField, SectionHeader, SelectField, SocialSecurityField, SplitLineField, StateSelectField, TextField, TextareaField, ToggleField, ToggleGroupField, ZipCodeField, };

package/lib/types/src/components/Form/index.d.ts

@@ -1,5 +1,5 @@
 import { FormWrapper } from "./FormStyles";
 import { FormikContainer as Form } from "./FormikContainer";
-import { AddressOptionsType, CheckboxGroupOptionsType, CheckboxOptionsType, CountySelectOptionsType, CreditCardOptionsType, CurrencyOptionsType, DatePickerOptionsType, EmailOptionsType, FormFieldType, FormFieldTypeEnum, FormReturnType, FormWrapperType, IconCheckboxesOptionsType, MultiSelectOptionsType, NationalitySelectOptionsType, NumberOptionsType, PasswordOptionsType, PhoneOptionsType, RadioGroupOptionsType, RemovableFieldType, RemovableFieldTypeEnum, SelectOptionType, SelectOptionsType, ShowIfType, SingleOrMultipleFieldType, SocialSecurityOptionsType, SplitLineFieldType, StateSelectOptionsType, TextOptionsType, TextareaOptionsType, ToggleGroupOptionsType, ToggleOptionsType, ZipCodeOptionsType, isAddress, isCheckbox, isCheckboxGroup, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isImagePicker, isMultiSelect, isNationalitySelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSocialSecurity, isSplitLine, isStateSelect, isTextarea, isToggle, isToggleGroup, isZipCode } from "./types";
-export { Form, FormFieldTypeEnum, FormWrapper, RemovableFieldTypeEnum, isAddress, isCheckbox, isCheckboxGroup, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isImagePicker, isMultiSelect, isNationalitySelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSocialSecurity, isSplitLine, isStateSelect, isTextarea, isToggle, isToggleGroup, isZipCode, };
-export type { AddressOptionsType, CheckboxOptionsType, CheckboxGroupOptionsType, CountySelectOptionsType, CreditCardOptionsType, CurrencyOptionsType, DatePickerOptionsType, EmailOptionsType, FormFieldType, FormReturnType, FormWrapperType, IconCheckboxesOptionsType, MultiSelectOptionsType, NationalitySelectOptionsType, NumberOptionsType, PasswordOptionsType, PhoneOptionsType, RadioGroupOptionsType, RemovableFieldType, SelectOptionType, SelectOptionsType, ShowIfType, SingleOrMultipleFieldType, SocialSecurityOptionsType, SplitLineFieldType, StateSelectOptionsType, TextOptionsType, TextareaOptionsType, ToggleOptionsType, ToggleGroupOptionsType, ZipCodeOptionsType, };
+import { AddressOptionsType, CheckboxGroupOptionsType, CheckboxOptionsType, ColorPickerOptionsType, CountySelectOptionsType, CreditCardOptionsType, CurrencyOptionsType, DatePickerOptionsType, EmailOptionsType, FormFieldType, FormFieldTypeEnum, FormReturnType, FormWrapperType, IconCheckboxesOptionsType, MultiSelectOptionsType, NationalitySelectOptionsType, NumberOptionsType, PasswordOptionsType, PhoneOptionsType, RadioGroupOptionsType, RemovableFieldType, RemovableFieldTypeEnum, SelectOptionType, SelectOptionsType, ShowIfType, SingleOrMultipleFieldType, SocialSecurityOptionsType, SplitLineFieldType, StateSelectOptionsType, TextOptionsType, TextareaOptionsType, ToggleGroupOptionsType, ToggleOptionsType, ZipCodeOptionsType, isAddress, isCheckbox, isCheckboxGroup, isColorPicker, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isImagePicker, isMultiSelect, isNationalitySelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSocialSecurity, isSplitLine, isStateSelect, isTextarea, isToggle, isToggleGroup, isZipCode } from "./types";
+export { Form, FormFieldTypeEnum, FormWrapper, RemovableFieldTypeEnum, isAddress, isCheckbox, isCheckboxGroup, isColorPicker, isConfigurableInput, isCountrySelect, isCountySelect, isCreditCard, isCurrency, isDatePicker, isDescriptiveDropdownInput, isEmail, isFormFieldType, isImagePicker, isMultiSelect, isNationalitySelect, isNumber, isPassword, isPhone, isRadioGroup, isRemovable, isSectionHeader, isSelect, isSocialSecurity, isSplitLine, isStateSelect, isTextarea, isToggle, isToggleGroup, isZipCode, };
+export type { AddressOptionsType, CheckboxOptionsType, CheckboxGroupOptionsType, ColorPickerOptionsType, CountySelectOptionsType, CreditCardOptionsType, CurrencyOptionsType, DatePickerOptionsType, EmailOptionsType, FormFieldType, FormReturnType, FormWrapperType, IconCheckboxesOptionsType, MultiSelectOptionsType, NationalitySelectOptionsType, NumberOptionsType, PasswordOptionsType, PhoneOptionsType, RadioGroupOptionsType, RemovableFieldType, SelectOptionType, SelectOptionsType, ShowIfType, SingleOrMultipleFieldType, SocialSecurityOptionsType, SplitLineFieldType, StateSelectOptionsType, TextOptionsType, TextareaOptionsType, ToggleOptionsType, ToggleGroupOptionsType, ZipCodeOptionsType, };

package/lib/types/src/components/Form/mocks/fields.d.ts

@@ -104,6 +104,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -143,6 +144,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -181,6 +183,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -219,6 +222,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -257,6 +261,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -295,6 +300,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -335,6 +341,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -378,6 +385,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -416,6 +424,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -454,6 +463,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -492,6 +502,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -530,6 +541,7 @@ export declare const allFieldTypes: ({
         countyFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -567,6 +579,7 @@ export declare const allFieldTypes: ({
         maxDateUnix?: undefined;
         countyFieldName?: undefined;
         stateFieldName?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -605,6 +618,46 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
+        placeholderInitials?: undefined;
+        menuOptions?: undefined;
+        switchType?: undefined;
+        selectOptions?: undefined;
+        label?: undefined;
+        toggles?: undefined;
+        region?: undefined;
+        checkboxes?: undefined;
+        maskedRadios?: undefined;
+    };
+    initialValue?: undefined;
+    required?: undefined;
+    width?: undefined;
+    header?: undefined;
+    separator?: undefined;
+    subHeader?: undefined;
+    text?: undefined;
+    validationMessage?: undefined;
+    inlineFields?: undefined;
+} | {
+    fieldLabel: string;
+    name: string;
+    type: FormFieldTypeEnum;
+    options: {
+        helperText: string;
+        checkLegible: boolean;
+        placeholder?: undefined;
+        disabled?: undefined;
+        showIcon?: undefined;
+        clearButton?: undefined;
+        showFlag?: undefined;
+        radios?: undefined;
+        characterLimit?: undefined;
+        initialValue?: undefined;
+        maxDateUnix?: undefined;
+        countyFieldName?: undefined;
+        stateFieldName?: undefined;
+        center?: undefined;
+        leftLabel?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -645,6 +698,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
         selectOptions?: undefined;
@@ -684,6 +738,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         selectOptions?: undefined;
         label?: undefined;
@@ -731,6 +786,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -770,6 +826,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -821,6 +878,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -857,6 +915,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -924,6 +983,7 @@ export declare const allFieldTypes: ({
         countyFieldName?: undefined;
         stateFieldName?: undefined;
         center?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -970,6 +1030,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;
@@ -1030,6 +1091,7 @@ export declare const allFieldTypes: ({
         stateFieldName?: undefined;
         center?: undefined;
         leftLabel?: undefined;
+        checkLegible?: undefined;
         placeholderInitials?: undefined;
         menuOptions?: undefined;
         switchType?: undefined;

package/lib/types/src/components/Form/types.d.ts

@@ -151,7 +151,7 @@ export interface ValuesType {
 export interface ShowIfType {
     values: ValuesType;
 }
-type OptionTypes = AddressOptionsType | CheckboxOptionsType | CheckboxGroupOptionsType | CountySelectOptionsType | CountrySelectOptionsType | CreditCardOptionsType | CurrencyOptionsType | DatePickerOptionsType | DescriptiveDropdownInputOptionsType | EmailOptionsType | HiddenOptionsType | ImagePickerOptionsType | IconCheckboxesOptionsType | MultiSelectOptionsType | NumberOptionsType | PasswordOptionsType | PhoneOptionsType | RadioGroupOptionsType | SelectOptionsType | SocialSecurityOptionsType | StateSelectOptionsType | TextOptionsType | TextareaOptionsType | ToggleOptionsType | ToggleGroupOptionsType | ZipCodeOptionsType;
+type OptionTypes = AddressOptionsType | CheckboxOptionsType | CheckboxGroupOptionsType | ColorPickerOptionsType | CountySelectOptionsType | CountrySelectOptionsType | CreditCardOptionsType | CurrencyOptionsType | DatePickerOptionsType | DescriptiveDropdownInputOptionsType | EmailOptionsType | HiddenOptionsType | ImagePickerOptionsType | IconCheckboxesOptionsType | MultiSelectOptionsType | NumberOptionsType | PasswordOptionsType | PhoneOptionsType | RadioGroupOptionsType | SelectOptionsType | SocialSecurityOptionsType | StateSelectOptionsType | TextOptionsType | TextareaOptionsType | ToggleOptionsType | ToggleGroupOptionsType | ZipCodeOptionsType;
 export interface AddButtonType {
     addFunction: () => void;
     color?: ButtonColorFamilyEnum;
@@ -193,6 +193,22 @@ export interface CheckboxGroupOptionsType {
     breakText?: boolean;
     onCheckboxClick?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
+export interface ColorPickerOptionsType {
+    checkLegible?: boolean;
+    helperText?: string | ReactElement;
+    innerRef?: RefObject<HTMLInputElement>;
+    instructionalText?: string;
+    legibleAgainst?: string;
+    onEnter?: () => void;
+    onInputBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onInputFocus?: () => void;
+    onChange?: (event: {
+        target: {
+            value: string;
+            name?: string;
+        };
+    }) => void;
+}
 export interface ConfigurableInputOptionsType {
     clearButton?: boolean;
     defaultId?: string;
@@ -600,6 +616,7 @@ export declare enum FormFieldTypeEnum {
     Address = "ADDRESS",
     Checkbox = "CHECKBOX",
     CheckboxGroup = "CHECKBOX_GROUP",
+    ColorPicker = "COLOR_PICKER",
     ConfigurableInput = "CONFIGURABLE_INPUT",
     CountySelect = "COUNTY_SELECT",
     CountrySelect = "COUNTRY_SELECT",
@@ -684,6 +701,23 @@ export interface CheckboxGroupFieldProps {
     submitAttempt: boolean;
     submitOnBlur?: boolean;
 }
+export interface ColorPickerFieldType extends Omit<FormFieldType, "options"> {
+    options?: ColorPickerOptionsType;
+}
+export declare const isColorPicker: (field: FormFieldType) => field is ColorPickerFieldType;
+export interface ColorPickerFieldProps {
+    fade?: boolean;
+    field: ColorPickerFieldType;
+    formikProps: any;
+    leftLabels?: boolean;
+    leftLabelWidth?: number;
+    leftLabelsRightGutter?: number;
+    rowGap?: number;
+    setHasValues: Dispatch<SetStateAction<boolean>>;
+    setSubmitAttempt: Dispatch<SetStateAction<boolean>>;
+    submitAttempt: boolean;
+    submitOnBlur?: boolean;
+}
 export interface ConfigurableInputFieldType extends Omit<FormFieldType, "options"> {
     options: ConfigurableInputOptionsType;
 }
@@ -1082,7 +1116,7 @@ export interface InlineFieldType {
     validationFunction?: YupSchema;
     nextGap?: number;
 }
-type SplitLineOptionTypes = AddressOptionsType | CheckboxOptionsType | CountySelectOptionsType | CountrySelectOptionsType | CreditCardOptionsType | CurrencyOptionsType | DatePickerOptionsType | DescriptiveDropdownInputOptionsType | EmailOptionsType | ImagePickerOptionsType | MultiSelectOptionsType | NumberOptionsType | PasswordOptionsType | PhoneOptionsType | SelectOptionsType | SocialSecurityOptionsType | StateSelectOptionsType | TextOptionsType | ToggleOptionsType | ZipCodeOptionsType;
+type SplitLineOptionTypes = AddressOptionsType | CheckboxOptionsType | ColorPickerOptionsType | CountySelectOptionsType | CountrySelectOptionsType | CreditCardOptionsType | CurrencyOptionsType | DatePickerOptionsType | DescriptiveDropdownInputOptionsType | EmailOptionsType | ImagePickerOptionsType | MultiSelectOptionsType | NumberOptionsType | PasswordOptionsType | PhoneOptionsType | SelectOptionsType | SocialSecurityOptionsType | StateSelectOptionsType | TextOptionsType | ToggleOptionsType | ZipCodeOptionsType;
 export declare const isSplitLine: (field: SingleOrMultipleFieldType) => field is SplitLineFieldType;
 export interface SplitLineFieldProps {
     fade?: boolean;

package/lib/types/src/helpers/colorValidators.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Validates that a color has sufficient contrast against a background color
+ * according to WCAG AA accessibility standards (4.5:1 ratio for normal text).
+ *
+ * @param color - The foreground color (hex format, e.g., "#ff0000")
+ * @param backgroundColor - The background color to check against (hex format, defaults to "#ffffff")
+ * @returns boolean - true if the contrast ratio is >= 4.5:1, false otherwise
+ */
+export declare const validateColorContrast: (color: string, backgroundColor?: string) => boolean;
+/**
+ * Validates that a color has sufficient contrast against a background color
+ * and returns an error message if validation fails.
+ *
+ * @param color - The foreground color (hex format, e.g., "#ff0000")
+ * @param backgroundColor - The background color to check against (hex format, defaults to "#ffffff")
+ * @param errorMessage - Custom error message (optional)
+ * @returns string | null - Error message if validation fails, null if valid
+ */
+export declare const validateColorContrastWithMessage: (color: string, backgroundColor?: string, errorMessage?: string) => string | null;

package/lib/types/src/index.d.ts

@@ -9,6 +9,7 @@ export { CheckboxGroup } from "./components/CheckboxGroup";
 export { ClearableTag } from "./components/ClearableTag";
 export { ClickOutHandler } from "./components/ClickOutHandler";
 export { ColorButton } from "./components/ColorButton";
+export { ColorPickerInput, InlineColorPickerInput } from "./components/ColorPickerInput";
 export { ColorPickerMenu } from "./components/ColorPickerMenu";
 export { ConfigurableInput } from "./components/ConfigurableInput";
 export { ConfirmModal } from "./components/ConfirmModal";
@@ -101,6 +102,7 @@ export { usStates } from "./const/usStates";
 export { addOrRemoveById, addOrRemoveString, getObjectById, makeIdString, removeById, removeByIdArray, removeString, replaceObjectById, setAllKeysToValue, setObjectById, toggleObjectById, } from "./helpers/arrays";
 export { getPosition } from "./helpers/position";
 export { pressedEnter, higherContrast } from "./helpers/accessibility";
+export { validateColorContrast, validateColorContrastWithMessage } from "./helpers/colorValidators";
 export { northAmericanPhoneMask, colombianPhoneMask, brazilianPhoneMask, mexicanPhoneMask } from "./helpers/inputMasks";
 export { formatBytesToString, formatNumberToString } from "./helpers/numbers";
 export { northAmericanNumberingPlanRegex, validateRegex } from "./helpers/phoneValidators";
@@ -136,6 +138,7 @@ export type { CheckboxItemType } from "./components/CheckboxItem";
 export type { ClearableTagType } from "./components/ClearableTag";
 export type { ClickOutHandlerType } from "./components/ClickOutHandler";
 export type { ColorButtonType } from "./components/ColorButton";
+export type { ColorPickerInputType, ColorPickerInputThemeOverride, ThemeOverride as InlineColorPickerInputThemeOverride, } from "./components/ColorPickerInput";
 export type { ColorPickerMenuType } from "./components/ColorPickerMenu";
 export type { ConfigurableInputType, MaskedRadioType } from "./components/ConfigurableInput";
 export type { ConfirmModalType } from "./components/ConfirmModal";
@@ -149,12 +152,13 @@ export type { DrawerDividerType } from "./components/Drawer/DrawerDivider";
 export type { EmailInputType } from "./components/EmailInput";
 export type { FiltersBarType } from "./components/FiltersBar";
 export type { FooterProps } from "./components/Footer";
-export type { AddressOptionsType, CheckboxOptionsType, CheckboxGroupOptionsType, CountySelectOptionsType, CreditCardOptionsType, CurrencyOptionsType, DatePickerOptionsType, EmailOptionsType, FormFieldType, FormReturnType, FormWrapperType, IconCheckboxesOptionsType, MultiSelectOptionsType, NationalitySelectOptionsType, NumberOptionsType, PasswordOptionsType, PhoneOptionsType, RadioGroupOptionsType, RemovableFieldType, SelectOptionType, SelectOptionsType, ShowIfType, SingleOrMultipleFieldType, SocialSecurityOptionsType, SplitLineFieldType, StateSelectOptionsType, TextOptionsType, TextareaOptionsType, ToggleOptionsType, ToggleGroupOptionsType, ZipCodeOptionsType, } from "./components/Form";
+export type { AddressOptionsType, CheckboxOptionsType, CheckboxGroupOptionsType, ColorPickerOptionsType, CountySelectOptionsType, CreditCardOptionsType, CurrencyOptionsType, DatePickerOptionsType, EmailOptionsType, FormFieldType, FormReturnType, FormWrapperType, IconCheckboxesOptionsType, MultiSelectOptionsType, NationalitySelectOptionsType, NumberOptionsType, PasswordOptionsType, PhoneOptionsType, RadioGroupOptionsType, RemovableFieldType, SelectOptionType, SelectOptionsType, ShowIfType, SingleOrMultipleFieldType, SocialSecurityOptionsType, SplitLineFieldType, StateSelectOptionsType, TextOptionsType, TextareaOptionsType, ToggleOptionsType, ToggleGroupOptionsType, ZipCodeOptionsType, } from "./components/Form";
 export type { HorizontalTabMenuType } from "./components/HorizontalTabMenu";
 export type { IconButtonType } from "./components/IconButton";
 export type { IconProps, IconType } from "./components/Icons";
 export type { IconTileType } from "./components/IconTile";
 export type { ImagePickerType } from "./components/ImagePicker";
+export type { InlineColorPickerInputType } from "./components/ColorPickerInput";
 export type { InlineEmailInputType } from "./components/InlineEmailInput";
 export type { InlineCreditCardInputType } from "./components/InlineCreditCardInput";
 export type { InlineCurrencyInputType } from "./components/InlineCurrencyInput";

package/lib/types/src/theme.d.ts

@@ -53,6 +53,11 @@ interface ColorButtonTheme {
     focusColor: string;
     borderColor: string;
 }
+interface ColorPickerInputTheme {
+    instructionalTextColor: string;
+    instructionalTextFontSize: number;
+    padding: number;
+}
 interface ColorPickerTheme {
     borderColor: string;
     buttonSize: number;
@@ -584,6 +589,7 @@ interface CustomTheme {
     colorButton: ColorButtonTheme;
     colorFamilies: ColorFamilyTheme;
     colorPicker: ColorPickerTheme;
+    colorPickerInput: ColorPickerInputTheme;
     colorPickerMenu: ColorPickerMenuTheme;
     configurableInput: ConfigurableInputTheme;
     confirmModal: ConfirmModalTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "16.1.1",
+  "version": "16.2.0",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "lib/cjs/index.cjs",