@udixio/ui-react 2.5.2 → 2.7.0

package/src/lib/effects/AnimateOnScroll.ts

@@ -152,10 +152,11 @@ function queryJsObserverCandidates(
 }
 
 // Utility: identify presence of in/out classes
-function hasInOutClass(cls: DOMTokenList, prefix: string): boolean {
-  return cls.contains(`${prefix}-in`) || cls.contains(`${prefix}-out`);
+function hasOutClass(cls: DOMTokenList, prefix: string): boolean {
+  return Array.from(cls).some(
+    (className) => className.startsWith(prefix) && className.includes('-out'),
+  );
 }
-
 // Utility: set run flags for a given direction ("in" or "out"), always ensuring generic run flag exists
 function setRunFlag(el: HTMLElement, prefix: string, dir: 'in' | 'out'): void {
   el.setAttribute(`data-${prefix}-run`, ``);
@@ -163,12 +164,20 @@ function setRunFlag(el: HTMLElement, prefix: string, dir: 'in' | 'out'): void {
 }
 
 // Utility: reset run flags and restart animation timeline without changing computed styles
-function resetRunFlags(el: HTMLElement, prefix: string): void {
+function resetRunFlags(
+  el: HTMLElement,
+  prefix: string,
+  direction?: 'in' | 'out',
+): void {
   const currentAnimationName = el.style.animationName;
   el.style.animationName = 'none';
   el.removeAttribute(`data-${prefix}-run`);
-  el.removeAttribute(`data-${prefix}-in-run`);
-  el.removeAttribute(`data-${prefix}-out-run`);
+  if (!direction) {
+    el.removeAttribute(`data-${prefix}-in-run`);
+    el.removeAttribute(`data-${prefix}-out-run`);
+  } else {
+    el.removeAttribute(`data-${prefix}-${direction}-run`);
+  }
   void (el as HTMLElement).offsetWidth; // reflow to restart animations
   el.style.animationName = currentAnimationName;
 }
@@ -198,11 +207,9 @@ function addAnimationLifecycle(el: HTMLElement, prefix: string): void {
 
   const onEndOrCancel = (e: AnimationEvent) => {
     if (e.target !== el) return;
+    // If an IN animation just finished, persist a completion flag so it won't replay on upward scroll
+
     el.removeAttribute(`data-${prefix}-animating`);
-    // Clear directional run flags so a new trigger can happen after completion
-    el.removeAttribute(`data-${prefix}-in-run`);
-    el.removeAttribute(`data-${prefix}-out-run`);
-    // Note: keep generic data-{prefix}-run for style stability
   };
 
   el.addEventListener('animationstart', onStart as EventListener);
@@ -229,6 +236,21 @@ export function initAnimateOnScroll(
   // Setup JS observers for non-scroll-driven animations
   const observed = new WeakSet<Element>();
 
+  // Track scroll direction to prevent triggering IN when scrolling up
+  let lastScrollY =
+    typeof window !== 'undefined'
+      ? window.pageYOffset || window.scrollY || 0
+      : 0;
+  let scrollingDown = true; // default allow initial IN
+  const onScrollDir = () => {
+    const y = window.pageYOffset || window.scrollY || 0;
+    scrollingDown = y >= lastScrollY;
+    lastScrollY = y;
+  };
+  if (typeof window !== 'undefined') {
+    window.addEventListener('scroll', onScrollDir, { passive: true });
+  }
+
   const io = new IntersectionObserver(
     (entries) => {
       for (const entry of entries) {
@@ -239,17 +261,25 @@ export function initAnimateOnScroll(
         // If an animation is in progress, avoid re-triggering or flipping direction
         if (el.hasAttribute(`data-${prefix}-animating`)) continue;
 
-        const isOut = el.classList.contains(`${prefix}-out`);
+        const isOut = hasOutClass(el.classList, prefix);
 
-        if (!isOut && entry.isIntersecting) {
+        if (entry.isIntersecting) {
+          if (isOut) {
+            resetRunFlags(el, prefix, 'out');
+          }
           setRunFlag(el, prefix, 'in');
+
           if (once) io.unobserve(el);
-        } else if (isOut && !entry.isIntersecting) {
-          setRunFlag(el, prefix, 'out');
-          if (once) io.unobserve(el);
-        } else if (!once) {
-          // Only reset flags if not currently animating (already checked), to prevent rapid restarts
-          resetRunFlags(el, prefix);
+        } else {
+          if (!once) {
+            if (!scrollingDown) {
+              resetRunFlags(el, prefix, 'in');
+            }
+
+            if (isOut) {
+              setRunFlag(el, prefix, 'out');
+            }
+          }
         }
       }
     },
@@ -349,6 +379,9 @@ export function initAnimateOnScroll(
   // Public cleanup
   return () => {
     if (cleanupScrollDriven) cleanupScrollDriven();
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('scroll', onScrollDir as EventListener);
+    }
     io.disconnect();
   };
 }

package/src/lib/effects/State.tsx

@@ -0,0 +1,83 @@
+import { RippleEffect } from './ripple';
+import {
+  ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  ReactProps,
+} from '../utils';
+import { useEffect, useRef, useState } from 'react';
+
+export interface StateInterface {
+  type: 'div';
+  props: {
+    colorName: string;
+    stateClassName?:
+      | string
+      | 'state-ripple-group'
+      | 'state-group'
+      | 'state-layer';
+    className?: string;
+    style?: React.CSSProperties;
+  };
+  states: { isClient: boolean };
+  elements: ['stateLayer'];
+}
+
+export const State = ({
+  style,
+  colorName,
+  stateClassName = 'state-ripple-group',
+  className,
+}: ReactProps<StateInterface>) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const groupStateRef = useRef<HTMLElement | null>(null);
+
+  const [isClient, setIsClient] = useState(false);
+  const styles = useStateStyle({
+    isClient,
+    stateClassName,
+    className,
+    colorName,
+  });
+
+  useEffect(() => {
+    if (ref.current && stateClassName !== 'state-layer') {
+      const groupName = !stateClassName.includes('[')
+        ? 'group'
+        : stateClassName.split('[')[1].split(']')[0];
+      const furthestGroupState = ref.current.closest(
+        `.${groupName}:not(.${groupName} .${groupName})`,
+      );
+      groupStateRef.current = furthestGroupState as HTMLElement | null;
+    }
+    setIsClient(true);
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={styles.stateLayer}
+      style={{
+        ['--state-color' as any]: `var(--default-color, var(--color-${colorName}))`,
+        ...style,
+      }}
+    >
+      {isClient && <RippleEffect triggerRef={groupStateRef} />}
+    </div>
+  );
+};
+// ... existing code ...
+const cardConfig: ClassNameComponent<StateInterface> = ({
+  isClient,
+  stateClassName,
+}) => ({
+  stateLayer: classNames([
+    stateClassName,
+    'w-full top-0 left-0 h-full absolute pointer-events-none overflow-hidden',
+  ]),
+});
+
+export const useStateStyle = createUseClassNames<StateInterface>(
+  'stateLayer',
+  cardConfig,
+);

package/src/lib/effects/index.ts

@@ -1,6 +1,7 @@
 export * from './ripple';
 export * from './custom-scroll';
 export * from './smooth-scroll.effect';
+export * from './State';
 export * from './SyncedFixedWrapper';
 export * from './ThemeProvider';
 export * from './AnimateOnScroll';

package/src/lib/effects/ripple/RippleEffect.tsx

@@ -12,37 +12,38 @@ const RippleEffect: React.FC<RippleEffectProps> = ({
 }) => {
   const ripple = {
     initial: {
-      opacity: 0,
-      borderRadius: '50%',
-      width: '25%',
-      height: '25%',
+      opacity: 1,
+      ['--r' as any]: '25%',
     },
     animate: {
       opacity: 1,
-      borderRadius: 0,
-      width: '200%',
-      height: '200%',
+      ['--r' as any]: '100%',
+      transition: {
+        duration: 0.5,
+      },
+    },
+    exit: {
+      opacity: 0,
+      ['--r' as any]: '100%',
       transition: {
         duration: 0.3,
-        borderRadius: { duration: 0.3, delay: 0.3 },
       },
     },
-  };
+  } as const;
 
   const [isCompleted, setIsCompleted] = useState(true);
   const [isActive, setIsActive] = useState(false);
-  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
+  const [coordinates, setCoordinates] = useState({ x: 50, y: 50 });
 
   useEffect(() => {
     if (isActive) {
+      // restart presence cycle to allow exit animation after mouse up
       setIsCompleted(true);
       setIsCompleted(false);
     }
   }, [isActive]);
 
   useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
     const element = triggerRef?.current;
     if (element) {
       element.addEventListener('mousedown', handleMouseDown);
@@ -59,7 +60,10 @@ const RippleEffect: React.FC<RippleEffectProps> = ({
   const handleMouseDown = (e: MouseEvent) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
-    const el = triggerRef?.current as Element;
+    const el = triggerRef?.current as Element & {
+      clientWidth: number;
+      clientHeight: number;
+    };
     const rect = el.getBoundingClientRect();
     setIsActive(true);
     setCoordinates({
@@ -67,33 +71,42 @@ const RippleEffect: React.FC<RippleEffectProps> = ({
       y: ((e.clientY - rect.top) / el.clientHeight) * 100,
     });
   };
-  const handleMouseLeave = (e: MouseEvent) => {
+  const handleMouseLeave = (_e: MouseEvent) => {
     setIsActive(false);
   };
 
-  const handleMouseUp = (e: MouseEvent) => {
+  const handleMouseUp = (_e: MouseEvent) => {
     setIsActive(false);
   };
 
+  // Build the background as a function of state.
+  // color token mixed to a subtle alpha
+  const colorMix = `color-mix(in srgb, var(--state-color,_var(--color-${colorName})) 10%, transparent)`;
+  // const colorMix = `red`;
+
+  const style: React.CSSProperties & Record<string, any> = {
+    position: 'absolute',
+    inset: 0,
+    width: '100%',
+    height: '100%',
+    // supply CSS variables for gradient center and radius
+    ['--x' as any]: coordinates.x + '%',
+    ['--y' as any]: coordinates.y + '%',
+    ['--r' as any]: '0%', // will be animated by motion
+    background: `radial-gradient(ellipse at var(--x) var(--y), ${colorMix} var(--r), transparent calc(var(--r) * 2))`,
+    pointerEvents: 'none',
+  };
+
   return (
     <AnimatePresence mode="wait">
       {(isActive || (!isActive && !isCompleted)) && (
         <motion.div
-          style={{
-            position: 'absolute',
-            width: '100%',
-            height: '100%',
-            top: coordinates.y + '%',
-            left: coordinates.x + '%',
-            background: `color-mix(in srgb, var(--color-${colorName}) 12%, transparent)`,
-            pointerEvents: 'none',
-          }}
+          style={style}
           variants={ripple}
           initial="initial"
-          animate={'animate'}
-          exit={{ opacity: 0, transition: { duration: 0 } }}
+          animate="animate"
+          exit="exit"
           onAnimationComplete={() => setIsCompleted(true)}
-          className={'transform -translate-x-1/2 -translate-y-1/2'}
         />
       )}
     </AnimatePresence>

package/src/lib/interfaces/button.interface.ts

@@ -2,6 +2,9 @@ import { ActionOrLink } from '../utils';
 import { Transition } from 'motion';
 import { Icon } from '../icon';
 
+type ButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';
+type ButtonVariantAlias = 'primary' | 'secondary';
+
 type Props = {
   /**
    * The label is the text that is displayed on the button.
@@ -14,8 +17,9 @@ type Props = {
 
   /**
    * The button variant determines the style of the button.
+   * Aliases: 'primary' maps to 'filled', 'secondary' maps to 'tonal'
    */
-  variant?: 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';
+  variant?: ButtonVariant | ButtonVariantAlias;
 
   /**
    * Disables the button if set to true.

package/src/lib/interfaces/fab-menu.interface.ts

@@ -0,0 +1,12 @@
+import { FabInterface } from './fab.interface';
+
+export interface FabMenuInterface {
+  type: 'div';
+  props: FabInterface['props'] & {
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  };
+  elements: ['fabMenu', 'fab', 'actions', 'action'];
+}

package/src/lib/interfaces/fab.interface.ts

@@ -2,14 +2,20 @@ import { ActionOrLink } from '../utils/component';
 import { Transition } from 'motion';
 import { Icon } from '../icon';
 
-export type FabVariant = 'surface' | 'primary' | 'secondary' | 'tertiary';
+export type FabVariant =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'primaryContainer'
+  | 'secondaryContainer'
+  | 'tertiaryContainer';
 type Props = {
   variant?: FabVariant;
   label?: string;
   children?: string;
   icon: Icon;
   size?: 'small' | 'medium' | 'large';
-  isExtended?: boolean;
+  extended?: boolean;
   transition?: Transition;
 };
 

package/src/lib/interfaces/index.ts

@@ -4,6 +4,7 @@ export * from './carousel-item.interface';
 export * from './carousel.interface';
 export * from './divider.interface';
 export * from './fab.interface';
+export * from './fab-menu.interface';
 export * from './icon-button.interface';
 export * from './progress-indicator.interface';
 export * from './side-sheet.interface';

package/src/lib/interfaces/side-sheet.interface.tsx

@@ -16,7 +16,7 @@ export interface SideSheetInterface {
   };
   states: { isExtended: boolean };
   elements: [
-    'slideSheet',
+    'sideSheet',
     'container',
     'title',
     'content',