@udixio/ui-react 2.10.13 → 2.10.15

package/src/lib/hooks/useTooltipTrigger.ts

@@ -1,270 +0,0 @@
-import { useCallback, useEffect, useId, useRef, useState } from 'react';
-
-type Trigger = 'hover' | 'click' | 'focus' | null;
-
-type TooltipState = 'hidden' | 'hovered' | 'focused' | 'clicked';
-
-export interface UseTooltipTriggerOptions {
-  trigger?: Trigger | Trigger[];
-  isOpen?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  openDelay?: number;
-  closeDelay?: number;
-  id?: string;
-}
-
-export interface UseTooltipTriggerReturn {
-  triggerProps: {
-    'aria-describedby': string | undefined;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-    onFocus: () => void;
-    onBlur: () => void;
-    onClick: () => void;
-    onKeyDown: (event: React.KeyboardEvent) => void;
-  };
-  tooltipProps: {
-    id: string;
-    role: 'tooltip';
-    'aria-hidden': boolean;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-  };
-  isOpen: boolean;
-  state: TooltipState;
-}
-
-/**
- * Hook to manage tooltip trigger state machine, events, and accessibility props.
- *
- * State Machine:
- * - States: hidden | hovered | focused | clicked
- * - Priority: clicked > focused > hovered > hidden
- * - Focus takes priority over hover (don't close on mouse leave if focused)
- * - Escape key closes tooltip from any open state
- * - Click toggles for 'click' trigger
- */
-export function useTooltipTrigger({
-  trigger = ['hover', 'focus'],
-  isOpen: isOpenProp,
-  defaultOpen = false,
-  onOpenChange,
-  openDelay = 400,
-  closeDelay = 150,
-  id: idProp,
-}: UseTooltipTriggerOptions = {}): UseTooltipTriggerReturn {
-  const generatedId = useId();
-  const tooltipId = idProp ?? `tooltip-${generatedId}`;
-
-  // Normalize trigger to array
-  const triggers = Array.isArray(trigger) ? trigger : [trigger];
-
-  // Controlled vs uncontrolled state
-  const isControlled = typeof isOpenProp === 'boolean';
-  const [internalState, setInternalState] = useState<TooltipState>(
-    defaultOpen ? 'hovered' : 'hidden',
-  );
-
-  // Track if tooltip content is being hovered (for pointer intent)
-  const [isTooltipHovered, setIsTooltipHovered] = useState(false);
-
-  // Timeout refs for delayed open/close
-  const openTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Clear all timeouts
-  const clearTimeouts = useCallback(() => {
-    if (openTimeoutRef.current) {
-      clearTimeout(openTimeoutRef.current);
-      openTimeoutRef.current = null;
-    }
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-      closeTimeoutRef.current = null;
-    }
-  }, []);
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => clearTimeouts();
-  }, [clearTimeouts]);
-
-  // State transition function
-  const transition = useCallback(
-    (newState: TooltipState) => {
-      if (isControlled) {
-        // In controlled mode, notify parent of desired state change
-        const shouldBeOpen = newState !== 'hidden';
-        onOpenChange?.(shouldBeOpen);
-      } else {
-        setInternalState(newState);
-        const shouldBeOpen = newState !== 'hidden';
-        onOpenChange?.(shouldBeOpen);
-      }
-    },
-    [isControlled, onOpenChange],
-  );
-
-  // Compute actual state and isOpen
-  const state = isControlled
-    ? isOpenProp
-      ? 'hovered' // Simplified: in controlled mode, we just track open/closed
-      : 'hidden'
-    : internalState;
-
-  const isOpen = state !== 'hidden';
-
-  // Get state priority for comparison
-  const getStatePriority = (s: TooltipState): number => {
-    switch (s) {
-      case 'hidden':
-        return 0;
-      case 'hovered':
-        return 1;
-      case 'focused':
-        return 2;
-      case 'clicked':
-        return 3;
-      default:
-        return 0;
-    }
-  };
-
-  // Schedule opening with delay
-  const scheduleOpen = useCallback(
-    (targetState: TooltipState) => {
-      clearTimeouts();
-
-      // Only transition if new state has higher priority
-      if (getStatePriority(targetState) <= getStatePriority(state)) {
-        return;
-      }
-
-      openTimeoutRef.current = setTimeout(() => {
-        transition(targetState);
-      }, openDelay);
-    },
-    [clearTimeouts, openDelay, state, transition],
-  );
-
-  // Schedule closing with delay
-  const scheduleClose = useCallback(
-    (fromState: TooltipState) => {
-      clearTimeouts();
-
-      closeTimeoutRef.current = setTimeout(() => {
-        // Only close if we're still in the same state (or lower priority)
-        if (
-          !isControlled &&
-          getStatePriority(internalState) <= getStatePriority(fromState)
-        ) {
-          transition('hidden');
-        } else if (isControlled) {
-          transition('hidden');
-        }
-      }, closeDelay);
-    },
-    [clearTimeouts, closeDelay, internalState, isControlled, transition],
-  );
-
-  // Event handlers for trigger element
-  const handleMouseEnter = useCallback(() => {
-    if (!triggers.includes('hover')) return;
-    scheduleOpen('hovered');
-  }, [triggers, scheduleOpen]);
-
-  const handleMouseLeave = useCallback(() => {
-    if (!triggers.includes('hover')) return;
-
-    // Don't close if focused (focus has higher priority)
-    if (state === 'focused' || state === 'clicked') return;
-
-    // Don't close immediately if tooltip itself is hovered
-    if (isTooltipHovered) return;
-
-    scheduleClose('hovered');
-  }, [triggers, state, isTooltipHovered, scheduleClose]);
-
-  const handleFocus = useCallback(() => {
-    if (!triggers.includes('focus')) return;
-    clearTimeouts();
-    transition('focused');
-  }, [triggers, clearTimeouts, transition]);
-
-  const handleBlur = useCallback(() => {
-    if (!triggers.includes('focus')) return;
-
-    // Don't close if clicked (clicked has higher priority)
-    if (state === 'clicked') return;
-
-    // If also hovering, transition to hovered state
-    if (triggers.includes('hover') && isTooltipHovered) {
-      transition('hovered');
-      return;
-    }
-
-    scheduleClose('focused');
-  }, [triggers, state, isTooltipHovered, scheduleClose, transition]);
-
-  const handleClick = useCallback(() => {
-    if (!triggers.includes('click')) return;
-
-    clearTimeouts();
-
-    // Toggle behavior for click trigger
-    if (state === 'clicked') {
-      transition('hidden');
-    } else {
-      transition('clicked');
-    }
-  }, [triggers, state, clearTimeouts, transition]);
-
-  const handleKeyDown = useCallback(
-    (event: React.KeyboardEvent) => {
-      // Escape closes tooltip from any open state
-      if (event.key === 'Escape' && isOpen) {
-        clearTimeouts();
-        transition('hidden');
-        event.preventDefault();
-      }
-    },
-    [isOpen, clearTimeouts, transition],
-  );
-
-  // Event handlers for tooltip element (pointer intent)
-  const handleTooltipMouseEnter = useCallback(() => {
-    setIsTooltipHovered(true);
-    clearTimeouts();
-  }, [clearTimeouts]);
-
-  const handleTooltipMouseLeave = useCallback(() => {
-    setIsTooltipHovered(false);
-
-    // If trigger includes hover and we're in hover state, schedule close
-    if (triggers.includes('hover') && state === 'hovered') {
-      scheduleClose('hovered');
-    }
-  }, [triggers, state, scheduleClose]);
-
-  return {
-    triggerProps: {
-      'aria-describedby': isOpen ? tooltipId : undefined,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-    },
-    tooltipProps: {
-      id: tooltipId,
-      role: 'tooltip',
-      'aria-hidden': !isOpen,
-      onMouseEnter: handleTooltipMouseEnter,
-      onMouseLeave: handleTooltipMouseLeave,
-    },
-    isOpen,
-    state,
-  };
-}

