@bitrise/bitkit 13.324.0 → 13.326.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "13.324.0",
+  "version": "13.326.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -38,10 +38,10 @@
     "chakra-ui-2--theme": "npm:@chakra-ui/theme@3.4.9",
     "chakra-ui-2--theme-tools": "npm:@chakra-ui/theme-tools@2.2.9",
     "clsx": "^2.1.1",
-    "framer-motion": "^12.23.24",
+    "framer-motion": "^12.25.0",
     "luxon": "^3.7.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-focus-lock": "2.13.7",
     "react-imask": "^7.6.1",
     "react-markdown": "^10.1.0"
@@ -56,14 +56,14 @@
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@bitrise/eslint-plugin": "^2.12.0",
-    "@google-cloud/storage": "^7.17.3",
-    "@storybook/addon-docs": "^9.1.16",
-    "@storybook/addon-links": "^9.1.16",
+    "@google-cloud/storage": "^7.18.0",
+    "@storybook/addon-docs": "^9.1.17",
+    "@storybook/addon-links": "^9.1.17",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
-    "@storybook/react-webpack5": "^9.1.16",
+    "@storybook/react-webpack5": "^9.1.17",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.0",
+    "@testing-library/react": "16.3.1",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/luxon": "^3.7.1",
@@ -79,11 +79,11 @@
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "26.1.0",
     "lodash": "^4.17.21",
-    "prettier": "^3.7.3",
-    "react-hook-form": "^7.67.0",
-    "release-it": "^19.0.6",
-    "storybook": "^9.1.16",
-    "ts-jest": "^29.4.5",
+    "prettier": "^3.7.4",
+    "react-hook-form": "^7.70.0",
+    "release-it": "^19.2.3",
+    "storybook": "^9.1.17",
+    "ts-jest": "^29.4.6",
     "typescript": "^5.9.3"
   },
   "files": [

package/src/Components/Badge/Badge.theme.ts

@@ -4,8 +4,8 @@ import { BadgeColorScheme, BadgeProps } from './Badge';
 const baseStyle: SystemStyleObject = {
   borderRadius: '4',
   display: 'inline-flex',
+  alignItems: 'center',
   gap: '4',
-  padding: '4',
   textStyle: 'comp/badge/sm',
 };
 
@@ -87,15 +87,62 @@ const getVariant = (props: BadgeProps) => {
   return colors[variant || 'subtle'][colorScheme || 'neutral'];
 };
 
+const sizes: Record<'xs' | 'xxs', SystemStyleObject> = {
+  xs: {
+    height: 'fit-content',
+    width: 'fit-content',
+    padding: '4px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '&.has-children': {
+      paddingInlineStart: '8px',
+      paddingInlineEnd: '8px',
+    },
+    '&.has-icon': {
+      paddingInlineStart: '4px',
+    },
+    '&.has-icon:not(.has-children)': {
+      paddingInlineEnd: '4px',
+    },
+    '&.single-char': {
+      width: '24px',
+      height: '24px',
+      padding: '4px 0',
+    },
+  },
+  xxs: {
+    height: 'fit-content',
+    width: 'fit-content',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '2px 6px 2px 4px',
+    '&.single-char:not(.has-icon)': {
+      width: '20px',
+      height: '20px',
+      padding: '2px 0',
+    },
+    '&.has-icon:not(.has-children)': {
+      padding: '2px',
+    },
+    '&.has-icon.has-children': {
+      padding: '2px 6px 2px 4px',
+    },
+  },
+};
+
 const BadgeTheme = {
   baseStyle,
   variants: {
     bold: getVariant,
     subtle: getVariant,
   },
+  sizes,
   defaultProps: {
     variant: 'subtle',
     colorScheme: 'neutral',
+    size: 'xs',
   },
 };
 

package/src/Components/Badge/Badge.tsx

@@ -11,22 +11,33 @@ export type BadgeColorScheme =
   | 'progress'
   | 'orange'
   | 'turquoise';
