@cyber-harbour/ui 1.0.22 → 1.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/ContextMenu/ContextMenu.tsx

@@ -114,21 +114,21 @@ const StyledButton = styled.button<{
         &:hover {
           background: ${theme.contextMenu.button.hover.background};
           color: ${theme.contextMenu.button.hover.text};
-          border-color: ${theme.contextMenu.button.hover.border};
+          border-color: ${$hasBorder ? theme.contextMenu.button.hover.border : 'transparent'};
           box-shadow: ${theme.contextMenu.button.hover.boxShadow};
         }
 
         &:active {
           background: ${theme.contextMenu.button.active.background};
           color: ${theme.contextMenu.button.active.text};
-          border-color: ${theme.contextMenu.button.active.border};
+          border-color: ${$hasBorder ? theme.contextMenu.button.active.border : 'transparent'};
           box-shadow: ${theme.contextMenu.button.active.boxShadow};
         }
 
         &:disabled {
           background: ${theme.contextMenu.button.disabled.background};
           color: ${theme.contextMenu.button.disabled.text};
-          border-color: ${theme.contextMenu.button.disabled.border};
+          border-color: ${$hasBorder ? theme.contextMenu.button.disabled.border : 'transparent'};
           box-shadow: ${theme.contextMenu.button.disabled.boxShadow};
         }
 

package/src/Core/IconComponents/InfoCircleFilled.tsx

@@ -0,0 +1,18 @@
+import { SVGProps } from 'react';
+
+interface InfoCircleIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const InfoCircleFilledIcon = ({ fill = 'currentColor', ...props }: InfoCircleIconProps) => {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M8 15C9.85652 15 11.637 14.2625 12.9497 12.9497C14.2625 11.637 15 9.85652 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1C6.14348 1 4.36301 1.7375 3.05025 3.05025C1.7375 4.36301 1 6.14348 1 8C1 9.85652 1.7375 11.637 3.05025 12.9497C4.36301 14.2625 6.14348 15 8 15ZM8 4C8.19891 4 8.38968 4.07902 8.53033 4.21967C8.67098 4.36032 8.75 4.55109 8.75 4.75V7.75C8.75 7.94891 8.67098 8.13968 8.53033 8.28033C8.38968 8.42098 8.19891 8.5 8 8.5C7.80109 8.5 7.61032 8.42098 7.46967 8.28033C7.32902 8.13968 7.25 7.94891 7.25 7.75V4.75C7.25 4.55109 7.32902 4.36032 7.46967 4.21967C7.61032 4.07902 7.80109 4 8 4ZM8 12C8.26522 12 8.51957 11.8946 8.70711 11.7071C8.89464 11.5196 9 11.2652 9 11C9 10.7348 8.89464 10.4804 8.70711 10.2929C8.51957 10.1054 8.26522 10 8 10C7.73478 10 7.48043 10.1054 7.29289 10.2929C7.10536 10.4804 7 10.7348 7 11C7 11.2652 7.10536 11.5196 7.29289 11.7071C7.48043 11.8946 7.73478 12 8 12Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -38,3 +38,4 @@ export { ChevronDownIcon } from './ChevronDown';
 export { ChevronUpIcon } from './ChevronUp';
 export { PlusIcon } from './Plus';
 export { UsersIcon } from './Users';
+export { InfoCircleFilledIcon } from './InfoCircleFilled';

package/src/Core/Input/Input.tsx

@@ -0,0 +1,133 @@
+import { InputSize, InputSizeStyle } from '../../Theme';
+import { InputHTMLAttributes } from 'react';
+import { styled } from 'styled-components';
+import { InfoCircleFilledIcon } from '../IconComponents';
+
+type StyledProps = {
+  $error?: boolean;
+  $sizes: InputSizeStyle;
+};
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+  error?: boolean;
+  append?: any;
+  prepend?: any;
+  size?: InputSize;
+};
+
+export const Input = ({ error, append, prepend, size = 'small', disabled, className, ...props }: InputProps) => {
+  return (
+    <Group className={className} $error={error} $size={size} $disabled={!!disabled}>
+      {!!prepend && prepend}
+      <InputGroup $size={size}>
+        <input {...props} disabled={disabled} />
+        {!!error && (
+          <IconWrapper>
+            <InfoCircleFilledIcon />
+          </IconWrapper>
+        )}
+      </InputGroup>
+      {!!append && append}
+    </Group>
+  );
+};
+
+const InputGroup = styled.div<{ $size: InputSize }>(
+  ({ theme, $size }) => `
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  color: currentColor;
+
+  svg {
+    width: ${theme.input.sizes[$size].iconSize};
+    height: ${theme.input.sizes[$size].iconSize};
+  }
+
+  &  input {
+    font-size: ${theme.input.sizes[$size].fontSize};
+    color: inherit;
+    background: transparent;
+    padding-block: ${theme.input.sizes[$size].paddingBlock};
+    padding-inline: ${theme.input.sizes[$size].paddingInline};
+    position: relative;
+    width: 100%;
+    outline: none;
+    border: none;
+
+    &::placeholder {
+      color: ${theme.input.outlined.default.placeholder};
+      font-size: ${theme.input.sizes[$size].fontSize};
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      color: inherit;
+    }
+  }
+`
+);
+
+const IconWrapper = styled.span(
+  ({ theme }) => `
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  color: ${theme.input.outlined.error.icon};
+  margin-right: 10px;
+ 
+`
+);
+
+const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSize }>(
+  ({ theme, $disabled, $error, $size }) => `
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  border: 1px solid;
+  border-radius: ${theme.input.sizes[$size].borderRadius};
+  height: ${theme.input.sizes[$size].height};
+  overflow: hidden;
+  transition: all 0.2s ease;
+
+  ${
+    $error
+      ? `
+      border-color: ${theme.input.outlined.error.border};
+      color: ${theme.input.outlined.error.text};
+      background: ${theme.input.outlined.error.background};
+      `
+      : `
+      border-color: ${theme.input.outlined.default.border};
+      color: ${theme.input.outlined.default.text};
+      background: ${theme.input.outlined.default.background};
+      `
+  }
+
+  ${
+    !$disabled &&
+    !$error &&
+    `
+    &:hover {
+      border-color: ${theme.input.outlined.focus.border};
+    }
+    
+    &:focus-within {
+      border-color: ${theme.input.outlined.focus.border};
+      color: ${theme.input.outlined.focus.text};
+      background: ${theme.input.outlined.focus.background};
+    }
+    `
+  }
+
+  ${
+    $disabled &&
+    `
+    border-color: ${theme.input.outlined.disabled.border};
+    color: ${theme.input.outlined.disabled.text};
+    background: ${theme.input.outlined.disabled.background};
+    cursor: not-allowed;
+    `
+  }
+`
+);

