@4alldigital/foundation-ui--core 3.10.1 → 3.11.0

package/src/components/Form/Form.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useEffect, useRef } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { useForm, FormProvider } from 'react-hook-form';
 import { Props } from './Form.types';
 import Button from '../Button';
@@ -39,14 +41,18 @@ const Form = ({
     }
   }, [initialValues]);
 
+  // Use a ref to always call the latest onChange without resubscribing watch()
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
   useEffect(() => {
-    if (onChange && typeof onChange === 'function') {
+    if (onChangeRef.current) {
       const subscription = methods.watch((value, event) => {
-        onChange(value, event);
+        onChangeRef.current?.(value, event);
       });
       return () => subscription.unsubscribe();
     }
-  }, []);
+  }, [methods]);
 
   const submitClasses = cx({ 'sr-only': hideSubmit });
 

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

@@ -1,3 +1,4 @@
+import { type FieldValues } from 'react-hook-form';
 import { BTN_TYPES, BTN_VARIANTS } from '../Button/Button.types';
 
 export interface Props {
@@ -8,9 +9,9 @@ export interface Props {
   /** Disable form inputs validation. */
   noValidate?: boolean;
   /** The submit handler that will fire once the form is submitted. */
-  onSubmit?: (values: any, event?: any) => void;
+  onSubmit?: (values: FieldValues, event?: React.BaseSyntheticEvent) => void;
   /** The on change handler that will fire once the form is updated. */
-  onChange?: (values: any, event?: any) => void;
+  onChange?: (values: FieldValues, event?: { name?: string; type?: string }) => void;
   /** The label for the submit button. */
   submit?: string;
   /** Hide submit button. */
@@ -20,7 +21,7 @@ export interface Props {
   /** Unique form submit button id. */
   submitID?: string;
   /** Initial form values. */
-  initialValues?: { [k: string]: any };
+  initialValues?: FieldValues;
   /** The submit button variant. */
   submitVariant?: BTN_VARIANTS;
   /** The form is boxed. */

package/src/components/FormField/FormField.tsx

@@ -1,6 +1,8 @@
+"use client";
+
 import { useState } from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { FIELD_TYPES, Props } from './FormField.types';
 import TextInput from '../TextInput';
 import { InputType } from '../TextInput/TextInput.types';
@@ -57,16 +59,13 @@ const FormField = ({
         return (
           <div className="relative">
             <span
-              className="absolute right-0 top-0 flex items-center justify-center h-full z-10 pr-2"
-              onClick={() => setPasswordShow((pS) => !pS)}
-              role="button"
-              tabIndex={0}>
+              className="absolute right-0 top-0 flex items-center justify-center h-full z-10 pr-2">
               {passwordShowStatus ? (
-                <button type="button" aria-label={hidePasswordLabel} className={cx(btnClass, 'form-icon')}>
+                <button type="button" aria-label={hidePasswordLabel} className={cx(btnClass, 'form-icon')} onClick={() => setPasswordShow(false)}>
                   <Icon name="mdi:eye-off" size={24} />
                 </button>
               ) : (
-                <button type="button" aria-label={showPasswordLabel} className={cx(btnClass, 'form-icon')}>
+                <button type="button" aria-label={showPasswordLabel} className={cx(btnClass, 'form-icon')} onClick={() => setPasswordShow(true)}>
                   <Icon name="mdi:eye" size={24} />
                 </button>
               )}
@@ -213,6 +212,9 @@ const FormField = ({
   // TODO: HELPER CLASSES : data-[invalid=true]:bg-error data-[valid]:bg-success
   const showLabel = label && type !== FIELD_TYPES.CHECKBOX;
   const labelWithAsterisk = required || Boolean(validations.required) ? `${label} *` : label;
+  const descriptionId = description ? `${name}-description` : undefined;
+  const errorId = errors[name] ? `${name}-error` : undefined;
+  const ariaDescribedBy = [descriptionId, errorId].filter(Boolean).join(' ') || undefined;
   return (
     <div className="relative">
       <div data-testid="FormField" className="mb-4">
@@ -229,19 +231,19 @@ const FormField = ({
             control={control}
             rules={validations}
             render={({ field }) => {
-              return renderType(type, field);
+              return renderType(type, { ...field, 'aria-describedby': ariaDescribedBy, 'aria-invalid': !!errors[name] });
             }}
           />
         </div>
         {description && (
-          <div className="formfield-description">
+          <div id={descriptionId} className="formfield-description">
             <Copy size={COPY_SIZE.SMALL} className="mb-0">
               {description}
             </Copy>
           </div>
         )}
         {errors[name] && (
-          <div className="formfield-error text-error italic">
+          <div id={errorId} role="alert" className="formfield-error text-error italic">
             <Copy size={COPY_SIZE.SMALL} className="mb-0">
               {errors?.[name]?.message?.toString()}
             </Copy>

package/src/components/FormSelect/FormSelect.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './FormSelect.types';
 import Icon from '../Icon';
 
 const FormSelect = React.forwardRef(function MyInput(
-  { id, name, options, required, className, disabled, ...rest }: Props,
+  { id, name, options, required, className, disabled, label: _label, iconColor: _iconColor, itemIcon: _itemIcon, wrapperStyles: _wrapperStyles, selectIconUp: _selectIconUp, selectIconDown: _selectIconDown, error: _error, ...rest }: Props,
   ref: any,
 ) {
   if (!options) {

package/src/components/FormSelect/FormSelect.types.ts

@@ -8,17 +8,11 @@ export type OptionsType = {
   disabled?: boolean;
 };
 
-export interface Props {
+export interface Props extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
   /** The selected option's value. */
   options?: Array<OptionsType>;
-  /** Unique id for the field, required for a11y. */
-  id: string;
   /** The select visible default label value. */
   label?: string | React.ReactNode[];
-  /** Is field required. */
-  required?: boolean;
-  /** Additional classes. */
-  className?: string;
   /** Dropdown icon color. */
   iconColor?: string;
   /** Dropdown icon color. */
@@ -29,12 +23,12 @@ export interface Props {
   selectIconUp?: string;
   /** Select Down Icon. */
   selectIconDown?: string;
-  /** Select Form Item Name. */
-  name?: string;
-  /** Is field disabled. */
-  disabled?: boolean;
   /** The selected option's value. */
   onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  /** Placeholder text for the select. */
+  placeholder?: string;
+  /** Validation error message (used by AddressForm). */
+  error?: string | false;
 }
 
 export interface ItemProps {

package/src/components/FullScreenVideoModal/FullScreenVideoModal.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useEffect, useState } from 'react';
 import { Props } from './FullScreenVideoModal.types';
 import Modal from 'react-modal';
@@ -28,7 +30,7 @@ const FullScreenVideoModal = ({
       ariaHideApp={ariaHideApp} // Only use in development, adjust for production use
       data-testid={testID || 'FullScreenVideoModal'}>
       <div className="h-full relative">
-        <Button rounded icon="mdi:close" onClick={onCloseCallback} className="absolute top-4 right-4 z-50" />
+        <Button rounded icon="mdi:close" onClick={onCloseCallback} ariaLabel="Close video" className="absolute top-4 right-4 z-50" />
         <Video {...videoProps} />
       </div>
     </Modal>

package/src/components/Header/Header.tsx

@@ -1,5 +1,7 @@
-import { useState } from 'react';
-import cx from 'classnames';
+"use client";
+
+import { useCallback, useEffect, useState } from 'react';
+import { clsx as cx } from 'clsx';
 import { Props } from './Header.types';
 import { useAppContext } from '../../context/App';
 import Logo from '../Logo';
@@ -29,15 +31,28 @@ const Header = ({
 
   const [mobileMenuClass, mobileMenuIcon] = useState('hidden');
   const [showDropdown, setShowDropdown] = useState(false);
+  const isMobileMenuOpen = mobileMenuClass === 'block';
 
   const toggleMenuClass = () => {
-    if (mobileMenuClass === 'hidden') {
-      mobileMenuIcon('block');
-    } else {
-      mobileMenuIcon('hidden');
-    }
+    mobileMenuIcon(isMobileMenuOpen ? 'hidden' : 'block');
   };
 
+  const closeMobileMenu = useCallback(() => {
+    mobileMenuIcon('hidden');
+  }, []);
+
+  // Close dropdown and mobile menu on ESC key
+  useEffect(() => {
+    const handleEscKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        if (showDropdown) setShowDropdown(false);
+        if (isMobileMenuOpen) closeMobileMenu();
+      }
+    };
+    document.addEventListener('keydown', handleEscKey);
+    return () => document.removeEventListener('keydown', handleEscKey);
+  }, [showDropdown, isMobileMenuOpen, closeMobileMenu]);
+
   const defaultHeaderStyles = 'relative z-10 w-full m-auto py-4 bg-header-bg dark:bg-header-bg-dark';
 
   if (context?.brand?.logoOnly) {
@@ -92,6 +107,9 @@ const Header = ({
                 <Button
                   onClick={() => setShowDropdown(!showDropdown)}
                   icon={!showDropdown ? 'mdi:user' : 'mdi:user-outline'}
+                  ariaLabel="User menu"
+                  aria-expanded={showDropdown}
+                  aria-haspopup="true"
                 />
                 <div
                   onClick={() => setShowDropdown(false)}
@@ -107,7 +125,7 @@ const Header = ({
           </div>
           {/* <!-- mobile --> */}
           <div className="flex md:hidden flex-col justify-center flex-1 items-end">
-            <Button variant={BTN_VARIANTS.PRIMARY} icon="mdi:menu" onClick={toggleMenuClass} />
+            <Button variant={BTN_VARIANTS.PRIMARY} icon="mdi:menu" onClick={toggleMenuClass} ariaLabel="Open menu" aria-expanded={isMobileMenuOpen} />
           </div>
         </div>
         <div className={cx('navbar-menu relative z-50', mobileMenuClass, { hidden: hideMenu })}>
@@ -123,7 +141,7 @@ const Header = ({
                 )}
               </div>
               <div>
-                <Button variant={BTN_VARIANTS.PRIMARY} icon="mdi:close" onClick={toggleMenuClass} />
+                <Button variant={BTN_VARIANTS.PRIMARY} icon="mdi:close" onClick={toggleMenuClass} ariaLabel="Close menu" />
               </div>
             </div>
             <div className="flex flex-col flex-1 gap-4">

package/src/components/Heading/Heading.tsx

@@ -1,26 +1,19 @@
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { HEADING_TAGS, Props } from './Heading.types';
 import { twMerge } from 'tailwind-merge';
 
-const Heading = ({ children, tag = HEADING_TAGS.H2, transform, align, id, testID, flush, className, singleLine, bold = true }: Props) => {
-  const fontSize = () => {
-    switch (tag) {
-      case 'h1':
-        return 'text-3xl md:text-4xl lg:text-5xl';
-      case 'h2':
-        return 'text-3xl md:text-4xl lg:text-4xl';
-      case 'h3':
-        return 'text-xl md:text-2xl lg:text-2xl';
-      case 'h4':
-        return 'text-lg md:text-lg lg:text-xl';
-      case 'h5':
-        return 'text-base md:text-base lg:text-lg';
-      default:
-        return 'text-2xl md:text-2xl lg:text-4xl';
-    }
-  };
+const FONT_SIZES: Record<string, string> = {
+  h1: 'text-3xl md:text-4xl lg:text-5xl',
+  h2: 'text-3xl md:text-4xl lg:text-4xl',
+  h3: 'text-xl md:text-2xl lg:text-2xl',
+  h4: 'text-lg md:text-lg lg:text-xl',
+  h5: 'text-base md:text-base lg:text-lg',
+};
 
-  const size = fontSize();
+const DEFAULT_FONT_SIZE = 'text-2xl md:text-2xl lg:text-4xl';
+
+const Heading = ({ children, tag = HEADING_TAGS.H2, transform, align, id, testID, flush, className, singleLine, bold = true }: Props) => {
+  const size = FONT_SIZES[tag] || DEFAULT_FONT_SIZE;
 
   const Tag = tag;
   const classes = cx(

package/src/components/Heading/Heading.types.ts

@@ -23,7 +23,7 @@ export enum HEADING_TRANSFORM {
 
 export interface Props {
   children: string | React.ReactNode;
-  tag?: HEADING_TAGS;
+  tag?: HEADING_TAGS | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
   align?: HEADING_ALIGN;
   transform?: HEADING_TRANSFORM;
   id?: string;

package/src/components/Hero/Hero.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Hero.types';
 import Container from '../Container';
 

package/src/components/Hr/Hr.tsx

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Hr.types';
 
 const Hr = ({ size = 'small' }: Props) => (

package/src/components/HtmlContent/HtmlContent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import parse from 'html-react-parser';
 import { Props } from './HtmlContent.types';
 import { options } from '../../utils/htmlParser';

package/src/components/Image/Image.tsx

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Image.types';
 import { createElement } from 'react';
 import { twMerge } from 'tailwind-merge';

package/src/components/Label/Label.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Label.types';
 import { twMerge } from 'tailwind-merge';
 

package/src/components/Link/Link.tsx

@@ -1,4 +1,6 @@
-import cx from 'classnames';
+"use client";
+
+import { clsx as cx } from 'clsx';
 import { Props } from './Link.types';
 import React from 'react';
 import Icon from '../Icon';

package/src/components/List/List.tsx

@@ -1,4 +1,4 @@
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { ListTag, Props } from './List.types';
 
 const List = ({ variants, children, as = ListTag.UL, id, testID, className }: Props) => {

package/src/components/ListItem/ListItem.tsx

@@ -1,4 +1,6 @@
-import cx from 'classnames';
+"use client";
+
+import { clsx as cx } from 'clsx';
 import { Props } from './ListItem.types';
 import Icon from '../Icon';
 import { HEADING_TAGS } from '../Heading/Heading.types';

package/src/components/Loader/Loader.tsx

@@ -4,7 +4,7 @@ const Loader = ({ color, size = 8, thickness = 4 }: Props) => {
   const sizeClass = size ? `w-${size} h-${size}` : 'w-8 h-8';
   return (
     <div data-testid="Loader" className='flex items-center justify-center'>
-      <div role="status" className='flex items-center'>
+      <div role="status" aria-live="polite" className='flex items-center'>
         <svg
           className={`animate-spin ${sizeClass} fill-current`}
           xmlns="http://www.w3.org/2000/svg"

package/src/components/Logo/Logo.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Logo.types';
 import Image from '../Image';
 

package/src/components/Menu/Menu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Menu.types';
 import Link from '../Link';
 import Icon from '../Icon';

package/src/components/Notice/Notice.tsx

@@ -1,4 +1,6 @@
-import cx from 'classnames';
+"use client";
+
+import { clsx as cx } from 'clsx';
 import { Props } from './Notice.types';
 import Heading from '../Heading';
 import { HEADING_TAGS } from '../Heading/Heading.types';

package/src/components/OTPInput/OTPInput.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useMemo, useState } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import ROtpInput from 'react-otp-input';
 import { Props } from './OTPInput.types';
 import Icon from '../Icon';
@@ -18,7 +20,7 @@ const OTPInput = ({
     if (otp && otp.length === 4 && inputCallback !== undefined && typeof inputCallback === 'function') {
       inputCallback(otp);
     }
-  }, [otp]);
+  }, [otp, inputCallback]);
 
   const sizeRatio = useMemo(() => {
     switch (size) {

package/src/components/PanelCards/PanelCards.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useRef } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { useInView } from 'framer-motion';
 import { Props } from './PanelCards.types';
 import Card from '../Card';

package/src/components/PanelCustom/PanelCustom.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import Container from '../Container';
 import { twMerge } from 'tailwind-merge';
 import { Props } from './PanelCustom.types';

package/src/components/PanelFeature/PanelFeature.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './PanelFeature.types';
 import AnimationSet1 from '../AnimationSet1';
 import DisplayHeading from '../DisplayHeading';

package/src/components/PanelHero/PanelHero.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useEffect, useMemo, useRef } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './PanelHero.types';
 import Button from '../Button';
 import DisplayHeading from '../DisplayHeading';

package/src/components/PanelIntro/PanelIntro.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { useEffect, useRef } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import Button from '../Button';
 import DisplayHeading from '../DisplayHeading';
 import Container from '../Container';

package/src/components/PanelProduct/PanelProduct.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './PanelProduct.types';
 import Image from '../Image';
 import DisplayHeading from '../DisplayHeading';

package/src/components/PanelScroller/PanelScroller.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import React, { useRef } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './PanelScroller.types';
 import Carousel from '../Carousel';
 import { CardVariant } from '../Card/Card.types';

package/src/components/PanelVideo/PanelVideo.tsx

@@ -1,4 +1,6 @@
-import cx from 'classnames';
+"use client";
+
+import { clsx as cx } from 'clsx';
 import { motion } from 'framer-motion';
 import { Props } from './PanelVideo.types';
 import Video from '../Video';

package/src/components/ProductCard/ProductCard.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '../../utils';

package/src/components/ProductDetail/ProductDetail.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from 'react';
 import { useState, useMemo } from 'react';
 import { cn } from '../../utils';

package/src/components/Radio/Radio.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Radio.types';
 import Icon from '../Icon';
 

package/src/components/Schedule/Schedule.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useMemo, useState, useCallback } from 'react';
 import { Props } from './Schedule.types';
 import { useLanguage } from '../../hooks';
@@ -31,8 +33,6 @@ const buildDateToClassMap = (scheduleItems: any) => {
           // Create a simple date key (YYYY-MM-DD) to avoid timezone issues
           const dateKey = `${normalized.getFullYear()}-${String(normalized.getMonth() + 1).padStart(2, '0')}-${String(normalized.getDate()).padStart(2, '0')}`;
           dateMap.set(dateKey, { ...classData, weekday });
-        } else {
-          console.log(`    ✗ No start timestamp for ${weekday}`);
         }
       }
     });

package/src/components/ScheduleItem/ScheduleItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useMemo } from 'react';
 import { format } from 'date-fns';
 import { Props } from './ScheduleItem.types';

package/src/components/Screen/Screen.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Screen.types';
 import Header from '../Header';
 import Footer from '../Footer';

package/src/components/ShadcnCarousel/ShadcnCarousel.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,

package/src/components/Share/Share.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from 'react';
 import {
   EmailShareButton,

package/src/components/SubscriptionManager/SubscriptionManager.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { useState } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { confirmAlert } from 'react-confirm-alert'; // Import
 import { Props } from './SubscriptionManager.types';
 import Heading from '../Heading';

package/src/components/Switch/Switch.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Props } from './Switch.types';
 
 const Switch = forwardRef(function MyInput(

package/src/components/Tabs/Tabs.tsx

@@ -1,5 +1,7 @@
+"use client";
+
 import { useState } from 'react';
-import cx from 'classnames';
+import { clsx as cx } from 'clsx';
 import { Tab, Tabs as RTabs, TabList, TabPanel } from 'react-tabs';
 import { Props } from './Tabs.types';
 import Copy from '../Copy';

package/src/components/TextInput/TextInput.tsx

@@ -1,5 +1,7 @@
-import { forwardRef, useEffect } from 'react';
-import cx from 'classnames';
+"use client";
+
+import React, { forwardRef, useEffect } from 'react';
+import { clsx as cx } from 'clsx';
 import { InputType, Props } from './TextInput.types';
 import Icon from '../Icon';
 
@@ -14,6 +16,7 @@ const TextInput = forwardRef(function MyInput(
     disabled = false,
     name,
     autoComplete,
+    error: _error,
     ...rest
   }: Props,
   ref: any,
@@ -42,7 +45,7 @@ const TextInput = forwardRef(function MyInput(
           onChange={onChange}
           rows={4}
           className={cx('form-item text-area resize-none', className)}
-          {...rest}
+          {...(rest as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
         />
       </div>
     );