@cyber-harbour/ui 1.0.31 → 1.0.33

package/package.json

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

package/src/Core/Box/Box.tsx

@@ -1,11 +1,17 @@
 import { createComponent, FabricComponent } from '../../Theme';
 import { styled } from 'styled-components';
 
-type BoxProps = FabricComponent<{
-  children: any;
-}>;
+type BoxProps = FabricComponent<
+  {
+    children: any;
+  } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
+>;
 
-export const Box = styled(createComponent<BoxProps>('div'))(
+export const Box = ({ children, ...props }: BoxProps) => {
+  return <StyledBox {...props}>{children}</StyledBox>;
+};
+
+const StyledBox = styled(createComponent('div'))(
   ({ theme }) => `
       padding: ${theme.box.padding};
       border-radius: ${theme.box.borderRadius};

package/src/Core/Input/Input.tsx

@@ -1,28 +1,27 @@
-import { InputSize, InputSizeStyle } from '../../Theme';
-import { InputHTMLAttributes } from 'react';
+import { InputSize, InputSizeStyle, InputVariant, getInputStyles } from '../../Theme';
+import { forwardRef, InputHTMLAttributes, Ref } from 'react';
 import { styled } from 'styled-components';
 import { InfoCircleFilledIcon } from '../IconComponents';
 
-type StyledProps = {
-  $error?: boolean;
-  $sizes: InputSizeStyle;
-};
-
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
   error?: boolean;
   append?: any;
   prepend?: any;
   size?: InputSize;
+  variant?: InputVariant;
 };
 
-export const Input = ({ error, append, prepend, size = 'small', disabled, className, ...props }: InputProps) => {
+export const Input: any = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { error, append, prepend, size = 'small', variant = 'outlined', disabled, className, ...props },
+  ref
+) {
   return (
-    <Group className={className} $error={error} $size={size} $disabled={!!disabled}>
+    <Group className={className} $error={error} $size={size} $variant={variant} $disabled={!!disabled}>
       {!!prepend && prepend}
-      <InputGroup $size={size}>
-        <input {...props} disabled={disabled} />
+      <InputGroup $size={size} $variant={variant}>
+        <input ref={ref} disabled={disabled} {...props} />
         {!!error && (
-          <IconWrapper>
+          <IconWrapper $variant={variant}>
             <InfoCircleFilledIcon />
           </IconWrapper>
         )}
@@ -30,10 +29,10 @@ export const Input = ({ error, append, prepend, size = 'small', disabled, classN
       {!!append && append}
     </Group>
   );
-};
+});
 
-const InputGroup = styled.div<{ $size: InputSize }>(
-  ({ theme, $size }) => `
+const InputGroup = styled.div<{ $size: InputSize; $variant?: InputVariant }>(
+  ({ theme, $size, $variant = 'outlined' }) => `
   display: inline-flex;
   align-items: center;
   width: 100%;
@@ -56,7 +55,7 @@ const InputGroup = styled.div<{ $size: InputSize }>(
     border: none;
 
     &::placeholder {
-      color: ${theme.input.outlined.default.placeholder};
+      color: ${theme.input[$variant].default.placeholder};
       font-size: ${theme.input.sizes[$size].fontSize};
     }
 
@@ -68,19 +67,19 @@ const InputGroup = styled.div<{ $size: InputSize }>(
 `
 );
 
-const IconWrapper = styled.span(
-  ({ theme }) => `
+const IconWrapper = styled.span<{ $variant: InputVariant }>(
+  ({ theme, $variant }) => `
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
-  color: ${theme.input.outlined.error.icon};
+  color: ${theme.input[$variant].error.icon};
   margin-right: 10px;
  
 `
 );
 
-const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSize }>(
-  ({ theme, $disabled, $error, $size }) => `
+const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSize; $variant: InputVariant }>(
+  ({ theme, $disabled, $error, $size, $variant }) => `
   display: inline-flex;
   align-items: center;
   width: 100%;
@@ -93,14 +92,14 @@ const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSiz
   ${
     $error
       ? `
-      border-color: ${theme.input.outlined.error.border};
-      color: ${theme.input.outlined.error.text};
-      background: ${theme.input.outlined.error.background};
+      border-color: ${theme.input[$variant].error.border};
+      color: ${theme.input[$variant].error.text};
+      background: ${theme.input[$variant].error.background};
       `
       : `
-      border-color: ${theme.input.outlined.default.border};
-      color: ${theme.input.outlined.default.text};
-      background: ${theme.input.outlined.default.background};
+      border-color: ${theme.input[$variant].default.border};
+      color: ${theme.input[$variant].default.text};
+      background: ${theme.input[$variant].default.background};
       `
   }
 
@@ -109,13 +108,13 @@ const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSiz
     !$error &&
     `
     &:hover {
-      border-color: ${theme.input.outlined.focus.border};
+      border-color: ${theme.input[$variant].focus.border};
     }
     
     &:focus-within {
-      border-color: ${theme.input.outlined.focus.border};
-      color: ${theme.input.outlined.focus.text};
-      background: ${theme.input.outlined.focus.background};
+      border-color: ${theme.input[$variant].focus.border};
+      color: ${theme.input[$variant].focus.text};
+      background: ${theme.input[$variant].focus.background};
     }
     `
   }
@@ -123,9 +122,9 @@ const Group = styled.div<{ $disabled: boolean; $error?: boolean; $size: InputSiz
   ${
     $disabled &&
     `
-    border-color: ${theme.input.outlined.disabled.border};
-    color: ${theme.input.outlined.disabled.text};
-    background: ${theme.input.outlined.disabled.background};
+    border-color: ${theme.input[$variant].disabled.border};
+    color: ${theme.input[$variant].disabled.text};
+    background: ${theme.input[$variant].disabled.background};
     cursor: not-allowed;
     `
   }

package/src/Core/Line/Line.tsx

@@ -1,4 +1,4 @@
-import { createComponent, FabricComponent, pxToRem } from '../../Theme';
+import { createComponent, FabricComponent } from '../../Theme';
 import { styled } from 'styled-components';
 
 type LineProps = FabricComponent<

package/src/Core/Typography/Typography.tsx

@@ -12,6 +12,7 @@ type TypographyProps = FabricComponent<{
   fontStyle?: CSSProperties['fontStyle'];
   color?: ColorVariant | string;
   className?: string;
+  ellipsis?: boolean;
 }>;
 
 // Create a styled component that can be dynamically rendered as different HTML elements
@@ -20,7 +21,8 @@ const StyledTypography = styled(createComponent('div'))<{
   $weight?: CSSProperties['fontWeight'];
   $style?: CSSProperties['fontStyle'];
   $color?: ColorVariant | string;
-}>(({ theme, $variant, $color, $weight = '400', $style = 'initial' }) => {
+  $ellipsis?: boolean;
+}>(({ 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 `
@@ -28,6 +30,7 @@ const StyledTypography = styled(createComponent('div'))<{
       font-weight: ${$weight};
       font-style: ${$style};
       color: ${resolveThemeColor(theme, $color) || theme.colors.text.main};
+      ${$ellipsis ? 'overflow: hidden; text-overflow: ellipsis; white-space: nowrap;' : ''}
     `;
 });
 
@@ -40,6 +43,7 @@ export const Typography = ({
   color,
   className,
   style,
+  ellipsis = false,
   ...props
 }: TypographyProps) => {
   // Determine which HTML element to render based on the variant if not explicitly specified
@@ -52,6 +56,7 @@ export const Typography = ({
       $weight={weight}
       $style={fontStyle}
       $color={color}
+      $ellipsis={ellipsis}
       className={className}
       style={style}
       {...props}