@cyber-harbour/ui 1.0.61 → 1.0.63

package/package.json

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

package/src/Core/IconComponents/FlashIcon.tsx

@@ -0,0 +1,16 @@
+import { SVGProps } from 'react';
+
+interface FlashIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const FlashIcon = ({ fill = 'currentColor', ...props }: FlashIconProps) => {
+  return (
+    <svg viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M 7.6660156,0.65234375 C 7.4133949,0.5557327 7.1358962,0.60336238 6.9023437,0.72070312 6.6687913,0.83804387 6.4563704,1.0238164 6.2421875,1.2714844 a 0.40004001,0.40004001 0 0 0 -0.00195,0 L 1.0390625,7.2910156 a 0.40004001,0.40004001 0 0 0 -0.00195,0.00195 C 0.66831145,7.7258208 0.48003352,8.2197174 0.67773437,8.6640625 0.87543523,9.1084076 1.3750452,9.296875 1.9394531,9.296875 h 1.7246094 v 4.638672 c 0,0.329424 0.040225,0.610814 0.1386719,0.853516 0.098447,0.242701 0.2727646,0.461984 0.5253906,0.558593 0.252626,0.09661 0.5301197,0.04899 0.7636719,-0.06836 0.2335521,-0.117352 0.4479278,-0.303095 0.6621093,-0.550781 L 10.955078,8.7109375 v -0.00195 C 11.327713,8.2797425 11.519652,7.7831519 11.322266,7.3378906 11.124617,6.8920374 10.622895,6.703125 10.054688,6.703125 H 8.3320313 V 2.0644531 c 0,-0.3294234 -0.040224,-0.6108149 -0.1386719,-0.8535156 C 8.0949118,0.96823685 7.9186363,0.7489548 7.6660156,0.65234375 Z M 7.3808594,1.4003906 c -9.672e-4,-3.699e-4 0.027688,0.00625 0.070312,0.1113281 0.042624,0.1050814 0.080078,0.2942094 0.080078,0.5527344 v 5.0390625 a 0.40004001,0.40004001 0 0 0 0.4003906,0.4003906 h 2.1230474 c 0.400591,0 0.518333,0.1158494 0.537109,0.1582032 0.01878,0.042354 0.02525,0.218143 -0.240234,0.5234375 a 0.40004001,0.40004001 0 0 0 -0.002,0 L 5.1484375,14.205078 c -0.167163,0.193313 -0.3178234,0.310037 -0.4160156,0.359375 -0.098192,0.04934 -0.1201131,0.03478 -0.1191407,0.03516 9.725e-4,3.72e-4 -0.027688,-0.0062 -0.070312,-0.111328 -0.042625,-0.105082 -0.080078,-0.294209 -0.080078,-0.552734 V 8.8964844 A 0.40004001,0.40004001 0 0 0 4.0625,8.4960938 H 1.9394531 c -0.3975381,0 -0.5125133,-0.1141382 -0.53125,-0.15625 C 1.3894664,8.2977319 1.3831449,8.1196241 1.6464844,7.8105469 L 6.8457031,1.7949219 C 7.0128648,1.6016263 7.1635269,1.4848801 7.2617187,1.4355469 7.3599106,1.3862136 7.3818266,1.4007605 7.3808594,1.4003906 Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/UserInCircle.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from 'react';
+
+interface UserInCircleIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const UserInCircleIcon = ({ fill = 'currentColor', ...props }: UserInCircleIconProps) => {
+  return (
+    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8.08031 9.02292C8.06698 9.02292 8.04698 9.02292 8.03365 9.02292C8.01365 9.02292 7.98698 9.02292 7.96698 9.02292C6.45365 8.97625 5.32031 7.79625 5.32031 6.34292C5.32031 4.86292 6.52698 3.65625 8.00698 3.65625C9.48698 3.65625 10.6936 4.86292 10.6936 6.34292C10.687 7.80292 9.54698 8.97625 8.10031 9.02292C8.08698 9.02292 8.08698 9.02292 8.08031 9.02292ZM8.00031 4.64958C7.06698 4.64958 6.31365 5.40958 6.31365 6.33625C6.31365 7.24958 7.02698 7.98958 7.93365 8.02292C7.95365 8.01625 8.02031 8.01625 8.08698 8.02292C8.98031 7.97625 9.68031 7.24292 9.68698 6.33625C9.68698 5.40958 8.93365 4.64958 8.00031 4.64958Z"
+        fill={fill}
+      />
+      <path
+        d="M7.99924 15.1669C6.20591 15.1669 4.49257 14.5002 3.16591 13.2869C3.04591 13.1802 2.99257 13.0202 3.00591 12.8669C3.09257 12.0735 3.58591 11.3335 4.40591 10.7869C6.39257 9.46687 9.61257 9.46687 11.5926 10.7869C12.4126 11.3402 12.9059 12.0735 12.9926 12.8669C13.0126 13.0269 12.9526 13.1802 12.8326 13.2869C11.5059 14.5002 9.79257 15.1669 7.99924 15.1669ZM4.05257 12.7335C5.15924 13.6602 6.55257 14.1669 7.99924 14.1669C9.44591 14.1669 10.8392 13.6602 11.9459 12.7335C11.8259 12.3269 11.5059 11.9335 11.0326 11.6135C9.39257 10.5202 6.61257 10.5202 4.95924 11.6135C4.48591 11.9335 4.17257 12.3269 4.05257 12.7335Z"
+        fill={fill}
+      />
+      <path
+        d="M8.00065 15.1654C4.04732 15.1654 0.833984 11.952 0.833984 7.9987C0.833984 4.04536 4.04732 0.832031 8.00065 0.832031C11.954 0.832031 15.1673 4.04536 15.1673 7.9987C15.1673 11.952 11.954 15.1654 8.00065 15.1654ZM8.00065 1.83203C4.60065 1.83203 1.83398 4.5987 1.83398 7.9987C1.83398 11.3987 4.60065 14.1654 8.00065 14.1654C11.4007 14.1654 14.1673 11.3987 14.1673 7.9987C14.1673 4.5987 11.4007 1.83203 8.00065 1.83203Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -59,3 +59,5 @@ export { RelationPointsIcon } from './RelationPointsIcon';
 export { PassportIcon } from './PassportIcon';
 export { PointIcon } from './PointIcon';
 export { PencilIcon } from './PencilIcon';
+export { UserInCircleIcon } from './UserInCircle';
+export { FlashIcon } from './FlashIcon';

package/src/Core/Tag/Tag.tsx

@@ -57,17 +57,25 @@ type StyledProps = {
   $clickable: boolean;
 };
 
-const Content = styled.span`
+const Content = styled.span(
+  ({ theme }) => `
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   min-width: 0;
+  word-break: break-word;
 
   font-size: 14px;
   line-height: 16px;
-`;
+  @media (min-width: ${theme.breakpoints.m}) {
+    justify-content: center;
+  }
+`
+);
 
 const DeleteButton = styled.button`
+  align-self: flex-start;
   border: none;
   outline: none;
   background-color: transparent;

package/src/Core/Tooltip/Tooltip.tsx

@@ -23,16 +23,21 @@ export const Tooltip = createComponent<TooltipProps>(
       if (content) setIsOpen(true);
     }, [content]);
 
-    const handleMouseLeave = useCallback(() => {
+    const handleClose = useCallback(() => {
       setIsOpen(false);
     }, []);
 
+    const handleClickOrTouch = useCallback(() => {
+      if (content) setIsOpen((prev) => !prev);
+    }, [content]);
+
     return (
       <Popover
         padding={offset}
         positions={positions}
         isOpen={isOpen}
         align={align}
+        onClickOutside={handleClose}
         content={
           !!content && (
             <StyledContent className={className} $position={position} $offset={offset}>
@@ -44,7 +49,12 @@ export const Tooltip = createComponent<TooltipProps>(
           zIndex: `${9999}`,
         }}
       >
-        <StyledAnchor onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className={anchorClassName}>
+        <StyledAnchor
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleClose}
+          className={anchorClassName}
+          onTouchStart={handleClickOrTouch}
+        >
           {children}
         </StyledAnchor>
       </Popover>

package/src/FullscreenCard/FullscreenCard.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { pxToRem } from '../Theme';
+import { createComponent, pxToRem } from '../Theme';
 
 interface FullscreenCardProps {
   children: any;
@@ -12,27 +12,21 @@ interface FullscreenCardProps {
   bottom?: number;
 }
 
-export const FullscreenCard = ({
-  isActive,
-  position,
-  top = 0,
-  left = 0,
-  right,
-  bottom,
-  ...props
-}: FullscreenCardProps) => {
-  return (
-    <StyledContainer
-      $isActive={isActive}
-      $position={position}
-      $top={top}
-      $left={left}
-      $right={right}
-      $bottom={bottom}
-      {...props}
-    />
-  );
-};
+export const FullscreenCard = createComponent<FullscreenCardProps>(
+  ({ isActive, position, top = 0, left = 0, right, bottom, ...props }) => {
+    return (
+      <StyledContainer
+        $isActive={isActive}
+        $position={position}
+        $top={top}
+        $left={left}
+        $right={right}
+        $bottom={bottom}
+        {...props}
+      />
+    );
+  }
+);
 
 const StyledContainer = styled.div<{
   $isActive: boolean;
@@ -48,10 +42,11 @@ ${
     ? `
       position: ${$position};
       z-index: 1000;
-      ${$top ? `top: ${pxToRem($top, theme.baseSize)};` : ''}
-      ${$left ? `left: ${pxToRem($left, theme.baseSize)};` : ''}
-      ${$right ? `right: ${pxToRem($right, theme.baseSize)};` : ''}
-      ${$bottom ? `bottom: ${pxToRem($bottom, theme.baseSize)};` : ''}
+        ${typeof $top === 'number' ? `top: ${pxToRem($top, theme.baseSize)};` : ''}
+        ${typeof $left === 'number' ? `left: ${pxToRem($left, theme.baseSize)};` : ''}
+        ${typeof $right === 'number' ? `right: ${pxToRem($right, theme.baseSize)};` : ''}
+        ${typeof $bottom === 'number' ? `bottom: ${pxToRem($bottom, theme.baseSize)};` : ''}
+      
     `
     : ''
 }