@topconsultnpm/sdkui-react 6.19.0-dev2.30 → 6.19.0-dev2.32

package/lib/components/NewComponents/FloatingMenuBar/styles.js

@@ -1,267 +0,0 @@
-import styled, { keyframes, css } from 'styled-components';
-const fadeIn = keyframes `
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-`;
-const shake = keyframes `
-  0%, 100% { transform: translateX(0); }
-  25% { transform: translateX(-2px); }
-  75% { transform: translateX(2px); }
-`;
-export const Overlay = styled.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(255, 255, 255, 0.8);
-  z-index: 9998;
-  display: ${props => props.$visible ? 'block' : 'none'};
-  animation: ${fadeIn} 0.2s ease-out;
-  backdrop-filter: blur(2px);
-
-  [data-theme='dark'] & {
-    background: rgba(0, 0, 0, 0.8);
-  }
-`;
-export const FloatingContainer = styled.div.attrs(props => ({
-    style: {
-        left: `${props.$x}px`,
-        top: `${props.$y}px`,
-    },
-})) `
-  position: ${props => props.$isConstrained ? 'absolute' : 'fixed'};
-  z-index: ${props => props.$isConfigMode ? 9999 : 10000};
-  display: flex;
-  flex-direction: ${props => props.$orientation === 'horizontal' ? 'row' : 'column'};
-  align-items: center;
-  background: ${props => props.$isDragging || props.$isConfigMode
-    ? 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
-    : 'rgba(102, 126, 234, 0.9)'};
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 14px;
-  padding: 6px;
-  gap: 3px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  cursor: ${props => props.$isDragging ? 'grabbing' : 'default'};
-  user-select: none;
-  animation: ${props => props.$isConfigMode && css `${shake} 0.3s ease-in-out`};
-  transition: none;
-
-  &:hover {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border: 1px solid #667eea;
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
-                0 6px 16px rgba(0, 0, 0, 0.2);
-  }
-
-  [data-theme='dark'] & {
-    background: ${props => props.$isDragging || props.$isConfigMode
-    ? 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)'
-    : 'rgba(26, 26, 46, 0.9)'};
-    border-color: rgba(255, 255, 255, 0.1);
-    
-    &:hover {
-      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-      border: 1px solid #1a1a2e;
-    }
-  }
-`;
-export const GripHandle = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: ${props => props.$orientation === 'horizontal' ? '10px 6px' : '6px 10px'};
-  cursor: grab;
-  color: rgba(255, 255, 255, 0.7);
-  transition: all 0.2s ease;
-  border-radius: 6px;
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 1);
-  }
-
-  &:active {
-    cursor: grabbing;
-    background: rgba(255, 255, 255, 0.15);
-  }
-
-  svg {
-    width: 14px;
-    height: 14px;
-  }
-`;
-export const MenuButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  background: transparent;
-  border: none;
-  border-radius: 8px;
-  color: white;
-  font-size: 16px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-
-  &:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
-  }
-
-  &:active:not(:disabled) {
-    transform: scale(0.95);
-  }
-
-  &:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-    background: rgba(255, 255, 255, 0.05);
-    color: rgba(255, 255, 255, 0.4);
-  }
-
-  svg {
-    width: 18px;
-    height: 18px;
-  }
-`;
-export const ConfigButton = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 34px;
-  height: 34px;
-  background: ${props => props.$isActive
-    ? 'rgba(0, 0, 0, 0.2)'
-    : 'rgba(0, 0, 0, 0.1)'};
-  border: 1px solid ${props => props.$isActive
-    ? 'rgba(255, 255, 255, 0.3)'
-    : 'rgba(255, 255, 255, 0.15)'};
-  border-radius: 8px;
-  color: white;
-  font-size: 16px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-
-  &:hover {
-    background: ${props => props.$isActive
-    ? 'rgba(0, 0, 0, 0.25)'
-    : 'rgba(0, 0, 0, 0.15)'};
-    border-color: rgba(255, 255, 255, 0.35);
-    transform: scale(1.05);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  svg {
-    width: 20px;
-    height: 20px;
-  }
-`;
-export const RemoveButton = styled.button `
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  width: 20px;
-  height: 20px;
-  background: #ef4444;
-  border: 2px solid white;
-  border-radius: 50%;
-  color: white;
-  font-size: 12px;
-  font-weight: bold;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  z-index: 1;
-
-  &:hover {
-    background: #dc2626;
-    transform: scale(1.15);
-  }
-
-  &:active {
-    transform: scale(0.9);
-  }
-`;
-export const OrientationToggle = styled.button `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: rgba(255, 255, 255, 0.5);
-  font-size: 10px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  padding: 2px;
-  transform: ${props => props.$orientation === 'vertical' ? 'rotate(90deg)' : 'rotate(0deg)'};
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &:active {
-    transform: ${props => props.$orientation === 'vertical' ? 'rotate(90deg) scale(0.9)' : 'scale(0.9)'};
-  }
-
-  svg {
-    width: 10px;
-    height: 10px;
-  }
-`;
-export const DraggableItem = styled.div `
-  position: relative;
-  opacity: ${props => props.$isDragging ? 0.3 : 1};
-  transform: ${props => {
-    if (props.$isDragging)
-        return 'scale(1.1) rotate(5deg)';
-    if (props.$isDragOver)
-        return 'scale(1.05)';
-    return 'scale(1)';
-}};
-  transition: all 0.2s ease;
-  filter: ${props => props.$isDragging ? 'brightness(1.3)' : 'brightness(1)'};
-  
-  ${props => props.$isDragging && css `
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
-    z-index: 100;
-  `}
-  
-  ${props => props.$isDragOver && css `
-    &::before {
-      content: '';
-      position: absolute;
-      top: -4px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 40px;
-      height: 3px;
-      background: rgba(255, 255, 255, 0.8);
-      border-radius: 2px;
-      box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
-    }
-  `}
-`;
-export const ContextMenuWrapper = styled.div `
-  position: static;
-  display: contents;
-`;

