@cyber-harbour/ui 1.0.64 → 1.0.66

package/package.json

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

package/src/Core/IconComponents/FolderInfoIcon.tsx

@@ -0,0 +1,28 @@
+import { SVGProps } from 'react';
+
+interface FolderInfoIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const FolderInfoIcon = ({ fill = 'currentColor', ...props }: FolderInfoIconProps) => {
+  return (
+    <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M14.9123 2.84018H9.23227C8.97227 2.06018 8.61227 1.54018 7.73227 1.47018C7.39227 1.49018 7.07227 1.49018 6.73227 1.49018C6.20227 1.49018 5.66227 1.49018 5.12227 1.46018C4.59227 1.44018 4.04227 1.43018 3.52227 1.43018C3.09227 1.43018 2.66227 1.43018 2.24227 1.47018C1.20227 1.54018 0.452274 2.29018 0.372274 3.33018C0.392274 4.72018 0.372274 6.10018 0.372274 7.49018C0.372274 9.65018 0.352274 11.9002 0.422274 14.1202C0.652274 14.9902 1.31227 15.5102 2.23227 15.5702H13.2723C14.9923 15.4602 16.2623 14.2002 16.3623 12.4802V4.39018C16.3023 3.56018 15.7323 2.96018 14.9023 2.84018H14.9123ZM15.3523 5.32018H10.1723L9.61227 3.86018H14.9323C15.0423 3.86018 15.3423 4.17018 15.3423 4.27018V5.32018H15.3523ZM2.00227 12.0402L1.42227 13.9602C1.42227 13.9602 1.40227 13.8502 1.39227 13.8102V3.30018C1.41227 2.89018 1.75227 2.53018 2.16227 2.47018H7.73227C7.90227 2.47018 8.03227 2.57018 8.14227 2.78018C8.35227 3.16018 8.51227 3.64018 8.65227 4.10018C8.79227 4.52018 8.93227 4.97018 9.10227 5.32018H5.47227C4.82227 5.32018 4.01227 5.85018 3.70227 6.51018C3.10227 8.35018 2.54227 10.1902 1.99227 12.0402H2.00227ZM15.3523 12.6702C15.3523 13.4802 14.2523 14.5702 13.4323 14.5702H2.26227L4.58227 6.98018C4.68227 6.70018 5.15227 6.33018 5.40227 6.33018H15.3523V12.6702Z"
+        fill={fill}
+      />
+      <path
+        d="M7.85237 12.4204C6.54237 11.1004 6.94236 8.6304 8.69236 7.9004C10.9824 6.9504 13.2024 9.0304 12.4224 11.3804C11.7924 13.2804 9.24237 13.8204 7.85237 12.4204ZM9.68237 8.4704C8.23237 8.5704 7.33237 10.2504 8.17237 11.5004C9.01237 12.7504 10.7724 12.7404 11.5324 11.4204C12.2924 10.1004 11.1824 8.3704 9.68237 8.4704Z"
+        fill={fill}
+      />
+      <path
+        d="M9.7724 8.93011C10.0324 8.90011 10.1924 9.11011 10.2224 9.35011C10.2424 9.55011 10.2524 10.2001 10.2224 10.3801C10.1424 10.7501 9.5824 10.8001 9.4524 10.4401C9.3824 10.2601 9.3824 9.39011 9.4524 9.20011C9.5024 9.07011 9.6424 8.95011 9.7824 8.93011H9.7724Z"
+        fill={fill}
+      />
+      <path
+        d="M9.71242 10.9701C10.3924 10.8301 10.3424 11.9101 9.65242 11.7001C9.36242 11.6101 9.36242 11.0401 9.71242 10.9701Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -61,3 +61,4 @@ export { PointIcon } from './PointIcon';
 export { PencilIcon } from './PencilIcon';
 export { UserInCircleIcon } from './UserInCircle';
 export { FlashIcon } from './FlashIcon';
+export { FolderInfoIcon } from './FolderInfoIcon';

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;` : ''}