@cyber-harbour/ui 1.0.60 → 1.0.62

package/src/Core/Label/Label.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 import styled from 'styled-components';
-import { FabricComponent, LabelSize, createComponent, generatePropertySpaceStyle, propToRem } from '../../Theme';
+import {
+  FabricComponent,
+  LabelSize,
+  createComponent,
+  createStyledComponent,
+  generatePropertySpaceStyle,
+  propToRem,
+} from '../../Theme';
 
 type LabelProps = FabricComponent<{
   label?: any;
@@ -22,40 +29,34 @@ type LabelDirection = {
   direction?: Omit<React.CSSProperties['flexDirection'], 'row' | 'row-reverse'>;
 };
 
-export const Label = ({
-  label,
-  helpText,
-  children,
-  direction = 'column',
-  size = 'small',
-  errorText,
-  fullWidth,
-  ...props
-}: LabelProps) => {
-  const $isRow = direction === 'row' || direction === 'row-reverse';
-  const $width = $isRow ? (props as LabelDirectionRaw).childrenWidth || '50%' : '100%';
+export const Label = createComponent<LabelProps>(
+  ({ label, helpText, children, direction = 'column', size = 'small', errorText, fullWidth, ...props }) => {
+    const $isRow = direction === 'row' || direction === 'row-reverse';
+    const $width = $isRow ? (props as LabelDirectionRaw).childrenWidth || '50%' : '100%';
 
-  return (
-    <StyledLabel $size={size} $direction={direction} $fullWidth={fullWidth} $isRow={$isRow} {...props}>
-      {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>}
-      </Wrapper>
-    </StyledLabel>
-  );
-};
+    return (
+      <StyledLabel $size={size} $direction={direction} $fullWidth={fullWidth} $isRow={$isRow} {...props}>
+        {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>}
+        </Wrapper>
+      </StyledLabel>
+    );
+  }
+);
 
 type StyledProps = {
   $size: LabelSize;
   $direction?: LabelDirection['direction'] | LabelDirectionRaw['direction'];
   $fullWidth?: boolean;
   $isRow: boolean;
+  children?: any;
 };
 
 type WrapperProps = { $width: number | string };
@@ -107,8 +108,8 @@ const ErrorText = styled.div<TextProps>(
 `
 );
 
-const StyledLabel = createComponent(
-  styled.label<FabricComponent<StyledProps>>(
+const StyledLabel = createStyledComponent<FabricComponent<StyledProps>>(
+  styled.label(
     ({
       theme,
       $direction = 'column',

package/src/Core/Line/Line.tsx

@@ -1,4 +1,4 @@
-import { createComponent, FabricComponent } from '../../Theme';
+import { createComponent, createStyledComponent, FabricComponent, StyledFabricComponent } from '../../Theme';
 import { styled } from 'styled-components';
 
 type LineProps = FabricComponent<
@@ -7,16 +7,16 @@ type LineProps = FabricComponent<
   } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'children'>
 >;
 
-export const Line = ({ direction = 'horizontal', ...props }: LineProps) => {
+export const Line = createComponent<LineProps>(({ direction = 'horizontal', ...props }) => {
   return <StyledLine {...props} $direction={direction} />;
-};
+});
 
 interface StyledLineProps {
   $direction: 'horizontal' | 'vertical';
 }
 
-const StyledLine = createComponent(
-  styled.div<StyledLineProps>(
+const StyledLine = createStyledComponent<StyledFabricComponent<StyledLineProps>>(
+  styled.div(
     ({ theme, $direction }) => `
     width: ${$direction === 'horizontal' ? '100%' : theme.line.size};
     height: ${$direction === 'vertical' ? '100%' : theme.line.size};

package/src/Core/LinerProgress/LinerProgress.tsx

@@ -1,26 +1,20 @@
-import { createComponent, FabricComponent, propToRem, pxToRem } from '../../Theme';
+import { createComponent, createStyledComponent, propToRem, pxToRem, StyledFabricComponent } 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'>
->;
+type LinerProgressProps = {
+  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} />;
-};
+export const LinerProgress = createComponent<LinerProgressProps>(
+  ({ height = 21, width = '100%', direction = 'horizontal', value, ...props }: LinerProgressProps) => {
+    return <StyledLine {...props} $height={height} $value={value} $width={width} $direction={direction} />;
+  }
+);
 
 interface StyledLineProps {
   $height: number;
@@ -29,8 +23,8 @@ interface StyledLineProps {
   $direction: Direction;
 }
 
-const StyledLine = createComponent(
-  styled.div<StyledLineProps>(
+const StyledLine = createStyledComponent<StyledFabricComponent<StyledLineProps>>(
+  styled.div(
     ({ theme, $height, $value, $width, $direction }) => `
      width: ${propToRem($width, theme.baseSize)};
      height: ${propToRem($height, theme.baseSize)};

package/src/Core/Switch/Switch.tsx

@@ -1,10 +1,10 @@
 import { InputHTMLAttributes } from 'react';
-import { createComponent, destructSpaceProps, FabricComponent, pxToRem } from '../../Theme';
+import { createComponent, createStyledComponent, destructSpaceProps, FabricComponent, pxToRem } from '../../Theme';
 import { styled } from 'styled-components';
 
 type SwitchProps = FabricComponent<Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>>;
 
-export const Switch = ({ className, ...props }: SwitchProps) => {
+export const Switch = createComponent<SwitchProps>(({ className, ...props }) => {
   const spaceProps = destructSpaceProps(props);
   return (
     <StyledLabel className={className} {...spaceProps}>
@@ -12,7 +12,7 @@ export const Switch = ({ className, ...props }: SwitchProps) => {
       <StyledSwitch />
     </StyledLabel>
   );
-};
+});
 
 const StyledSwitch = styled.span(
   ({ theme }) => `
@@ -63,7 +63,7 @@ const HiddenInput = styled.input(
 `
 );
 
-const StyledLabel = createComponent(
+const StyledLabel = createStyledComponent(
   styled.label`
     position: relative;
     display: inline-block;

package/src/Core/Tag/Tag.tsx

@@ -7,6 +7,7 @@ import {
   TagColor,
   hexToRgba,
   generatePropertySpaceStyle,
+  createStyledComponent,
 } from '../../Theme';
 import { CrossIcon } from '../IconComponents';
 
@@ -22,41 +23,33 @@ type TagProps = FabricComponent<{
 }> &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 
-export const Tag = ({
-  children,
-  variant = 'fill',
-  color = 'default',
-  className,
-  disabled,
-  icon,
-  onClick,
-  onDelete,
-  ...props
-}: TagProps) => {
-  return (
-    <StyledContainer
-      $variant={variant}
-      $color={color}
-      $clickable={!!onClick && !disabled}
-      onClick={!disabled ? onClick : undefined}
-      className={className}
-      {...props}
-    >
-      {!!children && <Content>{children}</Content>}
-      {!!onDelete && !disabled && (
-        <DeleteButton
-          aria-label="delete"
-          onClick={(e) => {
-            e.stopPropagation();
-            onDelete();
-          }}
-        >
-          <CrossIcon />
-        </DeleteButton>
-      )}
-    </StyledContainer>
-  );
-};
+export const Tag = createComponent<TagProps>(
+  ({ children, variant = 'fill', color = 'default', className, disabled, icon, onClick, onDelete, ...props }) => {
+    return (
+      <StyledContainer
+        $variant={variant}
+        $color={color}
+        $clickable={!!onClick && !disabled}
+        onClick={!disabled ? onClick : undefined}
+        className={className}
+        {...props}
+      >
+        {!!children && <Content>{children}</Content>}
+        {!!onDelete && !disabled && (
+          <DeleteButton
+            aria-label="delete"
+            onClick={(e) => {
+              e.stopPropagation();
+              onDelete();
+            }}
+          >
+            <CrossIcon />
+          </DeleteButton>
+        )}
+      </StyledContainer>
+    );
+  }
+);
 
 type StyledProps = {
   $variant: TagVariant;
@@ -64,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;
@@ -138,6 +139,6 @@ const Container = styled.div<FabricComponent<StyledProps>>(
   }
 );
 
-const StyledContainer = createComponent(Container, {
+const StyledContainer = createStyledComponent(Container, {
   ignoreStyles: ['padding-block', 'padding-inline'],
 });

package/src/Core/Tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 import { Popover, PopoverAlign, PopoverPosition } from 'react-tiny-popover';
-import { pxToRem } from '../../Theme';
+import { createComponent, pxToRem } from '../../Theme';
 import { styled } from 'styled-components';
 
 interface TooltipProps {
@@ -13,50 +13,54 @@ interface TooltipProps {
   offset?: number;
 }
 
-export const Tooltip = ({
-  className,
-  positions = ['top'],
-  align = 'center',
-  anchorClassName,
-  content,
-  offset = 6,
-  children,
-}: TooltipProps) => {
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+export const Tooltip = createComponent<TooltipProps>(
+  ({ className, positions = ['top'], align = 'center', anchorClassName, content, offset = 6, children }) => {
+    const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  const position = Array.isArray(positions) ? positions[0] : positions;
+    const position = Array.isArray(positions) ? positions[0] : positions;
 
-  const handleMouseEnter = useCallback(() => {
-    if (content) setIsOpen(true);
-  }, [content]);
+    const handleMouseEnter = useCallback(() => {
+      if (content) setIsOpen(true);
+    }, [content]);
 
-  const handleMouseLeave = useCallback(() => {
-    setIsOpen(false);
-  }, []);
+    const handleClose = useCallback(() => {
+      setIsOpen(false);
+    }, []);
 
-  return (
-    <Popover
-      padding={offset}
-      positions={positions}
-      isOpen={isOpen}
-      align={align}
-      content={
-        !!content && (
-          <StyledContent className={className} $position={position} $offset={offset}>
-            {content}
-          </StyledContent>
-        )
-      }
-      containerStyle={{
-        zIndex: `${9999}`,
-      }}
-    >
-      <StyledAnchor onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className={anchorClassName}>
-        {children}
-      </StyledAnchor>
-    </Popover>
-  );
-};
+    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}>
+              {content}
+            </StyledContent>
+          )
+        }
+        containerStyle={{
+          zIndex: `${9999}`,
+        }}
+      >
+        <StyledAnchor
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleClose}
+          className={anchorClassName}
+          onTouchStart={handleClickOrTouch}
+        >
+          {children}
+        </StyledAnchor>
+      </Popover>
+    );
+  }
+);
 const StyledAnchor = styled.div`
   display: inline-block;
 `;

package/src/Core/Typography/Typography.tsx

@@ -1,6 +1,13 @@
 import styled from 'styled-components';
 import { CSSProperties, ElementType } from 'react';
-import { ColorVariant, createComponent, FabricComponent, TypographyVariant } from '../../Theme';
+import {
+  ColorVariant,
+  createComponent,
+  createStyledComponent,
+  FabricComponent,
+  StyledFabricComponent,
+  TypographyVariant,
+} from '../../Theme';
 import { resolveThemeColor } from '../../Theme/utils';
 
 type TypographyProps = FabricComponent<{
@@ -25,8 +32,8 @@ type StyledProps = {
 };
 
 // Create a styled component that can be dynamically rendered as different HTML elements
-const StyledTypography = createComponent(
-  styled('div')<StyledProps>(({ theme, $variant, $color, $weight = '400', $style = 'initial', $ellipsis }) => {
+const StyledTypography = createStyledComponent<StyledFabricComponent<StyledProps>>(
+  styled('div')(({ theme, $variant, $color, $weight = '400', $style = 'initial', $ellipsis }) => {
     // Resolve color from theme if it's a theme color path, or use the direct color value
 
     return `
@@ -39,34 +46,25 @@ const StyledTypography = createComponent(
   })
 );
 
-export const Typography = ({
-  variant = 'body',
-  element,
-  children,
-  weight,
-  fontStyle,
-  color,
-  className,
-  style,
-  ellipsis = false,
-  ...props
-}: TypographyProps) => {
-  // Determine which HTML element to render based on the variant if not explicitly specified
-  const Element = element || (variant.startsWith('h') ? variant : 'p');
+export const Typography = createComponent<TypographyProps>(
+  ({ variant = 'body', element, children, weight, fontStyle, color, className, style, ellipsis = false, ...props }) => {
+    // Determine which HTML element to render based on the variant if not explicitly specified
+    const Element = element || (variant.startsWith('h') ? variant : 'p');
 
-  return (
-    <StyledTypography
-      as={Element}
-      $variant={variant}
-      $weight={weight}
-      $style={fontStyle}
-      $color={color}
-      $ellipsis={ellipsis}
-      className={className}
-      style={style}
-      {...props}
-    >
-      {children}
-    </StyledTypography>
-  );
-};
+    return (
+      <StyledTypography
+        as={Element}
+        $variant={variant}
+        $weight={weight}
+        $style={fontStyle}
+        $color={color}
+        $ellipsis={ellipsis}
+        className={className}
+        style={style}
+        {...props}
+      >
+        {children}
+      </StyledTypography>
+    );
+  }
+);

package/src/Core/index.ts

@@ -22,3 +22,4 @@ export * from './LinerProgress';
 export * from './Switch';
 export * from './Drawer';
 export * from './Tooltip';
+export * from './ContentLoader';

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)};` : ''}
+      
     `
     : ''
 }

package/src/Layouts/Container/Container.tsx

@@ -1,21 +1,27 @@
-import { createComponent, FabricComponent, generatePropertySpaceStyle, pxToRem } from '../../Theme';
+import {
+  createComponent,
+  createStyledComponent,
+  FabricComponent,
+  generatePropertySpaceStyle,
+  pxToRem,
+} from '../../Theme';
 import { styled } from 'styled-components';
 
-type ContainerProps = FabricComponent<{
+type ContainerProps = {
   children: any;
   maxWidth?: string | number;
-}>;
+};
 
 type StyledContainerProps = {
   $maxWidth?: string | number;
 };
 
-export const Container = ({ maxWidth, ...props }: ContainerProps) => {
+export const Container = createComponent<ContainerProps>(({ maxWidth, ...props }) => {
   return <StyledContainer {...props} $maxWidth={maxWidth} />;
-};
+});
 
-const StyledContainer = createComponent(
-  styled.div<FabricComponent<StyledContainerProps>>(({ theme, $maxWidth, px = 20 }) => {
+const StyledContainer = createStyledComponent<FabricComponent<StyledContainerProps>>(
+  styled.div(({ theme, $maxWidth, px = 20 }) => {
     return `
    ${generatePropertySpaceStyle(theme, 'padding-inline', px)}
     width: 100%;

package/src/Theme/Breakpoint.tsx

@@ -0,0 +1,50 @@
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { Theme } from './types';
+import { useTheme } from 'styled-components';
+import { breakpoints } from './themes/config';
+
+type Breakpoint = keyof Theme['breakpoints'];
+
+const getBreakpoint = (breakpoints: Theme['breakpoints']): Breakpoint => {
+  if (window !== undefined) {
+    const width = window.innerWidth;
+    for (const [key, value] of Object.entries(breakpoints)) {
+      if (width < value) {
+        return key as Breakpoint;
+      }
+    }
+  }
+  const keys = Object.keys(breakpoints) as Breakpoint[];
+
+  return keys[keys.length - 1];
+};
+
+const BreakpointContext = createContext<Breakpoint>(getBreakpoint(breakpoints));
+
+export const BreakpointProvider = ({ children }: { children: any }) => {
+  const theme = useTheme();
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>(getBreakpoint(theme.breakpoints));
+
+  useEffect(() => {
+    const handleResize = () => {
+      const newBreakpoint = getBreakpoint(theme.breakpoints);
+      if (newBreakpoint !== breakpoint) {
+        setBreakpoint(newBreakpoint);
+      }
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [breakpoint]);
+
+  return <BreakpointContext.Provider value={breakpoint}>{children}</BreakpointContext.Provider>;
+};
+
+export const useBreakpoint = () => {
+  const currentBreakpoint = useContext(BreakpointContext);
+  const theme = useTheme();
+  const breakpointsOrder = useMemo(() => Object.keys(theme.breakpoints) as Breakpoint[], [theme.breakpoints]);
+  return { currentBreakpoint, breakpointsOrder: breakpointsOrder };
+};