package/src/lib/icon/icon.tsx

@@ -1,125 +0,0 @@
-import type React from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { classNames } from '../utils';
-
-export type Icon = IconDefinition | SvgImport | string;
-
-interface SvgImport {
-  src: string;
-  width: number;
-  height: number;
-  format: string;
-}
-
-interface Props {
-  icon: Icon;
-  colors?: string[];
-  className?: string;
-}
-
-export const Icon: React.FC<Props> = ({
-  icon,
-  colors = [],
-  className,
-  ...restProps
-}) => {
-  // Si c'est une chaîne de caractères (SVG raw)
-  if (typeof icon === 'string') {
-    let svgContent = icon;
-    let colorAttrs = '';
-
-    if (colors[0]) {
-      colorAttrs = ` fill="${colors[0]}" color="${colors[0]}"`;
-      // Remplacer les paths existants pour utiliser currentColor
-      svgContent = svgContent.replace(
-        /<path([^>]*?)>/g,
-        '<path$1 fill="currentColor">',
-      );
-    }
-
-    // Remplacer la balise <svg> ouvrante pour :
-    // 1. Supprimer width/height existants
-    // 2. Ajouter width="100%" height="100%"
-    // 3. Ajouter les attributs de couleur si nécessaire
-    svgContent = svgContent.replace(/<svg([^>]*)>/, (_, attributes) => {
-      // Supprime width="..." ou height="..." (avec guillemets simples ou doubles)
-      const cleanAttrs = attributes.replace(
-        /\s+(width|height)=["'][^"']*["']/g,
-        '',
-      );
-      return `<svg${cleanAttrs} width="100%" height="100%"${colorAttrs}>`;
-    });
-
-    return (
-      <div
-        className={classNames(
-          'size-5 box-content inline-flex fill-current',
-          className,
-        )}
-        style={{ color: colors[0] || '' }}
-        dangerouslySetInnerHTML={{ __html: svgContent }}
-      />
-    );
-  }
-
-  // Si c'est un objet SVG importé (cas précédent)
-  if (icon && typeof icon === 'object' && 'src' in icon) {
-    const svgImport = icon as SvgImport;
-    return (
-      <img
-        src={svgImport.src}
-        width={svgImport.width}
-        height={svgImport.height}
-        className={classNames('size-5 box-content', className)}
-        style={{
-          filter: colors[0]
-            ? `brightness(0) saturate(100%) invert(1)`
-            : undefined,
-        }}
-        alt=""
-        aria-hidden="true"
-      />
-    );
-  }
-
-  // Si c'est une IconDefinition FontAwesome
-  const faIcon = icon as IconDefinition;
-  if (!faIcon?.prefix) {
-    throw new Error(`Invalid icon type: ${typeof icon}`);
-  }
-
-  const { icon: iconData } = faIcon;
-  const [width, height, , , svgPathData] = iconData || [];
-
-  const getColorStyle = (colors: string[]): React.CSSProperties => {
-    switch (colors.length) {
-      case 2:
-        return {
-          '--fa-primary-color': colors[0] || 'inherit',
-          '--fa-secondary-color': colors[1] || 'inherit',
-        } as React.CSSProperties;
-      case 1:
-        return { color: colors[0] } as React.CSSProperties;
-      default:
-        return {};
-    }
-  };
-
-  return (
-    <svg
-      className={classNames('size-5 box-content', className)}
-      style={{ ...getColorStyle(colors) }}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox={`0 0 ${width} ${height}`}
-      role="img"
-      aria-hidden="true"
-      {...restProps}
-    >
-      {typeof svgPathData === 'string' ? (
-        <path className={'fill-current'} d={svgPathData} />
-      ) : (
-        svgPathData.map((d, index) => <path key={index} d={d} />)
-      )}
-    </svg>
-  );
-};

