@cyber-harbour/ui 1.0.51 → 1.0.52

package/package.json

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

package/src/Core/Checkbox/Checkbox.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FabricComponent, createComponent, destructSpaceProps, pxToRem } from '../../Theme';
+
+type CheckboxProps = FabricComponent<{
+  label?: any;
+}> &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+export const Checkbox = ({ label, className, disabled, ...props }: CheckboxProps) => {
+  const spaceProps = destructSpaceProps(props);
+  return (
+    <StyledCheckbox className={className} $disabled={disabled} {...spaceProps}>
+      <HiddenInput type="checkbox" disabled={disabled} {...props} />
+      <CustomCheckbox />
+      {!!label && <LabelText>{label}</LabelText>}
+    </StyledCheckbox>
+  );
+};
+
+const CustomCheckbox = styled.div(
+  ({ theme }) => `
+    width: ${pxToRem(15)};
+    height: ${pxToRem(15)};
+    border-radius: ${pxToRem(2)};
+    border: 1px solid ${theme.colors.stroke.main};
+    background-color: ${theme.colors.background};
+    transition: all 0.2s ease;
+  `
+);
+
+const LabelText = styled.span(
+  ({ theme }) => `
+  margin-left: ${pxToRem(5)};
+  font-size: ${theme.typography.variants.h3.fontSize};
+  color: ${theme.colors.text.main};
+`
+);
+
+const HiddenInput = styled.input`
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+`;
+
+const StyledCheckbox = createComponent(
+  styled.label<{ $disabled?: boolean }>(({ theme, $disabled }) => {
+    return `
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: ${$disabled ? 'not-allowed' : 'pointer'};
+
+    &:hover {
+        ${HiddenInput}:not(:disabled) + ${CustomCheckbox} {
+          border-color: ${theme.colors.primary.main};
+        }
+    }
+
+    ${HiddenInput}:checked + ${CustomCheckbox} {
+        background-color: ${theme.colors.primary.main};
+        border-color: ${theme.colors.primary.main};
+    }
+    ${HiddenInput}:disabled + ${CustomCheckbox} {
+        background-color: ${theme.colors.disable};
+    }
+    `;
+  })
+);

package/src/Core/Checkbox/index.ts

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

package/src/Core/Label/Label.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FabricComponent, LabelSize, createComponent, generatePropertySpaceStyle, propToRem } from '../../Theme';
+
+type LabelProps = FabricComponent<{
+  label?: any;
+  helpText?: any;
+  errorText?: string;
+  size?: LabelSize;
+  children: any;
+}> &
+  Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'children'> &
+  (LabelDirection | LabelDirectionRaw);
+
+type LabelDirectionRaw = {
+  direction?: 'row' | 'row-reverse';
+  childrenWidth?: number | string;
+};
+
+type LabelDirection = {
+  direction?: Omit<React.CSSProperties['flexDirection'], 'row' | 'row-reverse'>;
+};
+
+export const Label = ({
+  label,
+  helpText,
+  children,
+  direction = 'column',
+  size = 'small',
+  errorText,
+  ...props
+}: LabelProps) => {
+  const $width =
+    direction === 'row' || direction === 'row-reverse' ? (props as LabelDirectionRaw).childrenWidth || '50%' : '100%';
+
+  return (
+    <StyledLabel $size={size} $direction={direction} {...props}>
+      <LabelWrapper $width={$width} $size={size}>
+        {!!label && <LabelText $size={size}>{label}</LabelText>}
+        {!!helpText && <HelpText $size={size}>{helpText}</HelpText>}
+      </LabelWrapper>
+      <Wrapper $size={size} $width={$width}>
+        {children}
+        {!!errorText && <ErrorText $size={size}>{errorText}</ErrorText>}
+      </Wrapper>
+    </StyledLabel>
+  );
+};
+
+type StyledProps = {
+  $size: LabelSize;
+  $direction?: LabelDirection['direction'] | LabelDirectionRaw['direction'];
+};
+
+const Wrapper = styled.div<StyledProps & { $width: number | string }>(
+  ({ theme, $width }) => `
+  flex-basis: 100%;
+  @media (min-width: ${theme.breakpoints.m}px) {
+    flex-basis: ${propToRem($width, theme.baseSize)};
+  }
+  `
+);
+
+const LabelWrapper = styled(Wrapper)<StyledProps>`
+  align-self: flex-start;
+`;
+
+const LabelText = styled.div<StyledProps>(
+  ({ theme, $size }) => `
+  line-height: 1.2;
+  font-weight: 500;
+  font-size: ${theme.label.sizes[$size].fontSize};
+  color: ${theme.label.color};
+  cursor: pointer;
+  :hover {
+    color: ${theme.colors.primary.main};
+  }
+
+`
+);
+
+const HelpText = styled.div<StyledProps>(
+  ({ theme, $size }) => `
+  margin-top: ${theme.label.sizes[$size].helpText.marginTop};
+  word-break: break-word;
+  line-height: 1.2;
+  font-size:  ${theme.label.sizes[$size].helpText.fontSize};
+  color: ${theme.label.helpTextColor};
+`
+);
+const ErrorText = styled.div<StyledProps>(
+  ({ theme, $size }) => `
+  margin-top: ${theme.label.sizes[$size].helpText.marginTop};
+  word-break: break-word;
+  line-height: 1.2;
+  font-size:  ${theme.label.sizes[$size].helpText.fontSize};
+  color: ${theme.colors.error};
+`
+);
+
+const StyledLabel = createComponent(
+  styled.label<FabricComponent<StyledProps>>(
+    ({ theme, $direction = 'column', $size, mb = theme.label.sizes[$size].marginBottom }) => {
+      return `
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        min-width: 0;
+        flex-direction: column;
+
+        @media (min-width: ${theme.breakpoints.m}px) {
+          flex-direction: ${$direction};
+        }
+
+        gap: ${theme.label.sizes[$size].gap};
+        ${generatePropertySpaceStyle(theme, 'margin-bottom', mb)};
+      `;
+    }
+  ),
+  { ignoreStyles: ['margin-bottom'] }
+);

