@cyber-harbour/ui 1.0.53 → 1.0.54

package/package.json

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

package/src/Core/Box/Box.tsx

@@ -1,26 +1,41 @@
-import { createComponent, FabricComponent, generatePropertySpaceStyle } from '../../Theme';
+import {
+  ColorVariant,
+  createComponent,
+  FabricComponent,
+  generatePropertySpaceStyle,
+  resolveThemeColor,
+} from '../../Theme';
 import { styled } from 'styled-components';
 
 type BoxProps = FabricComponent<
   {
     children: any;
+    element?: 'div' | 'section';
+    hasBorder?: boolean;
+    color?: ColorVariant | string;
   } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 >;
 
-export const Box = ({ children, ...props }: BoxProps) => {
-  return <StyledBox {...props}>{children}</StyledBox>;
+export const Box = ({ children, element = 'div', hasBorder = true, color, ...props }: BoxProps) => {
+  return (
+    <StyledBox as={element} $hasBorder={hasBorder} $color={color} {...props}>
+      {children}
+    </StyledBox>
+  );
 };
 
+type StyledProps = { $hasBorder: boolean; $color?: string };
+
 const StyledBox = createComponent(
-  styled('div')<FabricComponent>(
-    ({ theme, px = theme.box.padding, py = theme.box.padding }) => `
+  styled('div')<FabricComponent<StyledProps>>(
+    ({ theme, $hasBorder, $color, px = theme.box.padding, py = theme.box.padding }) => `
       ${generatePropertySpaceStyle(theme, 'padding-inline', px)}
       ${generatePropertySpaceStyle(theme, 'padding-block', py)}
       border-radius: ${theme.box.borderRadius};
       background-color: ${theme.box.background};
-      border-width: ${theme.box.border.width};
+      border-width: ${$hasBorder ? theme.box.border.width : 0};
       border-style: ${theme.box.border.style};
-      border-color: ${theme.box.border.color};
+      border-color: ${resolveThemeColor(theme, $color) || theme.box.border.color};
   `
   ),
   {

package/src/Core/Input/Input.tsx

@@ -41,6 +41,7 @@ export const Input: any = forwardRef<InputRefElement<InputProps['multiline']>, I
       $size={size}
       $variant={variant}
       $disabled={!!disabled}
+      $multiline={multiline}
     >
       {!!prepend && prepend}
       <InputGroup $size={size} $variant={variant}>
@@ -52,7 +53,7 @@ export const Input: any = forwardRef<InputRefElement<InputProps['multiline']>, I
             ref={ref as Ref<InputRefElement<true>>}
           />
         ) : (
-          <input disabled={disabled} {...(props as InputElementProps)} ref={ref as Ref<InputRefElement<false>>} />
+          <StyledInput disabled={disabled} {...(props as InputElementProps)} ref={ref as Ref<InputRefElement<false>>} />
         )}
         {!!error && (
           <IconWrapper $variant={variant}>
@@ -88,31 +89,38 @@ const TextAreaInput = forwardRef<HTMLTextAreaElement, TextAreaInputProps>(functi
 
   return (
     <div style={{ position: 'relative', width: '100%' }}>
-      <textarea disabled={disabled} {...props} rows={areaSize} ref={ref} />
-      <div
+      <StyledTextarea disabled={disabled} {...props} rows={areaSize} ref={ref} />
+      <SizeContainer
         ref={divRef}
+        $size={size}
         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>
+        {(props.value || '') + '\u200B'}
+      </SizeContainer>
     </div>
   );
 });
 
-const InputGroup = styled.div<{ $size: InputSize; $variant?: InputVariant }>(
-  ({ theme, $size, $variant = 'outlined' }) => `
+type StyledInputProps = { $size: InputSize; $variant: InputVariant };
+type StyledGroupProps = StyledInputProps & {
+  $align: 'flex-start' | 'center';
+  $disabled: boolean;
+  $error?: boolean;
+  $multiline?: boolean;
+};
+
+const StyledTextarea = styled.textarea`
+  resize: none;
+  margin: 0;
+  display: block;
+`;
+
+const StyledInput = styled.input``;
+
+const InputGroup = styled.div<StyledInputProps>(
+  ({ theme, $size, $variant }) => `
   display: inline-flex;
   align-items: center;
   width: 100%;
@@ -123,7 +131,7 @@ const InputGroup = styled.div<{ $size: InputSize; $variant?: InputVariant }>(
     height: ${theme.input.sizes[$size].iconSize};
   }
 
-  &  input, & textarea, & ${EditableContainer} {
+  &  ${StyledInput}, & ${StyledTextarea}{
     font-size: ${theme.input.sizes[$size].fontSize};
     color: inherit;
     background: transparent;
@@ -148,12 +156,24 @@ const InputGroup = styled.div<{ $size: InputSize; $variant?: InputVariant }>(
       outline: none;
     }
   }
+`
+);
 
-  & textarea {
-    resize: none;
-    margin: 0;
-    display: block;
-  }
+const SizeContainer = styled.div<{ $size: InputSize }>(
+  ({ theme, $size }) => `
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: auto;
+  opacity: 0;
+  z-index: -1;
+  pointer-events: none;
+  padding-inline: ${theme.input.sizes[$size].paddingInline};
+  font-size: ${theme.input.sizes[$size].fontSize};
+  line-height: ${theme.input.sizes[$size].lineHeight};
+  word-break: break-word;
+  white-space: pre-wrap;
 `
 );
 
@@ -168,20 +188,14 @@ const IconWrapper = styled.span<{ $variant: InputVariant }>(
 `
 );
 
-const Group = styled.div<{
-  $align: 'flex-start' | 'center';
-  $disabled: boolean;
-  $error?: boolean;
-  $size: InputSize;
-  $variant: InputVariant;
-}>(
-  ({ theme, $align = 'center', $disabled, $error, $size, $variant }) => `
+const Group = styled.div<StyledGroupProps>(
+  ({ theme, $align = 'center', $disabled, $error, $size, $variant, $multiline }) => `
   display: inline-flex;
   align-items: ${$align};
   width: 100%;
   border: 1px solid;
   border-radius: ${theme.input.sizes[$size].borderRadius};
-  height: ${theme.input.sizes[$size].height};
+  height: ${$multiline ? 'auto' : theme.input.sizes[$size].height};
   overflow: hidden;
   transition: all 0.2s ease;
 
@@ -226,27 +240,3 @@ const Group = styled.div<{
   }
 `
 );
-
-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/Core/Label/Label.tsx

@@ -37,10 +37,12 @@ export const Label = ({
 
   return (
     <StyledLabel $size={size} $direction={direction} $fullWidth={fullWidth} $isRow={$isRow} {...props}>
-      <LabelWrapper $width={$width}>
-        {!!label && <LabelText $size={size}>{label}</LabelText>}
-        {!!helpText && <HelpText $size={size}>{helpText}</HelpText>}
-      </LabelWrapper>
+      {Boolean(label || helpText) && (
+        <LabelWrapper $width={$width}>
+          {!!label && <LabelText $size={size}>{label}</LabelText>}
+          {!!helpText && <HelpText $size={size}>{helpText}</HelpText>}
+        </LabelWrapper>
+      )}
       <Wrapper $width={$width}>
         {children}
         {!!errorText && <ErrorText $size={size}>{errorText}</ErrorText>}

package/src/Core/LinerProgress/LinerProgress.tsx

@@ -0,0 +1,53 @@
+import { createComponent, FabricComponent, propToRem, pxToRem } from '../../Theme';
+import { styled } from 'styled-components';
+
+type Direction = 'horizontal' | 'vertical';
+
+type LinerProgressProps = FabricComponent<
+  {
+    height?: number;
+    width?: string | number;
+    direction?: Direction;
+    value: number;
+  } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>
+>;
+
+export const LinerProgress = ({
+  height = 21,
+  width = '100%',
+  direction = 'horizontal',
+  value,
+  ...props
+}: LinerProgressProps) => {
+  return <StyledLine {...props} $height={height} $value={value} $width={width} $direction={direction} />;
+};
+
+interface StyledLineProps {
+  $height: number;
+  $value: number;
+  $width: string | number;
+  $direction: Direction;
+}
+
+const StyledLine = createComponent(
+  styled.div<StyledLineProps>(
+    ({ theme, $height, $value, $width, $direction }) => `
+     width: ${propToRem($width, theme.baseSize)};
+     height: ${propToRem($height, theme.baseSize)};
+     background-color: ${theme.leanerProgress.background};
+     position: relative;
+     overflow: hidden;
+     border-radius: ${pxToRem(2, theme.baseSize)};
+     &::after {
+       position: absolute;
+       content: '';
+       left: 0;
+       bottom: 0;
+       width: ${$direction === 'horizontal' ? `${$value}%` : propToRem($width, theme.baseSize)};
+       height: ${$direction === 'horizontal' ? '100%' : `${$value}%`};
+       background-color: ${theme.leanerProgress.progressColor};
+       border-radius: ${pxToRem(2, theme.baseSize)};
+     }
+`
+  )
+);

package/src/Core/LinerProgress/index.ts

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

package/src/Core/Switch/Switch.tsx

@@ -0,0 +1,71 @@
+import { InputHTMLAttributes } from 'react';
+import { createComponent, destructSpaceProps, FabricComponent, pxToRem } from '../../Theme';
+import { styled } from 'styled-components';
+
+type SwitchProps = FabricComponent<Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>>;
+
+export const Switch = ({ className, ...props }: SwitchProps) => {
+  const spaceProps = destructSpaceProps(props);
+  return (
+    <StyledLabel className={className} {...spaceProps}>
+      <HiddenInput type="checkbox" {...props} />
+      <StyledSwitch />
+    </StyledLabel>
+  );
+};
+
+const StyledSwitch = styled.span(
+  ({ theme }) => `
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  width: ${pxToRem(41, theme.baseSize)};
+  height: ${pxToRem(21, theme.baseSize)};
+  border-radius: ${pxToRem(15, theme.baseSize)};
+  background-color: ${theme.switch.default.background};
+  &::before {
+    position: absolute;
+    display: block;
+    top: 50%;
+    transform: translateY(-50%);
+    height: ${pxToRem(15, theme.baseSize)};
+    width: ${pxToRem(15, theme.baseSize)};
+    border-radius: 50%;
+    background-color: ${theme.switch.default.color};
+    content: '';
+  }
+`
+);
+const HiddenInput = styled.input(
+  ({ theme }) => `
+  appearance: none;
+  border: none;
+  outline: none;
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  top: 0;
+  left: 0;
+  &:not(:checked) + ${StyledSwitch}::before {
+    left: ${pxToRem(3, theme.baseSize)};
+  }
+  &:checked + ${StyledSwitch} {
+    background-color: ${theme.switch.checked.background};
+    &::before {
+      right: ${pxToRem(3, theme.baseSize)};
+    }
+  }
+  &:disabled + ${StyledSwitch} {
+    background-color: ${theme.switch.disabled.background};
+    cursor: not-allowed;
+  }
+`
+);
+
+const StyledLabel = createComponent(
+  styled.label`
+    position: relative;
+    display: inline-block;
+  `
+);

package/src/Core/Switch/index.ts

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

package/src/Core/index.ts

@@ -18,3 +18,5 @@ export * from './Tag';
 export * from './Alert';
 export * from './Label';
 export * from './Checkbox';
+export * from './LinerProgress';
+export * from './Switch';

package/src/Theme/themes/dark.ts

@@ -36,7 +36,7 @@ export const darkThemePx: Theme = {
     },
     disable: '#080A0C',
     success: '#27AE60',
-    error: '#FF3B30',
+    error: '#C93939',
     warning: '#F2994A',
     info: '#2F80ED',
   },
@@ -776,6 +776,24 @@ export const darkThemePx: Theme = {
     color: '#ffffff',
     helpTextColor: '#535353',
   },
+  leanerProgress: {
+    background: '#1E2226',
+    progressColor: '#158EFF',
+  },
+  switch: {
+    default: {
+      background: '#34404C',
+      color: '#0F1317',
+    },
+    checked: {
+      background: '#158EFF',
+      color: '#0F1317',
+    },
+    disabled: {
+      background: '#1E2226',
+      color: '#0F1317',
+    },
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -35,7 +35,7 @@ export const lightThemePx: Theme = {
     },
     disable: '#FAFAFA',
     success: '#27AE60',
-    error: '#FF3B30',
+    error: '#C93939',
     warning: '#F2994A',
     info: '#2F80ED',
   },
@@ -775,6 +775,24 @@ export const lightThemePx: Theme = {
     color: '#101010',
     helpTextColor: '#99989C',
   },
+  leanerProgress: {
+    background: '#EBEBEB',
+    progressColor: '#0042EC',
+  },
+  switch: {
+    default: {
+      background: '#C7C5C5',
+      color: '#FFFFFF',
+    },
+    checked: {
+      background: '#0042EC',
+      color: '#FFFFFF',
+    },
+    disabled: {
+      background: '#EBEBEB',
+      color: '#FFFFFF',
+    },
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -30,6 +30,7 @@ export type LabelSizeStyle = {
   helpText: { fontSize: number | string; marginTop: number | string };
 };
 
+export type SwitchState = 'default' | 'checked' | 'disabled';
 // Типи для spacing та breakpoints
 export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
 
@@ -287,6 +288,17 @@ export type Theme = {
     color: string;
     helpTextColor: string;
   };
+  leanerProgress: {
+    background: string;
+    progressColor: string;
+  };
+  switch: Record<
+    SwitchState,
+    {
+      background: string;
+      color: string;
+    }
+  >;
 };
 
 //TODO check and refactoring