@luanthnh/cntt-ui 0.1.5

package/components/motion/highlight.tsx

@@ -0,0 +1,605 @@
+'use client';
+
+import * as React from 'react';
+import { AnimatePresence, motion, Transition } from 'motion/react';
+
+import { cn } from '@/lib/utils';
+
+type HighlightMode = 'children' | 'parent';
+
+type Bounds = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+
+type HighlightContextType<T extends string> = {
+  as?: keyof HTMLElementTagNameMap;
+  mode: HighlightMode;
+  activeValue: T | null;
+  setActiveValue: (value: T | null) => void;
+  setBounds: (bounds: DOMRect) => void;
+  clearBounds: () => void;
+  id: string;
+  hover: boolean;
+  click: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  activeClassName?: string;
+  setActiveClassName: (className: string) => void;
+  transition?: Transition;
+  disabled?: boolean;
+  enabled?: boolean;
+  exitDelay?: number;
+  forceUpdateBounds?: boolean;
+};
+
+const HighlightContext = React.createContext<HighlightContextType<string> | undefined>(undefined);
+
+function useHighlight<T extends string>(): HighlightContextType<T> {
+  const context = React.useContext(HighlightContext);
+  if (!context) {
+    throw new Error('useHighlight must be used within a HighlightProvider');
+  }
+  return context as unknown as HighlightContextType<T>;
+}
+
+type BaseHighlightProps<T extends React.ElementType = 'div'> = {
+  as?: T;
+  ref?: React.Ref<HTMLDivElement>;
+  mode?: HighlightMode;
+  value?: string | null;
+  defaultValue?: string | null;
+  onValueChange?: (value: string | null) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  transition?: Transition;
+  hover?: boolean;
+  click?: boolean;
+  disabled?: boolean;
+  enabled?: boolean;
+  exitDelay?: number;
+};
+
+type ParentModeHighlightProps = {
+  boundsOffset?: Partial<Bounds>;
+  containerClassName?: string;
+  forceUpdateBounds?: boolean;
+};
+
+type ControlledParentModeHighlightProps<T extends React.ElementType = 'div'> =
+  BaseHighlightProps<T> &
+    ParentModeHighlightProps & {
+      mode: 'parent';
+      controlledItems: true;
+      children: React.ReactNode;
+    };
+
+type ControlledChildrenModeHighlightProps<T extends React.ElementType = 'div'> =
+  BaseHighlightProps<T> & {
+    mode?: 'children' | undefined;
+    controlledItems: true;
+    children: React.ReactNode;
+  };
+
+type UncontrolledParentModeHighlightProps<T extends React.ElementType = 'div'> =
+  BaseHighlightProps<T> &
+    ParentModeHighlightProps & {
+      mode: 'parent';
+      controlledItems?: false;
+      itemsClassName?: string;
+      children: React.ReactElement | React.ReactElement[];
+    };
+
+type UncontrolledChildrenModeHighlightProps<T extends React.ElementType = 'div'> =
+  BaseHighlightProps<T> & {
+    mode?: 'children';
+    controlledItems?: false;
+    itemsClassName?: string;
+    children: React.ReactElement | React.ReactElement[];
+  };
+
+type HighlightProps<T extends React.ElementType = 'div'> =
+  | ControlledParentModeHighlightProps<T>
+  | ControlledChildrenModeHighlightProps<T>
+  | UncontrolledParentModeHighlightProps<T>
+  | UncontrolledChildrenModeHighlightProps<T>;
+
+function Highlight<T extends React.ElementType = 'div'>({ ref, ...props }: HighlightProps<T>) {
+  const {
+    as: Component = 'div',
+    children,
+    value,
+    defaultValue,
+    onValueChange,
+    className,
+    style,
+    transition = { type: 'spring', stiffness: 350, damping: 35 },
+    hover = false,
+    click = true,
+    enabled = true,
+    controlledItems,
+    disabled = false,
+    exitDelay = 200,
+    mode = 'children',
+  } = props;
+
+  const localRef = React.useRef<HTMLDivElement>(null);
+  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);
+
+  const [activeValue, setActiveValue] = React.useState<string | null>(
+    value ?? defaultValue ?? null,
+  );
+  const [boundsState, setBoundsState] = React.useState<Bounds | null>(null);
+  const [activeClassNameState, setActiveClassNameState] = React.useState<string>('');
+
+  const onValueChangeRef = React.useRef(onValueChange);
+  React.useEffect(() => {
+    onValueChangeRef.current = onValueChange;
+  }, [onValueChange]);
+
+  const activeValueRef = React.useRef(activeValue);
+  React.useEffect(() => {
+    activeValueRef.current = activeValue;
+  }, [activeValue]);
+
+  const safeSetActiveValue = (id: string | null) => {
+    setActiveValue((prev) => {
+      if (prev === id) return prev;
+      if (id !== activeValueRef.current) {
+        onValueChangeRef.current?.(id);
+      }
+      return id;
+    });
+  };
+
+  const boundsOffsetRef = React.useRef(
+    (props as ParentModeHighlightProps)?.boundsOffset ?? {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+    },
+  );
+  const boundsOffset = (props as ParentModeHighlightProps)?.boundsOffset;
+  React.useEffect(() => {
+    boundsOffsetRef.current = boundsOffset ?? {
+      top: 0,
+      left: 0,
+      width: 0,
+      height: 0,
+    };
+  }, [boundsOffset]);
+
+  const safeSetBoundsRef = React.useRef<(bounds: DOMRect) => void>(() => {});
+  const safeSetBounds = (bounds: DOMRect) => {
+    if (!localRef.current) return;
+
+    const boundsOffset = boundsOffsetRef.current;
+    const containerRect = localRef.current.getBoundingClientRect();
+    const newBounds: Bounds = {
+      top: bounds.top - containerRect.top + (boundsOffset.top ?? 0),
+      left: bounds.left - containerRect.left + (boundsOffset.left ?? 0),
+      width: bounds.width + (boundsOffset.width ?? 0),
+      height: bounds.height + (boundsOffset.height ?? 0),
+    };
+
+    setBoundsState((prev) => {
+      if (
+        prev &&
+        prev.top === newBounds.top &&
+        prev.left === newBounds.left &&
+        prev.width === newBounds.width &&
+        prev.height === newBounds.height
+      ) {
+        return prev;
+      }
+      return newBounds;
+    });
+  };
+  React.useEffect(() => {
+    safeSetBoundsRef.current = safeSetBounds;
+  });
+
+  const clearBounds = () => {
+    setBoundsState((prev) => (prev === null ? prev : null));
+  };
+
+  React.useEffect(() => {
+    if (value !== undefined) setActiveValue(value);
+    else if (defaultValue !== undefined) setActiveValue(defaultValue);
+  }, [value, defaultValue]);
+
+  const id = React.useId();
+
+  React.useEffect(() => {
+    if (mode !== 'parent') return undefined;
+    const container = localRef.current;
+    if (!container) return;
+
+    const onScroll = () => {
+      if (!activeValue) return;
+      const activeEl = container.querySelector<HTMLElement>(
+        `[data-value="${activeValue}"][data-highlight="true"]`,
+      );
+      if (activeEl) safeSetBoundsRef.current?.(activeEl.getBoundingClientRect());
+    };
+
+    container.addEventListener('scroll', onScroll, { passive: true });
+    return () => container.removeEventListener('scroll', onScroll);
+  }, [mode, activeValue]);
+
+  const containerClassName = (props as ParentModeHighlightProps)?.containerClassName;
+
+  const render = (children: React.ReactNode) => {
+    if (mode === 'parent') {
+      return (
+        <Component
+          ref={localRef}
+          data-slot="motion-highlight-container"
+          style={{ position: 'relative', zIndex: 1 }}
+          className={containerClassName}
+        >
+          <AnimatePresence initial={false} mode="wait">
+            {boundsState && (
+              <motion.div
+                data-slot="motion-highlight"
+                animate={{
+                  top: boundsState.top,
+                  left: boundsState.left,
+                  width: boundsState.width,
+                  height: boundsState.height,
+                  opacity: 1,
+                }}
+                initial={{
+                  top: boundsState.top,
+                  left: boundsState.left,
+                  width: boundsState.width,
+                  height: boundsState.height,
+                  opacity: 0,
+                }}
+                exit={{
+                  opacity: 0,
+                  transition: {
+                    ...transition,
+                    delay: (transition?.delay ?? 0) + (exitDelay ?? 0) / 1000,
+                  },
+                }}
+                transition={transition}
+                style={{ position: 'absolute', zIndex: 0, ...style }}
+                className={cn(className, activeClassNameState)}
+              />
+            )}
+          </AnimatePresence>
+          {children}
+        </Component>
+      );
+    }
+
+    return children;
+  };
+
+  return (
+    <HighlightContext.Provider
+      value={{
+        mode,
+        activeValue,
+        setActiveValue: safeSetActiveValue,
+        id,
+        hover,
+        click,
+        className,
+        style,
+        transition,
+        disabled,
+        enabled,
+        exitDelay,
+        setBounds: safeSetBounds,
+        clearBounds,
+        activeClassName: activeClassNameState,
+        setActiveClassName: setActiveClassNameState,
+        forceUpdateBounds: (props as ParentModeHighlightProps)?.forceUpdateBounds,
+      }}
+    >
+      {enabled
+        ? controlledItems
+          ? render(children)
+          : render(
+              React.Children.map(children, (child, index) => (
+                <HighlightItem key={index} className={props?.itemsClassName}>
+                  {child}
+                </HighlightItem>
+              )),
+            )
+        : children}
+    </HighlightContext.Provider>
+  );
+}
+
+function getNonOverridingDataAttributes(
+  element: React.ReactElement,
+  dataAttributes: Record<string, unknown>,
+): Record<string, unknown> {
+  return Object.keys(dataAttributes).reduce<Record<string, unknown>>((acc, key) => {
+    if ((element.props as Record<string, unknown>)[key] === undefined) {
+      acc[key] = dataAttributes[key];
+    }
+    return acc;
+  }, {});
+}
+
+type ExtendedChildProps = React.ComponentProps<'div'> & {
+  id?: string;
+  ref?: React.Ref<HTMLElement>;
+  'data-active'?: string;
+  'data-value'?: string;
+  'data-disabled'?: boolean;
+  'data-highlight'?: boolean;
+  'data-slot'?: string;
+};
+
+type HighlightItemProps<T extends React.ElementType = 'div'> = React.ComponentProps<T> & {
+  as?: T;
+  children: React.ReactElement;
+  id?: string;
+  value?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  transition?: Transition;
+  activeClassName?: string;
+  disabled?: boolean;
+  exitDelay?: number;
+  asChild?: boolean;
+  forceUpdateBounds?: boolean;
+};
+
+function HighlightItem<T extends React.ElementType>({
+  ref,
+  as,
+  children,
+  id,
+  value,
+  className,
+  style,
+  transition,
+  disabled = false,
+  activeClassName,
+  exitDelay,
+  asChild = false,
+  forceUpdateBounds,
+  ...props
+}: HighlightItemProps<T>) {
+  const itemId = React.useId();
+  const {
+    activeValue,
+    setActiveValue,
+    mode,
+    setBounds,
+    clearBounds,
+    hover,
+    click,
+    enabled,
+    className: contextClassName,
+    style: contextStyle,
+    transition: contextTransition,
+    id: contextId,
+    disabled: contextDisabled,
+    exitDelay: contextExitDelay,
+    forceUpdateBounds: contextForceUpdateBounds,
+    setActiveClassName,
+  } = useHighlight();
+
+  const Component = as ?? 'div';
+  const element = children as React.ReactElement<ExtendedChildProps>;
+  const childValue = id ?? value ?? element.props?.['data-value'] ?? element.props?.id ?? itemId;
+  const isActive = activeValue === childValue;
+  const isDisabled = disabled === undefined ? contextDisabled : disabled;
+  const itemTransition = transition ?? contextTransition;
+
+  const localRef = React.useRef<HTMLElement | null>(null);
+  React.useImperativeHandle(ref, () => localRef.current as HTMLDivElement);
+
+  const setRef = React.useCallback((node: HTMLElement | null) => {
+    localRef.current = node;
+  }, []);
+
+  React.useEffect(() => {
+    if (mode !== 'parent') return;
+    let rafId: number;
+    let previousBounds: Bounds | null = null;
+    const shouldUpdateBounds =
+      forceUpdateBounds === true || (contextForceUpdateBounds && forceUpdateBounds !== false);
+
+    const updateBounds = () => {
+      if (!localRef.current) return;
+
+      const bounds = localRef.current.getBoundingClientRect();
+
+      if (shouldUpdateBounds) {
+        if (
+          previousBounds &&
+          previousBounds.top === bounds.top &&
+          previousBounds.left === bounds.left &&
+          previousBounds.width === bounds.width &&
+          previousBounds.height === bounds.height
+        ) {
+          rafId = requestAnimationFrame(updateBounds);
+          return;
+        }
+        previousBounds = bounds;
+        rafId = requestAnimationFrame(updateBounds);
+      }
+
+      setBounds(bounds);
+    };
+
+    if (isActive) {
+      updateBounds();
+      setActiveClassName(activeClassName ?? '');
+    } else if (!activeValue) clearBounds();
+
+    if (shouldUpdateBounds) return () => cancelAnimationFrame(rafId);
+    return undefined;
+  }, [
+    mode,
+    isActive,
+    activeValue,
+    setBounds,
+    clearBounds,
+    activeClassName,
+    setActiveClassName,
+    forceUpdateBounds,
+    contextForceUpdateBounds,
+  ]);
+
+  if (!React.isValidElement(children)) return children;
+
+  const dataAttributes = {
+    'data-active': isActive ? 'true' : 'false',
+    'aria-selected': isActive,
+    'data-disabled': isDisabled,
+    'data-value': childValue,
+    'data-highlight': true,
+  };
+
+  const commonHandlers = hover
+    ? {
+        onMouseEnter: (e: React.MouseEvent<HTMLDivElement>) => {
+          setActiveValue(childValue);
+          element.props.onMouseEnter?.(e);
+        },
+        onMouseLeave: (e: React.MouseEvent<HTMLDivElement>) => {
+          setActiveValue(null);
+          element.props.onMouseLeave?.(e);
+        },
+      }
+    : click
+      ? {
+          onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+            setActiveValue(childValue);
+            element.props.onClick?.(e);
+          },
+        }
+      : {};
+
+  if (asChild) {
+    if (mode === 'children') {
+      return React.cloneElement(
+        element,
+        {
+          key: childValue,
+          ref: setRef,
+          className: cn('relative', element.props.className),
+          ...getNonOverridingDataAttributes(element, {
+            ...dataAttributes,
+            'data-slot': 'motion-highlight-item-container',
+          }),
+          ...commonHandlers,
+          ...props,
+        },
+        <>
+          <AnimatePresence initial={false} mode="wait">
+            {isActive && !isDisabled && (
+              <motion.div
+                layoutId={`transition-background-${contextId}`}
+                data-slot="motion-highlight"
+                style={{
+                  position: 'absolute',
+                  zIndex: 0,
+                  ...contextStyle,
+                  ...style,
+                }}
+                className={cn(contextClassName, activeClassName)}
+                transition={itemTransition}
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{
+                  opacity: 0,
+                  transition: {
+                    ...itemTransition,
+                    delay:
+                      (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1000,
+                  },
+                }}
+                {...dataAttributes}
+              />
+            )}
+          </AnimatePresence>
+
+          <Component
+            data-slot="motion-highlight-item"
+            style={{ position: 'relative', zIndex: 1 }}
+            className={className}
+            {...dataAttributes}
+          >
+            {children}
+          </Component>
+        </>,
+      );
+    }
+
+    return React.cloneElement(element, {
+      ref: setRef,
+      ...getNonOverridingDataAttributes(element, {
+        ...dataAttributes,
+        'data-slot': 'motion-highlight-item',
+      }),
+      ...commonHandlers,
+    });
+  }
+
+  return enabled ? (
+    <Component
+      key={childValue}
+      ref={localRef}
+      data-slot="motion-highlight-item-container"
+      className={cn(mode === 'children' && 'relative', className)}
+      {...dataAttributes}
+      {...props}
+      {...commonHandlers}
+    >
+      {mode === 'children' && (
+        <AnimatePresence initial={false} mode="wait">
+          {isActive && !isDisabled && (
+            <motion.div
+              layoutId={`transition-background-${contextId}`}
+              data-slot="motion-highlight"
+              style={{
+                position: 'absolute',
+                zIndex: 0,
+                ...contextStyle,
+                ...style,
+              }}
+              className={cn(contextClassName, activeClassName)}
+              transition={itemTransition}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{
+                opacity: 0,
+                transition: {
+                  ...itemTransition,
+                  delay: (itemTransition?.delay ?? 0) + (exitDelay ?? contextExitDelay ?? 0) / 1000,
+                },
+              }}
+              {...dataAttributes}
+            />
+          )}
+        </AnimatePresence>
+      )}
+
+      {React.cloneElement(element, {
+        style: { position: 'relative', zIndex: 1 },
+        className: element.props.className,
+        ...getNonOverridingDataAttributes(element, {
+          ...dataAttributes,
+          'data-slot': 'motion-highlight-item',
+        }),
+      })}
+    </Component>
+  ) : (
+    children
+  );
+}
+
+export { Highlight, HighlightItem, useHighlight, type HighlightProps, type HighlightItemProps };

