react-restyle-components 0.4.23 → 0.4.25

package/lib/src/core-components/src/components/Tooltip/elements.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { TooltipVariant, TooltipSize, TooltipPosition } from './types';
+export declare const TooltipTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TooltipPortal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $zIndex: number;
+}>> & string;
+export declare const TooltipContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $variant: TooltipVariant;
+    $size: TooltipSize;
+    $maxWidth?: number | undefined;
+    $animated: boolean;
+    $isVisible: boolean;
+    $position: TooltipPosition;
+}>> & string;
+export declare const TooltipArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $variant: TooltipVariant;
+    $position: TooltipPosition;
+}>> & string;
+//# sourceMappingURL=elements.d.ts.map

package/lib/src/core-components/src/components/Tooltip/elements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tooltip/elements.tsx"],"names":[],"mappings":";AACA,OAAO,EAAC,cAAc,EAAE,WAAW,EAAE,eAAe,EAAC,MAAM,SAAS,CAAC;AAkDrE,eAAO,MAAM,cAAc,+NAG1B,CAAC;AAEF,eAAO,MAAM,aAAa;aACf,MAAM;YAQhB,CAAC;AAEF,eAAO,MAAM,cAAc;cACf,cAAc;WACjB,WAAW;;eAEP,OAAO;gBACN,OAAO;eACR,eAAe;YA0C3B,CAAC;AAEF,eAAO,MAAM,YAAY;cACb,cAAc;eACb,eAAe;YAsG3B,CAAC"}

package/lib/src/core-components/src/components/Tooltip/elements.js