package/src/Core/Label/index.ts

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

package/src/Core/index.ts

@@ -16,3 +16,5 @@ export * from './Line';
 export * from './EmptyData';
 export * from './Tag';
 export * from './Alert';
+export * from './Label';
+export * from './Checkbox';

package/src/Theme/componentFabric.ts

@@ -1,7 +1,7 @@
 import styled, { css, IStyledComponent, DefaultTheme, WebTarget } from 'styled-components';
 import { pxToRem } from './utils';
 
-type MarginProps = {
+type SpaceProps = {
   m?: string | number; // margin
   mt?: string | number; // margin-top
   mr?: string | number; // margin-right
@@ -18,7 +18,7 @@ type MarginProps = {
   py?: string | number; // padding-top + padding-bottom
 };
 
-export type FabricComponent<T = object> = T & MarginProps;
+export type FabricComponent<T = object> = T & SpaceProps;
 
 const marginStyles = ({ ignoreStyles }: FabricComponentOptions = {}) =>
   css<FabricComponent>(({ theme, ...props }) => {
@@ -91,3 +91,15 @@ export const createComponent = <T extends object = {}>(
     ${paddingStyles(options)}
   `;
 };
+
+export const destructSpaceProps = <T extends FabricComponent>(props: T): SpaceProps => {
+  const rest: SpaceProps = {};
+  ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].forEach((key) => {
+    if (key in props) {
+      rest[key as keyof SpaceProps] = props[key as keyof SpaceProps];
+      delete props[key as keyof SpaceProps];
+    }
+  });
+
+  return rest;
+};

package/src/Theme/themes/dark.ts

@@ -758,6 +758,24 @@ export const darkThemePx: Theme = {
       background: '#FFFBE0',
     },
   },
+  label: {
+    sizes: {
+      small: {
+        fontSize: 14,
+        gap: 10,
+        marginBottom: 20,
+        helpText: { fontSize: 12, marginTop: 5 },
+      },
+      medium: {
+        fontSize: 16,
+        gap: 10,
+        marginBottom: 25,
+        helpText: { fontSize: 14, marginTop: 5 },
+      },
+    },
+    color: '#ffffff',
+    helpTextColor: '#535353',
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -757,6 +757,24 @@ export const lightThemePx: Theme = {
       background: '#FFFBE0',
     },
   },
+  label: {
+    sizes: {
+      small: {
+        fontSize: 14,
+        gap: 10,
+        marginBottom: 20,
+        helpText: { fontSize: 12, marginTop: 5 },
+      },
+      medium: {
+        fontSize: 16,
+        gap: 10,
+        marginBottom: 25,
+        helpText: { fontSize: 14, marginTop: 5 },
+      },
+    },
+    color: '#101010',
+    helpTextColor: '#99989C',
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -22,6 +22,14 @@ export type TagColor =
   | 'orange'
   | string;
 
+export type LabelSize = 'small' | 'medium';
+export type LabelSizeStyle = {
+  fontSize: number | string;
+  gap: number | string;
+  marginBottom: number | string;
+  helpText: { fontSize: number | string; marginTop: number | string };
+};
+
 // Типи для spacing та breakpoints
 export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
 
@@ -274,6 +282,11 @@ export type Theme = {
       background: string;
     };
   };
+  label: {
+    sizes: Record<LabelSize, LabelSizeStyle>;
+    color: string;
+    helpTextColor: string;
+  };
 };
 
 //TODO check and refactoring

package/src/Theme/utils.ts

@@ -88,6 +88,27 @@ const IGNORE_CONVERT_KEYS: Record<string, string[] | boolean> = {
   baseSize: true,
 };
 
+/**
+ * Converts a prop value to rem units if needed
+ *
+ * @param value - The pixel value to convert. Can be a number or a string with 'px' suffix
+ * @param baseSize - Base font size in pixels. Default is 16px (browser default)
+ * @returns The value in rem units as a string (e.g., "1.25rem")
+ */
+export const propToRem = (value: number | string, baseSize: number = 16): string => {
+  if (typeof value === 'string' && value.trim().endsWith('%')) return value; // Return percentage values as-is
+  const numericValue = typeof value === 'string' ? parseFloat(value) : value;
+
+  // Handle invalid values
+  if (isNaN(numericValue)) {
+    return `${value}`;
+  }
+
+  // Convert to rem and round to 4 decimal places for precision
+  const remValue = (numericValue / baseSize).toFixed(4).replace(/\.?0+$/, '');
+
+  return `${remValue}rem`;
+};
 /**
  * Recursively converts all pixel values in an object to rem units
  *