package/lib/components/NewComponents/FloatingMenuBar/types.d.ts

@@ -1,30 +0,0 @@
-import type { TMContextMenuItemProps } from '../ContextMenu';
-export interface TMFloatingMenuItem {
-    id: string;
-    name: string;
-    icon: React.ReactNode;
-    onClick: () => void;
-    disabled?: boolean;
-    isPinned?: boolean;
-    originalMenuItem?: TMContextMenuItemProps;
-}
-export interface TMFloatingMenuBarProps {
-    containerRef: React.RefObject<HTMLElement | null>;
-    contextMenuItems?: TMContextMenuItemProps[];
-    storageKey?: string;
-    isConstrained?: boolean;
-    defaultPosition?: Position;
-    maxItems?: number;
-}
-export interface Position {
-    x: number;
-    y: number;
-}
-export interface TMFloatingMenuBarState {
-    position: Position;
-    isDragging: boolean;
-    isConfigMode: boolean;
-    orientation: 'horizontal' | 'vertical';
-    items: TMFloatingMenuItem[];
-    draggedItemIndex: number | null;
-}

package/lib/components/NewComponents/FloatingMenuBar/types.js

@@ -1 +0,0 @@
-export {};

package/lib/components/NewComponents/Notification/Notification.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { NotificationProps } from './types';
-declare const Notification: React.FC<NotificationProps>;
-export default Notification;

package/lib/components/NewComponents/Notification/Notification.js

