@mks2508/mks-ui 0.5.7 → 0.6.0

package/src/react-ui/primitives/AutoHeight/index.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import {
-  motion,
-  type HTMLMotionProps,
-  type LegacyAnimationControls,
-  type TargetAndTransition,
-  type Transition,
-} from 'motion/react';
-
-import { useAutoHeight } from '@/react-ui/hooks/Animation/UseAutoHeight';
-import { Slot, type WithAsChild } from '@/react-ui/primitives/Slot';
-
-/** Props for the AutoHeight primitive component. */
-type IAutoHeightProps = WithAsChild<
-  {
-    children: React.ReactNode;
-    /** Dependency list to trigger re-measurement. */
-    deps?: React.DependencyList;
-    /** Motion animate target. */
-    animate?: TargetAndTransition | LegacyAnimationControls;
-    /** Motion transition config. */
-    transition?: Transition;
-  } & Omit<HTMLMotionProps<'div'>, 'animate'>
->;
-
-/**
- * AutoHeight primitive — animates height changes of dynamic content.
- * Uses ResizeObserver internally to track content height and Motion for animation.
- *
- * @param deps - Dependency list to trigger re-measurement
- * @param transition - Motion spring/tween transition config
- * @param asChild - Render as child element using Slot pattern
- *
- * @example
- * ```tsx
- * <AutoHeight deps={[content]}>
- *   <div>{content}</div>
- * </AutoHeight>
- * ```
- */
-function AutoHeight({
-  children,
-  deps = [],
-  transition = {
-    type: 'spring',
-    stiffness: 300,
-    damping: 30,
-    bounce: 0,
-    restDelta: 0.01,
-  },
-  style,
-  animate,
-  asChild = false,
-  ...props
-}: IAutoHeightProps) {
-  const { ref, height } = useAutoHeight<HTMLDivElement>(deps);
-
-  const Comp = asChild ? Slot : motion.div;
-
-  return (
-    <Comp
-      style={{ overflow: 'hidden', ...style }}
-      animate={{ height, ...animate }}
-      transition={transition}
-      {...props}
-    >
-      <div ref={ref}>{children}</div>
-    </Comp>
-  );
-}
-
-export { AutoHeight, type IAutoHeightProps };

package/src/react-ui/primitives/CountingNumber/index.tsx

@@ -1,147 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { useMotionValue, useSpring, type SpringOptions } from 'motion/react';
-
-import {
-  useIsInView,
-  type IUseIsInViewOptions,
-} from '@/react-ui/hooks/DOM/UseIsInView';
-
-/** Props for the CountingNumber primitive. */
-type ICountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {
-  /** Target number to animate to. */
-  number: number;
-  /** Starting number (default: 0). */
-  fromNumber?: number;
-  /** Pad integer part with leading zeros. */
-  padStart?: boolean;
-  /** Decimal separator character. */
-  decimalSeparator?: string;
-  /** Number of decimal places to show. */
-  decimalPlaces?: number;
-  /** Spring transition options. */
-  transition?: SpringOptions;
-  /** Delay in ms before animation starts. */
-  delay?: number;
-  /** Start at target number instead of fromNumber. */
-  initiallyStable?: boolean;
-} & IUseIsInViewOptions;
-
-/**
- * CountingNumber primitive — animates a number from one value to another
- * using spring physics. Supports decimal places, padding, and in-view triggers.
- *
- * @param number - Target number to animate to
- * @param fromNumber - Starting number (default: 0)
- * @param transition - Spring physics options
- * @param inView - Only animate when in viewport
- *
- * @example
- * ```tsx
- * <CountingNumber number={1234} transition={{ stiffness: 90, damping: 50 }} />
- * ```
- *
- * @example
- * ```tsx
- * <CountingNumber number={99.99} decimalPlaces={2} decimalSeparator="," inView inViewOnce />
- * ```
- */
-function CountingNumber({
-  ref,
-  number,
-  fromNumber = 0,
-  padStart = false,
-  inView = false,
-  inViewMargin = '0px',
-  inViewOnce = true,
-  decimalSeparator = '.',
-  transition = { stiffness: 90, damping: 50 },
-  decimalPlaces = 0,
-  delay = 0,
-  initiallyStable = false,
-  ...props
-}: ICountingNumberProps) {
-  const { ref: localRef, isInView } = useIsInView(
-    ref as React.Ref<HTMLElement>,
-    {
-      inView,
-      inViewOnce,
-      inViewMargin,
-    },
-  );
-
-  const numberStr = number.toString();
-  const decimals =
-    typeof decimalPlaces === 'number'
-      ? decimalPlaces
-      : numberStr.includes('.')
-        ? (numberStr.split('.')[1]?.length ?? 0)
-        : 0;
-
-  const motionVal = useMotionValue(initiallyStable ? number : fromNumber);
-  const springVal = useSpring(motionVal, transition);
-
-  React.useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      if (isInView) motionVal.set(number);
-    }, delay);
-
-    return () => clearTimeout(timeoutId);
-  }, [isInView, number, motionVal, delay]);
-
-  React.useEffect(() => {
-    const unsubscribe = springVal.on('change', (latest) => {
-      if (localRef.current) {
-        let formatted =
-          decimals > 0
-            ? latest.toFixed(decimals)
-            : Math.round(latest).toString();
-
-        if (decimals > 0) {
-          formatted = formatted.replace('.', decimalSeparator);
-        }
-
-        if (padStart) {
-          const finalIntLength = Math.floor(Math.abs(number)).toString().length;
-          const [intPart, fracPart] = formatted.split(decimalSeparator);
-          const paddedInt = intPart?.padStart(finalIntLength, '0') ?? '';
-          formatted = fracPart
-            ? `${paddedInt}${decimalSeparator}${fracPart}`
-            : paddedInt;
-        }
-
-        localRef.current.textContent = formatted;
-      }
-    });
-    return () => unsubscribe();
-  }, [springVal, decimals, padStart, number, decimalSeparator, localRef]);
-
-  const finalIntLength = Math.floor(Math.abs(number)).toString().length;
-
-  const formatValue = (val: number) => {
-    let out = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toString();
-    if (decimals > 0) out = out.replace('.', decimalSeparator);
-    if (padStart) {
-      const [intPart, fracPart] = out.split(decimalSeparator);
-      const paddedInt = (intPart ?? '').padStart(finalIntLength, '0');
-      out = fracPart ? `${paddedInt}${decimalSeparator}${fracPart}` : paddedInt;
-    }
-    return out;
-  };
-
-  const zeroText = padStart
-    ? '0'.padStart(finalIntLength, '0') +
-      (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '')
-    : '0' + (decimals > 0 ? decimalSeparator + '0'.repeat(decimals) : '');
-
-  const initialText = initiallyStable ? formatValue(number) : zeroText;
-
-  return (
-    <span ref={localRef} data-slot="counting-number" {...props}>
-      {initialText}
-    </span>
-  );
-}
-
-export { CountingNumber, type ICountingNumberProps };

