@cyber-harbour/ui 1.0.60 → 1.0.61

package/package.json

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

package/src/Core/Alert/Alert.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
-import { FabricComponent, createComponent, generatePropertySpaceStyle } from '../../Theme';
+import {
+  FabricComponent,
+  StyledFabricComponent,
+  createComponent,
+  createStyledComponent,
+  generatePropertySpaceStyle,
+} from '../../Theme';
 import { AlertIcon } from '../IconComponents';
 
 type AlertProps = FabricComponent<{
@@ -9,7 +15,7 @@ type AlertProps = FabricComponent<{
 }> &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 
-export const Alert = ({ title, note, ...props }: AlertProps) => {
+export const Alert = createComponent<AlertProps>(({ title, note, ...props }) => {
   return (
     <StyledContainer {...props}>
       <IconWrapper>
@@ -21,7 +27,7 @@ export const Alert = ({ title, note, ...props }: AlertProps) => {
       </div>
     </StyledContainer>
   );
-};
+});
 
 const IconWrapper = styled.div(
   ({ theme: { alert } }) => `
@@ -60,8 +66,8 @@ const Note = styled.p(
 `
 );
 
-const StyledContainer = createComponent(
-  styled.div<FabricComponent>(
+const StyledContainer = createStyledComponent(
+  styled.div<StyledFabricComponent>(
     ({ theme, py = theme.alert.paddingBlock, pl = theme.alert.paddingLeft, pr = theme.alert.paddingRight }) => {
       return `
     display: flex;

package/src/Core/Box/Box.tsx

@@ -1,33 +1,35 @@
 import {
   ColorVariant,
   createComponent,
+  createStyledComponent,
   FabricComponent,
   generatePropertySpaceStyle,
   resolveThemeColor,
+  StyledFabricComponent,
 } from '../../Theme';
 import { styled } from 'styled-components';
 
-type BoxProps = FabricComponent<
-  {
-    children: any;
-    element?: 'div' | 'section';
-    hasBorder?: boolean;
-    color?: ColorVariant | string;
-  } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
->;
+type BoxProps = {
+  children?: any;
+  element?: 'div' | 'section';
+  hasBorder?: boolean;
+  color?: ColorVariant | string;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
 
-export const Box = ({ children, element = 'div', hasBorder = true, color, ...props }: BoxProps) => {
-  return (
-    <StyledBox as={element} $hasBorder={hasBorder} $color={color} {...props}>
-      {children}
-    </StyledBox>
-  );
-};
+export const Box = createComponent<BoxProps>(
+  ({ children, element = 'div', hasBorder = true, color, ...props }): any => {
+    return (
+      <StyledBox as={element} $hasBorder={hasBorder} $color={color} {...props}>
+        {children}
+      </StyledBox>
+    );
+  }
+);
 
 type StyledProps = { $hasBorder: boolean; $color?: string };
 
-const StyledBox = createComponent(
-  styled('div')<FabricComponent<StyledProps>>(
+const StyledBox = createStyledComponent(
+  styled('div')<StyledFabricComponent<StyledProps>>(
     ({ theme, $hasBorder, $color, px = theme.box.padding, py = theme.box.padding }) => `
       ${generatePropertySpaceStyle(theme, 'padding-inline', px)}
       ${generatePropertySpaceStyle(theme, 'padding-block', py)}

package/src/Core/Button/Button.tsx

@@ -8,11 +8,12 @@ import {
   getButtonSizeStyles,
   ButtonElementStyle,
   createComponent,
-  FabricComponent,
   generatePropertySpaceStyle,
+  createStyledComponent,
+  StyledFabricComponent,
 } from '../../Theme';
 
-type BaseButtonProps = FabricComponent<{
+type BaseButtonProps = {
   children?: any;
   variant?: ButtonVariant;
   color?: ButtonColor;
@@ -23,11 +24,10 @@ type BaseButtonProps = FabricComponent<{
   icon?: any;
   iconPosition?: 'left' | 'right';
   iconVariant?: 'filled' | 'empty';
-}>;
-
+};
 export type ButtonProps = (
-  | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'>
-  | Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>
+  | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children' | 'media'>
+  | Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'media'>
 ) &
   BaseButtonProps;
 
@@ -70,21 +70,22 @@ type StyledButtonProps = {
   $iconVariant: 'filled' | 'empty';
 };
 
-const Btn = styled.button<FabricComponent<StyledButtonProps>>(
-  ({
-    $variant,
-    $color,
-    $size,
-    $disabled,
-    $fullWidth,
-    $iconPosition,
-    $iconVariant,
-    theme,
-    px = $variant !== 'empty' ? theme.button.sizes[$size].paddingInline : 0,
-    py = $variant !== 'empty' ? theme.button.sizes[$size].paddingBlock : 0,
-  }) => {
-    const sizes = getButtonSizeStyles(theme, $size);
-    return `
+const StyledButton = createStyledComponent(
+  styled.button<StyledFabricComponent<StyledButtonProps>>(
+    ({
+      $variant,
+      $color,
+      $size,
+      $disabled,
+      $fullWidth,
+      $iconPosition,
+      $iconVariant,
+      theme,
+      px = $variant !== 'empty' ? theme.button.sizes[$size].paddingInline : 0,
+      py = $variant !== 'empty' ? theme.button.sizes[$size].paddingBlock : 0,
+    }) => {
+      const sizes = getButtonSizeStyles(theme, $size);
+      return `
       ${getCss(getButtonStyles(theme, $variant, $color, 'default'))}
       font-size: ${sizes.fontSize};
       gap: ${sizes.gap};
@@ -155,39 +156,42 @@ const Btn = styled.button<FabricComponent<StyledButtonProps>>(
             : ``
         }
     `;
+    }
+  )
+);
+
+export const Button = createComponent<ButtonProps>(
+  ({
+    children,
+    variant = 'fill',
+    color = 'primary',
+    size = 'medium',
+    disabled = false,
+    fullWidth = false,
+    className,
+    icon,
+    iconPosition = 'left',
+    iconVariant = 'empty',
+    ...props
+  }) => {
+    return (
+      // @ts-ignore
+      <StyledButton
+        as={'href' in props ? 'a' : 'button'}
+        $variant={variant}
+        $color={color}
+        $size={size}
+        $disabled={disabled}
+        $fullWidth={fullWidth}
+        $iconPosition={iconPosition}
+        $iconVariant={iconVariant}
+        disabled={disabled}
+        className={className}
+        {...props}
+      >
+        {!!icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
+        {!!children && <ButtonTextContainer>{children}</ButtonTextContainer>}
+      </StyledButton>
+    );
   }
 );
-const StyledButton = createComponent(Btn);
-
-export const Button = ({
-  children,
-  variant = 'fill',
-  color = 'primary',
-  size = 'medium',
-  disabled = false,
-  fullWidth = false,
-  className,
-  icon,
-  iconPosition = 'left',
-  iconVariant = 'empty',
-  ...props
-}: ButtonProps) => {
-  return (
-    <StyledButton
-      as={'href' in props ? 'a' : 'button'}
-      $variant={variant}
-      $color={color}
-      $size={size}
-      $disabled={disabled}
-      $fullWidth={fullWidth}
-      $iconPosition={iconPosition}
-      $iconVariant={iconVariant}
-      disabled={disabled}
-      className={className}
-      {...props}
-    >
-      {!!icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
-      {!!children && <ButtonTextContainer>{children}</ButtonTextContainer>}
-    </StyledButton>
-  );
-};

package/src/Core/Checkbox/Checkbox.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
-import { FabricComponent, createComponent, destructSpaceProps, pxToRem } from '../../Theme';
+import { createComponent, createStyledComponent, destructSpaceProps, pxToRem } from '../../Theme';
 
-type CheckboxProps = FabricComponent<{
+type CheckboxProps = {
   label?: any;
-}> &
-  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>;
 
-export const Checkbox = ({ label, className, disabled, ...props }: CheckboxProps) => {
+export const Checkbox = createComponent<CheckboxProps>(({ label, className, disabled, ...props }) => {
   const spaceProps = destructSpaceProps(props);
   return (
     <StyledCheckbox className={className} $disabled={disabled} {...spaceProps}>
@@ -16,7 +15,7 @@ export const Checkbox = ({ label, className, disabled, ...props }: CheckboxProps
       {!!label && <LabelText>{label}</LabelText>}
     </StyledCheckbox>
   );
-};
+});
 
 const CustomCheckbox = styled.div(
   ({ theme }) => `
@@ -48,7 +47,7 @@ const HiddenInput = styled.input`
   position: absolute;
 `;
 
-const StyledCheckbox = createComponent(
+const StyledCheckbox = createStyledComponent(
   styled.label<{ $disabled?: boolean }>(({ theme, $disabled }) => {
     return `
     position: relative;

package/src/Core/ContentLoader/ContentLoader.tsx

@@ -0,0 +1,13 @@
+import ReactContentLoader, { IContentLoaderProps } from 'react-content-loader';
+import { useTheme } from 'styled-components';
+
+export interface ContentLoaderProps extends Omit<IContentLoaderProps, 'backgroundColor' | 'foregroundColor'> {
+  children?: any;
+}
+
+export const ContentLoader = (props: ContentLoaderProps) => {
+  const {
+    contentLoader: { foreground, background },
+  } = useTheme();
+  return <ReactContentLoader {...props} backgroundColor={background} foregroundColor={foreground} />;
+};

package/src/Core/ContentLoader/index.ts

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

package/src/Core/Drawer/Drawer.tsx

@@ -1,6 +1,14 @@
 import { createPortal } from 'react-dom';
 import { styled } from 'styled-components';
-import { createComponent, FabricComponent, generatePropertySpaceStyle, propToRem, pxToRem } from '../../Theme';
+import {
+  createComponent,
+  createStyledComponent,
+  FabricComponent,
+  generatePropertySpaceStyle,
+  propToRem,
+  pxToRem,
+  StyledFabricComponent,
+} from '../../Theme';
 import { useBodyScrollLock } from '../../utils';
 import { useEffect, useRef } from 'react';
 
@@ -12,12 +20,12 @@ type DrawerProps = {
   width?: string | number;
 };
 
-export const Drawer = (props: DrawerProps) => {
+export const Drawer = createComponent<DrawerProps>((props) => {
   useBodyScrollLock(props.isOpen);
 
   if (!props.isOpen) return null;
   return createPortal(<DrawerWithOutclick {...props} />, document.body);
-};
+});
 
 const DrawerWithOutclick = ({ onClose, children, width, header }: DrawerProps) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -45,8 +53,8 @@ type DrawerHeaderProps = FabricComponent<{
   children?: any;
 }>;
 
-export const DrawerHeader: any = createComponent<DrawerHeaderProps>(
-  styled.div<DrawerHeaderProps>(
+export const DrawerHeader: any = createStyledComponent<DrawerHeaderProps>(
+  styled.div(
     ({ theme, p = theme.drawer.padding }) => `
     grid-area: drawer-header;
     ${generatePropertySpaceStyle(theme, 'padding', p)};
@@ -57,26 +65,33 @@ export const DrawerHeader: any = createComponent<DrawerHeaderProps>(
   }
 );
 
-type DrawerBodyProps = FabricComponent<{
+type DrawerBodyProps = StyledFabricComponent<{
   children?: any;
 }>;
 
-export const DrawerBody: any = createComponent(
-  styled.div<DrawerBodyProps>(
-    ({ theme, px = theme.drawer.padding, pb = theme.drawer.padding }) => `
+export const DrawerBody: any = createComponent<DrawerBodyProps>(
+  createStyledComponent<DrawerBodyProps>(
+    styled.div(
+      ({ theme, px = theme.drawer.padding, pb = theme.drawer.padding }) => `
   grid-area: drawer-body;
   max-height: 100%;
   overflow-y: auto;
   ${generatePropertySpaceStyle(theme, 'padding-inline', px)};
   ${generatePropertySpaceStyle(theme, 'padding-bottom', pb)};
 `
-  ),
-  {
-    ignoreStyles: ['padding', 'padding-bottom'],
-  }
+    ),
+    {
+      ignoreStyles: ['padding', 'padding-bottom'],
+    }
+  )
 );
 
-const StyledDrawer = styled.div<{ $header?: number; $width?: string | number }>(
+type StyledDrawerProps = {
+  $header?: number;
+  $width?: string | number;
+};
+
+const StyledDrawer = styled.div<StyledDrawerProps>(
   ({ theme, $header, $width }) => `
   position: fixed;
   display: grid;

package/src/Core/Flex/FlexContainer.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, forwardRef } from 'react';
-import { createComponent, FabricComponent } from '../../Theme';
+import { createComponent, createStyledComponent, FabricComponent, StyledFabricComponent } from '../../Theme';
 import styled from 'styled-components';
 
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
@@ -23,46 +23,50 @@ export interface FlexContainerProps extends FabricComponent<Omit<React.HTMLAttri
   as?: any; // TODO: fix type to styled component or intrinsic element
 }
 
-export const FlexContainer: any = forwardRef<HTMLElement, FlexContainerProps>(function FlexContainer(
-  {
-    children,
-    direction = 'row',
-    wrap = 'nowrap',
-    justify = 'flex-start',
-    align = 'stretch',
-    alignContent,
-    gap,
-    rowGap,
-    columnGap,
-    className,
-    style,
-    as = 'div',
-    ...props
-  },
-  ref
-) {
-  return (
-    <StyledFlexContainer
-      as={as}
-      $direction={direction}
-      $wrap={wrap}
-      $justify={justify}
-      $align={align}
-      $alignContent={alignContent}
-      $gap={gap}
-      $rowGap={rowGap}
-      $columnGap={columnGap}
-      className={className}
-      style={style}
-      ref={ref}
-      {...props}
-    >
-      {children}
-    </StyledFlexContainer>
-  );
-});
+export const FlexContainer = createComponent<FlexContainerProps, HTMLDivElement>(
+  forwardRef<HTMLDivElement, FlexContainerProps>(
+    (
+      {
+        children,
+        direction = 'row',
+        wrap = 'nowrap',
+        justify = 'flex-start',
+        align = 'stretch',
+        alignContent,
+        gap,
+        rowGap,
+        columnGap,
+        className,
+        style,
+        as = 'div',
+        ...props
+      },
+      ref
+    ) => {
+      return (
+        <StyledContainer
+          as={as}
+          $direction={direction}
+          $wrap={wrap}
+          $justify={justify}
+          $align={align}
+          $alignContent={alignContent}
+          $gap={gap}
+          $rowGap={rowGap}
+          $columnGap={columnGap}
+          className={className}
+          style={style}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </StyledContainer>
+      );
+    }
+  )
+);
 
-interface StyledFlexContainerProps {
+type StyledFlexContainerProps = StyledFabricComponent<{
   $direction: FlexDirection;
   $wrap: FlexWrap;
   $justify: FlexJustify;
@@ -71,9 +75,9 @@ interface StyledFlexContainerProps {
   $gap?: FlexGap;
   $rowGap?: FlexGap;
   $columnGap?: FlexGap;
-}
+}>;
 
-const StyledContainer = styled.div<StyledFlexContainerProps>`
+const StyledContainer = createStyledComponent<StyledFlexContainerProps>(styled.div`
   ${({ $direction, $wrap, $justify, $align, $alignContent, $gap, $rowGap, $columnGap }) => `
     display: flex;
     width: 100%;
@@ -87,6 +91,4 @@ const StyledContainer = styled.div<StyledFlexContainerProps>`
     ${$rowGap !== undefined ? `row-gap: ${typeof $rowGap === 'number' ? `${$rowGap}px` : $rowGap};` : ''}
     ${$columnGap !== undefined ? `column-gap: ${typeof $columnGap === 'number' ? `${$columnGap}px` : $columnGap};` : ''}
   `}
-`;
-
-const StyledFlexContainer = createComponent(StyledContainer);
+`);

package/src/Core/Flex/FlexItem.tsx

@@ -1,5 +1,6 @@
 import { CSSProperties, ReactNode } from 'react';
 import { styled } from 'styled-components';
+import { createComponent } from '../../Theme';
 
 export type FlexItemGrow = number;
 export type FlexItemShrink = number;
@@ -18,32 +19,24 @@ export interface FlexItemProps {
   as?: any; //TODO: fix type to styled component or intrinsic element
 }
 
-export const FlexItem = ({
-  children,
-  grow,
-  shrink,
-  basis,
-  align,
-  order,
-  className,
-  style,
-  as = 'div',
-}: FlexItemProps) => {
-  return (
-    <StyledFlexItem
-      as={as}
-      $grow={grow}
-      $shrink={shrink}
-      $basis={basis}
-      $align={align}
-      $order={order}
-      className={className}
-      style={style}
-    >
-      {children}
-    </StyledFlexItem>
-  );
-};
+export const FlexItem = createComponent<FlexItemProps>(
+  ({ children, grow, shrink, basis, align, order, className, style, as = 'div' }) => {
+    return (
+      <StyledFlexItem
+        as={as}
+        $grow={grow}
+        $shrink={shrink}
+        $basis={basis}
+        $align={align}
+        $order={order}
+        className={className}
+        style={style}
+      >
+        {children}
+      </StyledFlexItem>
+    );
+  }
+);
 
 interface StyledFlexItemProps {
   $grow?: FlexItemGrow;

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