@mks2508/mks-ui 0.5.4 → 0.5.8

package/src/react-ui/ui/TextFlow/index.tsx

@@ -1,276 +0,0 @@
-"use client";
-
-import React, { useMemo, useCallback } from 'react';
-import { SlidingText } from '@/react-ui/primitives/waapi/SlidingText';
-import { Reorder } from '@/react-ui/primitives/waapi/Reorder';
-import { useListFormat } from '@/react-ui/hooks/Formatting/UseListFormat';
-import type {
-  ITextFlowProps,
-  IToken,
-  ISeparatorConfig,
-  IOverflowConfig,
-  ITextAnimationConfig,
-  SeparatorTransitionMode,
-  ListFormatType,
-  ListFormatStyle,
-} from './TextFlow.types';
-import { cn } from '@/react-ui/lib/utils';
-
-// Default configurations
-const DEFAULT_SEPARATOR: Required<Omit<ISeparatorConfig, 'value' | 'locale' | 'className'>> = {
-  listType: 'conjunction',
-  listStyle: 'long',
-  transition: 'none',
-  duration: 200,
-};
-
-const DEFAULT_OVERFLOW: Required<Omit<IOverflowConfig, 'separator' | 'className'>> = {
-  prefix: '+',
-  label: ' more',
-  showSeparator: true,
-};
-
-const DEFAULT_ANIMATION: Required<ITextAnimationConfig> = {
-  mode: 'character',
-  direction: 'vertical',
-  stagger: 15,
-  duration: 200,
-  blur: true,
-  widthAnimation: false,
-};
-
-/**
- * TextFlow - Locale-aware animated token list component
- *
- * Built on the Reorder primitive, provides smooth FLIP animations for token lists
- * with proper locale-aware separators using Intl.ListFormat.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <TextFlow tokens={tokens} />
- *
- * // Spanish multiselect with transition
- * <TextFlow
- *   tokens={tokens}
- *   maxVisible={2}
- *   inline
- *   separator={{ locale: 'es', transition: 'fade' }}
- *   overflow={{ prefix: '+', label: ' más' }}
- * />
- * ```
- */
-export const TextFlow: React.FC<ITextFlowProps> = ({
-  tokens,
-  placeholder = 'No tokens',
-  maxVisible,
-  separator: separatorConfig,
-  overflow: overflowConfig,
-  animation: animationConfig,
-  inline = false,
-  className = '',
-  tokenClassName = '',
-  placeholderClassName = '',
-}) => {
-  // Merge configs with defaults
-  const separator: Required<Omit<ISeparatorConfig, 'value' | 'locale' | 'className'>> & Pick<ISeparatorConfig, 'value' | 'locale' | 'className'> = {
-    ...DEFAULT_SEPARATOR,
-    ...separatorConfig,
-  };
-
-  const overflow: Required<Omit<IOverflowConfig, 'separator' | 'className'>> & Pick<IOverflowConfig, 'separator' | 'className'> = {
-    ...DEFAULT_OVERFLOW,
-    ...overflowConfig,
-  };
-
-  const animation: Required<ITextAnimationConfig> = {
-    ...DEFAULT_ANIMATION,
-    ...animationConfig,
-  };
-
-  // Track exiting token IDs with REF
-  const exitingIdsRef = React.useRef<Set<string>>(new Set());
-
-  // Visible tokens
-  const visibleTokens = useMemo(
-    () => (maxVisible ? tokens.slice(0, maxVisible) : tokens),
-    [tokens, maxVisible]
-  );
-
-  const overflowCount = useMemo(
-    () => (maxVisible ? Math.max(0, tokens.length - maxVisible) : 0),
-    [tokens.length, maxVisible]
-  );
-
-  // Locale-aware list formatting via useListFormat hook
-  const listParts = useListFormat(
-    visibleTokens.map(t => t.text),
-    {
-      locale: separator.locale,
-      type: separator.listType,
-      style: separator.listStyle,
-      separator: separator.value,
-      hasOverflow: overflowCount > 0,
-    }
-  );
-
-  // Separator visibility logic
-  const shouldShowSeparator = useCallback((tokenIndex: number): boolean => {
-    const isLastToken = tokenIndex >= visibleTokens.length - 1;
-    return !isLastToken;
-  }, [visibleTokens.length]);
-
-  const handleItemExit = useCallback((id: string) => {
-    exitingIdsRef.current.add(id);
-  }, []);
-
-  const handleItemEnter = useCallback((id: string) => {
-    // Animation triggered automatically
-  }, []);
-
-  const showPlaceholder = tokens.length === 0 && !!placeholder;
-
-  // Build children from list parts
-  const tokenElements = useMemo(() => {
-    let elementIndex = 0;
-
-    return listParts.map((part, partIndex) => {
-      if (part.type === 'element') {
-        const token = visibleTokens[part.index];
-        if (!token) return null;
-
-        const isExiting = exitingIdsRef.current.has(token.id);
-        elementIndex++;
-
-        return (
-          <span
-            key={token.id}
-            className={cn('waapi-token-wrapper', tokenClassName)}
-            data-reorder-id={token.id}
-          >
-            <SlidingText
-              text={token.text}
-              mode={isExiting ? 'none' : animation.mode}
-              direction={animation.direction}
-              staggerDelay={animation.stagger}
-              duration={animation.duration}
-              blur={animation.blur}
-              widthAnimation={!isExiting && animation.widthAnimation}
-              initial={isExiting ? false : 'initial'}
-              animate="animate"
-            />
-          </span>
-        );
-      }
-
-      // Separator (literal)
-      const prevToken = visibleTokens[part.index];
-      if (!prevToken) return null;
-
-      const tokenIndex = part.index;
-      const showSep = shouldShowSeparator(tokenIndex);
-
-      if (!showSep) return null;
-
-      const separatorKey = `sep-${prevToken.id}`;
-
-      return (
-        <span
-          key={separatorKey}
-          className={cn('waapi-token-separator', separator.className ?? '')}
-        >
-          {part.value}
-        </span>
-      );
-    }).filter(Boolean);
-  }, [listParts, visibleTokens, tokenClassName, animation, separator, shouldShowSeparator]);
-
-  // Overflow element
-  const overflowElement = useMemo(() => {
-    if (overflowCount === 0) return null;
-
-    return (
-      <div
-        key="overflow-counter"
-        data-reorder-id="overflow-counter"
-        className={cn('waapi-token-overflow', overflow.className ?? '')}
-      >
-        {overflow.showSeparator && overflow.separator && (
-          <span className={cn('waapi-token-separator', separator.className ?? '')}>
-            {overflow.separator}
-          </span>
-        )}
-        {overflow.prefix !== '' && (
-          <span className={cn('waapi-token-separator', separator.className ?? '')}>
-            {overflow.prefix}
-          </span>
-        )}
-        <SlidingText
-          text={String(overflowCount)}
-          mode="character"
-          duration={animation.duration}
-          blur={animation.blur}
-          initial="initial"
-          animate="animate"
-        />
-        {overflow.label && overflow.label !== '' && (
-          <SlidingText
-            text={overflow.label}
-            mode={animation.mode}
-            direction={animation.direction}
-            staggerDelay={animation.stagger}
-            duration={animation.duration}
-            blur={animation.blur}
-            initial="initial"
-            animate="animate"
-          />
-        )}
-      </div>
-    );
-  }, [overflowCount, overflow, separator, animation]);
-
-  return (
-    <div
-      role="text"
-      className={cn(
-        'waapi-animated-tokens-container',
-        inline && 'waapi-animated-tokens-container--inline',
-        className
-      )}
-    >
-      {showPlaceholder && (
-        <SlidingText
-          key="placeholder"
-          text={placeholder}
-          mode="word"
-          direction="vertical"
-          blur={true}
-          duration={150}
-          initial="initial"
-          animate="animate"
-          className={cn('waapi-token-placeholder', placeholderClassName)}
-        />
-      )}
-
-      <Reorder
-        layout={inline ? 'inline-horizontal' : 'horizontal'}
-        onItemExit={handleItemExit}
-        onItemEnter={handleItemEnter}
-      >
-        {tokenElements}
-        {overflowElement}
-      </Reorder>
-    </div>
-  );
-};
-
-TextFlow.displayName = 'TextFlow';
-
-export type {
-  ITextFlowProps,
-  IToken,
-  ISeparatorConfig,
-  IOverflowConfig,
-  ITextAnimationConfig,
-  SeparatorTransitionMode,
-};

