@4alldigital/foundation-ui--core 3.12.2 → 3.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--core",
-  "version": "3.12.2",
+  "version": "3.13.1",
   "description": "Foundation UI Core Component Library (source distribution)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -20,7 +20,7 @@
     "dev": "tsc --noEmit --watch"
   },
   "dependencies": {
-    "sonner": "^2.0.0"
+    "sonner": "^2.0.7"
   },
   "peerDependencies": {
     "next": "^14.0.0 || ^15.0.0",
@@ -38,5 +38,5 @@
   "devDependencies": {
     "@types/he": "^1.2.3"
   },
-  "gitHead": "3d674cdb288d74e5021fcf47bdf674c44355b7af"
+  "gitHead": "619d7da9cbabe639be4a03054467f1fa90bc6cc9"
 }

package/src/components/AddressForm/AddressForm.tsx

@@ -124,6 +124,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Full Name */}
         <TextInput
           id="shipping-name"
+          name="name"
+          autoComplete="shipping name"
           placeholder="Full Name"
           value={address.name || ''}
           onChange={(e) => handleChange('name', e.target.value)}
@@ -136,6 +138,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Address Line 1 */}
         <TextInput
           id="shipping-line1"
+          name="address-line1"
+          autoComplete="shipping address-line1"
           placeholder="Street Address"
           value={address.line1 || ''}
           onChange={(e) => handleChange('line1', e.target.value)}
@@ -148,6 +152,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Address Line 2 */}
         <TextInput
           id="shipping-line2"
+          name="address-line2"
+          autoComplete="shipping address-line2"
           placeholder="Apartment, suite, etc. (optional)"
           value={address.line2 || ''}
           onChange={(e) => handleChange('line2', e.target.value)}
@@ -158,6 +164,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         <div className="grid gap-4 sm:grid-cols-2">
           <TextInput
             id="shipping-city"
+            name="address-level2"
+            autoComplete="shipping address-level2"
             placeholder="City"
             value={address.city || ''}
             onChange={(e) => handleChange('city', e.target.value)}
@@ -169,6 +177,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
 
           <TextInput
             id="shipping-state"
+            name="address-level1"
+            autoComplete="shipping address-level1"
             placeholder="State / County / Province"
             value={address.state || ''}
             onChange={(e) => handleChange('state', e.target.value)}
@@ -183,6 +193,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         <div className="grid gap-4 sm:grid-cols-2">
           <TextInput
             id="shipping-postal-code"
+            name="postal-code"
+            autoComplete="shipping postal-code"
             placeholder="Postal / ZIP Code"
             value={address.postal_code || ''}
             onChange={(e) => handleChange('postal_code', e.target.value)}
@@ -194,6 +206,8 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
 
           <FormSelect
             id="shipping-country"
+            name="country"
+            autoComplete="shipping country"
             placeholder="Country"
             value={address.country || ''}
             onChange={(e) => handleChange('country', e.target.value)}
@@ -208,7 +222,9 @@ export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
         {/* Phone */}
         <TextInput
           id="shipping-phone"
+          name="phone"
           type={InputType.TEL}
+          autoComplete="shipping tel"
           placeholder="Phone Number (optional)"
           value={address.phone || ''}
           onChange={(e) => handleChange('phone', e.target.value)}

package/src/components/Header/Header.tsx

@@ -4,17 +4,16 @@ import { useCallback, useEffect, useState } from 'react';
 import { clsx as cx } from 'clsx';
 import { Props } from './Header.types';
 import { useAppContext } from '../../context/App';
+import { useThemeContext } from '../../context/Theme';
 import Logo from '../Logo';
 import Button from '../Button';
 import Menu from '../Menu';
 import { BTN_VARIANTS } from '../Button/Button.types';
-// import Copy from '../Copy';
 import Link from '../Link';
 import { useLanguage } from '../../hooks';
 import Container from '../Container';
 import { twMerge } from 'tailwind-merge';
 import Cart from '../Cart';