+
 export interface BadgeProps extends ChakraBadgeProps {
   children?: string | number;
   colorScheme?: BadgeColorScheme;
   iconName?: TypeIconName;
   variant?: 'bold' | 'subtle';
+  size?: 'xs' | 'xxs';
 }
 
 /**
  * Badges are used to highlight an item's status for quick recognition.
  */
 const Badge = forwardRef<BadgeProps, 'span'>((props, ref) => {
-  const { children, iconName, ...rest } = props;
+  const { children, iconName, size = 'xs', className, ...rest } = props;
+
+  const hasIcon = !!iconName;
+  const hasChildren = !!children;
+  const isSingleChar = hasChildren && String(children).length === 1;
+
+  const classNames = [className, hasIcon && 'has-icon', hasChildren && 'has-children', isSingleChar && 'single-char']
+    .filter(Boolean)
+    .join(' ');
+
   return (
-    <ChakraBadge {...rest} ref={ref} paddingInlineStart={iconName ? '4' : '8'} paddingInlineEnd={children ? '8' : '4'}>
-      {!!iconName && <Icon size="16" name={iconName} />}
-      {!!children && (
+    <ChakraBadge {...rest} size={size} ref={ref} className={classNames || undefined}>
+      {hasIcon && <Icon size="16" name={iconName} />}
+      {hasChildren && (
         <Text hasEllipsis as="span">
           {children}
         </Text>

package/src/Components/Filter/Filter.storyData.ts

@@ -94,7 +94,7 @@ export const FILTER_STORY_DATA: FilterData = {
         }, 2000);
       });
     },
-    options: ['default 1', 'default 2', 'default 3'],
+    options: ['default 1', 'default 2', 'test case with a very long name that might overflow'],
     type: 'tag',
   },
   workflow: {

package/src/Components/Filter/Mobile/Filter.tsx

@@ -1,3 +1,4 @@
+import Divider from '../../Divider/Divider';
 import Badge from '../../Badge/Badge';
 import Text from '../../Text/Text';
 import Button from '../../Button/Button';
@@ -6,12 +7,29 @@ import { useFilterContext } from '../Filter.context';
 import { FilterProps } from '../Filter.types';
 import FilterDrawer from './FilterDrawer';
 import FilterForm from './FilterForm';
+import FilterSearch from './FilterSearch';
+
+const Filter = (props: FilterProps) => {
+  const {
+    data: initialData,
+    defaultState,
+    filtersDependOn,
+    isLoading,
+    isMobile,
+    onChange,
+    searchTooltip,
+    showAdd = true,
+    showFilterIcon = true,
+    showClearFilters = true,
+    showSearch,
+    ...rest
+  } = props;
 
-const Filter = ({ isLoading, showAdd = true }: FilterProps) => {
   const {
     data,
     isPopoverOpen,
     onClearFilters,
+    onFilterChange,
     selectedCategory,
     setSelectedCategory,
     setPopoverOpen,
@@ -20,14 +38,14 @@ const Filter = ({ isLoading, showAdd = true }: FilterProps) => {
   } = useFilterContext();
 
   const isAllOptionForSwitch = (category: string) => {
-    return data[category].type === 'switch' && state[category]?.[0] === 'all';
+    return data[category]?.type === 'switch' && state[category]?.[0] === 'all';
   };
 
   const count = Object.entries(state).filter(([name, item]) => item?.length > 0 && !isAllOptionForSwitch(name)).length;
 
   return (
-    <>
-      <Box alignItems="center" display="flex" justifyContent="space-between">
+    <Box display="flex" flexDirection="column" {...rest}>
+      <Box alignItems="center" display="flex" justifyContent="space-between" padding="12">
         <Button leftIconName="Filter" onClick={() => setPopoverOpen(true)} size="sm" variant="secondary">
           <Text alignItems="center" display="flex" gap="8">
             Filters
@@ -49,13 +67,20 @@ const Filter = ({ isLoading, showAdd = true }: FilterProps) => {
           </Button>
         )}
       </Box>
+      {showSearch && (
+        <>
+          <Divider color="border/minimal" />
+          <FilterSearch onChange={onFilterChange} value={state.search?.length ? state.search[0] : ''} />
+          <Divider color="border/minimal" />
+        </>
+      )}
       <FilterDrawer isOpen={isPopoverOpen} onClose={() => setPopoverOpen(false)} showAdd={showAdd} />
       <FilterForm
         isOpen={Boolean(selectedCategory)}
         onClose={() => setSelectedCategory(undefined)}
         selectedCategory={selectedCategory || ''}
       />
-    </>
+    </Box>
   );
 };
 

package/src/Components/Filter/Mobile/FilterForm.tsx

@@ -97,8 +97,8 @@ const FilterForm = ({ isOpen, onClose, selectedCategory }: FilterFormProps) => {
       bodyPadding="0"
       bodyProps={{ overflowY: 'auto' }}
       bodyRef={bodyRef}
-      contentProps={{ zIndex: 'dialog', top: '0' }}
-      headerPadding={16}
+      contentProps={{ gap: '0', zIndex: 'dialog', top: '0' }}
+      headerPadding="12"
       hideCloseButton
       isOpen={isOpen}
       maxWidth="100%"
@@ -118,7 +118,7 @@ const FilterForm = ({ isOpen, onClose, selectedCategory }: FilterFormProps) => {
             <Text as="h6" color="text/tertiary" textStyle="heading/h6">
               Filter
             </Text>
-            <Text as="h3" color="text/primary" textStyle="heading/mobile/h3">
+            <Text as="h3" color="text/primary" textStyle="heading/mobile/h3" textTransform="initial">
               {name}
             </Text>
           </Box>
@@ -162,21 +162,20 @@ const FilterForm = ({ isOpen, onClose, selectedCategory }: FilterFormProps) => {
         ) : null
       }
     >
-      <Box display="flex" flexDirection="column" gap="16">
+      <Box display="flex" flexDirection="column" gap="8">
         <Box
           backgroundColor="background/primary"
           display="flex"
           flexDirection="column"
           gap="8"
-          marginBottom="8"
           position="sticky"
           top="0"
         >
           {(withSearch || isAsync) && (
             <>
-              <Divider />
+              <Divider color="border/minimal" />
               <SearchInput
-                marginInline="12"
+                marginInline="8"
                 onChange={onSearchChange}
                 placeholder="Search for options"
                 value={searchValue}
@@ -184,7 +183,7 @@ const FilterForm = ({ isOpen, onClose, selectedCategory }: FilterFormProps) => {
               />
             </>
           )}
-          <Divider />
+          <Divider color="border/minimal" />
         </Box>
         <Box display="flex" flexDirection="column" gap="8">
           {isLoading && (

package/src/Components/Filter/Mobile/FilterItem.tsx

@@ -4,6 +4,7 @@ import FormLabel from '../../Form/FormLabel';
 import Button from '../../Button/Button';
 import Box from '../../Box/Box';
 import Icon from '../../Icon/Icon';
+import Text from '../../Text/Text';
 import IconButton from '../../IconButton/IconButton';
 import { useFilterContext } from '../Filter.context';
 import { getDateRangeLabel, getOptionLabel } from '../Filter.utils';
@@ -59,7 +60,9 @@ const FilterItem = ({ category }: FilterItemProps) => {
             variant="secondary"
             width="100%"
           >
-            {getText()}
+            <Text overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" width="100%" textAlign="left" minW="0">
+              {getText()}
+            </Text>
           </Button>
           <IconButton
             aria-label="Clear"
@@ -88,7 +91,9 @@ const FilterItem = ({ category }: FilterItemProps) => {
               {getText()}
             </Box>
           ) : (
-            getText()
+            <Text overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap" minW="0">
+              {getText()}
+            </Text>
           )}
         </Button>
       )}

package/src/Components/Filter/Mobile/FilterSearch.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { InputProps } from 'chakra-ui-2--react';
+import { useDebounce } from '../../../utils/utils';
+import SearchInput from '../../SearchInput/SearchInput';
+import { FilterValue } from '../Filter.types';
+
+export interface FilterSearchProps extends Omit<InputProps, 'onChange' | 'value'> {
+  onChange: (category: string, selected: FilterValue) => void;
+  value: string;
+}
+
+const FilterSearch = (props: FilterSearchProps) => {
+  const { onChange, value } = props;
+
+  const [searchValue, setSearchValue] = useState(value);
+
+  const onInputChange = (newSearchValue: string) => {
+    setSearchValue(newSearchValue);
+  };
+
+  const debouncedSearchValue = useDebounce<string>(searchValue, 500);
+
+  useEffect(() => {
+    onChange('search', debouncedSearchValue.length ? [debouncedSearchValue] : []);
+  }, [debouncedSearchValue]);
+
+  useEffect(() => {
+    setSearchValue(value);
+  }, [value]);
+
+  return (
+    <SearchInput onChange={onInputChange} paddingBlock="4" placeholder="Search" value={searchValue} variant="mobile" />
+  );
+};
+
+export default FilterSearch;

package/src/Components/Icons/16x16/BuildEnvSetup.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, Icon, IconProps } from 'chakra-ui-2--react';
+
+const BuildEnvSetup = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.3721 6.71387C12.9165 6.88799 13.4161 7.16252 13.8486 7.5166L14.0918 7.71484L13.8047 8.91211C13.9455 9.10106 14.0663 9.3049 14.167 9.52051L15.3682 9.87891L15.4238 10.1797C15.4725 10.4434 15.5 10.7176 15.5 11C15.5 11.281 15.4735 11.5549 15.4248 11.8193L15.3691 12.1211L14.168 12.4756C14.0672 12.692 13.9448 12.8954 13.8037 13.085L14.0918 14.2842L13.8486 14.4824C13.4164 14.8364 12.9171 15.1118 12.3721 15.2861L12.0898 15.376L11.876 15.1719L11.1621 14.4951L11 14.5C10.8755 14.5 10.7532 14.4913 10.6328 14.4785L9.96094 15.1162L9.73535 15.3291L9.44434 15.2217C8.88338 15.0149 8.37465 14.7011 7.94434 14.3027L7.72949 14.1035L8.03027 12.8477C7.97055 12.7524 7.91507 12.6537 7.86426 12.5518L6.93652 12.2764L6.64844 12.1904L6.58887 11.8955C6.53026 11.6054 6.5 11.3058 6.5 11C6.5 10.6938 6.52983 10.3929 6.58887 10.1016L6.64844 9.80762L7.86523 9.44531C7.91585 9.34408 7.97091 9.246 8.03027 9.15137L7.79785 8.17871L7.72949 7.89453L7.94434 7.69531C8.37475 7.29715 8.88402 6.98386 9.44434 6.77734L9.73535 6.66992L9.96094 6.88281L10.6328 7.51953C10.7537 7.50693 10.8762 7.5 11 7.5L11.1602 7.50391L12.0908 6.62402L12.3721 6.71387ZM11 9.75C10.3097 9.75006 9.75 10.3097 9.75 11C9.75 11.6903 10.3097 12.2499 11 12.25C11.6904 12.25 12.25 11.6904 12.25 11C12.25 10.3096 11.6904 9.75 11 9.75Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13.5 1C14.3284 1 15 1.67157 15 2.5V7.23047C14.57 6.77408 14.0635 6.39196 13.5 6.10352V5.25H2.5V12H5.59473C5.69238 12.5309 5.8651 13.0343 6.10352 13.5H2.5C1.67157 13.5 1 12.8284 1 12V2.5C1 1.67157 1.67157 1 2.5 1H13.5ZM2.5 3.75H13.5V2.5H2.5V3.75Z"
+      fill="currentColor"
+    />
+    <path
+      d="M6.45801 7.89746C6.04014 8.50802 5.74276 9.20722 5.59863 9.96094L4.53027 11.0303L3.46973 9.96973L4.93945 8.5L3.46973 7.03027L4.53027 5.96973L6.45801 7.89746Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default BuildEnvSetup;

package/src/Components/Icons/16x16/FolderEmpty.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, Icon, IconProps } from 'chakra-ui-2--react';
+
+const FolderEmpty = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.37868 2.5C6.7765 2.5 7.15804 2.65804 7.43934 2.93934L8 3.5H13.5C14.3284 3.5 15 4.17157 15 5V12C15 12.8284 14.3284 13.5 13.5 13.5H2.5C1.67157 13.5 1 12.8284 1 12V4C1 3.17157 1.67157 2.5 2.5 2.5H6.37868ZM7.37868 5L6.37868 4H2.5V12H13.5V5L7.37868 5Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default FolderEmpty;

package/src/Components/Icons/16x16/index.ts

@@ -46,6 +46,7 @@ export { default as Bug } from './Bug';
 export { default as Build } from './Build';
 export { default as BuildCache } from './BuildCache';
 export { default as BuildCacheSolid } from './BuildCacheSolid';
+export { default as BuildEnvSetup } from './BuildEnvSetup';
 export { default as AbortCircle } from './AbortCircle';
 export { default as AbortCircleFilled } from './AbortCircleFilled';
 export { default as CrossCircleFilled } from './CrossCircleFilled';
@@ -108,6 +109,7 @@ export { default as Filter } from './Filter';
 export { default as Flag } from './Flag';
 export { default as Flutter } from './Flutter';
 export { default as Folder } from './Folder';
+export { default as FolderEmpty } from './FolderEmpty';
 export { default as Fullscreen } from './Fullscreen';
 export { default as FullscreenExit } from './FullscreenExit';
 export { default as Gauge } from './Gauge';

package/src/Components/Icons/24x24/BuildEnvSetup.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, Icon, IconProps } from 'chakra-ui-2--react';
+
+const BuildEnvSetup = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.165 12.2578C19.9325 12.5013 20.6274 12.9074 21.208 13.4375L21.4258 13.6367L21.3574 13.9238L21.0566 15.1729C21.1424 15.3038 21.2209 15.4397 21.292 15.5801L22.8076 16.0303L22.8711 16.3184C22.9543 16.6981 23 17.0936 23 17.5C23 17.9061 22.954 18.3006 22.8711 18.6797L22.8086 18.9688L21.292 19.418C21.2212 19.5581 21.1432 19.6942 21.0576 19.8252L21.4258 21.3623L21.208 21.5615C20.6276 22.0916 19.933 22.4985 19.165 22.7422L18.8838 22.8311L18.6699 22.6289L17.7344 21.7422L17.501 21.75C17.4213 21.75 17.3428 21.7468 17.2656 21.7422L16.3311 22.6289L16.1172 22.8311L15.8359 22.7422C15.068 22.4985 14.3728 22.0921 13.792 21.5615L13.5742 21.3623L13.9414 19.8242C13.856 19.6937 13.7779 19.558 13.707 19.418L12.1914 18.9678L12.1289 18.6787C12.0462 18.3002 12 17.9059 12 17.5C12 17.0939 12.046 16.6993 12.1289 16.3203L12.1914 16.0312L12.4746 15.9473L13.707 15.5801C13.7779 15.4402 13.856 15.3044 13.9414 15.1738L13.5742 13.6367L13.792 13.4375C14.3729 12.9069 15.0685 12.5013 15.8359 12.2578L16.1172 12.1689L17.2656 13.2559C17.3433 13.2515 17.4218 13.25 17.501 13.25C17.5795 13.25 17.6574 13.2515 17.7344 13.2559L18.8838 12.1689L19.165 12.2578ZM17.501 16C16.6725 16 16.001 16.6716 16.001 17.5C16.001 18.3284 16.6725 19 17.501 19C18.3292 18.9997 19.001 18.3283 19.001 17.5C19.001 16.6717 18.3292 16.0003 17.501 16Z"
+      fill="currentColor"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M20 3C21.1046 3 22 3.89543 22 5V12.8115C21.4243 12.2588 20.748 11.81 20 11.498V9H4V19H11.1758C11.3461 19.7207 11.6364 20.3943 12.0244 21H4C2.89543 21 2 20.1046 2 19V5C2 3.89543 2.89543 3 4 3H20ZM4 7H20V5H4V7Z"
+      fill="currentColor"
+    />
+    <path
+      d="M11.4141 14L7.70703 17.707L6.29297 16.293L8.58594 14L6.29297 11.707L7.70703 10.293L11.4141 14Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default BuildEnvSetup;

package/src/Components/Icons/24x24/FolderEmpty.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, Icon, IconProps } from 'chakra-ui-2--react';
+
+const FolderEmpty = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10.5858 4.58579C10.2107 4.21071 9.70201 4 9.17157 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V8C22 6.89543 21.1046 6 20 6H12L10.5858 4.58579ZM4 6V18H20V8H11.1716L9.17157 6H4Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default FolderEmpty;

package/src/Components/Icons/24x24/index.ts

@@ -46,6 +46,7 @@ export { default as Bug } from './Bug';
 export { default as Build } from './Build';
 export { default as BuildCache } from './BuildCache';
 export { default as BuildCacheSolid } from './BuildCacheSolid';
+export { default as BuildEnvSetup } from './BuildEnvSetup';
 export { default as AbortCircle } from './AbortCircle';
 export { default as AbortCircleFilled } from './AbortCircleFilled';
 export { default as DoubleCircle } from './DoubleCircle';
@@ -106,6 +107,7 @@ export { default as Filter } from './Filter';
 export { default as Flag } from './Flag';
 export { default as Flutter } from './Flutter';
 export { default as Folder } from './Folder';
+export { default as FolderEmpty } from './FolderEmpty';
 export { default as Fullscreen } from './Fullscreen';
 export { default as FullscreenExit } from './FullscreenExit';
 export { default as Gauge } from './Gauge';

package/src/Components/TreeView/TreeView.context.tsx

@@ -3,6 +3,7 @@ import { useControllableState } from 'chakra-ui-2--react';
 import { NodeCallback, TreeViewAction, TreeViewState } from './TreeView.types';
 
 const TreeViewContext = createContext<TreeViewState & TreeViewAction>({
+  variant: undefined,
   selectedId: undefined,
   expandedIds: new Set<string>(),
   disabledIds: new Set<string>(),
@@ -10,7 +11,7 @@ const TreeViewContext = createContext<TreeViewState & TreeViewAction>({
   onExpandedChange: () => undefined,
 });
 
-export type TreeViewContenxtProviderProps = PropsWithChildren<
+export type TreeViewContextProviderProps = PropsWithChildren<
   Partial<TreeViewState> &
     Partial<TreeViewAction> & {
       defaultSelectedId?: string;
@@ -19,6 +20,7 @@ export type TreeViewContenxtProviderProps = PropsWithChildren<
     }
 >;
 export const TreeViewContextProvider = ({
+  variant = 'navigation',
   selectedId: controlledSelectedId,
   defaultSelectedId,
   expandedIds: controlledExpandedIds,
@@ -28,7 +30,7 @@ export const TreeViewContextProvider = ({
   onSelectionChange,
   onExpandedChange,
   children,
-}: TreeViewContenxtProviderProps) => {
+}: TreeViewContextProviderProps) => {
   const [selectedId, setSelectedId] = useControllableState({
     value: controlledSelectedId,
     defaultValue: defaultSelectedId,
@@ -71,8 +73,15 @@ export const TreeViewContextProvider = ({
   );
 
   const contextValue = useMemo(
-    () => ({ selectedId, expandedIds, disabledIds, onSelectionChange: handleSelect, onExpandedChange: handleExpand }),
-    [selectedId, expandedIds, disabledIds, handleSelect, handleExpand],
+    () => ({
+      variant,
+      selectedId,
+      expandedIds,
+      disabledIds,
+      onSelectionChange: handleSelect,
+      onExpandedChange: handleExpand,
+    }),
+    [variant, selectedId, expandedIds, disabledIds, handleSelect, handleExpand],
   );
 
   return <TreeViewContext.Provider value={contextValue}>{children}</TreeViewContext.Provider>;

package/src/Components/TreeView/TreeView.theme.ts

@@ -1,28 +1,63 @@
 import { createMultiStyleConfigHelpers } from 'chakra-ui-2--styled-system';
 
 const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers([
+  'listItem',
   'icon',
+  'iconWrapper',
   'button',
   'buttonContent',
   'textBlock',
   'suffixBlock',
   'selectionIndicator',
+  'collapseContent',
+  'hoverActionsWrapper',
+  'hoverActionButton',
+  'leafBadge',
 ]);
 
 const baseStyle = definePartsStyle({
+  listItem: {
+    overflow: 'hidden',
+  },
   icon: {
     marginTop: '10px',
     marginBottom: '2px',
     color: 'icon/primary',
   },
+  leafBadge: {
+    marginTop: '10px',
+    marginBottom: '2px',
+  },
+  iconWrapper: {
+    position: 'relative',
+    display: 'flex',
+    alignSelf: 'flex-start',
+    zIndex: 1,
+    '&.show-connector::after': {
+      content: '""',
+      position: 'absolute',
+      left: '50%',
+      top: '100%',
+      bottom: '-100px',
+      width: '1px',
+      backgroundColor: 'border/regular',
+    },
+  },
   button: {
     pos: 'relative',
     py: '0',
     px: '16',
     pl: 'calc(16px + 24px * var(--level))',
     w: '100%',
+    overflow: 'hidden',
     _hover: {
       bgColor: 'background/secondary',
+      '& .hover-actions': {
+        display: 'flex',
+      },
+      '& .hide-on-hover': {
+        display: 'none',
+      },
     },
     _active: {
       bgColor: 'background/tertiary',
@@ -37,6 +72,15 @@ const baseStyle = definePartsStyle({
         bgColor: 'background/selected-hover',
       },
     },
+    '&.show-ancestor-connectors::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: '24px',
+      width: 'calc(var(--level) * 24px)',
+      zIndex: 1,
+    },
   },
   buttonContent: {
     gap: '8',
@@ -63,9 +107,17 @@ const baseStyle = definePartsStyle({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'flex-end',
-    paddingTop: '8',
     paddingLeft: '16',
     gap: '8',
+    '& > .hide-on-hover': {
+      display: 'flex',
+    },
+    'button:hover > div > div > &': {
+      pt: '0',
+    },
+    'button:hover > div > div > & > .hide-on-hover': {
+      display: 'none',
+    },
   },
   selectionIndicator: {
     width: '3px',
@@ -75,6 +127,23 @@ const baseStyle = definePartsStyle({
     bgColor: 'border/selected',
     borderLeftRadius: '2',
   },
+  collapseContent: {
+    position: 'relative',
+    '&.show-connector::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 'calc(16px + var(--level) * 24px + 8px)',
+      width: '1px',
+      backgroundColor: 'border/regular',
+      zIndex: 1,
+    },
+  },
+  hoverActionsWrapper: {
+    display: 'none',
+    alignItems: 'center',
+  },
 });
 
 const TreeViewTheme = defineMultiStyleConfig({

package/src/Components/TreeView/TreeView.tsx

@@ -1,81 +1,36 @@
 import { PropsWithChildren } from 'react';
-import { TreeViewContenxtProviderProps, TreeViewContextProvider } from './TreeView.context';
+import { TreeViewContextProviderProps, TreeViewContextProvider } from './TreeView.context';
 import TreeViewGroup from './TreeViewGroup';
 import TreeViewNode from './TreeViewNode';
-import { NodeData } from './TreeView.types';
+import { NodeData, TreeViewVariant, BranchNodeData, LeafNodeData } from './TreeView.types';
 
-const TreeViewLeaf = (props: Omit<NodeData, 'type' | 'children'>) => (
+const TreeViewLeaf = (props: Omit<LeafNodeData, 'type' | 'children'>) => (
   <TreeViewNode type="leaf" level={-1} indexPath={[]} titlePath={[]} {...props} />
 );
-const TreeViewBranch = (props: PropsWithChildren<Omit<NodeData, 'type' | 'children'>>) => (
+const TreeViewBranch = (props: PropsWithChildren<Omit<BranchNodeData, 'type' | 'children'>>) => (
   <TreeViewNode type="branch" level={-1} indexPath={[]} titlePath={[]} {...props} />
 );
 
 const renderTreeNodes = (nodes: NodeData[]) => {
   return nodes.map((node) => {
-    const {
-      id,
-      type,
-      title,
-      description,
-      iconName,
-      iconColor,
-      label,
-      labelIconName,
-      labelIconColor,
-      children,
-      onClick,
-    } = node;
+    const { id, type, children, ...rest } = node;
 
     if (type === 'branch') {
       return (
-        <TreeViewNode
-          key={id}
-          id={id}
-          type="branch"
-          title={title}
-          description={description}
-          iconName={iconName}
-          iconColor={iconColor}
-          label={label}
-          labelIconName={labelIconName}
-          labelIconColor={labelIconColor}
-          // Thes props will be overridden by the TreeViewGroup
-          level={-1}
-          indexPath={[]}
-          titlePath={[]}
-          onClick={onClick}
-        >
+        <TreeViewNode key={id} id={id} type="branch" level={-1} indexPath={[]} titlePath={[]} {...rest}>
           {children && renderTreeNodes(children)}
         </TreeViewNode>
       );
     }
 
-    return (
-      <TreeViewNode
-        key={id}
-        id={id}
-        type="leaf"
-        title={title}
-        description={description}
-        iconName={iconName}
-        iconColor={iconColor}
-        label={label}
-        labelIconName={labelIconName}
-        labelIconColor={labelIconColor}
-        // Thes props will be overridden by the TreeViewGroup
-        level={-1}
-        indexPath={[]}
-        titlePath={[]}
-        onClick={onClick}
-      />
-    );
+    return <TreeViewNode key={id} id={id} type="leaf" level={-1} indexPath={[]} titlePath={[]} {...rest} />;
   });
 };
 
-export type TreeViewProps = TreeViewContenxtProviderProps & {
+export type TreeViewProps = TreeViewContextProviderProps & {
   label: string;
   data?: NodeData[];
+  variant?: TreeViewVariant;
 };
 
 const TreeView = ({ data, label, children, ...rest }: PropsWithChildren<TreeViewProps>) => {

package/src/Components/TreeView/TreeView.types.ts

@@ -1,21 +1,87 @@
+import { PropsWithChildren } from 'react';
+import { UseFloatingProps } from '@floating-ui/react-dom-interactions';
 import { TypeIconName } from '../Icon/Icon';
+import { BadgeColorScheme, BadgeProps } from '../Badge/Badge';
 
 export type NodeType = 'branch' | 'leaf';
 
-export type NodeData = {
+export type TreeViewVariant = 'navigation' | 'files';
+
+export type HoverControlButton = {
+  iconName: TypeIconName;
+  label: string;
+  isDanger?: boolean;
+  onClick: (e: React.MouseEvent) => void;
+};
+
+type LeafIndicator =
+  | {
+      iconName?: TypeIconName;
+      iconColor?: string;
+      badgeLabel?: never;
+      badgeVariant?: never;
+      badgeColorScheme?: never;
+      badgeTooltip?: never;
+    }
+  | {
+      iconName?: never;
+      iconColor?: never;
+      badgeLabel?: string;
+      badgeVariant?: BadgeProps['variant'];
+      badgeColorScheme?: BadgeColorScheme;
+      badgeTooltip?: {
+        label: string;
+        placement?: UseFloatingProps['placement'];
+      };
+    };
+
+type NodeBase = {
   id: string;
-  type: NodeType;
   title: string;
   description?: string;
-  iconName?: TypeIconName;
-  iconColor?: string;
+  hasWarning?: boolean;
   label?: string;
   labelIconName?: TypeIconName;
   labelIconColor?: string;
-  children?: NodeData[];
   onClick?: VoidFunction;
+  hoverActions?: [HoverControlButton] | [HoverControlButton, HoverControlButton];
+  children?: NodeData[];
 };
 
+type LeafNodeData = NodeBase & { type: 'leaf' } & LeafIndicator;
+
+type BranchNodeData = NodeBase & {
+  type: 'branch';
+  iconName?: TypeIconName;
+  iconColor?: string;
+  branchIconTooltip?: {
+    label: string;
+    placement?: UseFloatingProps['placement'];
+  };
+};
+
+export type NodeData = LeafNodeData | BranchNodeData;
+export type { LeafNodeData, BranchNodeData };
+
+type AllNodeProps = NodeBase & {
+  type: NodeType;
+  iconName?: TypeIconName;
+  iconColor?: string;
+  badgeLabel?: string;
+  badgeVariant?: BadgeProps['variant'];
+  badgeColorScheme?: BadgeColorScheme;
+  badgeTooltip?: {
+    label: string;
+    placement?: UseFloatingProps['placement'];
+  };
+  branchIconTooltip?: {
+    label: string;
+    placement?: UseFloatingProps['placement'];
+  };
+};
+
+export type TreeViewNodeProps = PropsWithChildren<Omit<AllNodeProps, 'children'> & NodePath>;
+
 export type NodePath = {
   level: number;
   indexPath: number[];
@@ -32,6 +98,7 @@ export type NodeState = {
 };
 
 export type TreeViewState = {
+  variant?: TreeViewVariant;
   selectedId?: string;
   expandedIds: Set<string>;
   disabledIds: Set<string>;

package/src/Components/TreeView/TreeViewNode.tsx

@@ -1,12 +1,15 @@
-import { memo, PropsWithChildren, useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo, MouseEvent } from 'react';
 import { useMultiStyleConfig } from 'chakra-ui-2--react';
 import Icon from '../Icon/Icon';
+import Badge from '../Badge/Badge';
 import Box from '../Box/Box';
 import Text from '../Text/Text';
 import Collapse from '../Collapse/Collapse';
+import ControlButton from '../ControlButton/ControlButton';
+import Tooltip from '../Tooltip/Tooltip';
 import TreeViewGroup from './TreeViewGroup';
 import { useTreeViewContext } from './TreeView.context';
-import { NodeData, NodePath } from './TreeView.types';
+import { HoverControlButton, TreeViewNodeProps } from './TreeView.types';
 
 type TreeViewNodeContentProps = TreeViewNodeProps & {
   isBranch: boolean;
@@ -22,11 +25,18 @@ const TreeViewNodeContent = memo(
     id,
     title,
     description,
+    hasWarning,
     iconName,
     iconColor,
+    badgeLabel,
+    badgeVariant,
+    badgeColorScheme,
+    badgeTooltip,
     label,
     labelIconName,
     labelIconColor,
+    hoverActions,
+    branchIconTooltip,
     // NodePath
     level,
     indexPath,
@@ -40,6 +50,29 @@ const TreeViewNodeContent = memo(
     children,
   }: TreeViewNodeContentProps) => {
     const styles = useMultiStyleConfig('TreeView', {});
+    const { variant } = useTreeViewContext();
+
+    const isFilesVariant = variant === 'files';
+    const hasChildren = Boolean(children);
+    const isSelectable = !(isBranch && !hasChildren);
+    const isEmptyBranch = isBranch && !hasChildren;
+    const chevronIcon = isExpanded ? 'ChevronDown' : 'ChevronRight';
+    const primaryIconName = isFilesVariant ? 'FolderEmpty' : chevronIcon;
+
+    const showAncestorConnectors = isFilesVariant && level > 1;
+    const showOwnConnector = isFilesVariant && isBranch && isExpanded;
+
+    const hasHoverActions = hoverActions && hoverActions.length > 0;
+    const hasLabelContent = label || labelIconName || hasWarning;
+
+    const showIcon = !isBranch && iconName;
+    const showBadge = !isBranch && !iconName && badgeLabel;
+
+    const handleActionClick = useCallback((e: MouseEvent, action: HoverControlButton) => {
+      e.stopPropagation();
+      e.preventDefault();
+      action.onClick(e);
+    }, []);
 
     return (
       <Box
@@ -47,27 +80,59 @@ const TreeViewNodeContent = memo(
         id={id}
         role="treeitem"
         aria-level={level}
-        aria-disabled={isDisabled}
+        aria-disabled={isDisabled || !isSelectable}
         aria-selected={isSelected}
-        {...(isBranch ? { 'aria-expanded': isExpanded } : {})}
+        {...(isBranch ? { 'aria-expanded': hasChildren ? isExpanded : undefined } : {})}
+        sx={styles.listItem}
       >
         <Box
           as="button"
-          tabIndex={isSelected ? 0 : -1}
-          data-selected={isSelected ? '' : undefined}
-          sx={{ '--level': `${level - 1}`, ...styles.button }}
+          tabIndex={!isSelectable || !isSelected ? -1 : 0}
+          data-selected={isSelectable && isSelected ? '' : undefined}
+          className={`${showAncestorConnectors ? 'show-ancestor-connectors' : ''}`}
+          sx={{
+            '--level': `${level - 1}`,
+            '--connector-color': 'var(--chakra-colors-border-regular)',
+            cursor: isEmptyBranch ? 'default' : 'pointer',
+            ...styles.button,
+          }}
           onClick={onClick}
         >
           <Box sx={{ ...styles.buttonContent }}>
-            {isBranch && <Icon size="16" name={isExpanded ? 'ChevronDown' : 'ChevronRight'} sx={styles.icon} />}
+            {isBranch && (
+              <Box sx={styles.iconWrapper} className={showOwnConnector ? 'show-connector' : ''}>
+                {isFilesVariant && isEmptyBranch ? (
+                  <Tooltip
+                    label={branchIconTooltip?.label || 'Empty branch'}
+                    placement={branchIconTooltip?.placement || 'top'}
+                  >
+                    <Icon size="16" name={primaryIconName} sx={styles.icon} />
+                  </Tooltip>
+                ) : (
+                  <Icon size="16" name={primaryIconName} sx={styles.icon} />
+                )}
+              </Box>
+            )}
             <Box sx={styles.borderBox}>
-              {iconName && (
+              {showIcon && (
                 <Icon
                   size="16"
                   name={iconName}
-                  sx={{ ...styles.icon, ...{ color: iconColor || (isSelected ? 'icon/primary' : 'icon/secondary') } }}
+                  sx={{
+                    ...styles.icon,
+                    color: iconColor || (isSelected ? 'icon/primary' : 'icon/secondary'),
+                  }}
                 />
               )}
+
+              {showBadge && (
+                <Tooltip shouldWrapChildren label={badgeTooltip?.label} placement={badgeTooltip?.placement || 'top'}>
+                  <Badge variant={badgeVariant} colorScheme={badgeColorScheme} size="xxs" sx={styles.leafBadge}>
+                    {badgeLabel}
+                  </Badge>
+                </Tooltip>
+              )}
+
               <Box sx={styles.textBlock}>
                 <Text fontWeight={isExpanded ? 'semibold' : 'normal'} overflowWrap="break-word" wordBreak="break-word">
                   {title}
@@ -83,25 +148,60 @@ const TreeViewNodeContent = memo(
                   </Text>
                 )}
               </Box>
-              {(label || labelIconName) && (
+
+              {(hasLabelContent || hasHoverActions) && (
                 <Box sx={styles.suffixBlock} color={isSelected || isExpanded ? 'text/primary' : 'text/secondary'}>
-                  {labelIconName && <Icon name={labelIconName} size="16" color={labelIconColor} />}
-                  {label && (
-                    <Text textStyle="body/md/regular" textAlign="right">
-                      {label}
-                    </Text>
+                  {hasHoverActions && (
+                    <Box sx={styles.hoverActionsWrapper} className="hover-actions">
+                      {hoverActions.map((action, index) => (
+                        <ControlButton
+                          /* eslint-disable-next-line react/no-array-index-key */
+                          key={index}
+                          aria-label={action.label}
+                          iconName={action.iconName}
+                          isDanger={action.isDanger}
+                          onClick={(e: MouseEvent) => handleActionClick(e, action)}
+                          size="xs"
+                        />
+                      ))}
+                    </Box>
+                  )}
+                  {hasLabelContent && (
+                    <Box
+                      display="flex"
+                      alignItems="center"
+                      gap="8"
+                      pt="8px"
+                      className={hasHoverActions ? 'hide-on-hover' : undefined}
+                    >
+                      {hasWarning && <Icon name="WarningYellow" size="16" />}
+                      {labelIconName && <Icon name={labelIconName} size="16" color={labelIconColor} />}
+                      {label && (
+                        <Text textStyle="body/md/regular" textAlign="right">
+                          {label}
+                        </Text>
+                      )}
+                    </Box>
                   )}
                 </Box>
               )}
             </Box>
-            {isSelected && <Box sx={styles.selectionIndicator} />}
+            {!isFilesVariant && isSelected && <Box sx={styles.selectionIndicator} />}
           </Box>
         </Box>
         {isBranch && children && (
           <Collapse in={isExpanded} unmountOnExit>
-            <TreeViewGroup role="group" level={level + 1} indexPath={indexPath} titlePath={titlePath}>
-              {children}
-            </TreeViewGroup>
+            <Box
+              className={showOwnConnector ? 'show-connector' : undefined}
+              sx={{
+                '--level': `${level - 1}`,
+                ...styles.collapseContent,
+              }}
+            >
+              <TreeViewGroup role="group" level={level + 1} indexPath={indexPath} titlePath={titlePath}>
+                {children}
+              </TreeViewGroup>
+            </Box>
           </Collapse>
         )}
       </Box>
@@ -109,19 +209,24 @@ const TreeViewNodeContent = memo(
   },
 );
 
-export type TreeViewNodeProps = PropsWithChildren<Omit<NodeData, 'children'> & NodePath>;
-
 const TreeViewNode = ({
   // NodeData
   id,
   type,
   title,
   description,
+  hasWarning,
   iconName,
   iconColor,
+  badgeLabel,
+  badgeVariant,
+  badgeColorScheme,
+  badgeTooltip,
   label,
   labelIconName,
   labelIconColor,
+  hoverActions,
+  branchIconTooltip,
   onClick,
   // NodePath
   level,
@@ -133,12 +238,14 @@ const TreeViewNode = ({
   const { selectedId, disabledIds, expandedIds, onSelectionChange, onExpandedChange } = useTreeViewContext();
 
   const isBranch = type === 'branch';
+  const hasChildren = Boolean(children);
+  const isSelectable = !(isBranch && !hasChildren);
   const isDisabled = useMemo(() => disabledIds.has(id), [id, disabledIds]);
   const isExpanded = useMemo(() => (isBranch ? expandedIds.has(id) : undefined), [id, isBranch, expandedIds]);
-  const isSelected = useMemo(() => id === selectedId, [id, selectedId]);
+  const isSelected = useMemo(() => (isSelectable ? id === selectedId : false), [id, selectedId, isSelectable]);
 
   const handleClick = useCallback(() => {
-    if (isDisabled) {
+    if (isDisabled || !isSelectable) {
       return;
     }
 
@@ -158,7 +265,7 @@ const TreeViewNode = ({
       });
     }
 
-    if (isBranch) {
+    if (isBranch && hasChildren) {
       onExpandedChange({
         node: {
           id,
@@ -198,11 +305,18 @@ const TreeViewNode = ({
       type={type}
       title={title}
       description={description}
+      hasWarning={hasWarning}
       iconName={iconName}
       iconColor={iconColor}
+      badgeLabel={badgeLabel}
+      badgeVariant={badgeVariant}
+      badgeColorScheme={badgeColorScheme}
+      badgeTooltip={badgeTooltip}
       label={label}
       labelIconName={labelIconName}
       labelIconColor={labelIconColor}
+      hoverActions={hoverActions}
+      branchIconTooltip={branchIconTooltip}
       level={level}
       indexPath={indexPath}
       titlePath={titlePath}