@@ -0,0 +1,195 @@
+import { styled, css, keyframes } from 'styled-components';
+// Animations
+const fadeIn = keyframes `
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+// Variant colors
+const variantStyles = {
+    dark: {
+        bg: '#1f2937',
+        text: '#f9fafb',
+        border: '#374151',
+    },
+    light: {
+        bg: '#ffffff',
+        text: '#1f2937',
+        border: '#e5e7eb',
+    },
+};
+// Size styles
+const sizeStyles = {
+    small: {
+        padding: '4px 8px',
+        fontSize: '12px',
+        borderRadius: '4px',
+    },
+    medium: {
+        padding: '8px 12px',
+        fontSize: '13px',
+        borderRadius: '6px',
+    },
+    large: {
+        padding: '12px 16px',
+        fontSize: '14px',
+        borderRadius: '8px',
+    },
+};
+// Arrow size
+const ARROW_SIZE = 6;
+export const TooltipTrigger = styled.span `
+  display: inline-flex;
+  cursor: default;
+`;
+export const TooltipPortal = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  z-index: ${({ $zIndex }) => $zIndex};
+`;
+export const TooltipContent = styled.div `
+  position: fixed;
+  pointer-events: none;
+  box-sizing: border-box;
+  
+  /* Variant */
+  background: ${({ $variant }) => variantStyles[$variant].bg};
+  color: ${({ $variant }) => variantStyles[$variant].text};
+  border: 1px solid ${({ $variant }) => variantStyles[$variant].border};
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  
+  /* Size */
+  padding: ${({ $size }) => sizeStyles[$size].padding};
+  font-size: ${({ $size }) => sizeStyles[$size].fontSize};
+  border-radius: ${({ $size }) => sizeStyles[$size].borderRadius};
+  
+  /* Layout */
+  max-width: ${({ $maxWidth }) => ($maxWidth ? `${$maxWidth}px` : '280px')};
+  width: max-content;
+  text-align: left;
+  line-height: 1.5;
+  word-wrap: break-word;
+  white-space: normal;
+  
+  /* Animation */
+  opacity: 0;
+  ${({ $animated, $isVisible }) => $isVisible &&
+    ($animated
+        ? css `
+          animation: ${fadeIn} 0.15s ease-out forwards;
+        `
+        : css `
+          opacity: 1;
+        `)}
+  
+  /* Accessibility */
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+    opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};
+  }
+`;
+export const TooltipArrow = styled.div `
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: ${ARROW_SIZE}px solid transparent;
+  
+  /* Position and color based on tooltip position */
+  ${({ $position, $variant }) => {
+    const color = variantStyles[$variant].bg;
+    const borderColor = variantStyles[$variant].border;
+    // Top positions - arrow at bottom
+    if ($position.startsWith('top')) {
+        return css `
+        top: 100%;
+        border-top-color: ${color};
+        
+        &::before {
+          content: '';
+          position: absolute;
+          top: -${ARROW_SIZE + 1}px;
+          left: -${ARROW_SIZE}px;
+          border: ${ARROW_SIZE}px solid transparent;
+          border-top-color: ${borderColor};
+          z-index: -1;
+        }
+        
+        ${$position === 'top' && css `left: 50%; margin-left: -${ARROW_SIZE}px;`}
+        ${$position === 'top-start' && css `left: 12px;`}
+        ${$position === 'top-end' && css `right: 12px;`}
+      `;
+    }
+    // Bottom positions - arrow at top
+    if ($position.startsWith('bottom')) {
+        return css `
+        bottom: 100%;
+        border-bottom-color: ${color};
+        
+        &::before {
+          content: '';
+          position: absolute;
+          bottom: -${ARROW_SIZE + 1}px;
+          left: -${ARROW_SIZE}px;
+          border: ${ARROW_SIZE}px solid transparent;
+          border-bottom-color: ${borderColor};
+          z-index: -1;
+        }
+        
+        ${$position === 'bottom' && css `left: 50%; margin-left: -${ARROW_SIZE}px;`}
+        ${$position === 'bottom-start' && css `left: 12px;`}
+        ${$position === 'bottom-end' && css `right: 12px;`}
+      `;
+    }
+    // Left positions - arrow at right
+    if ($position.startsWith('left')) {
+        return css `
+        left: 100%;
+        border-left-color: ${color};
+        
+        &::before {
+          content: '';
+          position: absolute;
+          left: -${ARROW_SIZE - 1}px;
+          top: -${ARROW_SIZE}px;
+          border: ${ARROW_SIZE}px solid transparent;
+          border-left-color: ${borderColor};
+          z-index: -1;
+        }
+        
+        ${$position === 'left' && css `top: 50%; margin-top: -${ARROW_SIZE}px;`}
+        ${$position === 'left-start' && css `top: 12px;`}
+        ${$position === 'left-end' && css `bottom: 12px;`}
+      `;
+    }
+    // Right positions - arrow at left
+    if ($position.startsWith('right')) {
+        return css `
+        right: 100%;
+        border-right-color: ${color};
+        
+        &::before {
+          content: '';
+          position: absolute;
+          right: -${ARROW_SIZE - 1}px;
+          top: -${ARROW_SIZE}px;
+          border: ${ARROW_SIZE}px solid transparent;
+          border-right-color: ${borderColor};
+          z-index: -1;
+        }
+        
+        ${$position === 'right' && css `top: 50%; margin-top: -${ARROW_SIZE}px;`}
+        ${$position === 'right-start' && css `top: 12px;`}
+        ${$position === 'right-end' && css `bottom: 12px;`}
+      `;
+    }
+    return '';
+}}
+`;

package/lib/src/core-components/src/components/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { Tooltip, TooltipProvider } from './Tooltip';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

package/lib/src/core-components/src/components/Tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,eAAe,EAAC,MAAM,WAAW,CAAC;AACnD,cAAc,SAAS,CAAC"}

package/lib/src/core-components/src/components/Tooltip/index.js

@@ -0,0 +1,2 @@
+export { Tooltip, TooltipProvider } from './Tooltip';
+export * from './types';

package/lib/src/core-components/src/components/Tooltip/types.d.ts