-// import Avatar from '../Avatar';
 
 const Header = ({
   testID,
@@ -28,6 +27,7 @@ const Header = ({
 }: Props) => {
   const context = useAppContext();
   const T = useLanguage();
+  const theme = useThemeContext();
 
   const [mobileMenuClass, mobileMenuIcon] = useState('hidden');
   const [showDropdown, setShowDropdown] = useState(false);
@@ -94,6 +94,13 @@ const Header = ({
           </div>
           {/* <!-- tablet/desktop --> */}
           <div className="hidden md:flex items-center justify-center gap-2">
+            {theme?.toggleTheme && (
+              <Button
+                onClick={theme.toggleTheme}
+                icon={theme.isDarkTheme ? 'mdi:weather-sunny' : 'mdi:weather-night'}
+                ariaLabel={theme.isDarkTheme ? 'Switch to light mode' : 'Switch to dark mode'}
+              />
+            )}
             {!context?.app?.isAuthenticated && context?.app?.loginCallback && (
               <div className="w-32 flex justify-end">
                 <Button rounded onClick={context?.app?.loginCallback}>{T.UI.LOGIN}</Button>
@@ -129,51 +136,101 @@ const Header = ({
           </div>
         </div>
         <div className={cx('navbar-menu relative z-50', mobileMenuClass, { hidden: hideMenu })}>
-          {/* <!-- Mobile Menu --> */}
-          <div className="navbar-backdrop fixed inset-0 bg-black opacity-25"></div>
-          <nav className="fixed top-0 left-0 bottom-0 flex flex-col w-5/6 max-w-sm py-4 px-4 bg-body-bg dark:bg-body-bg-dark border-r overflow-y-auto">
-            <div className="flex justify-between">
-              <div className="relative w-32">
-                {context?.brand?.logo && (
-                  <div className="relative w-32">
-                    <Logo logo={context?.brand?.logo} aspectRatioClass={context?.brand?.logoAspectRatio} />
-                  </div>
-                )}
-              </div>
-              <div>
-                <Button variant={BTN_VARIANTS.PRIMARY} icon="mdi:close" onClick={toggleMenuClass} ariaLabel="Close menu" />
-              </div>
+          {/* Mobile drawer backdrop */}
+          <div className="navbar-backdrop fixed inset-0 bg-black/40 backdrop-blur-sm" onClick={closeMobileMenu}></div>
+          {/* Mobile drawer panel */}
+          <nav className="fixed top-0 left-0 bottom-0 flex flex-col w-[85%] max-w-[320px] bg-body-bg dark:bg-body-bg-dark shadow-2xl overflow-y-auto">
+            {/* Header */}
+            <div className="flex items-center justify-between px-5 py-4 border-b border-black/[0.06] dark:border-white/[0.08]">
+              {context?.brand?.logo && (
+                <div className={cx('relative h-10', context?.brand?.logoAspectRatio)}>
+                  <Logo logo={context?.brand?.logo} aspectRatioClass={context?.brand?.logoAspectRatio} />
+                </div>
+              )}
+              <button
+                onClick={toggleMenuClass}
+                className="flex h-9 w-9 items-center justify-center rounded-full bg-black/[0.04] dark:bg-white/[0.08] text-body-text dark:text-body-text-dark transition-colors hover:bg-black/[0.08] dark:hover:bg-white/[0.12]"
+                aria-label="Close menu"
+              >
+                <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round">
+                  <path d="M18 6L6 18M6 6l12 12" />
+                </svg>
+              </button>
             </div>
-            <div className="flex flex-col flex-1 gap-4">
-              <div className="flex flex-1 justify-center pt-4">
-                {context?.app?.isAuthenticated && context?.header?.authNav && (
-                  <Menu links={context.header.authNav} separators />
-                )}
-                {!context?.app?.isAuthenticated && context?.header?.anonNav && (
-                  <Menu links={context.header.anonNav} separators />
-                )}
-              </div>
-              <div className="flex flex-1 justify-center pt-4">
-                {context?.app?.isAuthenticated && context?.header?.profile && (
-                  <Menu links={context.header.profile} separators />
-                )}
+
+            {/* Navigation */}
+            <div className="flex-1 px-3 py-4">
+              {/* Main nav */}
+              <div className="mb-2">
+                <p className="px-3 mb-2 text-[0.65rem] font-bold uppercase tracking-[0.1em] text-body-text/40 dark:text-body-text-dark/40">Menu</p>
+                {(context?.app?.isAuthenticated ? context?.header?.authNav : context?.header?.anonNav)?.map((link, index) => (
+                  <Link
+                    key={`mobile-nav-${link.id || index}`}
+                    href={link.url}
+                    className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[0.95rem] font-medium text-body-text dark:text-body-text-dark no-underline transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
+                  >
+                    {link.title}
+                  </Link>
+                ))}
               </div>
-              {context?.app?.isAuthenticated && (
-                <div className="md:hidden flex justify-center">
-                  <Button rounded onClick={context?.app?.logoutCallback}>{T.UI.LOGOUT}</Button>
-                </div>
+
+              {/* Divider */}
+              {context?.app?.isAuthenticated && context?.header?.profile && (
+                <>
+                  <div className="mx-3 my-3 h-px bg-black/[0.06] dark:bg-white/[0.08]" />
+                  <div className="mb-2">
+                    <p className="px-3 mb-2 text-[0.65rem] font-bold uppercase tracking-[0.1em] text-body-text/40 dark:text-body-text-dark/40">Account</p>
+                    {context.header.profile.filter(l => l.title !== 'Logout').map((link, index) => (
+                      <Link
+                        key={`mobile-profile-${link.id || index}`}
+                        href={link.url}
+                        className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[0.95rem] font-medium text-body-text dark:text-body-text-dark no-underline transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
+                      >
+                        {link.title}
+                      </Link>
+                    ))}
+                  </div>
+                </>
               )}
-              {!context?.app?.isAuthenticated && (
-                <div className="md:hidden flex justify-center">
-                  <Button
-                    rounded
-                    onClick={() => {
-                      context?.app?.loginCallback?.();
-                      toggleMenuClass();
-                    }}>
-                    {T.UI.LOGIN}
-                  </Button>
-                </div>
+            </div>
+
+            {/* Footer */}
+            <div className="px-5 py-5 border-t border-black/[0.06] dark:border-white/[0.08]">
+              {/* Dark mode toggle */}
+              {theme?.toggleTheme && (
+                <button
+                  onClick={theme.toggleTheme}
+                  className="flex w-full items-center justify-between rounded-xl px-3 py-2.5 mb-3 text-[0.85rem] font-medium text-body-text/70 dark:text-body-text-dark/70 transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
+                >
+                  <span>{theme.isDarkTheme ? 'Light Mode' : 'Dark Mode'}</span>
+                  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                    {theme.isDarkTheme ? (
+                      <><circle cx="12" cy="12" r="5" /><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" /></>
+                    ) : (
+                      <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+                    )}
+                  </svg>
+                </button>
+              )}
+              {/* Auth action */}
+              {context?.app?.isAuthenticated ? (
+                <button
+                  onClick={context?.app?.logoutCallback}
+                  className="flex w-full items-center justify-center rounded-full py-2.5 text-[0.9rem] font-semibold text-body-text/60 dark:text-body-text-dark/60 border border-black/[0.08] dark:border-white/[0.1] transition-colors hover:bg-black/[0.04] dark:hover:bg-white/[0.06]"
+                >
+                  {T.UI.LOGOUT}
+                </button>
+              ) : (
+                <Button
+                  rounded
+                  wide
+                  onClick={() => {
+                    context?.app?.loginCallback?.();
+                    toggleMenuClass();
+                  }}
+                >
+                  {T.UI.LOGIN}
+                </Button>
               )}
             </div>
           </nav>

package/src/components/Menu/Menu.tsx

@@ -7,7 +7,20 @@ import Heading from '../Heading';
 import { HEADING_TAGS } from '../Heading/Heading.types';
 import { twMerge } from 'tailwind-merge';
 
+function useCurrentPathname(): string | null {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { usePathname } = require('next/navigation');
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return usePathname();
+  } catch {
+    return null;
+  }
+}
+
 const Menu = ({ testID, title, links, inline = true, separators = false, className }: Props) => {
+  const pathname = useCurrentPathname();
+
   return (
     <div data-testid={testID || '"Menu"'} className={twMerge(cx('flex flex-col gap-2', className))}>
       {title && (
@@ -18,13 +31,17 @@ const Menu = ({ testID, title, links, inline = true, separators = false, classNa
       <div className={cx('flex gap-0 items-center md:items-start', { 'flex-col md:flex-row ': inline }, { 'flex-col ': !inline })}>
         {links?.map((link, index) => {
           const key = `${link.id}--${index}`;
+          const isActive = pathname ? pathname === link.url || (link.url !== '/' && pathname.startsWith(link.url)) : false;
           return (
             <div key={key} className='flex gap-0'>
               <div className="relative py-2">
-                <Link href={link.url} className="flex gap-1 transition-opacity hover:opacity-70">
+                <Link href={link.url} className={cx("flex gap-1 transition-opacity hover:opacity-70", isActive && "opacity-100 font-bold")}>
                   {link.icon && <Icon name={link.icon} />}
                   {link.title && <div>{link.title}</div>}
                 </Link>
+                {isActive && (
+                  <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-current rounded-full" />
+                )}
               </div>
               {separators && index + 1 < links.length && (
                 <div className="h-full hidden md:flex self-center px-2">

package/src/components/TextInput/TextInput.tsx

@@ -33,7 +33,7 @@ const TextInput = forwardRef(function MyInput(
 
   if (type === InputType.TEXTAREA) {
     return (
-      <div data-testid="TextInput" className="relative">
+      <div data-testid="TextInput" className="relative w-full">
         <textarea
           ref={ref}
           id={name}
@@ -52,7 +52,7 @@ const TextInput = forwardRef(function MyInput(
   }
 
   return (
-    <div data-testid="TextInput" className="relative">
+    <div data-testid="TextInput" className="relative w-full">
       {icon && (
         <div className="form-icon absolute inset-y-0 start-3 flex items-center ps-3.5 pointer-events-none">
           <Icon name={icon} />
@@ -68,7 +68,7 @@ const TextInput = forwardRef(function MyInput(
         disabled={disabled}
         placeholder={placeholderSet}
         onChange={onChange}
-        className={cx('form-item text-input', { 'pl-12': icon }, className)}
+        className={cx('form-item text-input w-full', { 'pl-12': icon }, className)}
         {...rest}
       />
     </div>

package/src/features/Search/views/SearchBox/SearchBox.tsx

@@ -17,7 +17,7 @@ function SearchBox({
   resetTrigger = () => {},
 }: Props) {
   return (
-    <div className={cx('m-0 md:px-48', className)}>
+    <div className={cx('m-0 w-full', className)}>
       <form onSubmit={e => onSubmit(e)} className="flex items-center">
         <div className="flex-1 bg-body-bg/80 dark:bg-body-bg-dark/80 rounded">
           <TextInput

package/src/features/Search/views/SearchBox/SearchBox.types.ts

@@ -7,4 +7,5 @@ export interface Props {
   placeholder?: string;
   allowReset?: boolean;
   resetTrigger?: (data?: any, options?: any) => void;
+  shouldClearFilters?: boolean;
 }