package/src/react-ui/ui/Textarea/Textarea.styles.ts

@@ -1,10 +0,0 @@
-import type { StyleSlots } from '@/core/types';
-
-type TextareaSlot = 'root';
-
-const textareaStyles: StyleSlots<TextareaSlot> = {
-  root: 'border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
-};
-
-export { textareaStyles };
-export type { TextareaSlot };

package/src/react-ui/ui/Textarea/Textarea.types.ts

@@ -1,9 +0,0 @@
-import type { SlotOverrides } from '@/core/types';
-import type { TextareaSlot } from './Textarea.styles';
-
-/** Props for the Textarea component. */
-interface ITextareaProps extends React.ComponentProps<'textarea'> {
-  slots?: SlotOverrides<TextareaSlot>;
-}
-
-export type { ITextareaProps };

package/src/react-ui/ui/Textarea/index.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/react-ui/lib/utils';
-import { textareaStyles } from './Textarea.styles';
-import type { ITextareaProps } from './Textarea.types';
-
-/**
- * Textarea — styled multi-line text input.
- *
- * @example
- * ```tsx
- * <Textarea placeholder="Enter description..." />
- * ```
- */
-function Textarea({ className, slots, ...props }: ITextareaProps) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(textareaStyles.root, slots?.root, className)}
-      {...props}
-    />
-  );
-}
-
-export { Textarea };
-export type { ITextareaProps } from './Textarea.types';
-export type { TextareaSlot } from './Textarea.styles';