package/src/lib/icon/index.ts

@@ -1 +0,0 @@
-export * from './icon';

package/src/lib/index.ts

@@ -1,8 +0,0 @@
-export * from './components';
-export * from './effects';
-export * from './hooks';
-export * from './icon';
-export * from './interfaces';
-export * from './styles';
-export * from './utils';
-export * from './config';

package/src/lib/interfaces/button.interface.ts

@@ -1,65 +0,0 @@
-import { ActionOrLink } from '../utils';
-import { Transition } from 'motion';
-import { Icon } from '../icon';
-
-type ButtonVariant = 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';
-type ButtonVariantAlias = 'primary' | 'secondary';
-
-type Props = {
-  /**
-   * The label is the text that is displayed on the button.
-   */
-  label?: string;
-
-  children?: string;
-
-  size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
-
-  /**
-   * The button variant determines the style of the button.
-   * Aliases: 'primary' maps to 'filled', 'secondary' maps to 'tonal'
-   */
-  variant?: ButtonVariant | ButtonVariantAlias;
-
-  /**
-   * Disables the button if set to true.
-   */
-  disabled?: boolean;
-
-  /**
-   * Controls whether negative margins are applied to text variant buttons.
-   * When true, removes the default negative horizontal margins.
-   * Only applies to 'text' variant buttons.
-   */
-  disableTextMargins?: boolean;
-
-  /**
-   * An optional icon to display in the button.
-   */
-  icon?: Icon;
-
-  iconPosition?: 'left' | 'right';
-
-  loading?: boolean;
-
-  /**
-   * The shape of the button defines whether it is squared or rounded.
-   */
-  shape?: 'squared' | 'rounded';
-
-  allowShapeTransformation?: boolean;
-
-  transition?: Transition;
-
-  onToggle?: (isActive: boolean) => void;
-  activated?: boolean;
-};
-
-type Elements = ['button', 'touchTarget', 'stateLayer', 'icon', 'label'];
-
-export type ButtonInterface = ActionOrLink<Props> & {
-  elements: Elements;
-  states: {
-    isActive: boolean;
-  };
-};

