@mks2508/mks-ui 0.1.0

package/src/components/animate-ui/primitives/base/tooltip.tsx

@@ -0,0 +1,209 @@
+'use client';
+
+import * as React from 'react';
+import { Tooltip as TooltipPrimitive } from '@base-ui-components/react/tooltip';
+import {
+  AnimatePresence,
+  motion,
+  useMotionValue,
+  useSpring,
+  type HTMLMotionProps,
+  type MotionValue,
+  type SpringOptions,
+} from 'motion/react';
+
+import { getStrictContext } from '@/lib/get-strict-context';
+import { useControlledState } from '@/hooks/use-controlled-state';
+
+type TooltipContextType = {
+  isOpen: boolean;
+  setIsOpen: TooltipProps['onOpenChange'];
+  x: MotionValue<number>;
+  y: MotionValue<number>;
+  followCursor?: boolean | 'x' | 'y';
+  followCursorSpringOptions?: SpringOptions;
+};
+
+const [LocalTooltipProvider, useTooltip] =
+  getStrictContext<TooltipContextType>('TooltipContext');
+
+type TooltipProviderProps = React.ComponentProps<
+  typeof TooltipPrimitive.Provider
+>;
+
+function TooltipProvider(props: TooltipProviderProps) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" {...props} />;
+}
+
+type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root> & {
+  followCursor?: boolean | 'x' | 'y';
+  followCursorSpringOptions?: SpringOptions;
+};
+
+function Tooltip({
+  followCursor = false,
+  followCursorSpringOptions = { stiffness: 200, damping: 17 },
+  ...props
+}: TooltipProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: props?.open,
+    defaultValue: props?.defaultOpen,
+    onChange: props?.onOpenChange,
+  });
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+
+  return (
+    <LocalTooltipProvider
+      value={{
+        isOpen,
+        setIsOpen,
+        x,
+        y,
+        followCursor,
+        followCursorSpringOptions,
+      }}
+    >
+      <TooltipPrimitive.Root
+        data-slot="tooltip"
+        {...props}
+        onOpenChange={setIsOpen}
+      />
+    </LocalTooltipProvider>
+  );
+}
+
+type TooltipTriggerProps = React.ComponentProps<
+  typeof TooltipPrimitive.Trigger
+>;
+
+function TooltipTrigger({ onMouseMove, ...props }: TooltipTriggerProps) {
+  const { x, y, followCursor } = useTooltip();
+
+  const handleMouseMove = (
+    event: Parameters<NonNullable<TooltipTriggerProps['onMouseMove']>>[0],
+  ) => {
+    onMouseMove?.(event);
+
+    const target = event.currentTarget.getBoundingClientRect();
+
+    if (followCursor === 'x' || followCursor === true) {
+      const eventOffsetX = event.clientX - target.left;
+      const offsetXFromCenter = (eventOffsetX - target.width / 2) / 2;
+      x.set(offsetXFromCenter);
+    }
+
+    if (followCursor === 'y' || followCursor === true) {
+      const eventOffsetY = event.clientY - target.top;
+      const offsetYFromCenter = (eventOffsetY - target.height / 2) / 2;
+      y.set(offsetYFromCenter);
+    }
+  };
+
+  return (
+    <TooltipPrimitive.Trigger
+      data-slot="tooltip-trigger"
+      onMouseMove={handleMouseMove}
+      {...props}
+    />
+  );
+}
+
+type TooltipPortalProps = Omit<
+  React.ComponentProps<typeof TooltipPrimitive.Portal>,
+  'keepMounted'
+>;
+
+function TooltipPortal(props: TooltipPortalProps) {
+  const { isOpen } = useTooltip();
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <TooltipPrimitive.Portal
+          keepMounted
+          data-slot="tooltip-portal"
+          {...props}
+        />
+      )}
+    </AnimatePresence>
+  );
+}
+
+type TooltipPositionerProps = React.ComponentProps<
+  typeof TooltipPrimitive.Positioner
+>;
+
+function TooltipPositioner(props: TooltipPositionerProps) {
+  return (
+    <TooltipPrimitive.Positioner data-slot="tooltip-positioner" {...props} />
+  );
+}
+
+type TooltipPopupProps = Omit<
+  React.ComponentProps<typeof TooltipPrimitive.Popup>,
+  'render'
+> &
+  HTMLMotionProps<'div'>;
+
+function TooltipPopup({
+  transition = { type: 'spring', stiffness: 300, damping: 25 },
+  style,
+  ...props
+}: TooltipPopupProps) {
+  const { x, y, followCursor, followCursorSpringOptions } = useTooltip();
+  const translateX = useSpring(x, followCursorSpringOptions);
+  const translateY = useSpring(y, followCursorSpringOptions);
+
+  return (
+    <TooltipPrimitive.Popup
+      render={
+        <motion.div
+          key="tooltip-popup"
+          data-slot="tooltip-popup"
+          initial={{ opacity: 0, scale: 0.5 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{ opacity: 0, scale: 0.5 }}
+          transition={transition}
+          style={{
+            x:
+              followCursor === 'x' || followCursor === true
+                ? translateX
+                : undefined,
+            y:
+              followCursor === 'y' || followCursor === true
+                ? translateY
+                : undefined,
+            ...style,
+          }}
+          {...props}
+        />
+      }
+    />
+  );
+}
+
+type TooltipArrowProps = React.ComponentProps<typeof TooltipPrimitive.Arrow>;
+
+function TooltipArrow(props: TooltipArrowProps) {
+  return <TooltipPrimitive.Arrow data-slot="tooltip-arrow" {...props} />;
+}
+
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipPortal,
+  TooltipPositioner,
+  TooltipPopup,
+  TooltipArrow,
+  useTooltip,
+  type TooltipProviderProps,
+  type TooltipProps,
+  type TooltipTriggerProps,
+  type TooltipPortalProps,
+  type TooltipPositionerProps,
+  type TooltipPopupProps,
+  type TooltipArrowProps,
+  type TooltipContextType,
+};

package/src/components/animate-ui/primitives/effects/auto-height.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import {
+  motion,
+  type HTMLMotionProps,
+  type LegacyAnimationControls,
+  type TargetAndTransition,
+  type Transition,
+} from 'motion/react';
+
+import { useAutoHeight } from '@/hooks/use-auto-height';
+import { Slot, WithAsChild } from '@/components/animate-ui/primitives/animate/slot';
+
+type AutoHeightProps = WithAsChild<
+  {
+    children: React.ReactNode;
+    deps?: React.DependencyList;
+    animate?: TargetAndTransition | LegacyAnimationControls;
+    transition?: Transition;
+  } & Omit<HTMLMotionProps<'div'>, 'animate'>
+>;
+
+function AutoHeight({
+  children,
+  deps = [],
+  transition = {
+    type: 'spring',
+    stiffness: 300,
+    damping: 30,
+    bounce: 0,
+    restDelta: 0.01,
+  },
+  style,
+  animate,
+  asChild = false,
+  ...props
+}: AutoHeightProps) {
+  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 AutoHeightProps };