package/src/react-ui/ui/Tooltip/Tooltip.styles.ts

@@ -1,43 +0,0 @@
-/**
- * Style definitions for the Tooltip component.
- *
- * Provides StyleSlots for each visual region. Uses only CSS variable
- * utilities; never hard-coded color values.
- *
- * @module @mks2508/mks-ui/react/ui/Tooltip/Tooltip.styles
- */
-
-import type { StyleSlots } from '@/core/types';
-import type { TooltipSlot } from './Tooltip.types';
-
-/**
- * Default Tailwind classes for each Tooltip visual region.
- * Consumers override via the `slots` prop; the merge order is:
- * `base -> slots -> className`.
- *
- * @example
- * ```typescript
- * import { tooltipStyles } from './Tooltip.styles';
- * // tooltipStyles.popup => 'z-50 overflow-hidden rounded-md ...'
- * ```
- */
-export const tooltipStyles: StyleSlots<TooltipSlot> = {
-  /** Root wrapper — no visual styling by default. */
-  root: '',
-
-  /** Popup content container. */
-  popup: [
-    'z-50 overflow-hidden rounded-md',
-    'border border-border bg-popover px-3 py-1.5',
-    'text-sm text-popover-foreground shadow-md',
-  ].join(' '),
-
-  /** Trigger element — no default styling. */
-  trigger: '',
-
-  /** Positioner wrapper — handles absolute placement. */
-  positioner: '',
-
-  /** Directional arrow pointing toward the trigger. */
-  arrow: 'fill-popover',
-};

package/src/react-ui/ui/Tooltip/Tooltip.types.ts