package/src/react-ui/primitives/Highlight/Highlight.types.ts

@@ -1,136 +0,0 @@
-import type { Transition } from 'motion/react';
-
-/** Mode for highlight tracking. */
-export type HighlightMode = 'children' | 'parent';
-
-/** Bounding rectangle offsets. */
-export type Bounds = {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
-};
-
-/** Internal context type for Highlight state. */
-export 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;
-};
-
-/** Base props shared by all Highlight variants. */
-export 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;
-};
-
-/** Props specific to parent mode. */
-export type ParentModeHighlightProps = {
-  boundsOffset?: Partial<Bounds>;
-  containerClassName?: string;
-  forceUpdateBounds?: boolean;
-};
-
-/** Controlled parent mode highlight props. */
-export type ControlledParentModeHighlightProps<T extends React.ElementType = 'div'> =
-  BaseHighlightProps<T> &
-    ParentModeHighlightProps & {
-      mode: 'parent';
-      controlledItems: true;
-      children: React.ReactNode;
-    };
-
-/** Controlled children mode highlight props. */
-export type ControlledChildrenModeHighlightProps<T extends React.ElementType = 'div'> =
-  BaseHighlightProps<T> & {
-    mode?: 'children' | undefined;
-    controlledItems: true;
-    children: React.ReactNode;
-  };
-
-/** Uncontrolled parent mode highlight props. */
-export type UncontrolledParentModeHighlightProps<T extends React.ElementType = 'div'> =
-  BaseHighlightProps<T> &
-    ParentModeHighlightProps & {
-      mode: 'parent';
-      controlledItems?: false;
-      itemsClassName?: string;
-      children: React.ReactElement | React.ReactElement[];
-    };
-
-/** Uncontrolled children mode highlight props. */
-export type UncontrolledChildrenModeHighlightProps<
-  T extends React.ElementType = 'div',
-> = BaseHighlightProps<T> & {
-  mode?: 'children';
-  controlledItems?: false;
-  itemsClassName?: string;
-  children: React.ReactElement | React.ReactElement[];
-};
-
-/**
- * Props for the Highlight component.
- * Discriminated union supporting controlled/uncontrolled + children/parent modes.
- */
-export type IHighlightProps<T extends React.ElementType = 'div'> =
-  | ControlledParentModeHighlightProps<T>
-  | ControlledChildrenModeHighlightProps<T>
-  | UncontrolledParentModeHighlightProps<T>
-  | UncontrolledChildrenModeHighlightProps<T>;
-
-/** Extended child props used internally by HighlightItem. */
-export 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;
-};
-
-/**
- * Props for a HighlightItem within a Highlight container.
- */
-export type IHighlightItemProps<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;
-  };