@cyber-harbour/ui 1.0.62 → 1.0.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.62",
+  "version": "1.0.63",
   "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>
     );
   }