package/src/Core/Input/index.ts

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

package/src/Core/RowActionsMenu/RowActionsMenu.tsx

@@ -0,0 +1,151 @@
+import { ButtonColor, ButtonSize, getButtonSizeStyles } from '../../Theme';
+import { useRef } from 'react';
+import { Popover, PopoverAlign, PopoverPosition } from 'react-tiny-popover';
+import { styled, useTheme } from 'styled-components';
+import { BallsMenu } from '../IconComponents';
+import { useContextMenuControl } from '../ContextMenu';
+import { Button } from '../Button';
+
+export type Action = {
+  label: string;
+  onClick: () => void;
+  color: ButtonColor;
+};
+
+interface RowActionsMenuProps {
+  items: Action[];
+  size?: ButtonSize;
+  disabled?: boolean;
+  className?: string;
+  positions?: PopoverPosition[] | PopoverPosition;
+  align?: PopoverAlign;
+}
+
+export const RowActionsMenu = ({
+  size = 'small',
+  disabled,
+  className,
+  positions = ['bottom'],
+  align = 'end',
+  items,
+}: RowActionsMenuProps) => {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+  const { isOpen, closeMenu, toggleMenu } = useContextMenuControl();
+
+  const theme = useTheme();
+
+  return (
+    <Popover
+      padding={theme.contextMenu.padding}
+      isOpen={isOpen}
+      positions={positions}
+      align={align}
+      onClickOutside={closeMenu}
+      content={
+        <ContentWrapper>
+          {items.map(({ label, onClick, color }, idx) => (
+            <Button
+              variant="empty"
+              key={`row-action-${idx}`}
+              color={color}
+              fullWidth
+              size={size}
+              onClick={() => {
+                onClick();
+                closeMenu();
+              }}
+            >
+              {label}
+            </Button>
+          ))}
+        </ContentWrapper>
+      }
+      containerStyle={{
+        backgroundColor: theme.colors.background,
+        border: `1px solid ${theme.colors.stroke.light}`,
+        boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.25)',
+        borderRadius: '5px',
+        zIndex: `${9999}`,
+      }}
+    >
+      <StyledButton
+        ref={buttonRef}
+        onClick={toggleMenu}
+        $disabled={disabled}
+        $size={size}
+        className={className}
+        type="button"
+        disabled={disabled}
+      >
+        <BallsMenu width={theme.rowActionsMenu.icon.size} height={theme.rowActionsMenu.icon.size} />
+      </StyledButton>
+    </Popover>
+  );
+};
+
+const StyledButton = styled.button<{
+  $size: ButtonSize;
+  $disabled?: boolean;
+}>`
+  ${({ $size, $disabled, theme }) => {
+    const sizes = getButtonSizeStyles(theme, $size);
+    return `
+        background: ${theme.rowActionsMenu.button.default.background};
+        color: ${theme.rowActionsMenu.button.default.text};
+        border: none;
+        font-size: ${sizes.fontSize};
+        gap: ${sizes.gap};
+        padding: 4px;
+        border-radius: ${sizes.borderRadius};
+        width: auto;
+        cursor: ${$disabled ? 'not-allowed' : 'pointer'};
+        font-weight: 500;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        text-decoration: none;
+        transition: all 0.2s ease;
+        outline: none;
+
+        &:hover {
+          background: ${theme.rowActionsMenu.button.hover.background};
+          color: ${theme.rowActionsMenu.button.hover.text};
+        }
+
+        &:active {
+          background: ${theme.rowActionsMenu.button.active.background};
+          color: ${theme.rowActionsMenu.button.active.text};
+        }
+
+        &:disabled {
+          background: ${theme.rowActionsMenu.button.disabled.background};
+          color: ${theme.rowActionsMenu.button.disabled.text};
+        }
+
+    `;
+  }}
+`;
+const ContentWrapper = styled.div(
+  ({ theme }) => `
+  padding: 5px 10px;
+  display: flex;
+  flex-direction: column;
+  button {
+    min-width: 110px;
+    justify-content: flex-start;
+    font-weight: 400;
+  }
+  button:not(:last-of-type) {
+    position: relative;
+    ::after {
+      position: absolute;
+      content: '';
+      bottom: 0;
+      left: 5px;
+      right: 5px;
+      height: 1px;
+      background-color: ${theme.rowActionsMenu.delimiterColor};
+    }
+  }
+`
+);

