@cyber-harbour/ui 1.0.62 → 1.0.64

package/package.json

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

package/src/Core/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
 import {
   ButtonVariant,
   ButtonSize,
@@ -11,6 +11,7 @@ import {
   generatePropertySpaceStyle,
   createStyledComponent,
   StyledFabricComponent,
+  pxToRem,
 } from '../../Theme';
 
 type BaseButtonProps = {
@@ -24,6 +25,8 @@ type BaseButtonProps = {
   icon?: any;
   iconPosition?: 'left' | 'right';
   iconVariant?: 'filled' | 'empty';
+  minWidth?: number;
+  whiteSpace?: CSSProperties['whiteSpace'];
 };
 export type ButtonProps = (
   | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'media'>
@@ -47,12 +50,14 @@ const getIconStyles = (styles: ButtonElementStyle) =>
     : '';
 
 // Створюємо стилізований компонент, що використовує уніфіковану палітру
-const ButtonTextContainer = styled.div`
+const ButtonTextContainer = styled.div<{ $whiteSpace: CSSProperties['whiteSpace'] }>(
+  ({ $whiteSpace }) => `
   text-overflow: ellipsis;
   overflow: hidden;
-  white-space: nowrap;
+  white-space: ${$whiteSpace};
   user-select: text;
-`;
+`
+);
 
 const StyledIconWrapper = styled.span`
   display: inline-flex;
@@ -68,6 +73,7 @@ type StyledButtonProps = {
   $fullWidth: boolean;
   $iconPosition: 'left' | 'right';
   $iconVariant: 'filled' | 'empty';
+  $minWidth?: number;
 };
 
 const StyledButton = createStyledComponent(
@@ -80,6 +86,7 @@ const StyledButton = createStyledComponent(
       $fullWidth,
       $iconPosition,
       $iconVariant,
+      $minWidth,
       theme,
       px = $variant !== 'empty' ? theme.button.sizes[$size].paddingInline : 0,
       py = $variant !== 'empty' ? theme.button.sizes[$size].paddingBlock : 0,
@@ -105,6 +112,7 @@ const StyledButton = createStyledComponent(
       transition: all 0.2s ease;
       outline: none;
       user-select: text;
+      ${typeof $minWidth === 'number' ? `min-width: ${pxToRem($minWidth, theme.baseSize)};` : ''}
 
       ${$iconPosition === 'right' ? 'flex-direction: row-reverse;' : ''}
 
@@ -172,6 +180,8 @@ export const Button = createComponent<ButtonProps>(
     icon,
     iconPosition = 'left',
     iconVariant = 'empty',
+    whiteSpace = 'nowrap',
+    minWidth,
     ...props
   }) => {
     return (
@@ -185,12 +195,13 @@ export const Button = createComponent<ButtonProps>(
         $fullWidth={fullWidth}
         $iconPosition={iconPosition}
         $iconVariant={iconVariant}
+        $minWidth={minWidth}
         disabled={disabled}
         className={className}
         {...props}
       >
         {!!icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
-        {!!children && <ButtonTextContainer>{children}</ButtonTextContainer>}
+        {!!children && <ButtonTextContainer $whiteSpace={whiteSpace}>{children}</ButtonTextContainer>}
       </StyledButton>
     );
   }

package/src/Core/Pagination/Pagination.tsx

@@ -94,12 +94,15 @@ type StyledButtonProps = {
   $current?: boolean;
 };
 
-const StyledList = styled.div`
+const StyledList = styled.div(
+  ({ theme }) => `
   list-style: none;
   padding: 0;
   display: flex;
-  gap: 6px;
-`;
+  flex-wrap: wrap;
+  gap: ${theme.pagination.gap};
+`
+);
 const Button = styled.button<StyledButtonProps>(
   ({ theme, $current }) => `
   font-family: ${theme.typography.fontFamily};
@@ -107,18 +110,18 @@ const Button = styled.button<StyledButtonProps>(
   color: ${$current ? theme.colors.background : theme.colors.text.main};
   border: none;
   cursor: pointer;
-  padding-block: 4px;
-  padding-inline: 8px;
-  border-radius: 3px;
-  font-size: 14px;
+  padding-block: ${theme.pagination.paddingBlock};
+  padding-inline: ${theme.pagination.paddingInline};
+  border-radius: ${theme.pagination.borderRadius};
+  font-size: ${theme.pagination.fontSize};
   font-weight: 400;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 26px;
+  height: ${theme.pagination.height};
   svg {
-    width: 8px;
-    height: 8px;
+    width: ${theme.pagination.iconSize};
+    height: ${theme.pagination.iconSize};
 }
   &:hover {
     background-color: ${theme.colors.primary.light};
@@ -126,9 +129,11 @@ const Button = styled.button<StyledButtonProps>(
     transition: background-color 0.3s ease-in-out;
 `
 );
-const FlexGroup = styled.div`
+const FlexGroup = styled.div(
+  ({ theme }) => `
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 6px;
-`;
+  gap: ${theme.pagination.gap};
+`
+);

package/src/Theme/themes/dark.ts

@@ -976,6 +976,15 @@ export const darkThemePx: Theme = {
     color: '#99989C',
     background: '#1E2226',
   },
+  pagination: {
+    fontSize: 14,
+    paddingBlock: 4,
+    paddingInline: 8,
+    borderRadius: 3,
+    gap: 6,
+    height: 26,
+    iconSize: 8,
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -975,6 +975,15 @@ export const lightThemePx: Theme = {
     color: '#535353',
     background: '#EBEBEB',
   },
+  pagination: {
+    fontSize: 14,
+    paddingBlock: 4,
+    paddingInline: 8,
+    borderRadius: 3,
+    gap: 6,
+    height: 26,
+    iconSize: 8,
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -319,6 +319,15 @@ export type Theme = {
     color: string;
     background: string;
   };
+  pagination: {
+    fontSize: string | number;
+    paddingBlock: string | number;
+    paddingInline: string | number;
+    borderRadius: string | number;
+    gap: string | number;
+    height: string | number;
+    iconSize: string | number;
+  };
 };
 
 //TODO check and refactoring