@@ -1,22 +1,86 @@
-import React from 'react';
-export type TooltipProps = {
-    /** custom classname to pass to the tooltip element */
-    className?: string;
-    /** The delay (in ms) before showing the tooltip */
-    delay?: number;
-    /** Sets the preferred position relative to the trigger */
-    side?: 'top' | 'right' | 'bottom' | 'left';
-    /** Space between the tooltip element and anchor element (arrow not included in calculation) */
-    sideOffset?: number;
-    /** Use this to set the content of the tooltip*/
+import React, { CSSProperties } from 'react';
+export declare const TOOLTIP_POSITIONS: readonly ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"];
+export type TooltipPosition = (typeof TOOLTIP_POSITIONS)[number];
+export declare const TOOLTIP_VARIANTS: readonly ["dark", "light"];
+export type TooltipVariant = (typeof TOOLTIP_VARIANTS)[number];
+export declare const TOOLTIP_SIZES: readonly ["small", "medium", "large"];
+export type TooltipSize = (typeof TOOLTIP_SIZES)[number];
+export declare const TOOLTIP_TRIGGERS: readonly ["hover", "click", "focus", "manual"];
+export type TooltipTrigger = (typeof TOOLTIP_TRIGGERS)[number];
+export interface TargetRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface TooltipClassNames {
+    /** Custom className for the trigger wrapper */
+    trigger?: string;
+    /** Custom className for the content container */
+    content?: string;
+    /** Custom className for the arrow */
+    arrow?: string;
+}
+export interface TooltipStyles {
+    /** Custom style for the trigger wrapper */
+    trigger?: CSSProperties;
+    /** Custom style for the content container */
+    content?: CSSProperties;
+    /** Custom style for the arrow */
+    arrow?: CSSProperties;
+}
+export interface TooltipProps {
+    /** Children element (trigger) */
+    children: React.ReactNode;
+    /** Tooltip content */
     content?: React.ReactNode;
-    /** Sets the preferred alignment relative to the trigger & position */
+    /** Preferred position */
+    position?: TooltipPosition;
+    /** @deprecated use 'position' instead */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Alignment (only for basic positions) */
     align?: 'start' | 'center' | 'end';
-    /**Space between alignment point and tooltip */
+    /** Visual variant */
+    variant?: TooltipVariant;
+    /** Size preset */
+    size?: TooltipSize;
+    /** Delay before showing (ms) */
+    delay?: number;
+    /** Delay before hiding (ms) */
+    hideDelay?: number;
+    /** Distance from trigger element */
+    offset?: number;
+    /** @deprecated use 'offset' instead */
+    sideOffset?: number;
+    /** @deprecated use 'offset' instead */
     alignOffset?: number;
-    /** If set to true then in the case of collision finds the alternate ways by changing the position or aligment or both to properly display tooltip  */
-    avoidCollisions?: boolean;
-    /** Set true to prevent tooltip from displaying */
+    /** Maximum width of tooltip */
+    maxWidth?: number;
+    /** Show arrow */
+    showArrow?: boolean;
+    /** Disable tooltip */
     disabled?: boolean;
-};
+    /** Trigger mode */
+    trigger?: TooltipTrigger | TooltipTrigger[];
+    /** Controlled open state */
+    open?: boolean;
+    /** Open state change handler */
+    onOpenChange?: (open: boolean) => void;
+    /** Avoid viewport collisions */
+    avoidCollisions?: boolean;
+    /** Use portal for rendering */
+    portal?: boolean;
+    /** Enable animations */
+    animated?: boolean;
+    /** Custom class names */
+    classNames?: TooltipClassNames;
+    /** Custom styles */
+    styles?: TooltipStyles;
+    /** Deprecated: use classNames.trigger */
+    className?: string;
+    /** z-index for tooltip */
+    zIndex?: number;
+    /** Accessibility: aria-label override */
+    ariaLabel?: string;
+}
 //# sourceMappingURL=types.d.ts.map

