@cyber-harbour/ui 1.0.59 → 1.0.61

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;
@@ -138,6 +131,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

@@ -0,0 +1,93 @@
+import { useCallback, useState } from 'react';
+import { Popover, PopoverAlign, PopoverPosition } from 'react-tiny-popover';
+import { createComponent, pxToRem } from '../../Theme';
+import { styled } from 'styled-components';
+
+interface TooltipProps {
+  className?: string;
+  children?: any;
+  content?: any;
+  positions?: PopoverPosition[] | PopoverPosition;
+  align?: PopoverAlign;
+  anchorClassName?: string;
+  offset?: number;
+}
+
+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 handleMouseEnter = useCallback(() => {
+      if (content) setIsOpen(true);
+    }, [content]);
+
+    const handleMouseLeave = 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 StyledAnchor = styled.div`
+  display: inline-block;
+`;
+
+const StyledContent = styled.div<{ $position: PopoverPosition; $offset: number }>(
+  ({ theme, $position, $offset }) => `
+  padding: ${theme.tooltip.padding};
+  max-width: ${theme.tooltip.maxWidth};
+  border-radius: ${theme.tooltip.borderRadius};
+  background: ${theme.tooltip.background};
+  box-shadow: ${theme.tooltip.shadow};
+
+  color: ${theme.tooltip.color};
+  font-size: ${theme.tooltip.fontSize};
+  line-height: 1.4;
+  word-break: break-word;
+  white-space: pre-line;
+  animation: fadeIn-${$position} 0.3s ease forwards;
+  transform-origin: ${
+    $position === 'top' ? 'bottom' : $position === 'bottom' ? 'top' : $position === 'left' ? 'right' : 'left'
+  };
+
+  @keyframes fadeIn-top {
+    from { opacity: 0.5; transform: translateY(${pxToRem($offset, theme.baseSize)}); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fadeIn-bottom {
+    from { opacity: 0.5; transform: translateY(-${pxToRem($offset, theme.baseSize)}); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+  @keyframes fadeIn-left {
+    from { opacity: 0.5; transform: translateX(${pxToRem($offset, theme.baseSize)}); }
+    to   { opacity: 1; transform: translateX(0); }
+  }
+  @keyframes fadeIn-right {
+    from { opacity: 0.5; transform: translateX(-${pxToRem($offset, theme.baseSize)}); }
+    to   { opacity: 1; transform: translateX(0); }
+  }
+`
+);

package/src/Core/Tooltip/index.ts

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

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

@@ -21,3 +21,5 @@ export * from './Checkbox';
 export * from './LinerProgress';
 export * from './Switch';
 export * from './Drawer';
+export * from './Tooltip';
+export * from './ContentLoader';

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 };
+};

package/src/Theme/ThemeProvider.tsx

@@ -1,6 +1,7 @@
 import { StyleSheetManager, ThemeProvider as ThemeProviderStyled, WebTarget } from 'styled-components';
 import { lightTheme, darkTheme } from './themes';
 import { GlobalStyle } from './GlobalStyle';
+import { BreakpointProvider } from './Breakpoint';
 
 interface ThemeProviderProps {
   children: any;
@@ -12,8 +13,10 @@ export const ThemeProvider = ({ children, mode }: ThemeProviderProps) => {
   return (
     <StyleSheetManager shouldForwardProp={shouldForwardProp}>
       <ThemeProviderStyled theme={mode == 'light' || mode === 'LIGHT' ? lightTheme : darkTheme}>
-        <GlobalStyle />
-        {children}
+        <BreakpointProvider>
+          <GlobalStyle />
+          {children}
+        </BreakpointProvider>
       </ThemeProviderStyled>
     </StyleSheetManager>
   );