@cyber-harbour/ui 1.0.27 → 1.0.29

package/package.json

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

package/src/Core/Box/Box.tsx

@@ -0,0 +1,17 @@
+import { createComponent, FabricComponent } from '../../Theme';
+import { styled } from 'styled-components';
+
+type BoxProps = FabricComponent<{
+  children: any;
+}>;
+
+export const Box = styled(createComponent<BoxProps>('div'))(
+  ({ theme }) => `
+      padding: ${theme.box.padding};
+      border-radius: ${theme.box.borderRadius};
+      background-color: ${theme.box.background};
+      border-width: ${theme.box.border.width};
+      border-style: ${theme.box.border.style};
+      border-color: ${theme.box.border.color};
+  `
+);

package/src/Core/Box/index.ts

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

package/src/Core/Button/Button.tsx

@@ -7,9 +7,11 @@ import {
   getButtonStyles,
   getButtonSizeStyles,
   ButtonElementStyle,
+  createComponent,
+  FabricComponent,
 } from '../../Theme';
 
-interface BaseButtonProps {
+type BaseButtonProps = FabricComponent<{
   children?: any;
   variant?: ButtonVariant;
   color?: ButtonColor;
@@ -19,10 +21,14 @@ interface BaseButtonProps {
   className?: string;
   icon?: any;
   iconPosition?: 'left' | 'right';
-}
+  iconVariant?: 'filled' | 'empty';
+}>;
 
-export type ButtonProps = BaseButtonProps &
-  (React.AnchorHTMLAttributes<HTMLAnchorElement> | React.ButtonHTMLAttributes<HTMLButtonElement>);
+export type ButtonProps = (
+  | Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'>
+  | Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>
+) &
+  BaseButtonProps;
 
 const getCss = (styles: ButtonElementStyle) => `
     background: ${styles.background};
@@ -31,26 +37,54 @@ const getCss = (styles: ButtonElementStyle) => `
     box-shadow: ${styles.boxShadow};
   `;
 
+const getIconStyles = (styles: ButtonElementStyle) =>
+  styles.filledIcon
+    ? `
+    color: ${styles.filledIcon.color};
+    background: ${styles.filledIcon.background};
+  `
+    : '';
+
 // Створюємо стилізований компонент, що використовує уніфіковану палітру
-const StyledButton = styled.button<{
+const ButtonTextContainer = styled.div`
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+`;
+
+const StyledIconWrapper = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StyledButton = styled(createComponent('button'))<{
   $variant: ButtonVariant;
   $color: ButtonColor;
   $size: ButtonSize;
   $disabled: boolean;
   $fullWidth: boolean;
   $iconPosition: 'left' | 'right';
+  $iconVariant: 'filled' | 'empty';
 }>`
-  ${({ $variant, $color, $size, $disabled, $fullWidth, $iconPosition, theme }) => {
+  ${({ $variant, $color, $size, $disabled, $fullWidth, $iconPosition, $iconVariant, theme, ...props }) => {
     const sizes = getButtonSizeStyles(theme, $size);
     return `
       ${getCss(getButtonStyles(theme, $variant, $color, 'default'))}
       font-size: ${sizes.fontSize};
       gap: ${sizes.gap};
-      padding-block: ${sizes.paddingBlock};
-      padding-inline: ${sizes.paddingInline};
+      ${
+        $variant !== 'empty'
+          ? `
+            ${!props.py ? `padding-block: ${sizes.paddingBlock};` : ''}
+            ${!props.px ? `padding-inline: ${sizes.paddingInline};` : ''}
+          `
+          : ''
+      }
       border-radius: ${sizes.borderRadius};
       border-width: ${sizes.borderWidth};
       border-style: solid;
+      max-width: 100%;
       width: ${$fullWidth ? '100%' : 'auto'};
       cursor: ${$disabled ? 'not-allowed' : 'pointer'};
       font-weight: 500;
@@ -78,7 +112,39 @@ const StyledButton = styled.button<{
       svg {
         width: ${sizes.iconSize};
         height: ${sizes.iconSize};
+
       }
+
+        ${
+          $iconVariant === 'filled'
+            ? `
+             ${StyledIconWrapper} {
+                width: 24px;
+                height: 24px;
+                border-radius: ${sizes.borderRadius};
+                transition: all 0.2s ease;
+                ${getIconStyles(getButtonStyles(theme, $variant, $color, 'default'))}
+              }
+              &:hover {
+                ${StyledIconWrapper} {
+                  ${getIconStyles(getButtonStyles(theme, $variant, $color, 'hover'))}
+                }
+              }
+
+              &:active {
+                ${StyledIconWrapper} {
+                  ${getIconStyles(getButtonStyles(theme, $variant, $color, 'active'))}
+                }
+              }
+
+               &:disabled {
+                ${StyledIconWrapper} {
+                  ${getIconStyles(getButtonStyles(theme, $variant, $color, 'disabled'))}
+                }
+              }
+            `
+            : ``
+        }
     `;
   }}
 `;
@@ -93,6 +159,7 @@ export const Button = ({
   className,
   icon,
   iconPosition = 'left',
+  iconVariant = 'empty',
   ...props
 }: ButtonProps) => {
   return (
@@ -104,12 +171,13 @@ export const Button = ({
       $disabled={disabled}
       $fullWidth={fullWidth}
       $iconPosition={iconPosition}
+      $iconVariant={iconVariant}
       disabled={disabled}
       className={className}
       {...props}
     >
-      {icon}
-      <div>{children}</div>
+      {!!icon && <StyledIconWrapper>{icon}</StyledIconWrapper>}
+      {!!children && <ButtonTextContainer>{children}</ButtonTextContainer>}
     </StyledButton>
   );
 };

package/src/Core/Flex/FlexContainer.tsx

@@ -0,0 +1,83 @@
+import { CSSProperties, ReactNode } from 'react';
+import styled from 'styled-components';
+
+export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type FlexJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+export type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+export type FlexGap = string | number;
+
+export interface FlexContainerProps {
+  children: any;
+  direction?: FlexDirection;
+  wrap?: FlexWrap;
+  justify?: FlexJustify;
+  align?: FlexAlign;
+  alignContent?: FlexAlign;
+  gap?: FlexGap;
+  rowGap?: FlexGap;
+  columnGap?: FlexGap;
+  className?: string;
+  style?: CSSProperties;
+  as?: any; // TODO: fix type to styled component or intrinsic element
+}
+
+export const FlexContainer = ({
+  children,
+  direction = 'row',
+  wrap = 'nowrap',
+  justify = 'flex-start',
+  align = 'stretch',
+  alignContent,
+  gap,
+  rowGap,
+  columnGap,
+  className,
+  style,
+  as = 'div',
+}: FlexContainerProps) => {
+  return (
+    <StyledFlexContainer
+      as={as}
+      $direction={direction}
+      $wrap={wrap}
+      $justify={justify}
+      $align={align}
+      $alignContent={alignContent}
+      $gap={gap}
+      $rowGap={rowGap}
+      $columnGap={columnGap}
+      className={className}
+      style={style}
+    >
+      {children}
+    </StyledFlexContainer>
+  );
+};
+
+interface StyledFlexContainerProps {
+  $direction: FlexDirection;
+  $wrap: FlexWrap;
+  $justify: FlexJustify;
+  $align: FlexAlign;
+  $alignContent?: FlexAlign;
+  $gap?: FlexGap;
+  $rowGap?: FlexGap;
+  $columnGap?: FlexGap;
+}
+
+const StyledFlexContainer = styled.div<StyledFlexContainerProps>`
+  ${({ $direction, $wrap, $justify, $align, $alignContent, $gap, $rowGap, $columnGap }) => `
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    flex-direction: ${$direction};
+    flex-wrap: ${$wrap};
+    justify-content: ${$justify};
+    align-items: ${$align};
+    ${$alignContent ? `align-content: ${$alignContent};` : ''}
+    ${$gap !== undefined ? `gap: ${typeof $gap === 'number' ? `${$gap}px` : $gap};` : ''}
+    ${$rowGap !== undefined ? `row-gap: ${typeof $rowGap === 'number' ? `${$rowGap}px` : $rowGap};` : ''}
+    ${$columnGap !== undefined ? `column-gap: ${typeof $columnGap === 'number' ? `${$columnGap}px` : $columnGap};` : ''}
+  `}
+`;

package/src/Core/Flex/FlexItem.tsx

@@ -0,0 +1,65 @@
+import { CSSProperties, ReactNode } from 'react';
+import { styled } from 'styled-components';
+
+export type FlexItemGrow = number;
+export type FlexItemShrink = number;
+export type FlexItemBasis = string | number;
+export type FlexItemAlign = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+
+export interface FlexItemProps {
+  children?: any;
+  grow?: FlexItemGrow;
+  shrink?: FlexItemShrink;
+  basis?: FlexItemBasis;
+  align?: FlexItemAlign;
+  order?: number;
+  className?: string;
+  style?: CSSProperties;
+  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>
+  );
+};
+
+interface StyledFlexItemProps {
+  $grow?: FlexItemGrow;
+  $shrink?: FlexItemShrink;
+  $basis?: FlexItemBasis;
+  $align?: FlexItemAlign;
+  $order?: number;
+}
+
+const StyledFlexItem = styled.div<StyledFlexItemProps>`
+  ${({ $grow, $shrink, $basis, $align, $order }) => `
+    min-width: 0;
+    ${$grow !== undefined ? `flex-grow: ${$grow};` : ''}
+    ${$shrink !== undefined ? `flex-shrink: ${$shrink};` : ''}
+    ${$basis !== undefined ? `flex-basis: ${typeof $basis === 'number' ? `${$basis}px` : $basis};` : ''}
+    ${$align ? `align-self: ${$align};` : ''}
+    ${$order !== undefined ? `order: ${$order};` : ''}
+  `}
+`;

package/src/Core/Flex/index.ts

@@ -0,0 +1,4 @@
+import { FlexContainer } from './FlexContainer';
+import { FlexItem } from './FlexItem';
+
+export { FlexContainer, FlexItem };

package/src/Core/IconComponents/MaximizeIcon.tsx

@@ -0,0 +1,28 @@
+import { SVGProps } from 'react';
+
+interface MaximizeIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const MaximizeIcon = ({ fill = 'currentColor', ...props }: MaximizeIconProps) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M14 6.5C13.7267 6.5 13.5 6.27333 13.5 6V2.5H10C9.72667 2.5 9.5 2.27333 9.5 2C9.5 1.72667 9.72667 1.5 10 1.5H14C14.2733 1.5 14.5 1.72667 14.5 2V6C14.5 6.27333 14.2733 6.5 14 6.5Z"
+        fill={fill}
+      />
+      <path
+        d="M6 14.5H2C1.72667 14.5 1.5 14.2733 1.5 14V10C1.5 9.72667 1.72667 9.5 2 9.5C2.27333 9.5 2.5 9.72667 2.5 10V13.5H6C6.27333 13.5 6.5 13.7267 6.5 14C6.5 14.2733 6.27333 14.5 6 14.5Z"
+        fill={fill}
+      />
+      <path
+        d="M8.9998 7.50224C8.87313 7.50224 8.74646 7.45557 8.64646 7.35557C8.45313 7.16224 8.45313 6.84224 8.64646 6.64891L13.6465 1.64891C13.8398 1.45557 14.1598 1.45557 14.3531 1.64891C14.5465 1.84224 14.5465 2.16224 14.3531 2.35557L9.35313 7.35557C9.25313 7.45557 9.12646 7.50224 8.9998 7.50224Z"
+        fill={fill}
+      />
+      <path
+        d="M1.9998 14.5022C1.87313 14.5022 1.74646 14.4556 1.64646 14.3556C1.45313 14.1622 1.45313 13.8422 1.64646 13.6489L6.64646 8.64891C6.8398 8.45557 7.1598 8.45557 7.35313 8.64891C7.54646 8.84224 7.54646 9.16224 7.35313 9.35557L2.35313 14.3556C2.25313 14.4556 2.12646 14.5022 1.9998 14.5022Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/SearchIcon.tsx

@@ -0,0 +1,14 @@
+import { SVGProps } from 'react';
+
+interface SearchIconProps extends SVGProps<SVGSVGElement> {
+  stroke?: string;
+}
+
+export const SearchIcon = ({ stroke = 'currentColor', ...props }: SearchIconProps) => {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <ellipse cx="5.80004" cy="5.80062" rx="4.80004" ry="4.80062" stroke={stroke} />
+      <path d="M9.00012 9.80078L13.0002 12.9997" stroke={stroke} strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -28,6 +28,7 @@ export { PrintIcon } from './PrintIcon';
 export { Profiler2Icon } from './Profiler2Icon';
 export { ProfilerIcon } from './ProfilerIcon';
 export { SandBoxIcon } from './SandBoxIcon';
+export { SearchIcon } from './SearchIcon';
 export { StatisticIcon } from './StatisticIcon';
 export { SunIcon } from './SunIcon';
 export { UpRightArrowCircleIcon } from './UpRightArrowCircleIcon';
@@ -41,3 +42,4 @@ export { UsersIcon } from './Users';
 export { InfoCircleFilledIcon } from './InfoCircleFilled';
 export { UnfoldIcon } from './Unfold';
 export { CrossIcon } from './Cross';
+export { MaximizeIcon } from './MaximizeIcon';

package/src/Core/Line/Line.tsx

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

package/src/Core/Line/index.ts

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

package/src/Core/Typography/Typography.tsx

@@ -1,20 +1,21 @@
 import styled from 'styled-components';
 import { CSSProperties, ElementType, ReactNode } from 'react';
-import { ColorVariant, TypographyVariant } from '../../Theme';
+import { ColorVariant, createComponent, FabricComponent, TypographyVariant } from '../../Theme';
 import { resolveThemeColor } from '../../Theme/utils';
 
-export interface TypographyProps {
+type TypographyProps = FabricComponent<{
+  style?: CSSProperties;
   variant?: TypographyVariant;
   element?: ElementType;
   children: any;
   weight?: CSSProperties['fontWeight'];
-  style?: CSSProperties['fontStyle'];
+  fontStyle?: CSSProperties['fontStyle'];
   color?: ColorVariant | string;
   className?: string;
-}
+}>;
 
 // Create a styled component that can be dynamically rendered as different HTML elements
-const StyledTypography = styled.div<{
+const StyledTypography = styled(createComponent('div'))<{
   $variant: TypographyVariant;
   $weight?: CSSProperties['fontWeight'];
   $style?: CSSProperties['fontStyle'];
@@ -35,9 +36,10 @@ export const Typography = ({
   element,
   children,
   weight,
-  style,
+  fontStyle,
   color,
   className,
+  style,
 }: TypographyProps) => {
   // Determine which HTML element to render based on the variant if not explicitly specified
   const Element = element || (variant.startsWith('h') ? variant : 'p');
@@ -47,9 +49,10 @@ export const Typography = ({
       as={Element}
       $variant={variant}
       $weight={weight}
-      $style={style}
+      $style={fontStyle}
       $color={color}
       className={className}
+      style={style}
     >
       {children}
     </StyledTypography>

package/src/Core/Typography/index.ts

@@ -1,2 +1 @@
-export { Typography } from './Typography';
-export type { TypographyProps } from './Typography';
+export * from './Typography';

package/src/Core/index.ts

@@ -10,3 +10,6 @@ export * from './ContextMenu';
 export * from './Select';
 export * from './RowActionsMenu';
 export * from './Input';
+export * from './Flex';
+export * from './Box';
+export * from './Line';

package/src/FullscreenCard/FullscreenCard.tsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+interface FullscreenCardProps {
+  children: any;
+  position: 'absolute' | 'fixed';
+  isActive: boolean;
+}
+
+export const FullscreenCard = ({ isActive, position, ...props }: FullscreenCardProps) => {
+  return <StyledContainer $isActive={isActive} $position={position} {...props} />;
+};
+
+const StyledContainer = styled.div<{ $isActive: boolean; $position: 'absolute' | 'fixed' }>(
+  ({ $isActive, $position }) => `
+${
+  $isActive
+    ? `
+      position: ${$position};
+      top: 0;
+      left: 0;
+      height: 100%;
+      width: 100%;
+      z-index: 1000;
+    `
+    : ''
+}
+
+  min-width: 0;
+  `
+);

package/src/FullscreenCard/index.ts

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

package/src/Layouts/Container/Container.tsx

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

package/src/Layouts/Container/index.ts

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

package/src/Layouts/index.ts

@@ -1 +1,2 @@
 export * from './PageLayout';
+export * from './Container';

package/src/Theme/ThemeProvider.tsx

@@ -1,12 +1,21 @@
-import { ThemeProvider as ThemeProviderStyled } from 'styled-components';
+import { StyleSheetManager, ThemeProvider as ThemeProviderStyled, WebTarget } from 'styled-components';
 import { lightTheme } from './theme';
 import { GlobalStyle } from './GlobalStyle';
 
 export const ThemeProvider = ({ children }: { children: any }) => {
   return (
-    <ThemeProviderStyled theme={lightTheme}>
-      <GlobalStyle />
-      {children}
-    </ThemeProviderStyled>
+    <StyleSheetManager shouldForwardProp={shouldForwardProp}>
+      <ThemeProviderStyled theme={lightTheme}>
+        <GlobalStyle />
+        {children}
+      </ThemeProviderStyled>
+    </StyleSheetManager>
   );
 };
+
+function shouldForwardProp(propName: any, target: WebTarget) {
+  if (typeof target === 'string') {
+    return !['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].includes(propName);
+  }
+  return true;
+}

package/src/Theme/componentFabric.ts

@@ -0,0 +1,70 @@
+import styled, { css, WebTarget } from 'styled-components';
+
+type MarginProps = {
+  m?: string | number; // margin
+  mt?: string | number; // margin-top
+  mr?: string | number; // margin-right
+  mb?: string | number; // margin-bottom
+  ml?: string | number; // margin-left
+  mx?: string | number; // margin-left + margin-right
+  my?: string | number; // margin-top + margin-bottom
+  p?: string | number; // padding
+  pt?: string | number; // padding-top
+  pr?: string | number; // padding-right
+  pb?: string | number; // padding-bottom
+  pl?: string | number; // padding-left
+  px?: string | number; // padding-left + padding-right
+  py?: string | number; // padding-top + padding-bottom
+};
+
+export type FabricComponent<T = object> = T & MarginProps;
+
+const marginStyles = css<FabricComponent>((props) => {
+  return `
+      ${props.m ? `margin: ${typeof props.m === 'number' ? `${props.m}px` : props.m};` : ''}
+      ${props.mt ? `margin-top: ${typeof props.mt === 'number' ? `${props.mt}px` : props.mt};` : ''}
+      ${props.mr ? `margin-right: ${typeof props.mr === 'number' ? `${props.mr}px` : props.mr};` : ''}
+      ${props.mb ? `margin-bottom: ${typeof props.mb === 'number' ? `${props.mb}px` : props.mb};` : ''}
+      ${props.ml ? `margin-left: ${typeof props.ml === 'number' ? `${props.ml}px` : props.ml};` : ''}
+      ${
+        props.mx
+          ? `margin-left: ${typeof props.mx === 'number' ? `${props.mx}px` : props.mx}; margin-right: ${
+              typeof props.mx === 'number' ? `${props.mx}px` : props.mx
+            };`
+          : ''
+      }
+      ${
+        props.my
+          ? `margin-top: ${typeof props.my === 'number' ? `${props.my}px` : props.my}; margin-bottom: ${
+              typeof props.my === 'number' ? `${props.my}px` : props.my
+            };`
+          : ''
+      }
+      ${props.p ? `padding: ${typeof props.p === 'number' ? `${props.p}px` : props.p};` : ''}
+      ${props.pt ? `padding-top: ${typeof props.pt === 'number' ? `${props.pt}px` : props.pt};` : ''}
+      ${props.pr ? `padding-right: ${typeof props.pr === 'number' ? `${props.pr}px` : props.pr};` : ''}
+      ${props.pb ? `padding-bottom: ${typeof props.pb === 'number' ? `${props.pb}px` : props.pb};` : ''}
+      ${props.pl ? `padding-left: ${typeof props.pl === 'number' ? `${props.pl}px` : props.pl};` : ''}
+      ${
+        props.px
+          ? `padding-left: ${typeof props.px === 'number' ? `${props.px}px` : props.px}; padding-right: ${
+              typeof props.px === 'number' ? `${props.px}px` : props.px
+            };`
+          : ''
+      }
+      ${
+        props.py
+          ? `padding-top: ${typeof props.py === 'number' ? `${props.py}px` : props.py}; padding-bottom: ${
+              typeof props.py === 'number' ? `${props.py}px` : props.py
+            };`
+          : ''
+      }
+
+    `;
+});
+
+export const createComponent = <T = object>(element: WebTarget) => {
+  return styled(element)<FabricComponent<T>>`
+    ${marginStyles};
+  `;
+};

package/src/Theme/index.ts

@@ -3,3 +3,4 @@ export * from './ThemeProvider';
 export * from './utils';
 export * from './types';
 export * from './theme';
+export * from './componentFabric';