@mks2508/mks-ui 0.2.0 → 0.3.1

package/src/react/ui/Tooltip/index.tsx

@@ -1,394 +0,0 @@
-'use client';
-
-/**
- * Animated Tooltip component built on Base UI Tooltip and Motion.
- *
- * Provides a positioned tooltip with scale entrance animation,
- * optional cursor-following via spring-animated motion values,
- * arrow support, and full AnimatePresence exit transitions.
- * All sub-components accept a `slots` prop for class-name overrides
- * following the StyleSlots pattern.
- *
- * @module @mks2508/mks-ui/react/ui/Tooltip
- *
- * @example
- * ```tsx
- * import {
- *   TooltipProvider,
- *   Tooltip,
- *   TooltipTrigger,
- *   TooltipPortal,
- *   TooltipPositioner,
- *   TooltipPopup,
- *   TooltipArrow,
- * } from '@mks2508/mks-ui';
- *
- * function Example() {
- *   return (
- *     <TooltipProvider>
- *       <Tooltip followCursor="x">
- *         <TooltipTrigger>
- *           <button>Hover me</button>
- *         </TooltipTrigger>
- *         <TooltipPortal>
- *           <TooltipPositioner sideOffset={4}>
- *             <TooltipPopup>
- *               <TooltipArrow />
- *               Helpful information
- *             </TooltipPopup>
- *           </TooltipPositioner>
- *         </TooltipPortal>
- *       </Tooltip>
- *     </TooltipProvider>
- *   );
- * }
- * ```
- */
-
-import * as React from 'react';
-import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
-import {
-  AnimatePresence,
-  motion,
-  useMotionValue,
-  useSpring,
-} from 'motion/react';
-
-import { getStrictContext } from '@/react/lib/get-strict-context';
-import { useControlledState } from '@/react/hooks/State/UseControlledState';
-import { cn } from '@/react/lib/utils';
-
-import { tooltipStyles } from './Tooltip.styles';
-import type {
-  TooltipContextType,
-  ITooltipProps,
-  ITooltipProviderProps,
-  ITooltipTriggerProps,
-  ITooltipPortalProps,
-  ITooltipPositionerProps,
-  ITooltipPopupProps,
-  ITooltipArrowProps,
-} from './Tooltip.types';
-
-/* -------------------------------------------------------------------------- */
-/*  Context                                                                   */
-/* -------------------------------------------------------------------------- */
-
-const [LocalTooltipProvider, useTooltip] =
-  getStrictContext<TooltipContextType>('TooltipContext');
-
-/* -------------------------------------------------------------------------- */
-/*  TooltipProvider                                                           */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Shared configuration provider for a group of tooltips.
- * Sets defaults like delay, skip-delay, and close-delay for all nested Tooltips.
- *
- * @param props - Provider props forwarded to Base UI Tooltip.Provider
- *
- * @example
- * ```tsx
- * <TooltipProvider delay={200}>
- *   <Tooltip>...</Tooltip>
- *   <Tooltip>...</Tooltip>
- * </TooltipProvider>
- * ```
- */
-function TooltipProvider({ slots: _slots, ...props }: ITooltipProviderProps) {
-  return (
-    <TooltipPrimitive.Provider data-slot="tooltip-provider" {...props} />
-  );
-}
-
-/* -------------------------------------------------------------------------- */
-/*  Tooltip (Root)                                                            */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Root Tooltip component.
- * Manages controlled/uncontrolled open state, cursor-following motion values,
- * and provides context to children.
- *
- * @param props - Tooltip root props including `followCursor` and spring options
- *
- * @example
- * ```tsx
- * <Tooltip followCursor="x" followCursorSpringOptions={{ stiffness: 300 }}>
- *   <TooltipTrigger>Hover</TooltipTrigger>
- *   <TooltipPortal>
- *     <TooltipPositioner>
- *       <TooltipPopup>Content</TooltipPopup>
- *     </TooltipPositioner>
- *   </TooltipPortal>
- * </Tooltip>
- * ```
- */
-function Tooltip({
-  followCursor = false,
-  followCursorSpringOptions = { stiffness: 200, damping: 17 },
-  slots,
-  config: _config,
-  ...props
-}: ITooltipProps) {
-  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>
-  );
-}
-
-/* -------------------------------------------------------------------------- */
-/*  TooltipTrigger                                                            */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Trigger element that shows the tooltip on hover/focus.
- * Tracks mouse position when `followCursor` is enabled on the parent Tooltip.
- *
- * @param props - Trigger props forwarded to Base UI Tooltip.Trigger
- *
- * @example
- * ```tsx
- * <TooltipTrigger>
- *   <button>Hover me</button>
- * </TooltipTrigger>
- * ```
- */
-function TooltipTrigger({
-  onMouseMove,
-  slots,
-  className,
-  ...props
-}: ITooltipTriggerProps) {
-  const { x, y, followCursor } = useTooltip();
-
-  const handleMouseMove = (
-    event: Parameters<NonNullable<ITooltipTriggerProps['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"
-      className={cn(tooltipStyles.trigger, slots?.trigger, className)}
-      onMouseMove={handleMouseMove}
-      {...props}
-    />
-  );
-}
-
-/* -------------------------------------------------------------------------- */
-/*  TooltipPortal                                                             */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Portal wrapper with AnimatePresence for coordinated enter/exit animations.
- * Internally sets `keepMounted` so motion exit animations play correctly.
- *
- * @param props - Portal props (without keepMounted)
- *
- * @example
- * ```tsx
- * <TooltipPortal>
- *   <TooltipPositioner>
- *     <TooltipPopup>...</TooltipPopup>
- *   </TooltipPositioner>
- * </TooltipPortal>
- * ```
- */
-function TooltipPortal({ slots: _slots, ...props }: ITooltipPortalProps) {
-  const { isOpen } = useTooltip();
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <TooltipPrimitive.Portal
-          keepMounted
-          data-slot="tooltip-portal"
-          {...props}
-        />
-      )}
-    </AnimatePresence>
-  );
-}
-
-/* -------------------------------------------------------------------------- */
-/*  TooltipPositioner                                                         */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Positioning wrapper that automatically places the popup relative to the trigger.
- *
- * @param props - Positioner props forwarded to Base UI Tooltip.Positioner
- *
- * @example
- * ```tsx
- * <TooltipPositioner sideOffset={4}>
- *   <TooltipPopup>Content</TooltipPopup>
- * </TooltipPositioner>
- * ```
- */
-function TooltipPositioner({
-  slots,
-  className,
-  ...props
-}: ITooltipPositionerProps) {
-  return (
-    <TooltipPrimitive.Positioner
-      data-slot="tooltip-positioner"
-      className={cn(tooltipStyles.positioner, slots?.positioner, className)}
-      {...props}
-    />
-  );
-}
-
-/* -------------------------------------------------------------------------- */
-/*  TooltipPopup                                                              */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Main tooltip content container with scale entrance animation.
- * Supports spring-animated cursor-following when `followCursor` is enabled
- * on the parent Tooltip.
- *
- * @param props - Popup props including motion transition overrides
- *
- * @example
- * ```tsx
- * <TooltipPopup slots={{ popup: 'bg-primary text-primary-foreground' }}>
- *   Helpful information
- * </TooltipPopup>
- * ```
- */
-function TooltipPopup({
-  transition = { type: 'spring', stiffness: 300, damping: 25 },
-  style,
-  slots,
-  className,
-  ...props
-}: ITooltipPopupProps) {
-  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"
-          className={cn(tooltipStyles.popup, slots?.popup, className)}
-          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 as any)}
-        />
-      }
-    />
-  );
-}
-
-/* -------------------------------------------------------------------------- */
-/*  TooltipArrow                                                              */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Directional arrow pointing toward the trigger element.
- *
- * @param props - Arrow props forwarded to Base UI Tooltip.Arrow
- *
- * @example
- * ```tsx
- * <TooltipArrow slots={{ arrow: 'fill-primary' }} />
- * ```
- */
-function TooltipArrow({ slots, className, ...props }: ITooltipArrowProps) {
-  return (
-    <TooltipPrimitive.Arrow
-      data-slot="tooltip-arrow"
-      className={cn(tooltipStyles.arrow, slots?.arrow, className)}
-      {...props}
-    />
-  );
-}
-
-/* -------------------------------------------------------------------------- */
-/*  Exports                                                                   */
-/* -------------------------------------------------------------------------- */
-
-export {
-  TooltipProvider,
-  Tooltip,
-  TooltipTrigger,
-  TooltipPortal,
-  TooltipPositioner,
-  TooltipPopup,
-  TooltipArrow,
-  useTooltip,
-};
-
-// Re-exports from types
-export type {
-  ITooltipProviderProps,
-  ITooltipProps,
-  ITooltipTriggerProps,
-  ITooltipPortalProps,
-  ITooltipPositionerProps,
-  ITooltipPopupProps,
-  ITooltipArrowProps,
-  TooltipContextType,
-  TooltipSlot,
-  ITooltipConfig,
-} from './Tooltip.types';
-
-// Re-exports from styles
-export { tooltipStyles } from './Tooltip.styles';

package/src/react/ui/index.ts

@@ -1,34 +0,0 @@
-/**
- * UI components barrel export.
- *
- * All public UI components built on Base UI primitives with StyleSlots/CVA pattern.
- *
- * @module @mks2508/mks-ui/react/ui
- */
-
-// Animate UI components
-export * from './Accordion';
-export * from './AlertDialog';
-export * from './Checkbox';
-export * from './Dialog';
-export * from './Menu';
-export * from './Popover';
-export * from './Progress';
-export * from './Switch';
-export * from './Tabs';
-export * from './Tooltip';
-
-// Base UI components
-export * from './Badge';
-export * from './Button';
-export * from './Card';
-export * from './Combobox';
-export * from './CornerBracket';
-export * from './DropdownMenu';
-export * from './Field';
-export * from './Input';
-export * from './InputGroup';
-export * from './Label';
-export * from './Select';
-export * from './Separator';
-export * from './Textarea';