@cyber-harbour/ui 1.0.44 → 1.0.45

package/package.json

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

package/src/Core/Input/Input.tsx

@@ -1,9 +1,9 @@
-import { InputSize, InputSizeStyle, InputVariant, getInputStyles } from '../../Theme';
-import { forwardRef, InputHTMLAttributes, Ref } from 'react';
-import { styled } from 'styled-components';
+import { InputSize, InputVariant, remToPx } from '../../Theme';
+import { forwardRef, InputHTMLAttributes, Ref, TextareaHTMLAttributes, useEffect, useRef, useState } from 'react';
+import { styled, useTheme } from 'styled-components';
 import { InfoCircleFilledIcon } from '../IconComponents';
 
-export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+type BaseInputProps = {
   error?: boolean;
   append?: any;
   prepend?: any;
@@ -11,15 +11,49 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
   variant?: InputVariant;
 };
 
-export const Input: any = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { error, append, prepend, size = 'small', variant = 'outlined', disabled, className, ...props },
+export type InputElementProps = BaseInputProps &
+  InputHTMLAttributes<HTMLInputElement> & {
+    multiline?: false;
+  };
+export type TextAreaElementProps = BaseInputProps &
+  TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    multiline: true;
+    autoResize?: boolean;
+  };
+export type InputProps = InputElementProps | TextAreaElementProps;
+
+type TextAreaInputProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  size?: InputSize;
+  autoResize?: boolean;
+};
+
+type InputRefElement<T> = T extends true ? HTMLTextAreaElement : HTMLInputElement | null;
+
+export const Input: any = forwardRef<InputRefElement<InputProps['multiline']>, InputProps>(function Input(
+  { error, append, prepend, size = 'small', variant = 'outlined', multiline, disabled, className, ...props },
   ref
 ) {
   return (
-    <Group className={className} $error={error} $size={size} $variant={variant} $disabled={!!disabled}>
+    <Group
+      $align={multiline ? 'flex-start' : 'center'}
+      className={className}
+      $error={error}
+      $size={size}
+      $variant={variant}
+      $disabled={!!disabled}
+    >
       {!!prepend && prepend}
       <InputGroup $size={size} $variant={variant}>
-        <input ref={ref} disabled={disabled} {...props} />
+        {multiline ? (
+          <TextAreaInput
+            size={size}
+            disabled={disabled}
+            {...(props as TextAreaElementProps)}
+            ref={ref as Ref<InputRefElement<true>>}
+          />
+        ) : (
+          <input disabled={disabled} {...(props as InputElementProps)} ref={ref as Ref<InputRefElement<false>>} />
+        )}
         {!!error && (
           <IconWrapper $variant={variant}>
             <InfoCircleFilledIcon />
@@ -31,6 +65,52 @@ export const Input: any = forwardRef<HTMLInputElement, InputProps>(function Inpu
   );
 });
 
+const TextAreaInput = forwardRef<HTMLTextAreaElement, TextAreaInputProps>(function Input(
+  { size = 'small', disabled, className, rows = '1', autoResize = false, ...props },
+  ref
+) {
+  const [areaSize, setAreaSize] = useState(Number(rows));
+  const rowsRef = useRef(Number(rows));
+  const divRef = useRef<HTMLDivElement>(null);
+  const theme = useTheme();
+  const rowHeight = useRef(remToPx(theme.input.sizes[size].lineHeight, theme.baseSize) || theme.baseSize);
+
+  useEffect(() => {
+    if (divRef.current && autoResize) {
+      const height = divRef.current.getBoundingClientRect().height;
+      const areaSize = Math.round(height / rowHeight.current);
+      if (rowsRef.current !== areaSize) {
+        rowsRef.current = areaSize;
+        setAreaSize(areaSize);
+      }
+    }
+  }, [props.value]);
+
+  return (
+    <div style={{ position: 'relative', width: '100%' }}>
+      <textarea disabled={disabled} {...props} rows={areaSize} ref={ref} />
+      <div
+        ref={divRef}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 'auto',
+          opacity: 0,
+          zIndex: -1,
+          pointerEvents: 'none',
+          minHeight: rowHeight.current * Number(rows),
+          wordBreak: 'break-word',
+          whiteSpace: 'pre-wrap',
+        }}
+      >
+        {props.value}
+      </div>
+    </div>
+  );
+});
+
 const InputGroup = styled.div<{ $size: InputSize; $variant?: InputVariant }>(
   ({ theme, $size, $variant = 'outlined' }) => `
   display: inline-flex;
@@ -43,7 +123,7 @@ const InputGroup = styled.div<{ $size: InputSize; $variant?: InputVariant }>(
     height: ${theme.input.sizes[$size].iconSize};
   }
 
-  &  input {
+  &  input, & textarea, & ${EditableContainer} {
     font-size: ${theme.input.sizes[$size].fontSize};
     color: inherit;
     background: transparent;
@@ -63,6 +143,16 @@ const InputGroup = styled.div<{ $size: InputSize; $variant?: InputVariant }>(
       cursor: not-allowed;
       color: inherit;
     }
+
+    &:focus, &:focus-visible, &:focus:focus-visible {
+      outline: none;
+    }
+  }
+
+  & textarea {
+    resize: none;
+    margin: 0;
+    display: block;
   }
 `
 );
@@ -74,14 +164,20 @@ const IconWrapper = styled.span<{ $variant: InputVariant }>(
   align-items: center;
   color: ${theme.input[$variant].error.icon};
   margin-right: 10px;
- 
+
 `
 );
 
-const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSize; $variant: InputVariant }>(
-  ({ theme, $disabled, $error, $size, $variant }) => `
+const Group = styled.div<{
+  $align: 'flex-start' | 'center';
+  $disabled: boolean;
+  $error?: boolean;
+  $size: InputSize;
+  $variant: InputVariant;
+}>(
+  ({ theme, $align = 'center', $disabled, $error, $size, $variant }) => `
   display: inline-flex;
-  align-items: center;
+  align-items: ${$align};
   width: 100%;
   border: 1px solid;
   border-radius: ${theme.input.sizes[$size].borderRadius};
@@ -110,7 +206,7 @@ const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSiz
     &:hover {
       border-color: ${theme.input[$variant].focus.border};
     }
-    
+
     &:focus-within {
       border-color: ${theme.input[$variant].focus.border};
       color: ${theme.input[$variant].focus.text};
@@ -130,3 +226,27 @@ const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSiz
   }
 `
 );
+
+const EditableContainer = styled.div<{ $placeholder?: string }>(
+  ({ $placeholder, theme }) => `
+  outline-style: none;
+  outline-width: 0px;
+  position: relative;
+
+  ${
+    $placeholder
+      ? `
+        &:after {
+          content: '${$placeholder}';
+          position: absolute;
+          top: 0;
+          left: 0;
+          color: ${theme.input.outlined.default.placeholder};
+        }
+      `
+      : ''
+  }
+
+  
+`
+);

package/src/Theme/themes/dark.ts

@@ -579,6 +579,7 @@ export const darkThemePx: Theme = {
         borderRadius: 0,
         iconSize: 14,
         height: 'auto',
+        lineHeight: 16,
       },
       small: {
         fontSize: 14,
@@ -587,6 +588,7 @@ export const darkThemePx: Theme = {
         borderRadius: 5,
         iconSize: 14,
         height: 40,
+        lineHeight: 16,
       },
       medium: {
         fontSize: 16,
@@ -595,6 +597,7 @@ export const darkThemePx: Theme = {
         borderRadius: 5,
         iconSize: 16,
         height: 40,
+        lineHeight: 18,
       },
     },
     outlined: {

package/src/Theme/themes/light.ts

@@ -578,6 +578,7 @@ export const lightThemePx: Theme = {
         borderRadius: 0,
         iconSize: 14,
         height: 'auto',
+        lineHeight: 16,
       },
       small: {
         fontSize: 14,
@@ -586,6 +587,7 @@ export const lightThemePx: Theme = {
         borderRadius: 5,
         iconSize: 14,
         height: 40,
+        lineHeight: 16,
       },
       medium: {
         fontSize: 16,
@@ -594,6 +596,7 @@ export const lightThemePx: Theme = {
         borderRadius: 5,
         iconSize: 16,
         height: 40,
+        lineHeight: 18,
       },
     },
     outlined: {

package/src/Theme/types.ts

@@ -54,6 +54,7 @@ export type InputSizeStyle = {
   borderRadius: number | string;
   iconSize: number | string;
   height: number | string;
+  lineHeight: number;
 };
 
 // Тип для палітри

package/src/Theme/utils.ts

@@ -73,6 +73,16 @@ export const pxToRem = (pxValue: number | string, baseSize: number = 16): string
   return `${remValue}rem`;
 };
 
+export const remToPx = (remValue: number | string, baseSize: number = 16): number => {
+  // If remValue is a string with 'rem' suffix, extract the numeric value
+  const numericValue = typeof remValue === 'string' ? parseFloat(remValue.replace('rem', '')) : remValue;
+  if (isNaN(numericValue)) {
+    return 0;
+  }
+
+  return numericValue * baseSize;
+};
+
 const IGNORE_CONVERT_KEYS: Record<string, string[] | boolean> = {
   contextMenu: ['padding'],
   baseSize: true,