@cyber-harbour/ui 1.0.63 → 1.0.65

package/package.json

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

package/src/Core/Pagination/Pagination.tsx

@@ -94,12 +94,15 @@ type StyledButtonProps = {
   $current?: boolean;
 };
 
-const StyledList = styled.div`
+const StyledList = styled.div(
+  ({ theme }) => `
   list-style: none;
   padding: 0;
   display: flex;
-  gap: 6px;
-`;
+  flex-wrap: wrap;
+  gap: ${theme.pagination.gap};
+`
+);
 const Button = styled.button<StyledButtonProps>(
   ({ theme, $current }) => `
   font-family: ${theme.typography.fontFamily};
@@ -107,18 +110,18 @@ const Button = styled.button<StyledButtonProps>(
   color: ${$current ? theme.colors.background : theme.colors.text.main};
   border: none;
   cursor: pointer;
-  padding-block: 4px;
-  padding-inline: 8px;
-  border-radius: 3px;
-  font-size: 14px;
+  padding-block: ${theme.pagination.paddingBlock};
+  padding-inline: ${theme.pagination.paddingInline};
+  border-radius: ${theme.pagination.borderRadius};
+  font-size: ${theme.pagination.fontSize};
   font-weight: 400;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 26px;
+  height: ${theme.pagination.height};
   svg {
-    width: 8px;
-    height: 8px;
+    width: ${theme.pagination.iconSize};
+    height: ${theme.pagination.iconSize};
 }
   &:hover {
     background-color: ${theme.colors.primary.light};
@@ -126,9 +129,11 @@ const Button = styled.button<StyledButtonProps>(
     transition: background-color 0.3s ease-in-out;
 `
 );
-const FlexGroup = styled.div`
+const FlexGroup = styled.div(
+  ({ theme }) => `
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 6px;
-`;
+  gap: ${theme.pagination.gap};
+`
+);

package/src/Core/Sidebar/Sidebar.tsx

@@ -1,35 +1,39 @@
 import { styled } from 'styled-components';
 import React from 'react';
 import { SidebarContext } from './SidebarContext';
+import { createComponent } from '../../Theme';
 
 export interface SidebarProps {
   defaultCollapsed?: boolean;
   children: any;
+  canGrow: boolean;
 }
 
 interface StyledProps {
   $collapsed: boolean;
+  $canGrow: boolean;
 }
 