package/lib/src/core-components/src/components/Tooltip/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tooltip/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,YAAY,GAAG;IACzB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,+FAA+F;IAC/F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gDAAgD;IAChD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sEAAsE;IACtE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sJAAsJ;IACtJ,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tooltip/types.ts"],"names":[],"mappings":"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"}

package/lib/src/core-components/src/components/Tooltip/types.js

@@ -1 +1,17 @@
-export {};
+export const TOOLTIP_POSITIONS = [
+    'top',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+    'right',
+    'right-start',
+    'right-end',
+];
+export const TOOLTIP_VARIANTS = ['dark', 'light'];
+export const TOOLTIP_SIZES = ['small', 'medium', 'large'];
+export const TOOLTIP_TRIGGERS = ['hover', 'click', 'focus', 'manual'];

package/lib/src/core-components/src/components/Tooltip/utils.d.ts

@@ -0,0 +1,26 @@
+import { TooltipPosition, TargetRect } from './types';
+export interface TooltipCoords {
+    top: number;
+    left: number;
+}
+export interface TooltipDimensions {
+    width: number;
+    height: number;
+}
+/**
+ * Calculate tooltip position relative to viewport (for fixed positioning)
+ */
+export declare const calculateTooltipPosition: (position: TooltipPosition, targetRect: TargetRect, tooltipDimensions: TooltipDimensions, offset?: number) => TooltipCoords;
+/**
+ * Get alternate position when collision detected
+ */
+export declare const getAlternatePosition: (position: TooltipPosition, coords: TooltipCoords, tooltipDimensions: TooltipDimensions, viewportWidth: number, viewportHeight: number) => TooltipPosition | null;
+/**
+ * Clamp coords within viewport
+ */
+export declare const clampToViewport: (coords: TooltipCoords, tooltipDimensions: TooltipDimensions, viewportWidth: number, viewportHeight: number) => TooltipCoords;
+/**
+ * Convert side + align to position
+ */
+export declare const sideAlignToPosition: (side: 'top' | 'right' | 'bottom' | 'left', align: 'start' | 'center' | 'end') => TooltipPosition;
+//# sourceMappingURL=utils.d.ts.map

package/lib/src/core-components/src/components/Tooltip/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/Tooltip/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAIpD,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,eAAO,MAAM,wBAAwB,aACzB,eAAe,cACb,UAAU,qBACH,iBAAiB,WAC5B,MAAM,KACb,aA6FF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,aACrB,eAAe,UACjB,aAAa,qBACF,iBAAiB,iBACrB,MAAM,kBACL,MAAM,KACrB,eAAe,GAAG,IA+BpB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,WAClB,aAAa,qBACF,iBAAiB,iBACrB,MAAM,kBACL,MAAM,KACrB,aAQF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,SACxB,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,SAClC,OAAO,GAAG,QAAQ,GAAG,KAAK,KAChC,eAGF,CAAC"}

package/lib/src/core-components/src/components/Tooltip/utils.js

