@cyber-harbour/ui 1.0.23 → 1.0.25

package/package.json

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

package/src/Core/IconComponents/Check.tsx

@@ -6,8 +6,11 @@ interface InfoCircleIconProps extends SVGProps<SVGSVGElement> {
 
 export const CheckIcon = ({ fill = 'currentColor', ...props }: InfoCircleIconProps) => {
   return (
-    <svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <path d="M14.4983 1L5.34428 11L1.18338 6.45455" stroke={fill} stroke-width="1.5" stroke-linejoin="round" />;
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M9.796 6.706c-3.438 3.638-4.457 4.698-4.481 4.671l-3.552-3.768c-0.026-0.028-0.193 0.115-0.792 0.678-0.418 0.394-0.759 0.727-0.759 0.739 0 0.011 1.010 1.091 2.245 2.396 2.080 2.2 2.258 2.381 2.425 2.462 0.32 0.158 0.729 0.142 1.015-0.038 0.149-0.094-0.051 0.115 5.257-5.502l4.634-4.902-0.752-0.715c-0.233-0.223-0.484-0.458-0.738-0.691l-0.034-0.030c-1.295 1.344-2.752 2.874-4.201 4.413l-0.268 0.287z"
+        fill={fill}
+      ></path>
     </svg>
   );
 };

package/src/Core/IconComponents/Cross.tsx

@@ -0,0 +1,16 @@
+import { SVGProps } from 'react';
+
+interface DataSetsIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const CrossIcon = ({ fill = 'currentColor', ...props }: DataSetsIconProps) => {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M15.595 13.176c0.282 0.282 0.376 0.565 0.376 0.941s-0.188 0.753-0.376 0.941c-0.471 0.565-1.412 0.565-1.882 0l-5.176-5.176-5.176 5.176c-0.471 0.471-1.412 0.471-1.882 0s-0.376-0.565-0.376-0.941c0-0.376 0.188-0.659 0.376-0.941l5.176-5.176-0.376-0.376-4.988-4.8c-0.282-0.282-0.376-0.565-0.376-0.941s0.188-0.753 0.376-1.035c0.282-0.282 0.659-0.376 0.941-0.376s0.659 0.094 0.941 0.376l5.176 5.176 0.376-0.376 4.894-4.8c0.282-0.282 0.659-0.376 0.941-0.376s0.659 0.094 0.941 0.376c0.282 0.282 0.376 0.565 0.376 0.941s-0.188 0.753-0.376 0.941l-5.176 5.176 5.271 5.271z"
+        fill={fill}
+      ></path>
+    </svg>
+  );
+};

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/Unfold.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from 'react';
+
+interface DataSetsIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const UnfoldIcon = ({ fill = 'currentColor', ...props }: DataSetsIconProps) => {
+  return (
+    <svg viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M3.765 3.97l3.109-3.219c0.362-0.375 0.949-0.375 1.311 0l3.109 3.219-0.983 1.018-2.781-2.879-2.781 2.879-0.983-1.018z"
+        fill={fill}
+      ></path>
+      <path
+        d="M11.294 12.029l-3.109 3.219c-0.362 0.375-0.949 0.375-1.311 0l-3.109-3.219 0.983-1.018 2.781 2.879 2.781-2.879 0.983 1.018z"
+        fill={fill}
+      ></path>
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

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

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/index.ts

@@ -9,3 +9,4 @@ export * from './Pagination';
 export * from './ContextMenu';
 export * from './Select';
 export * from './RowActionsMenu';
+export * from './Input';

package/src/Theme/theme.ts

@@ -578,6 +578,61 @@ export const lightThemePx: Theme = {
       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,7 @@ export type Theme = {
   select: {
     item: Record<ButtonState, ButtonElementStyle>;
   };
+  // RowActionsMenu
   rowActionsMenu: {
     button: Record<ButtonState, ButtonElementStyle>;
     delimiterColor: string;
@@ -158,6 +179,11 @@ export type Theme = {
       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