package/components/motion/number-ticker.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useInView, useMotionValue, useSpring } from 'motion/react';
+
+import { cn } from '@/lib/utils';
+
+export default function NumberTicker({
+  value,
+  direction = 'up',
+  delay = 0,
+  subValue = '',
+  preValue = '',
+  className,
+}: {
+  value: number;
+  direction?: 'up' | 'down';
+  className?: string;
+  delay?: number; // delay in s
+  subValue?: string;
+  preValue?: string;
+}) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const motionValue = useMotionValue(direction === 'down' ? value : 0);
+  const springValue = useSpring(motionValue, {
+    damping: 60,
+    stiffness: 100,
+  });
+  const isInView = useInView(ref, { once: true, margin: '0px' });
+
+  useEffect(() => {
+    if (isInView) {
+      setTimeout(() => {
+        motionValue.set(direction === 'down' ? 0 : value);
+      }, delay * 1000);
+    }
+  }, [motionValue, isInView, delay, value, direction]);
+
+  useEffect(() => {
+    const updateText = (val: number) => {
+      if (ref.current) {
+        ref.current.textContent = `${preValue}${Intl.NumberFormat('en-US').format(Math.round(val))}${subValue}`;
+      }
+    };
+
+    const initialValue = direction === 'down' ? value : 0;
+    updateText(initialValue);
+
+    return springValue.on('change', (latest: number) => {
+      updateText(latest);
+    });
+  }, [preValue, springValue, subValue, value, direction]);
+
+  return <span className={cn('text-primary-50 inline-block tabular-nums', className)} ref={ref} />;
+}