package/src/Core/RowActionsMenu/index.ts

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

package/src/Core/index.ts

@@ -8,3 +8,5 @@ export * from './Table';
 export * from './Pagination';
 export * from './ContextMenu';
 export * from './Select';
+export * from './RowActionsMenu';
+export * from './Input';

package/src/Theme/theme.ts

@@ -545,6 +545,94 @@ export const lightThemePx: Theme = {
       },
     },
   },
+  // Компонент RowActionsMenu
+  rowActionsMenu: {
+    button: {
+      default: {
+        background: 'transparent',
+        text: '#101010',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      hover: {
+        background: 'transparent',
+        text: '#0042EC',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      active: {
+        background: 'transparent',
+        text: '#0042EC',
+        border: ' none',
+        boxShadow: 'none',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        border: ' none',
+        boxShadow: 'none',
+      },
+    },
+    delimiterColor: '#EBEBEB',
+    icon: {
+      size: 16,
+    },
+  },
+  // Компонент Input
+  input: {
+    sizes: {
+      small: {
+        fontSize: 14,
+        paddingInline: 10,
+        paddingBlock: 10,
+        borderRadius: 5,
+        iconSize: 14,
+        height: 40,
+      },
+      medium: {
+        fontSize: 16,
+        paddingInline: 10,
+        paddingBlock: 10,
+        borderRadius: 5,
+        iconSize: 16,
+        height: 40,
+      },
+    },
+    outlined: {
+      default: {
+        background: 'transparent',
+        text: '#101010',
+        placeholder: '#99989C',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+        icon: '#101010',
+      },
+      focus: {
+        background: 'transparent',
+        text: '#101010',
+        placeholder: '#99989C',
+        border: ' #0042EC',
+        boxShadow: 'none',
+        icon: '#101010',
+      },
+      error: {
+        background: 'transparent',
+        text: '#101010',
+        placeholder: '#99989C',
+        border: ' #C93939',
+        boxShadow: 'none',
+        icon: '#C93939',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        placeholder: '#99989C',
+        border: ' #EBEBEB',
+        boxShadow: 'none',
+        icon: '#99989C',
+      },
+    },
+  },
 };
 
 // Конвертуємо всі розміри з px в rem

package/src/Theme/types.ts

@@ -6,9 +6,9 @@ export type ButtonColor = 'default' | 'primary' | 'secondary' | 'error';
 export type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
 export type ButtonSize = 'small' | 'medium';
 
-export type InputVariant = 'default' | 'outlined' | 'filled';
+export type InputVariant = 'outlined';
 export type InputState = 'default' | 'focus' | 'error' | 'disabled';
-export type InputSize = 'small' | 'medium' | 'large';
+export type InputSize = 'small' | 'medium';
 
 // Типи для spacing та breakpoints
 export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
@@ -32,6 +32,26 @@ export type ButtonSizeStyle = {
   iconSize: number | string;
 };
 
+// Тип для стилів елементів інпута
+export type InputElementStyle = {
+  background: string;
+  text: string;
+  placeholder: string;
+  border: string;
+  boxShadow: string;
+  icon: string;
+};
+
+// Тип для розмірів інпута
+export type InputSizeStyle = {
+  fontSize: number | string;
+  paddingInline: number | string;
+  paddingBlock: number | string;
+  borderRadius: number | string;
+  iconSize: number | string;
+  height: number | string;
+};
+
 // Тип для палітри
 export type Theme = {
   mode: 'light' | 'dark';
@@ -151,6 +171,19 @@ export type Theme = {
   select: {
     item: Record<ButtonState, ButtonElementStyle>;
   };
+  // RowActionsMenu
+  rowActionsMenu: {
+    button: Record<ButtonState, ButtonElementStyle>;
+    delimiterColor: string;
+    icon: {
+      size: number | string;
+    };
+  };
+  //Input
+  input: {
+    sizes: Record<InputSize, InputSizeStyle>;
+    outlined: Record<InputState, InputElementStyle>;
+  };
 };
 
 //TODO check and refactoring

package/src/Theme/utils.ts

@@ -1,5 +1,5 @@
 import { DefaultTheme } from 'styled-components';
-import { Breakpoint, ButtonColor, ButtonSize, ButtonState, ButtonVariant } from './types';
+import { Breakpoint, ButtonColor, ButtonSize, ButtonState, ButtonVariant, InputSize, InputState } from './types';
 
 /**
  * Helper function to resolve nested color paths from theme