@luanthnh/cntt-ui 0.1.8 → 0.1.10

package/components/motion/highlight.tsx

@@ -1,605 +0,0 @@
-'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

@@ -1,55 +0,0 @@
-'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} />;
-}