@cyber-harbour/ui 1.0.23 → 1.0.24

package/package.json

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

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/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