@mks2508/mks-ui 0.1.4 → 0.2.0

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

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

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