@cyber-harbour/ui 1.0.31 → 1.0.32

package/package.json

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

package/src/Core/Input/Input.tsx

@@ -1,28 +1,27 @@
-import { InputSize, InputSizeStyle } from '../../Theme';
-import { InputHTMLAttributes } from 'react';
+import { InputSize, InputSizeStyle, InputVariant, getInputStyles } from '../../Theme';
+import { forwardRef, InputHTMLAttributes, Ref } from 'react';
 import { styled } from 'styled-components';
 import { InfoCircleFilledIcon } from '../IconComponents';
 
-type StyledProps = {
-  $error?: boolean;
-  $sizes: InputSizeStyle;
-};
-
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
   error?: boolean;
   append?: any;
   prepend?: any;
   size?: InputSize;
+  variant?: InputVariant;
 };
 
-export const Input = ({ error, append, prepend, size = 'small', disabled, className, ...props }: InputProps) => {
+export const Input: any = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { error, append, prepend, size = 'small', variant = 'outlined', disabled, className, ...props },
+  ref
+) {
   return (
-    <Group className={className} $error={error} $size={size} $disabled={!!disabled}>
+    <Group className={className} $error={error} $size={size} $variant={variant} $disabled={!!disabled}>
       {!!prepend && prepend}
-      <InputGroup $size={size}>
-        <input {...props} disabled={disabled} />
+      <InputGroup $size={size} $variant={variant}>
+        <input ref={ref} disabled={disabled} {...props} />
         {!!error && (
-          <IconWrapper>
+          <IconWrapper $variant={variant}>
             <InfoCircleFilledIcon />
           </IconWrapper>
         )}
@@ -30,10 +29,10 @@ export const Input = ({ error, append, prepend, size = 'small', disabled, classN
       {!!append && append}
     </Group>
   );
-};
+});
 