@@ -1,253 +0,0 @@
-/**
- * Type definitions for the Tooltip component.
- *
- * Provides all prop interfaces, slot types, context types, and configuration
- * for the animated tooltip system built on Base UI and Motion.
- *
- * @module @mks2508/mks-ui/react/ui/Tooltip/Tooltip.types
- */
-
-import type * as React from 'react';
-import type { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
-import type { HTMLMotionProps, MotionValue, SpringOptions } from 'motion/react';
-
-import type { SlotOverrides, IBaseConfig } from '@/core/types';
-
-/* -------------------------------------------------------------------------- */
-/*  Slot                                                                      */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Visual regions available for class-name overrides via the `slots` prop.
- *
- * @example
- * ```tsx
- * <TooltipPopup slots={{ popup: 'bg-primary text-primary-foreground' }} />
- * ```
- */
-export type TooltipSlot =
-  | 'root'
-  | 'popup'
-  | 'trigger'
-  | 'positioner'
-  | 'arrow';
-
-/* -------------------------------------------------------------------------- */
-/*  Config                                                                    */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Extended configuration for the Tooltip component.
- * Inherits base animation settings and adds tooltip-specific cursor-following options.
- *
- * @example
- * ```typescript
- * const config: ITooltipConfig = {
- *   followCursor: 'x',
- *   followCursorSpringOptions: { stiffness: 200, damping: 17 },
- *   animation: { duration: 0.15 },
- * };
- * ```
- */
-export interface ITooltipConfig extends IBaseConfig {
-  /**
-   * Whether the tooltip follows the cursor position.
-   * - `true` — follows on both axes
-   * - `'x'` — follows only horizontal movement
-   * - `'y'` — follows only vertical movement
-   * - `false` — static positioning (default)
-   *
-   * @defaultValue false
-   */
-  followCursor?: boolean | 'x' | 'y';
-
-  /**
-   * Spring physics options for the cursor-following animation.
-   * Only used when `followCursor` is enabled.
-   *
-   * @defaultValue `{ stiffness: 200, damping: 17 }`
-   */
-  followCursorSpringOptions?: SpringOptions;
-}
-
-/* -------------------------------------------------------------------------- */
-/*  Context                                                                   */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Internal context type shared between Tooltip sub-components.
- * Tracks open state, cursor position motion values, and follow-cursor settings.
- *
- * @example
- * ```tsx
- * const { isOpen, x, y, followCursor } = useTooltip();
- * ```
- */
-export type TooltipContextType = {
-  /** Whether the tooltip is currently open. */
-  isOpen: boolean;
-  /** Callback to change the open state. */
-  setIsOpen: ITooltipProps['onOpenChange'];
-  /** Motion value tracking horizontal cursor offset. */
-  x: MotionValue<number>;
-  /** Motion value tracking vertical cursor offset. */
-  y: MotionValue<number>;
-  /** Current follow-cursor mode. */
-  followCursor?: boolean | 'x' | 'y';
-  /** Spring physics options for cursor-following. */
-  followCursorSpringOptions?: SpringOptions;
-};
-
-/* -------------------------------------------------------------------------- */
-/*  Props interfaces                                                          */
-/* -------------------------------------------------------------------------- */
-
-/**
- * Props for the root `Tooltip` component.
- * Wraps Base UI Tooltip.Root with controlled-state support, context provider,
- * and cursor-following motion values.
- *
- * @example
- * ```tsx
- * <Tooltip followCursor="x">
- *   <TooltipTrigger>Hover me</TooltipTrigger>
- *   <TooltipPortal>
- *     <TooltipPositioner>
- *       <TooltipPopup>Tooltip content</TooltipPopup>
- *     </TooltipPositioner>
- *   </TooltipPortal>
- * </Tooltip>
- * ```
- */
-export interface ITooltipProps
-  extends React.ComponentProps<typeof TooltipPrimitive.Root> {
-  /**
-   * Whether the tooltip follows the cursor position.
-   * @defaultValue false
-   */
-  followCursor?: boolean | 'x' | 'y';
-
-  /**
-   * Spring physics options for the cursor-following animation.
-   * @defaultValue `{ stiffness: 200, damping: 17 }`
-   */
-  followCursorSpringOptions?: SpringOptions;
-
-  /** Style slot overrides. */
-  slots?: SlotOverrides<TooltipSlot>;
-
-  /** Component configuration. */
-  config?: ITooltipConfig;
-}
-
-/**
- * Props for the `TooltipProvider` component.
- * Wraps Base UI Tooltip.Provider to set shared defaults for a group of tooltips.
- *
- * @example
- * ```tsx
- * <TooltipProvider delay={200}>
- *   <Tooltip>...</Tooltip>
- *   <Tooltip>...</Tooltip>
- * </TooltipProvider>
- * ```
- */
-export interface ITooltipProviderProps
-  extends React.ComponentProps<typeof TooltipPrimitive.Provider> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<TooltipSlot>;
-}
-
-/**
- * Props for the `TooltipTrigger` component.
- * Renders the element that shows the tooltip on hover/focus.
- *
- * @example
- * ```tsx
- * <TooltipTrigger>
- *   <Button>Hover me</Button>
- * </TooltipTrigger>
- * ```
- */
-export interface ITooltipTriggerProps
-  extends React.ComponentProps<typeof TooltipPrimitive.Trigger> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<TooltipSlot>;
-}
-
-/**
- * Props for the `TooltipPortal` component.
- * Renders children into a React portal with AnimatePresence for exit animations.
- * The `keepMounted` prop is handled internally and cannot be overridden.
- *
- * @example
- * ```tsx
- * <TooltipPortal>
- *   <TooltipPositioner>
- *     <TooltipPopup>...</TooltipPopup>
- *   </TooltipPositioner>
- * </TooltipPortal>
- * ```
- */
-export interface ITooltipPortalProps
-  extends Omit<
-    React.ComponentProps<typeof TooltipPrimitive.Portal>,
-    'keepMounted'
-  > {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<TooltipSlot>;
-}
-
-/**
- * Props for the `TooltipPositioner` component.
- * Handles automatic positioning relative to the trigger.
- *
- * @example
- * ```tsx
- * <TooltipPositioner sideOffset={4}>
- *   <TooltipPopup>Content</TooltipPopup>
- * </TooltipPositioner>
- * ```
- */
-export interface ITooltipPositionerProps
-  extends React.ComponentProps<typeof TooltipPrimitive.Positioner> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<TooltipSlot>;
-}
-
-/**
- * Props for the `TooltipPopup` component.
- * The main content container with scale entrance animation.
- * Supports cursor-following via spring-animated motion values.
- *
- * @example
- * ```tsx
- * <TooltipPopup className="px-3 py-1.5 text-sm">
- *   Helpful information
- * </TooltipPopup>
- * ```
- */
-export interface ITooltipPopupProps
-  extends Omit<
-      Omit<React.ComponentProps<typeof TooltipPrimitive.Popup>, 'render'>,
-      keyof HTMLMotionProps<'div'>
-    >,
-    HTMLMotionProps<'div'> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<TooltipSlot>;
-}
-
-/**
- * Props for the `TooltipArrow` component.
- * Renders a directional arrow pointing toward the trigger.
- *
- * @example
- * ```tsx
- * <TooltipArrow className="fill-primary" />
- * ```
- */
-export interface ITooltipArrowProps
-  extends React.ComponentProps<typeof TooltipPrimitive.Arrow> {
-  /** Style slot overrides. */
-  slots?: SlotOverrides<TooltipSlot>;
-}