@@ -0,0 +1,140 @@
+const ARROW_SIZE = 6;
+/**
+ * Calculate tooltip position relative to viewport (for fixed positioning)
+ */
+export const calculateTooltipPosition = (position, targetRect, tooltipDimensions, offset = 8) => {
+    const { top, left, width, height } = targetRect;
+    const { width: tooltipWidth, height: tooltipHeight } = tooltipDimensions;
+    let coords = { top: 0, left: 0 };
+    const totalOffset = offset + ARROW_SIZE;
+    switch (position) {
+        // Top positions
+        case 'top':
+            coords = {
+                top: top - tooltipHeight - totalOffset,
+                left: left + width / 2 - tooltipWidth / 2,
+            };
+            break;
+        case 'top-start':
+            coords = {
+                top: top - tooltipHeight - totalOffset,
+                left: left,
+            };
+            break;
+        case 'top-end':
+            coords = {
+                top: top - tooltipHeight - totalOffset,
+                left: left + width - tooltipWidth,
+            };
+            break;
+        // Bottom positions
+        case 'bottom':
+            coords = {
+                top: top + height + totalOffset,
+                left: left + width / 2 - tooltipWidth / 2,
+            };
+            break;
+        case 'bottom-start':
+            coords = {
+                top: top + height + totalOffset,
+                left: left,
+            };
+            break;
+        case 'bottom-end':
+            coords = {
+                top: top + height + totalOffset,
+                left: left + width - tooltipWidth,
+            };
+            break;
+        // Left positions
+        case 'left':
+            coords = {
+                top: top + height / 2 - tooltipHeight / 2,
+                left: left - tooltipWidth - totalOffset,
+            };
+            break;
+        case 'left-start':
+            coords = {
+                top: top,
+                left: left - tooltipWidth - totalOffset,
+            };
+            break;
+        case 'left-end':
+            coords = {
+                top: top + height - tooltipHeight,
+                left: left - tooltipWidth - totalOffset,
+            };
+            break;
+        // Right positions
+        case 'right':
+            coords = {
+                top: top + height / 2 - tooltipHeight / 2,
+                left: left + width + totalOffset,
+            };
+            break;
+        case 'right-start':
+            coords = {
+                top: top,
+                left: left + width + totalOffset,
+            };
+            break;
+        case 'right-end':
+            coords = {
+                top: top + height - tooltipHeight,
+                left: left + width + totalOffset,
+            };
+            break;
+        default:
+            coords = calculateTooltipPosition('top', targetRect, tooltipDimensions, offset);
+    }
+    return coords;
+};
+/**
+ * Get alternate position when collision detected
+ */
+export const getAlternatePosition = (position, coords, tooltipDimensions, viewportWidth, viewportHeight) => {
+    const { top, left } = coords;
+    const { width, height } = tooltipDimensions;
+    const padding = 8;
+    // Check if current position has collision
+    const leftOverflow = left < padding;
+    const rightOverflow = left + width > viewportWidth - padding;
+    const topOverflow = top < padding;
+    const bottomOverflow = top + height > viewportHeight - padding;
+    if (!leftOverflow && !rightOverflow && !topOverflow && !bottomOverflow) {
+        return null;
+    }
+    // Determine alternate position
+    if (position.startsWith('top') && topOverflow) {
+        return position.replace('top', 'bottom');
+    }
+    if (position.startsWith('bottom') && bottomOverflow) {
+        return position.replace('bottom', 'top');
+    }
+    if (position.startsWith('left') && leftOverflow) {
+        return position.replace('left', 'right');
+    }
+    if (position.startsWith('right') && rightOverflow) {
+        return position.replace('right', 'left');
+    }
+    return null;
+};
+/**
+ * Clamp coords within viewport
+ */
+export const clampToViewport = (coords, tooltipDimensions, viewportWidth, viewportHeight) => {
+    const { width, height } = tooltipDimensions;
+    const padding = 8;
+    return {
+        top: Math.max(padding, Math.min(coords.top, viewportHeight - height - padding)),
+        left: Math.max(padding, Math.min(coords.left, viewportWidth - width - padding)),
+    };
+};
+/**
+ * Convert side + align to position
+ */
+export const sideAlignToPosition = (side, align) => {
+    if (align === 'center')
+        return side;
+    return `${side}-${align}`;
+};

package/lib/src/core-components/src/components/TreeSelect/TreeSelect.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { TreeSelectProps } from './types';
+export declare const TreeSelect: React.ForwardRefExoticComponent<TreeSelectProps & React.RefAttributes<HTMLDivElement>>;
+export default TreeSelect;
+//# sourceMappingURL=TreeSelect.d.ts.map

package/lib/src/core-components/src/components/TreeSelect/TreeSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeSelect.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/TreeSelect/TreeSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AA0Bf,OAAO,EAAC,eAAe,EAAiB,MAAM,SAAS,CAAC;AA8DxD,eAAO,MAAM,UAAU,wFA8nBtB,CAAC;AAIF,eAAe,UAAU,CAAC"}