@@ -1,60 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import * as S from './styles';
-const Notification = ({ title, message, mode = 'info', position = 'top-right', duration = 3000, closable = false, stopOnMouseEnter = true, hasProgress = true, onClose, }) => {
-    const [state, setState] = useState({
-        visible: true,
-        isPaused: false,
-        progress: 100,
-    });
-    const timeoutRef = useRef(undefined);
-    const remainingTimeRef = useRef(duration);
-    const pauseTimeRef = useRef(0);
-    const closeNotification = () => {
-        setState(prev => ({ ...prev, visible: false }));
-        setTimeout(() => {
-            onClose?.();
-        }, 300);
-    };
-    useEffect(() => {
-        // Set up auto-close timer
-        timeoutRef.current = setTimeout(() => {
-            closeNotification();
-        }, duration);
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, [duration]);
-    const handleMouseEnter = () => {
-        if (!stopOnMouseEnter)
-            return;
-        // Pause the timer
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            pauseTimeRef.current = Date.now();
-        }
-        setState(prev => ({ ...prev, isPaused: true }));
-    };
-    const handleMouseLeave = () => {
-        if (!stopOnMouseEnter)
-            return;
-        // Resume the timer with remaining time
-        const pauseDuration = Date.now() - pauseTimeRef.current;
-        remainingTimeRef.current = Math.max(0, remainingTimeRef.current - pauseDuration);
-        timeoutRef.current = setTimeout(() => {
-            closeNotification();
-        }, remainingTimeRef.current);
-        setState(prev => ({ ...prev, isPaused: false }));
-    };
-    const handleClose = (e) => {
-        e.stopPropagation();
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        closeNotification();
-    };
-    return (_jsxs(S.NotificationContainer, { "$position": position, "$mode": mode, "$visible": state.visible, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, role: "alert", "aria-live": "assertive", children: [_jsxs(S.NotificationContent, { children: [_jsx(S.NotificationTitle, { children: title }), _jsx(S.NotificationMessage, { children: message })] }), closable && (_jsx(S.CloseButton, { onClick: handleClose, "aria-label": "Close notification", children: "\u00D7" })), hasProgress && (_jsx(S.ProgressBar, { "$duration": duration, "$mode": mode, "$isPaused": state.isPaused }))] }));
-};
-export default Notification;

package/lib/components/NewComponents/Notification/NotificationContainer.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import type { NotificationPosition } from './types';
-interface NotificationContainerProps {
-    position: NotificationPosition;
-    children: React.ReactNode;
-}
-declare const NotificationContainer: React.FC<NotificationContainerProps>;
-export default NotificationContainer;

package/lib/components/NewComponents/Notification/NotificationContainer.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-const Container = styled.div `
-  position: fixed;
-  z-index: 10002;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  pointer-events: none;
-
-  ${props => {
-    const isTop = props.$position.startsWith('top');
-    const isBottom = props.$position.startsWith('bottom');
-    const isLeft = props.$position.endsWith('left');
-    const isRight = props.$position.endsWith('right');
-    const isCenter = props.$position.endsWith('center');
-    return `
-      ${isTop ? 'top: 24px;' : ''}
-      ${isBottom ? 'bottom: 24px;' : ''}
-      ${isLeft ? 'left: 24px;' : ''}
-      ${isRight ? 'right: 24px;' : ''}
-      ${isCenter ? 'left: 50%; transform: translateX(-50%);' : ''}
-    `;
-}}
-
-  & > * {
-    pointer-events: auto;
-  }
-`;
-const NotificationContainer = ({ position, children }) => {
-    return _jsx(Container, { "$position": position, children: children });
-};
-export default NotificationContainer;

package/lib/components/NewComponents/Notification/index.d.ts

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

package/lib/components/NewComponents/Notification/index.js

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

package/lib/components/NewComponents/Notification/styles.d.ts

@@ -1,21 +0,0 @@
-import type { NotificationMode, NotificationPosition } from './types';
-export declare const NotificationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $position: NotificationPosition;
-    $mode: NotificationMode;
-    $visible: boolean;
-}>> & string;
-export declare const NotificationContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NotificationTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const NotificationMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const ProgressBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, {
-    $duration: number;
-    $mode: NotificationMode;
-    $isPaused: boolean;
-}>, {
-    $duration: number;
-    $mode: NotificationMode;
-    $isPaused: boolean;
-}>> & string;

package/lib/components/NewComponents/Notification/styles.js