-const InputGroup = styled.div<{ $size: InputSize }>(
-  ({ theme, $size }) => `
+const InputGroup = styled.div<{ $size: InputSize; $variant?: InputVariant }>(
+  ({ theme, $size, $variant = 'outlined' }) => `
   display: inline-flex;
   align-items: center;
   width: 100%;
@@ -56,7 +55,7 @@ const InputGroup = styled.div<{ $size: InputSize }>(
     border: none;
 
     &::placeholder {
-      color: ${theme.input.outlined.default.placeholder};
+      color: ${theme.input[$variant].default.placeholder};
       font-size: ${theme.input.sizes[$size].fontSize};
     }
 
@@ -68,19 +67,19 @@ const InputGroup = styled.div<{ $size: InputSize }>(
 `
 );
 
-const IconWrapper = styled.span(
-  ({ theme }) => `
+const IconWrapper = styled.span<{ $variant: InputVariant }>(
+  ({ theme, $variant }) => `
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
-  color: ${theme.input.outlined.error.icon};
+  color: ${theme.input[$variant].error.icon};
   margin-right: 10px;
  
 `
 );
 
-const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSize }>(
-  ({ theme, $disabled, $error, $size }) => `
+const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSize; $variant: InputVariant }>(
+  ({ theme, $disabled, $error, $size, $variant }) => `
   display: inline-flex;
   align-items: center;
   width: 100%;
@@ -93,14 +92,14 @@ const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSiz
   ${
     $error
       ? `
-      border-color: ${theme.input.outlined.error.border};
-      color: ${theme.input.outlined.error.text};
-      background: ${theme.input.outlined.error.background};
+      border-color: ${theme.input[$variant].error.border};
+      color: ${theme.input[$variant].error.text};
+      background: ${theme.input[$variant].error.background};
       `
       : `
-      border-color: ${theme.input.outlined.default.border};
-      color: ${theme.input.outlined.default.text};
-      background: ${theme.input.outlined.default.background};
+      border-color: ${theme.input[$variant].default.border};
+      color: ${theme.input[$variant].default.text};
+      background: ${theme.input[$variant].default.background};
       `
   }
 
@@ -109,13 +108,13 @@ const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSiz
     !$error &&
     `
     &:hover {
-      border-color: ${theme.input.outlined.focus.border};
+      border-color: ${theme.input[$variant].focus.border};
     }
     
     &:focus-within {
-      border-color: ${theme.input.outlined.focus.border};
-      color: ${theme.input.outlined.focus.text};
-      background: ${theme.input.outlined.focus.background};
+      border-color: ${theme.input[$variant].focus.border};
+      color: ${theme.input[$variant].focus.text};
+      background: ${theme.input[$variant].focus.background};
     }
     `
   }
@@ -123,9 +122,9 @@ const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSiz
   ${
     $disabled &&
     `
-    border-color: ${theme.input.outlined.disabled.border};
-    color: ${theme.input.outlined.disabled.text};
-    background: ${theme.input.outlined.disabled.background};
+    border-color: ${theme.input[$variant].disabled.border};
+    color: ${theme.input[$variant].disabled.text};
+    background: ${theme.input[$variant].disabled.background};
     cursor: not-allowed;
     `
   }

package/src/Theme/theme.ts

@@ -601,6 +601,14 @@ export const lightThemePx: Theme = {
   // Компонент Input
   input: {
     sizes: {
+      empty: {
+        fontSize: 14,
+        paddingInline: 0,
+        paddingBlock: 0,
+        borderRadius: 0,
+        iconSize: 14,
+        height: 'auto',
+      },
       small: {
         fontSize: 14,
         paddingInline: 10,
@@ -652,6 +660,40 @@ export const lightThemePx: Theme = {
         icon: '#99989C',
       },
     },
+    empty: {
+      default: {
+        background: 'transparent',
+        text: '#101010',
+        placeholder: '#99989C',
+        border: ' transparent',
+        boxShadow: 'none',
+        icon: '#101010',
+      },
+      focus: {
+        background: 'transparent',
+        text: '#101010',
+        placeholder: '#99989C',
+        border: ' transparent',
+        boxShadow: 'none',
+        icon: '#101010',
+      },
+      error: {
+        background: 'transparent',
+        text: '#101010',
+        placeholder: '#99989C',
+        border: ' transparent',
+        boxShadow: 'none',
+        icon: '#C93939',
+      },
+      disabled: {
+        background: '#FAFAFA',
+        text: '#99989C',
+        placeholder: '#99989C',
+        border: 'transparent',
+        boxShadow: 'none',
+        icon: '#99989C',
+      },
+    },
   },
   box: {
     padding: 20,

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 = 'outlined';
+export type InputVariant = 'outlined' | 'empty';
 export type InputState = 'default' | 'focus' | 'error' | 'disabled';
-export type InputSize = 'small' | 'medium';
+export type InputSize = 'empty' | 'small' | 'medium';
 
 // Типи для spacing та breakpoints
 export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
@@ -191,6 +191,7 @@ export type Theme = {
   input: {
     sizes: Record<InputSize, InputSizeStyle>;
     outlined: Record<InputState, InputElementStyle>;
+    empty: Record<InputState, InputElementStyle>;
   };
   //Box
   box: {

package/src/Theme/utils.ts

@@ -1,5 +1,14 @@
 import { DefaultTheme } from 'styled-components';
-import { Breakpoint, ButtonColor, ButtonSize, ButtonState, ButtonVariant, InputSize, InputState } from './types';
+import {
+  Breakpoint,
+  ButtonColor,
+  ButtonSize,
+  ButtonState,
+  ButtonVariant,
+  InputSize,
+  InputState,
+  InputVariant,
+} from './types';
 
 /**
  * Helper function to resolve nested color paths from theme
@@ -130,22 +139,12 @@ export const getButtonSizeStyles = (theme: DefaultTheme, size: ButtonSize) => {
   return theme.button.sizes[size];
 };
 
-// /**
-//  * Функція для отримання стилів інпута за варіантом, станом та розміром
-//  */
-// export const getInputStyles = (
-//   variant: InputVariant = 'default',
-//   state: InputState = 'default',
-//   size: InputSize = 'medium'
-// ) => {
-//   const variantStyles = theme.input[variant][state];
-//   const sizeStyles = theme.input.sizes[size];
-
-//   return {
-//     ...variantStyles,
-//     ...sizeStyles,
-//   };
-// };
+/**
+ * Функція для отримання стилів інпута за варіантом та станом
+ */
+export const getInputStyles = (theme: DefaultTheme, variant: InputVariant, state: InputState) => {
+  return theme.input[variant][state];
+};
 
 /**
  * Функція для отримання типографічних стилів