@udixio/ui-react 2.6.0 → 2.8.0

package/src/lib/components/Button.tsx

@@ -1,11 +1,39 @@
 import { classNames, ReactProps } from '../utils';
 import { ButtonInterface } from '../interfaces';
-import { buttonStyle } from '../styles';
+import { useButtonStyle } from '../styles';
 import { Icon } from '../icon';
 import { ProgressIndicator } from './ProgressIndicator';
-import { RippleEffect } from '../effects';
+import { State } from '../effects';
 import React, { useEffect, useRef } from 'react';
 
+/**
+ * Resolves variant aliases to their actual variant values
+ */
+function resolveVariantAlias(
+  variant?:
+    | 'filled'
+    | 'elevated'
+    | 'tonal'
+    | 'outlined'
+    | 'text'
+    | 'primary'
+    | 'secondary',
+): 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text' {
+  const aliasMap = {
+    primary: 'filled',
+    secondary: 'tonal',
+  } as const;
+
+  if (variant && variant in aliasMap) {
+    return aliasMap[variant as keyof typeof aliasMap];
+  }
+
+  return (
+    (variant as 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text') ||
+    'filled'
+  );
+}
+
 /**
  * Buttons prompt most actions in a UI
  * @status beta
@@ -38,6 +66,7 @@ export const Button = ({
       'Button component requires either a label prop or children content',
     );
   }
+  variant = resolveVariantAlias(variant);
 
   const ElementType = href ? 'a' : 'button';
 
@@ -72,7 +101,7 @@ export const Button = ({
       onToggle(next);
     };
   }
-  const styles = buttonStyle({
+  const styles = useButtonStyle({
     allowShapeTransformation,
     size,
     disableTextMargins,
@@ -109,25 +138,30 @@ export const Button = ({
       style={{ transition: transition.duration + 's' }}
     >
       <div className={styles.touchTarget}></div>
-      <div
-        className={styles.stateLayer}
+      <State
         style={{ transition: transition.duration + 's' }}
-      >
-        {!disabled && (
-          <RippleEffect
-            colorName={
-              (variant === 'filled' && onToggle && 'on-surface-variant') ||
-              (variant === 'filled' && !onToggle && 'on-primary') ||
-              (variant === 'elevated' && 'primary') ||
-              (variant === 'tonal' && 'on-secondary-container') ||
-              (variant === 'outlined' && 'primary') ||
-              (variant === 'text' && 'primary') ||
-              ''
-            }
-            triggerRef={resolvedRef}
-          />
+        className={styles.stateLayer}
+        colorName={classNames(
+          variant === 'filled' && {
+            'on-surface-variant': !isActive && Boolean(onToggle),
+            'on-primary': isActive || !onToggle,
+          },
+          variant === 'elevated' && {
+            'on-primary': isActive && Boolean(onToggle),
+            primary: !isActive || !onToggle,
+          },
+          variant === 'tonal' && {
+            'on-secondary': isActive && Boolean(onToggle),
+            'on-secondary-container': !isActive || !onToggle,
+          },
+          variant === 'outlined' && {
+            'inverse-on-surface': isActive && Boolean(onToggle),
+            'on-surface-variant': !isActive || !onToggle,
+          },
+          variant === 'text' && 'primary',
         )}
-      </div>
+        stateClassName={'state-ripple-group-[button]'}
+      />
 
       {iconPosition === 'left' && iconElement}
       {loading && (

package/src/lib/components/Card.tsx

@@ -1,9 +1,8 @@
 import { useRef } from 'react';
-
-import { RippleEffect } from '../effects/ripple';
 import { CardInterface } from '../interfaces';
-import { cardStyle } from '../styles';
+import { useCardStyle } from '../styles';
 import { ReactProps } from '../utils';
+import { State } from '../effects';
 
 /**
  * Cards display content and actions about a single subject
@@ -18,18 +17,21 @@ export const Card = ({
   ref,
   ...rest
 }: ReactProps<CardInterface>) => {
-  const styles = cardStyle({ className, isInteractive, variant, children });
+  const styles = useCardStyle({ className, isInteractive, variant, children });
 
   const defaultRef = useRef<HTMLDivElement>(null);
   const resolvedRef = ref || defaultRef;
 
   return (
     <div {...rest} ref={resolvedRef} className={styles.card}>
-      <div className={styles.stateLayer}>
-        {isInteractive && (
-          <RippleEffect colorName={'on-surface'} triggerRef={resolvedRef} />
-        )}
-      </div>
+      {isInteractive && (
+        <State
+          className={styles.stateLayer}
+          colorName={'on-surface'}
+          stateClassName={'state-ripple-group-[card]'}
+        />
+      )}
+
       {children}
     </div>
   );

package/src/lib/components/Carousel.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { animate } from 'motion/react';
 import { CarouselInterface, CarouselItemInterface } from '../interfaces';
 
-import { carouselStyle } from '../styles';
+import { useCarouselStyle } from '../styles';
 import { CustomScroll } from '../effects';
 import { ReactProps } from '../utils';
 import { CarouselItem, normalize } from './CarouselItem';
@@ -40,7 +40,7 @@ export const Carousel = ({
 
   const [translateX, setTranslateX] = useState(0);
 
-  const styles = carouselStyle({
+  const styles = useCarouselStyle({
     index,
     className,
     children,

package/src/lib/components/CarouselItem.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { CarouselItemInterface } from '../interfaces';
-import { carouselItemStyle } from '../styles';
+import { useCarouselItemStyle } from '../styles';
 import { MotionProps } from '../utils';
 
 export const normalize = (
@@ -34,7 +34,7 @@ export const CarouselItem = ({
   const defaultRef = useRef(null);
   const ref: React.RefObject<null | HTMLDivElement> = optionalRef || defaultRef;
 
-  const styles = carouselItemStyle({
+  const styles = useCarouselItemStyle({
     className,
     index,
     width,

package/src/lib/components/Divider.tsx

@@ -1,4 +1,4 @@
-import { dividerStyle } from '../styles';
+import { useDividerStyle } from '../styles';
 import { DividerInterface } from '../interfaces';
 import { ReactProps } from '../utils';
 
@@ -12,7 +12,7 @@ export const Divider = ({
   className,
   ...restProps
 }: ReactProps<DividerInterface>) => {
-  const styles = dividerStyle({ orientation, className });
+  const styles = useDividerStyle({ orientation, className });
 
   return <hr className={styles.divider} {...restProps} />;
 };

package/src/lib/components/Fab.tsx

@@ -1,13 +1,12 @@
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import { Icon } from '../icon';
-
-import { RippleEffect } from '../effects/ripple';
 import { AnimatePresence, motion } from 'motion/react';
 import { FabInterface } from '../interfaces/fab.interface';
-import { fabStyle } from '../styles/fab.style';
+import { useFabStyle } from '../styles/fab.style';
 import { classNames } from '../utils';
 import { ReactProps } from '../utils/component';
 import { ToolTip } from './ToolTip';
+import { State } from '../effects';
 
 /**
  * Floating action buttons (FABs) help people take primary actions
@@ -22,7 +21,7 @@ export const Fab = ({
   href,
   type,
   icon,
-  isExtended = false,
+  extended = false,
   ref,
   transition,
   children,
@@ -36,10 +35,10 @@ export const Fab = ({
   }
   const ElementType = href ? 'a' : 'button';
 
-  const styles = fabStyle({
+  const styles = useFabStyle({
     href,
     icon,
-    isExtended,
+    extended,
     label,
     size,
     variant,
@@ -84,28 +83,30 @@ export const Fab = ({
       {...(restProps as any)}
       ref={resolvedRef}
       href={href}
-      aria-label={isExtended ? undefined : label}
+      aria-label={extended ? undefined : label}
       className={styles.fab}
     >
       <ToolTip
-        trigger={isExtended ? null : undefined}
+        trigger={extended ? null : undefined}
         text={label}
         targetRef={resolvedRef}
       />
-      <span className={styles.stateLayer}>
-        <RippleEffect
-          colorName={classNames({
-            primary: variant == 'surface',
-            'on-primary-container': variant == 'primary',
-            'on-secondary-container': variant == 'secondary',
-            'on-tertiary-container': variant == 'tertiary',
-          })}
-          triggerRef={resolvedRef}
-        />
-      </span>
+      <State
+        style={{ transition: transition.duration + 's' }}
+        className={styles.stateLayer}
+        colorName={classNames({
+          'on-primary': variant == 'primary',
+          'on-secondary': variant == 'secondary',
+          'on-tertiary': variant == 'tertiary',
+          'on-primary-container': variant == 'primaryContainer',
+          'on-secondary-container': variant == 'secondaryContainer',
+          'on-tertiary-container': variant == 'tertiaryContainer',
+        })}
+        stateClassName={'state-ripple-group-[fab]'}
+      />
       <Icon icon={icon} className={styles.icon} />
       <AnimatePresence>
-        {isExtended && (
+        {extended && (
           <motion.span
             variants={labelVariants}
             initial="hidden"

package/src/lib/components/FabMenu.tsx

@@ -0,0 +1,229 @@
+import React, { useRef, useState } from 'react';
+import { FabMenuInterface } from '../interfaces/fab-menu.interface';
+import { useFabMenuStyle } from '../styles/fab-menu.style';
+import { ReactProps } from '../utils/component';
+import { Fab } from './Fab';
+import { Button } from './Button';
+import { ButtonInterface } from '../interfaces';
+import { classNames } from '../utils';
+import { IconButton } from './IconButton';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { AnimatePresence, motion } from 'motion/react';
+
+/**
+ * Floating action buttons (FABs) help people take primary actions
+ * @status beta
+ * @category Action
+ */
+export const FabMenu = ({
+  className,
+  label,
+  variant = 'primary',
+  size = 'medium',
+  href,
+  icon,
+  extended = false,
+  ref,
+  transition,
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  ...restProps
+}: ReactProps<FabMenuInterface>) => {
+  transition = { duration: 0.3, ease: 'easeInOut', ...transition };
+
+  const defaultRef = useRef(null);
+  const resolvedRef = ref || defaultRef;
+
+  // Controlled/uncontrolled open state
+  const isControlled = typeof openProp === 'boolean';
+  const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+  const open = isControlled ? (openProp as boolean) : internalOpen;
+  const setOpen = (next: boolean) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const buttonChildren = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.type === Button,
+  );
+
+  const styles = useFabMenuStyle({
+    href,
+    icon,
+    extended,
+    label,
+    size,
+    variant,
+    className,
+    transition,
+    children: label,
+    open,
+  });
+
+  const MotionFab = motion.create(Fab);
+  const MotionIconButton = motion.create(IconButton);
+  const MotionButton = motion.create(Button);
+
+  const renderFab = (props) => (
+    <MotionFab
+      icon={icon}
+      extended={extended}
+      label={label}
+      variant={(variant + 'Container') as any}
+      size={size}
+      className={styles.fab + ' ' + (className ?? '')}
+      aria-expanded={open}
+      onClick={() => setOpen(true)}
+      style={{ transition: 'border-radius 0.3s ease-in-out' }}
+      transition={{
+        duration: transition.duration,
+        ease: 'easeInOut',
+        borderRadius: { duration: transition.duration, ease: 'easeInOut' },
+        background: { duration: transition.duration, ease: 'easeInOut' },
+        ...transition,
+      }}
+      {...props}
+    />
+  );
+
+  return (
+    <div className={styles.fabMenu} ref={resolvedRef} {...restProps}>
+      <AnimatePresence>
+        {open && (
+          <div className={styles.actions} role="menu" aria-hidden={!open}>
+            {(() => {
+              const total = buttonChildren.length;
+              return buttonChildren.map((child, index) => {
+                const childProps = (
+                  child as React.ReactElement<ReactProps<ButtonInterface>>
+                ).props;
+                const reverseIndex = total - 1 - index; // inverser l'ordre d'animation
+                const delay = (transition?.delay ?? 0) + reverseIndex * 0.06; // délai échelonné inversé, un peu plus marqué
+
+                const variants = {
+                  open: {
+                    overflow: 'visible',
+                    opacity: 1,
+                    width: 'auto',
+                    transition: {
+                      ...transition,
+                      delay,
+                      opacity: {
+                        delay: transition?.duration / 2 + delay,
+                      },
+                    },
+                  },
+                  close: {
+                    overflow: 'hidden',
+                    opacity: 0,
+                    width: 0,
+                    transition: {
+                      ...transition,
+                      delay,
+                      opacity: {
+                        duration: transition?.duration / 1.5,
+                      },
+                    },
+                  },
+                };
+
+                return (
+                  <motion.div
+                    initial={'close'}
+                    animate={'open'}
+                    variants={variants}
+                    transition={transition}
+                    exit={'close'}
+                  >
+                    {React.cloneElement(
+                      child as React.ReactElement<ReactProps<ButtonInterface>>,
+                      {
+                        key: index,
+                        shape: 'rounded',
+                        variant: 'filled',
+                        className: () => ({
+                          button: classNames('max-w-full overflow-hidden', {
+                            'px-0': !open,
+                            'bg-primary-container text-on-primary-container ':
+                              variant === 'primary',
+                            'bg-secondary-container text-on-secondary-container':
+                              variant === 'secondary',
+                            'bg-tertiary-container text-on-tertiary-container':
+                              variant === 'tertiary',
+                          }),
+                          stateLayer: classNames({
+                            'state-on-primary-container': variant === 'primary',
+                            'state-on-secondary-container':
+                              variant === 'secondary',
+                            'state-on-tertiary-container':
+                              variant === 'tertiary',
+                          }),
+                        }),
+                      },
+                    )}
+                  </motion.div>
+                );
+              });
+            })()}
+          </div>
+        )}
+      </AnimatePresence>
+
+      {renderFab({
+        className: 'invisible pointer-events-none',
+      })}
+      <div className={'absolute right-0 top-0'}>
+        {!open &&
+          renderFab({
+            className: '',
+            layout: true,
+            layoutId: 'fab-menu',
+          })}
+        {open && (
+          <>
+            <MotionIconButton
+              layout
+              layoutId="fab-menu"
+              variant={'filled'}
+              className={() => ({
+                iconButton: classNames('', {
+                  'bg-primary text-on-primary': variant === 'primary',
+                  'bg-secondary text-on-secondary': variant === 'secondary',
+                  'bg-tertiary text-on-tertiary': variant === 'tertiary',
+                }),
+                stateLayer: classNames({
+                  '[--default-color:var(--color-on-primary)]':
+                    variant === 'primary',
+                  '[--default-color:var(--color-on-secondary)]':
+                    variant === 'secondary',
+                  '[--default-color:var(--color-on-tertiary)]':
+                    variant === 'tertiary',
+                }),
+              })}
+              style={{ transition: 'border-radius 0.3s ease-in-out' }}
+              transition={{
+                duration: transition.duration,
+                ease: 'easeInOut',
+                borderRadius: {
+                  duration: transition.duration,
+                  ease: 'easeInOut',
+                },
+                background: {
+                  duration: transition.duration,
+                  ease: 'easeInOut',
+                },
+                ...transition,
+              }}
+              icon={faClose}
+              onClick={() => setOpen(false)}
+            >
+              Close
+            </MotionIconButton>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/lib/components/IconButton.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useRef } from 'react';
 
 import { Icon } from '../icon/icon';
 import { IconButtonInterface } from '../interfaces/icon-button.interface';
-import { iconButtonStyle } from '../styles/icon-button.style';
+import { useIconButtonStyle } from '../styles/icon-button.style';
 import { ReactProps } from '../utils/component';
-import { RippleEffect } from '../effects';
+import { State } from '../effects';
 import { classNames } from '../utils';
 import { ToolTip } from './ToolTip';
 
@@ -76,7 +76,7 @@ export const IconButton = ({
   // Détermine le type de l'élément à rendre : un bouton ou un lien
   const ElementType = href ? 'a' : 'button';
 
-  const styles = iconButtonStyle({
+  const styles = useIconButtonStyle({
     transition,
     shape,
     allowShapeTransformation,
@@ -120,35 +120,29 @@ export const IconButton = ({
       ></ToolTip>
 
       <div className={styles.touchTarget} />
-      <div
-        className={styles.stateLayer}
+      <State
         style={{ transition: transition.duration + 's' }}
-      >
-        {!disabled && (
-          <RippleEffect
-            colorName={classNames(
-              variant === 'standard' && {
-                'on-surface-variant': !isActive,
-                primary: isActive,
-              },
-              variant === 'filled' && {
-                primary: !isActive && Boolean(onToggle),
-                'inverse-on-surface': isActive || !onToggle,
-              },
-              variant === 'tonal' && {
-                'on-surface-variant': !isActive && Boolean(onToggle),
-                'on-secondary-container': isActive || !onToggle,
-              },
-              variant === 'outlined' && {
-                'on-surface-variant': !isActive,
-                'on-primary': isActive,
-              },
-            )}
-            triggerRef={resolvedRef}
-          />
+        className={styles.stateLayer}
+        colorName={classNames(
+          variant === 'standard' && {
+            'on-surface-variant': !isActive,
+            'on-primary': isActive,
+          },
+          variant === 'filled' && {
+            'on-surface-variant': !isActive && Boolean(onToggle),
+            'on-primary': isActive || !onToggle,
+          },
+          variant === 'tonal' && {
+            'on-secondary': isActive && Boolean(onToggle),
+            'on-secondary-container': !isActive || !onToggle,
+          },
+          variant === 'outlined' && {
+            'inverse-on-surface': isActive && Boolean(onToggle),
+            'on-surface-variant': !isActive || !onToggle,
+          },
         )}
-      </div>
-
+        stateClassName={'state-ripple-group-[icon-button]'}
+      />
       {icon && <Icon icon={icon} className={styles.icon} />}
     </ElementType>
   );

package/src/lib/components/NavigationRail.tsx

@@ -8,12 +8,15 @@ import {
   RefObject,
   useEffect,
   useRef,
-  useState
+  useState,
 } from 'react';
 import { ReactProps } from '../utils';
-import { NavigationRailItem, NavigationRailSection } from './NavigationRailItem';
+import {
+  NavigationRailItem,
+  NavigationRailSection,
+} from './NavigationRailItem';
 import { Fab } from './Fab';
-import { navigationRailStyle } from '../styles/navigation-rail.style';
+import { useNavigationRailStyle } from '../styles/navigation-rail.style';
 import { NavigationRailInterface } from '../interfaces/navigation-rail.interface';
 import { FabInterface, NavigationRailItemInterface } from '../interfaces';
 import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons';
@@ -96,7 +99,7 @@ export const NavigationRail = ({
     (child) => isValidElement(child) && child.type === Fab,
   );
 
-  const styles = navigationRailStyle({
+  const styles = useNavigationRailStyle({
     children,
     onItemSelected,
     selectedItem,

package/src/lib/components/NavigationRailItem.tsx

@@ -1,10 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import { Icon } from '../icon';
-import { ReactProps } from '../utils';
+import { classNames, ReactProps } from '../utils';
 import { NavigationRailItemInterface } from '../interfaces';
-import { navigationRailItemStyle } from '../styles/navigation-rail-item.style';
+import { useNavigationRailItemStyle } from '../styles/navigation-rail-item.style';
 import { AnimatePresence, motion } from 'motion/react';
+import { State } from '../effects';
 
 /**
  * @status beta
@@ -80,7 +81,7 @@ export const NavigationRailItem = ({
     }
   };
 
-  const styles = navigationRailItemStyle({
+  const styles = useNavigationRailItemStyle({
     isExtended,
     extendedOnly,
     className,
@@ -128,7 +129,15 @@ export const NavigationRailItem = ({
         transition={transition}
         className={styles.container}
       >
-        <motion.div layout className={styles.stateLayer}></motion.div>
+        <State
+          style={{ transition: transition.duration + 's' }}
+          className={styles.stateLayer}
+          colorName={classNames({
+            'on-surface': !isSelected,
+            'on-secondary-container': isSelected,
+          })}
+          stateClassName={'state-ripple-group-[navigation-rail-item]'}
+        />
         {icon && (
           <Icon
             icon={isSelected ? iconSelected : icon}

package/src/lib/components/ProgressIndicator.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { ProgressIndicatorInterface } from '../interfaces/progress-indicator.interface';
 
 import { motion } from 'motion/react';
-import { progressIndicatorStyle } from '../styles/progress-indicator.style';
+import { useProgressIndicatorStyle } from '../styles/progress-indicator.style';
 import { ReactProps } from '../utils/component';
 
 /**
@@ -67,7 +67,7 @@ export const ProgressIndicator = ({
     return;
   }, [completedPercentage, transitionDuration]);
 
-  const styles = progressIndicatorStyle({
+  const styles = useProgressIndicatorStyle({
     className,
     variant,
     value,