@udixio/ui-react 2.6.0 → 2.8.0

package/src/lib/components/SideSheet.tsx

@@ -1,6 +1,5 @@
 import { MotionProps } from '../utils';
 import { SideSheetInterface } from '../interfaces';
-import { sideSheetStyle } from '../styles';
 import { Divider } from './Divider';
 
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
@@ -8,6 +7,7 @@ import { IconButton } from './IconButton';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'motion/react';
+import { sideSheetStyle } from '../styles';
 
 /**
  * Side sheets show secondary content anchored to the side of the screen
@@ -82,7 +82,7 @@ export const SideSheet = ({
         {isExtended && (
           <div
             {...rest}
-            className={styles.slideSheet}
+            className={styles.sideSheet}
             style={{ transition: transition.duration + 's' }}
           >
             <motion.div

package/src/lib/components/Slider.tsx

@@ -1,6 +1,6 @@
 import { AnimatePresence, motion } from 'motion/react';
 import { SliderInterface } from '../interfaces';
-import { sliderStyle } from '../styles';
+import { useSliderStyle } from '../styles';
 import { classNames, ReactProps } from '../utils';
 import { useEffect, useRef, useState } from 'react';
 
@@ -106,7 +106,7 @@ export const Slider = ({
     };
   }, [mouseDown]);
 
-  const styles = sliderStyle({
+  const styles = useSliderStyle({
     className,
     isChanging,
     marks,

package/src/lib/components/Snackbar.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 import { SnackbarInterface } from '../interfaces/snackbar.interface';
-import { snackbarStyle } from '../styles/snackbar.style';
+import { useSnackbarStyle } from '../styles/snackbar.style';
 
 import { MotionProps } from '../utils/component';
 import { IconButton } from './IconButton';
@@ -22,7 +22,7 @@ export const Snackbar = ({
 }: MotionProps<SnackbarInterface>) => {
   const [isVisible, setIsVisible] = useState(true);
 
-  const styles = snackbarStyle({
+  const styles = useSnackbarStyle({
     className,
     closeIcon,
     duration,

package/src/lib/components/Switch.tsx

@@ -3,7 +3,7 @@ import React, { useRef, useState } from 'react';
 import { Icon } from '../icon';
 import { motion } from 'motion/react';
 import { SwitchInterface } from '../interfaces/switch.interface';
-import { switchStyle } from '../styles/switch.style';
+import { useSwitchStyle } from '../styles/switch.style';
 import { MotionProps } from '../utils/component';
 
 /**
@@ -48,7 +48,7 @@ export const Switch = ({
     setIsSelected(!isSelected);
     onChange?.(!isSelected);
   };
-  const styles = switchStyle({
+  const styles = useSwitchStyle({
     className,
     isSelected,
     activeIcon,

package/src/lib/components/Tab.tsx

@@ -2,10 +2,10 @@ import { motion } from 'motion/react';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { Icon } from '../icon';
-import { RippleEffect } from '../effects/ripple';
-import { tabStyle } from '../styles/tab.style';
+import { useTabStyle } from '../styles/tab.style';
 import { TabInterface } from '../interfaces/tab.interface';
 import { ReactProps } from '../utils/component';
+import { State } from '../effects';
 
 /**
  * @status beta
@@ -63,7 +63,7 @@ export const Tab = ({
     }
   };
 
-  const styles = tabStyle({
+  const styles = useTabStyle({
     className,
     onTabSelected,
     scrollable,
@@ -90,14 +90,14 @@ export const Tab = ({
       onClick={handleClick}
       {...(restProps as any)}
     >
-      <span className={styles.stateLayer}>
-        <RippleEffect
-          colorName={
-            variant === 'primary' && isSelected ? 'primary' : 'on-surface'
-          }
-          triggerRef={resolvedRef}
-        />
-      </span>
+      <State
+        style={{ transition: 0.3 + 's' }}
+        className={styles.stateLayer}
+        colorName={
+          variant === 'primary' && isSelected ? 'primary' : 'on-surface'
+        }
+        stateClassName={'state-ripple-group-[tab]'}
+      />
       <span className={styles.content}>
         {icon && <Icon icon={icon} className={styles.icon} />}
         <span className={styles.label}>{label}</span>

package/src/lib/components/Tabs.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { TabsInterface } from '../interfaces/tabs.interface';
 
-import { tabsStyle } from '../styles/tabs.style';
+import { useTabsStyle } from '../styles/tabs.style';
 import { ReactProps } from '../utils/component';
 import { TabProps } from '../interfaces/tab.interface';
 import { Tab } from './Tab';
@@ -62,7 +62,7 @@ export const Tabs = ({
 
   const tabsId = useMemo(() => uuidv4(), []);
 
-  const styles = tabsStyle({
+  const styles = useTabsStyle({
     children,
     onTabSelected,
     scrollable,

package/src/lib/components/TextField.tsx

@@ -5,7 +5,7 @@ import { motion } from 'motion/react';
 import { v4 as uuidv4 } from 'uuid';
 
 import TextareaAutosize from 'react-textarea-autosize';
-import { textFieldStyle } from '../styles/text-field.style';
+import { useTextFieldStyle } from '../styles/text-field.style';
 import { classNames } from '../utils';
 import { ReactProps } from '../utils/component';
 import { TextFieldInterface } from '../interfaces/text-field.interface';
@@ -102,7 +102,7 @@ export const TextField = ({
     setIsFocused(false);
   };
 
-  const styles = textFieldStyle({
+  const styles = useTextFieldStyle({
     showSupportingText,
     isFocused,
     showErrorIcon,

package/src/lib/components/ToolTip.tsx

@@ -1,8 +1,14 @@
-import { cloneElement, isValidElement, useEffect, useRef, useState } from 'react';
+import {
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { MotionProps } from '../utils';
 import { Button } from './Button';
 import { ToolTipInterface } from '../interfaces';
-import { toolStyle } from '../styles';
+import { useToolTipStyle } from '../styles';
 import { v4 } from 'uuid';
 import { AnimatePresence, motion } from 'motion/react';
 import { SyncedFixedWrapper } from '../effects';
@@ -170,7 +176,7 @@ export const ToolTip = ({
     }
   }
 
-  const styles = toolStyle({
+  const styles = useToolTipStyle({
     variant,
     buttons,
     className,

package/src/lib/components/index.ts

@@ -5,6 +5,7 @@ export * from './CarouselItem';
 export * from './CarouselItem';
 export * from './Divider';
 export * from './Fab';
+export * from './FabMenu';
 export * from './IconButton';
 export * from './IconButton';
 export * from './ProgressIndicator';

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',