@@ -1,180 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-const slideInFromTop = keyframes `
-  from {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const slideInFromBottom = keyframes `
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-const slideOut = keyframes `
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.9);
-  }
-`;
-const getModeColors = (mode) => {
-    const colors = {
-        success: {
-            bg: '#10b981',
-            bgDark: '#059669',
-            border: '#34d399',
-            text: '#ffffff',
-        },
-        error: {
-            bg: '#ef4444',
-            bgDark: '#dc2626',
-            border: '#f87171',
-            text: '#ffffff',
-        },
-        warning: {
-            bg: '#f59e0b',
-            bgDark: '#d97706',
-            border: '#fbbf24',
-            text: '#ffffff',
-        },
-        info: {
-            bg: '#3b82f6',
-            bgDark: '#2563eb',
-            border: '#60a5fa',
-            text: '#ffffff',
-        },
-    };
-    return colors[mode];
-};
-export const NotificationContainer = styled.div `
-  position: relative;
-  z-index: 1;
-  min-width: 320px;
-  max-width: 420px;
-  background: ${props => getModeColors(props.$mode).bg};
-  border-radius: 12px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2),
-              0 4px 12px rgba(0, 0, 0, 0.15);
-  padding: 16px 20px;
-  animation: ${props => {
-    if (!props.$visible)
-        return slideOut;
-    return props.$position.startsWith('top') ? slideInFromTop : slideInFromBottom;
-}} 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-  backdrop-filter: blur(10px);
-  border: 2px solid ${props => getModeColors(props.$mode).border};
-  color: ${props => getModeColors(props.$mode).text};
-  overflow: hidden;
-
-  [data-theme='dark'] & {
-    background: ${props => getModeColors(props.$mode).bgDark};
-    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
-                0 4px 12px rgba(0, 0, 0, 0.3);
-  }
-
-  @media (max-width: 768px) {
-    min-width: 280px;
-    max-width: calc(100vw - 48px);
-  }
-`;
-export const NotificationContent = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding-right: 24px;
-`;
-export const NotificationTitle = styled.div `
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 1.4;
-  letter-spacing: -0.01em;
-`;
-export const NotificationMessage = styled.div `
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-  opacity: 0.95;
-`;
-export const CloseButton = styled.button `
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  background: transparent;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
-  transition: all 0.15s ease;
-  font-size: 18px;
-  line-height: 1;
-  padding: 0;
-  opacity: 0.8;
-
-  &:hover {
-    opacity: 1;
-    background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  &:focus {
-    outline: 2px solid rgba(255, 255, 255, 0.5);
-    outline-offset: 2px;
-  }
-`;
-export const ProgressBar = styled.div.attrs(props => ({
-    style: {
-        animationDuration: `${props.$duration}ms`,
-    },
-})) `
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 4px;
-  width: 100%;
-  background: ${props => getModeColors(props.$mode).border};
-  border-radius: 0 0 0 10px;
-  box-shadow: 0 0 8px ${props => getModeColors(props.$mode).border};
-  transform-origin: left;
-  animation: progress-shrink linear forwards;
-  animation-play-state: ${props => props.$isPaused ? 'paused' : 'running'};
-
-  @keyframes progress-shrink {
-    from {
-      transform: scaleX(1);
-    }
-    to {
-      transform: scaleX(0);
-    }
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 20px;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
-  }
-`;

package/lib/components/NewComponents/Notification/types.d.ts

@@ -1,18 +0,0 @@
-export type NotificationMode = 'warning' | 'info' | 'error' | 'success';
-export type NotificationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-export interface NotificationProps {
-    title: string;
-    message: string;
-    mode?: NotificationMode;
-    position?: NotificationPosition;
-    duration?: number;
-    closable?: boolean;
-    stopOnMouseEnter?: boolean;
-    hasProgress?: boolean;
-    onClose?: () => void;
-}
-export interface NotificationState {
-    visible: boolean;
-    isPaused: boolean;
-    progress: number;
-}

package/lib/components/NewComponents/Notification/types.js

@@ -1 +0,0 @@
-export {};