package/src/lib/interfaces/card.interface.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface CardInterface {
-  type: 'div';
-  props: {
-    variant?: 'outlined' | 'elevated' | 'filled';
-    interactive?: boolean;
-    children: ReactNode;
-  };
-  elements: ['card', 'stateLayer'];
-}

package/src/lib/interfaces/carousel-item.interface.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface CarouselItemInterface {
-  type: 'div';
-  props: {
-    children?: ReactNode | undefined;
-    width?: number;
-    index?: number;
-    outputRange?: [number, number];
-  };
-  elements: ['carouselItem'];
-}

package/src/lib/interfaces/carousel.interface.ts

@@ -1,41 +0,0 @@
-import { ReactElement } from 'react';
-import { CarouselItem } from '../components';
-
-export interface CarouselMetrics {
-  total: number;
-  selectedIndex: number;
-  visibleApprox: number; // fractional approximate number of visible items
-  visibleFull: number; // floored count of fully visible-width items
-  stepHalf: number; // suggested step = half of visibleFull (>=1)
-  canPrev: boolean;
-  canNext: boolean;
-  scrollProgress: number; // 0..1 (smoothed)
-  viewportWidth: number;
-  itemMaxWidth: number;
-  gap: number;
-}
-
-export interface CarouselInterface {
-  type: 'div';
-  props: {
-    children?: ReactElement<typeof CarouselItem>[];
-    marginPourcent?: number;
-    onChange?: (index: number) => void;
-    /**
-     * Receive live metrics to better control the carousel externally
-     */
-    onMetricsChange?: (metrics: CarouselMetrics) => void;
-    index?: number; // Controlled index for programmatic centering
-    variant?:
-      | 'hero'
-      | 'center-aligned'
-      | 'multi-browse'
-      | 'un-contained'
-      | 'full-screen';
-    scrollSensitivity?: number;
-    gap?: number;
-    inputRange?: [number, number];
-    outputRange?: [number, number];
-  };
-  elements: ['carousel', 'track'];
-}

