@udixio/ui-react 2.5.2 → 2.7.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,19 +2,21 @@ 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';
 
+function clamp(v: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, v));
+}
+
 /**
  * Carousels show a collection of items that can be scrolled on and off the screen
  *
  * @status beta
  * @category Layout
  * @limitations
- * - At the end of the scroll, a residual gap/space may remain visible.
- * - In/out behavior is inconsistent at range edges.
  * - Responsive behavior on mobile is not supported.
  * - Only the default (hero) variant is supported.
  */
@@ -38,7 +40,7 @@ export const Carousel = ({
 
   const [translateX, setTranslateX] = useState(0);
 
-  const styles = carouselStyle({
+  const styles = useCarouselStyle({
     index,
     className,
     children,
@@ -49,6 +51,7 @@ export const Carousel = ({
     onChange,
     gap,
     scrollSensitivity,
+    onMetricsChange,
   });
 
   const items = React.Children.toArray(children).filter(
@@ -79,7 +82,6 @@ export const Carousel = ({
 
     const scrollVisible =
       scroll?.scrollVisible ?? (ref.current as any)?.clientWidth ?? 0;
-    // const scrollProgress = scrollMV.get();
 
     function assignRelativeIndexes(
       values: number[],
@@ -90,13 +92,16 @@ export const Carousel = ({
       index: number;
       width: number;
     }[] {
-      return values.map((value, index) => ({
-        itemScrollXCenter: value,
-        relativeIndex:
-          (value - progressScroll) / Math.abs(values[1] - values[0]),
-        index: index,
-        width: 0,
-      }));
+      return values.map((value, index) => {
+        const relativeIndex =
+          (value - progressScroll) / Math.abs(values[1] - values[0]);
+        return {
+          itemScrollXCenter: value,
+          relativeIndex,
+          index: index,
+          width: 0,
+        };
+      });
     }
 
     const itemsScrollXCenter = items.map((_, index) => {
@@ -113,206 +118,85 @@ export const Carousel = ({
       itemsScrollXCenter,
       scroll?.scrollProgress ?? 0,
     ).sort((a, b) => a.index - b.index);
-    // const visible =
-    //   ((ref.current?.clientWidth ?? scrollVisible) - (outputRange[0] + gap)) /
-    //   (outputRange[1] + gap);
-
-    const visible =
-      ((ref.current?.clientWidth ?? scrollVisible) + gap) /
-      (outputRange[1] + gap);
 
-    let widthContent = visible;
-
-    let selectedItem;
+    let widthLeft =
+      (ref.current?.clientWidth ?? scrollVisible) + gap + outputRange[0] + gap;
 
     const visibleItemValues = itemValues
       .sort((a, b) => Math.abs(a.relativeIndex) - Math.abs(b.relativeIndex))
       .map((item, index) => {
-        if (!item) return;
-
-        if (index === 0) {
+        if (widthLeft <= 0) {
+          return undefined;
+        }
+        if (index == 0) {
           setSelectedItem(item.index);
-          selectedItem = item;
         }
 
-        const el = itemRefs[item.index]?.current;
-        if (!ref.current || !el) return;
+        item.width = normalize(
+          widthLeft - gap,
+          [outputRange[0], outputRange[1]],
+          [outputRange[0], outputRange[1]],
+        );
+
+        widthLeft -= item.width + gap;
 
-        if (widthContent <= 0) {
-          return undefined;
-        } else {
-          item.width = outputRange[1];
-        }
+        if (widthLeft != 0 && widthLeft < (outputRange[0] + gap) * 2) {
+          const newWidth =
+            item.width - ((outputRange[0] + gap) * 2 - widthLeft);
+
+          widthLeft += item.width;
+          item.width = newWidth;
+          widthLeft -= item.width;
+        } else if (widthLeft == 0 && item.width >= outputRange[0] * 2 + gap) {
+          const newWidth = item.width - (outputRange[0] + gap - widthLeft);
 
-        --widthContent;
+          widthLeft += item.width;
+          item.width = newWidth;
+          widthLeft -= item.width;
+        }
         return item;
       })
-      .filter(Boolean)
-      .sort((a, b) => a.index - b.index) as {
+      .filter(Boolean) as unknown as {
       itemScrollXCenter: number;
       relativeIndex: number;
       index: number;
       width: number;
     }[];
 
-    let widthLeft = (ref.current?.clientWidth ?? scrollVisible) - gap;
-
-    const dynamicItems = visibleItemValues.filter((item, index, array) => {
-      let isDynamic = false;
-      if (item.width == outputRange[1]) {
-        if (index === 0 || index === array.length - 1) {
-          isDynamic = true;
-        }
-      }
-      if (isDynamic) {
-        return true;
-      } else {
-        widthLeft -= item.width + gap;
-        return false;
-      }
-    });
+    const reverseItemsVisible = visibleItemValues.reverse();
+    const itemsVisibleByIndex = [...visibleItemValues].sort(
+      (a, b) => Math.abs(a.index) - Math.abs(b.index),
+    );
 
-    // console.log(dynamicItems, visibleItemValues, visible);
+    //dynamic items
 
-    let dynamicWidth = 0;
+    reverseItemsVisible.forEach((item, index) => {
+      const nextItem = reverseItemsVisible[index + 1];
+      if (!nextItem) return;
 
-    dynamicItems.forEach((item) => {
-      if (!item) return;
+      const test =
+        1 - (Math.abs(item.relativeIndex) - Math.abs(nextItem?.relativeIndex));
 
-      const result = normalize(
-        1 - Math.abs(scroll.scrollProgress - item.itemScrollXCenter),
-        [0, 1],
-        [0, 1],
+      const newWidth = normalize(
+        test,
+        [0, 2],
+        [item.width + widthLeft, nextItem.width],
       );
-      item.width = result;
-      dynamicWidth += result;
-    });
-
-    // let widthLeft =
-    //   (visible -
-    //     visibleItemValues
-    //       .slice(0, visibleItemValues.length - 2)
-    //       .filter((item) => item.width === outputRange[1]).length) *
-    //   outputRange[1];
-
-    // console.log(
-    //   visible,
-    //   widthLeft,
-    //   visibleItemValues
-    //     .slice(0, visibleItemValues.length - 2)
-    //     .filter((item) => item.width === outputRange[1]).length,
-    // );
-
-    let translate = 0;
-    dynamicItems.forEach((item, index) => {
-      if (!item) return;
-
-      if (index == 0) {
-        const percent = normalize(
-          item?.relativeIndex,
-          [-2, item.index == 0 ? 0 : -1],
-          [0, 1],
-        );
-
-        if (item.index >= 1) {
-          itemValues.sort((a, b) => a.index - b.index);
 
-          itemValues[item.index - 1].width = outputRange[0];
-          visibleItemValues.unshift(itemValues[item.index - 1]);
-          widthLeft -= outputRange[0] + gap;
-
-          translate = normalize(
-            1 - percent,
-            [0, 1],
-            [0, -(outputRange[0] + gap)],
-          );
-        }
-        widthLeft -= translate;
-
-        // let relative = selectedItem?.relativeIndex * 2;
-        // relative = relative > 0 ? (1 - relative) * -1 : 1 + relative;
-
-        item.width = normalize(
-          percent,
-          [0, 1],
-          [outputRange[0], outputRange[1]],
-        );
-
-        widthLeft -= item.width;
-
-        // console.log(widthLeft);
-      } else {
-        let dynamicIndex = item.index;
-        // console.log('n', dynamicIndex, widthLeft);
-        let isEnd = dynamicIndex == itemValues.length - 1;
-        const isNearEnd = dynamicIndex == itemValues.length - 2;
-        // console.log('start');
-        while (widthLeft > 0) {
-          // console.log('boucle', widthLeft);
-          const dynamicItem = itemValues.filter(
-            (item) => item.index === dynamicIndex,
-          )[0];
-
-          if (!dynamicItem) {
-            if (isEnd) {
-              throw new Error('dynamicItem not found');
-            }
-            // dynamicIndex = dynamicItems[0].index;
-            isEnd = true;
-            break;
-          }
-
-          if (!visibleItemValues.includes(dynamicItem)) {
-            visibleItemValues.push(dynamicItem);
-          }
-
-          dynamicItem.width = normalize(
-            widthLeft,
-            [outputRange[0], outputRange[1] + (gap + outputRange[0]) * 2],
-            [outputRange[0], outputRange[1]],
-          );
-
-          widthLeft -= dynamicItem.width + gap;
-
-          if (
-            (isNearEnd || isEnd) &&
-            dynamicItem.index == itemValues.length - 1
-          ) {
-            let dynamicItemIndexStart = isEnd ? 1 : 1;
-
-            while (widthLeft > 0) {
-              const dynamicItemStart = visibleItemValues[dynamicItemIndexStart];
-
-              const width =
-                normalize(
-                  dynamicItemStart.width + widthLeft,
-                  [outputRange[0], outputRange[1]],
-                  [outputRange[0], outputRange[1]],
-                ) - dynamicItemStart.width;
-
-              dynamicItemStart.width += width;
-              widthLeft -= width;
-
-              dynamicItemIndexStart--;
-              // break;
-            }
-
-            break;
-          } else {
-            dynamicIndex++;
-          }
-          // }
-        }
-      }
+      widthLeft += item.width;
+      item.width = newWidth;
+      widthLeft -= item.width;
+    });
 
-      // console.log(item, dynamicWidth, visible, selectedItem);
+    const percentMax = visibleItemValues.length / 2;
+    const percent = normalize(
+      Math.abs(itemsVisibleByIndex[0].relativeIndex),
+      [itemsVisibleByIndex[0].index == 0 ? 0 : percentMax - 1, percentMax],
+      [0, 1],
+    );
 
-      // item.width = normalize(
-      //   item.width / dynamicWidth,
-      //   [0, 1],
-      //   [0, visible * outputRange[1]],
-      // );
-    });
+    const translate =
+      normalize(percent, [0, 1], [0, 1]) * -(outputRange[0] + gap);
 
     setTranslateX(translate);
 
@@ -414,25 +298,6 @@ export const Carousel = ({
     );
   });
 
-  // persistent motion value for scroll progress, driven by user scroll and programmatic centering
-  // const scrollMVRef = useRef(motionValue(0));
-  // const scrollMV = scrollMVRef.current;
-
-  // const transform = useTransform(
-  //   scrollMV,
-  //   [0, 1],
-  //   [
-  //     0,
-  //     1 -
-  //       (ref.current?.clientWidth ?? 0) / (trackRef?.current?.clientWidth ?? 0),
-  //   ],
-  // );
-
-  // const percentTransform = useTransform(
-  //   transform,
-  //   (value) => `${-value * 100}%`,
-  // );
-
   const handleScroll = (args: {
     scrollProgress: number;
     scrollTotal: number;

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"