-export const Sidebar = ({ defaultCollapsed, children }: SidebarProps) => {
+export const Sidebar = createComponent<SidebarProps>(({ defaultCollapsed, canGrow, children }) => {
   const [collapsed, setCollapsed] = React.useState(!!defaultCollapsed);
 
   return (
-    <StyledContainer $collapsed={collapsed}>
+    <StyledContainer $collapsed={collapsed} $canGrow={canGrow}>
       <SidebarContext.Provider
         value={{
           collapsed,
           setCollapsed,
+          canGrow,
         }}
       >
         {children}
       </SidebarContext.Provider>
     </StyledContainer>
   );
-};
+});
 
 const StyledContainer = styled.aside<StyledProps>(
-  ({ theme, $collapsed }) => `
+  ({ theme, $collapsed, $canGrow }) => `
     display: flex;
     flex-direction: column;
     justify-content: space-between;
@@ -40,10 +44,11 @@ const StyledContainer = styled.aside<StyledProps>(
     width: ${theme.sidebar.width};
     padding: 12px;
     height: 100%;
+    overflow: hidden auto;
     border-right: 1px solid ${theme.sidebar.border};
     background: ${theme.sidebar.background};
     ${
-      $collapsed
+      $collapsed || !$canGrow
         ? `
           width: 65px;
         `
@@ -64,7 +69,7 @@ const StyledContainer = styled.aside<StyledProps>(
 
       width: ${theme.sidebar.width};
       ${
-        $collapsed
+        $collapsed || !$canGrow
           ? `
           width: 65px;
         `

package/src/Core/Sidebar/SidebarContext.tsx

@@ -3,9 +3,11 @@ import { createContext } from 'react';
 interface SidebarContext {
   collapsed: boolean;
   setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+  canGrow: boolean;
 }
 
 export const SidebarContext = createContext<SidebarContext>({
   collapsed: false,
   setCollapsed: () => {},
+  canGrow: false,
 });

package/src/Core/Sidebar/SidebarDelimeter.tsx

@@ -4,15 +4,16 @@ import { styled } from 'styled-components';
 
 type StyledProps = {
   $collapsed: boolean;
+  $canGrow: boolean;
 };
 
 export const SidebarDelimeter = () => {
-  const { collapsed } = useContext(SidebarContext);
-  return <StyledDelimeter $collapsed={collapsed} />;
+  const { collapsed, canGrow } = useContext(SidebarContext);
+  return <StyledDelimeter $collapsed={collapsed} $canGrow={canGrow} />;
 };
 
 const StyledDelimeter = styled.div<StyledProps>(
-  ({ $collapsed, theme }) => `
+  ({ $collapsed, $canGrow, theme }) => `
         min-width: 32px;
         width: 0;
 
@@ -22,6 +23,7 @@ const StyledDelimeter = styled.div<StyledProps>(
 
     ${
       !$collapsed &&
+      $canGrow &&
       `
         & {
             width: 100%;

package/src/Core/Sidebar/SidebarItem.tsx

@@ -17,6 +17,7 @@ interface SidebarItemAnchor {
 type StyledProps = {
   $active: SidebarItemBase['active'];
   $collapsed: boolean;
+  $canGrow: boolean;
 };
 
 interface SidebarItemButton {
@@ -27,7 +28,7 @@ interface SidebarItemButton {
 export type SidebarItemProps = SidebarItemBase & (SidebarItemAnchor | SidebarItemButton);
 
 export const SidebarItem = ({ active, icon: Icon, label, ...props }: SidebarItemProps) => {
-  const { collapsed } = useContext(SidebarContext);
+  const { collapsed, canGrow } = useContext(SidebarContext);
 
   const isAnchor = 'href' in props;
 
@@ -37,10 +38,11 @@ export const SidebarItem = ({ active, icon: Icon, label, ...props }: SidebarItem
       as={isAnchor ? 'a' : 'button'}
       $collapsed={collapsed}
       $active={active}
+      $canGrow={canGrow}
       {...props}
     >
       {Icon && <Icon aria-label={label} width={16} height={16} />}
-      <StyledText $collapsed={collapsed} $active={active}>
+      <StyledText $collapsed={collapsed} $active={active} $canGrow={canGrow}>
         {label}
       </StyledText>
     </StyledItem>
@@ -48,7 +50,7 @@ export const SidebarItem = ({ active, icon: Icon, label, ...props }: SidebarItem
 };
 
 const StyledText = styled.span<StyledProps>(
-  ({ $collapsed }) => `
+  ({ $collapsed, $canGrow }) => `
   margin-top: 2px;
   overflow: hidden;
   white-space: nowrap;
@@ -62,18 +64,19 @@ const StyledText = styled.span<StyledProps>(
   font-family: Inter;
 
   ${
-    $collapsed &&
-    `
+    $collapsed || !$canGrow
+      ? `
     & {
       width: 0;
     }
     `
+      : ''
   }
 `
 );
 
 const StyledItem = styled.a<StyledProps>(
-  ({ $active, $collapsed, theme }) => `
+  ({ $active, $collapsed, $canGrow, theme }) => `
     display: flex;
     align-items: center;
     gap: 12px;
@@ -96,7 +99,7 @@ const StyledItem = styled.a<StyledProps>(
        `
         : ''
     }
-    ${$collapsed ? `gap: 0;` : ''}
+    ${$collapsed || !$canGrow ? `gap: 0;` : ''}
 
 
 

package/src/Theme/themes/dark.ts

@@ -976,6 +976,15 @@ export const darkThemePx: Theme = {
     color: '#99989C',
     background: '#1E2226',
   },
+  pagination: {
+    fontSize: 14,
+    paddingBlock: 4,
+    paddingInline: 8,
+    borderRadius: 3,
+    gap: 6,
+    height: 26,
+    iconSize: 8,
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -975,6 +975,15 @@ export const lightThemePx: Theme = {
     color: '#535353',
     background: '#EBEBEB',
   },
+  pagination: {
+    fontSize: 14,
+    paddingBlock: 4,
+    paddingInline: 8,
+    borderRadius: 3,
+    gap: 6,
+    height: 26,
+    iconSize: 8,
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -319,6 +319,15 @@ export type Theme = {
     color: string;
     background: string;
   };
+  pagination: {
+    fontSize: string | number;
+    paddingBlock: string | number;
+    paddingInline: string | number;
+    borderRadius: string | number;
+    gap: string | number;
+    height: string | number;
+    iconSize: string | number;
+  };
 };
 
 //TODO check and refactoring