package/src/lib/interfaces/checkbox.interface.ts

@@ -1,39 +0,0 @@
-import React from 'react';
-
-type Props = {
-  checked?: boolean;
-  defaultChecked?: boolean;
-  indeterminate?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  name?: string;
-  id?: string;
-  value?: string;
-  style?: React.CSSProperties;
-  className?: string;
-};
-
-export type CheckboxStates = {
-  isChecked: boolean;
-  isIndeterminate: boolean;
-  isDisabled: boolean;
-  isError: boolean;
-  isFocused: boolean;
-  isHovered: boolean;
-};
-
-export interface CheckboxInterface {
-  type: 'div';
-  props: Props;
-  states: CheckboxStates;
-  elements: [
-    'checkbox',
-    'input',
-    'container',
-    'box',
-    'icon',
-    'stateLayer',
-    'ripple',
-  ];
-}

package/src/lib/interfaces/chip.interface.ts

@@ -1,97 +0,0 @@
-import { ActionOrLink } from '../utils';
-import { Transition } from 'motion';
-import { Icon } from '../icon';
-
-type ChipVariant = 'outlined' | 'elevated';
-
-export type ChipProps = {
-  /**
-   * The label is the text that is displayed on the chip.
-   */
-  label?: string;
-
-  children?: string;
-
-  /**
-   * The chip variant determines the style.
-   */
-  variant?: ChipVariant;
-
-  /**
-   * Disables the chip if set to true.
-   */
-  disabled?: boolean;
-
-  /**
-   * An optional icon to display in the chip.
-   */
-  icon?: Icon;
-
-  transition?: Transition;
-
-  onToggle?: (isActive: boolean) => void;
-
-  activated?: boolean;
-
-  onRemove?: () => void;
-
-  /**
-   * Enable native HTML drag and drop on the chip.
-   */
-  draggable?: boolean;
-
-  /**
-   * Called when drag starts (composed with internal handler that sets isDragging).
-   */
-  onDragStart?: (e: React.DragEvent) => void;
-
-  /**
-   * Called when drag ends (composed with internal handler that clears isDragging).
-   */
-  onDragEnd?: (e: React.DragEvent) => void;
-} & (
-  | {
-      editable?: false;
-      editing?: never;
-      onEditStart?: never;
-      onEditCommit: never;
-      onEditCancel?: never;
-      onChange?: never;
-    }
-  | {
-      /** Enable label inline edition for this chip (used by Chips variant="input"). */
-      editable?: true;
-
-      /** Affirms that the chip is currently being edited. */
-      editing?: boolean;
-
-      /** Request to start editing (e.g., double-click, Enter/F2). */
-      onEditStart?: () => void;
-
-      /** Commit edition with the new label. */
-      onEditCommit: (nextLabel: string) => void;
-
-      /** Cancel edition and restore previous label. */
-      onEditCancel?: () => void;
-
-      /**
-       * Fired on each edit keystroke when content changes (only while editing).
-       * Useful for live formatting, suggestions, validation, etc.
-       */
-      onChange?: (nextLabel: string) => void;
-    }
-);
-
-type Elements = ['chip', 'stateLayer', 'leadingIcon', 'trailingIcon', 'label'];
-
-export type ChipInterface = ActionOrLink<ChipProps> & {
-  elements: Elements;
-  states: {
-    isActive: boolean;
-    trailingIcon?: boolean;
-    isFocused: boolean;
-    isInteractive: boolean;
-    isDragging?: boolean;
-    isEditing?: boolean;
-  };
-};