@cyber-harbour/ui 1.0.78 → 2.0.0

package/README.md

@@ -1,73 +1,73 @@
-# Getting Started with Cyber Harbor UI Kit
+# Початок роботи з Cyber Harbor UI Kit
 
-## Development
+## Розробка
 
-### Installation
+### Встановлення
 
 ```bash
 npm install
 ```
 
-### Building the Library
+### Збірка бібліотеки
 
-The library is built using tsup, which provides optimized builds for both ESM and CommonJS formats.
+Бібліотека збирається за допомогою tsup, що забезпечує оптимізовані збірки для форматів ESM та CommonJS.
 
 ```bash
-# Development with watch mode
+# Розробка з режимом відстеження
 npm run dev
 
-# Production build
+# Продакшн збірка
 npm run build
 
-# Build without minification
+# Збірка без мінімізації
 npm run build:dev
 
-# Type checking without build
+# Перевірка типів без збірки
 npm run type-check
 ```
 
-### Build Output
+### Результат збірки
 
-When building the library, the following is generated in the `dist` folder:
+При збірці бібліотеки в папці `dist` генерується наступне:
 
-- ESM modules (`.mjs` files)
-- CommonJS modules (`.js` files)
-- TypeScript declaration files (`.d.ts` and `.d.mts`)
+- ESM модулі (`.mjs` файли)
+- CommonJS модулі (`.js` файли)
+- TypeScript файли декларацій (`.d.ts` та `.d.mts`)
 - Source maps
 
 ### Storybook
 
-You can run Storybook to develop and test components:
+Ви можете запустити Storybook для розробки та тестування компонентів:
 
 ```bash
 npm run storybook
 ```
 
-To build Storybook:
+Для збірки Storybook:
 
 ```bash
 npm run build-storybook
 ```
 
-## Build Optimizations
+## Оптимізації збірки
 
-The project uses various optimizations for efficient building:
+Проект використовує різні оптимізації для ефективної збірки:
 
-### Production Mode
+### Продакшн режим
 
-- Minification of the output files
-- Tree shaking to remove unused code
-- Console logs removal
-- Source maps for debugging
+- Мінімізація вихідних файлів
+- Tree shaking для видалення невикористаного коду
+- Видалення console logs
+- Source maps для налагодження
 
-### Development Mode
+### Режим розробки
 
-- Watch mode for auto-rebuilding on changes
-- Inline source maps for easier debugging
-- No minification for faster builds
-- No type generation for speed
+- Режим відстеження для автоматичної перебудови при змінах
+- Вбудовані source maps для легшого налагодження
+- Без мінімізації для швидшої збірки
+- Без генерації типів для швидкості
 
-## UI Library Switch Tool
+## Інструмент перемикання UI бібліотеки
 
 Цей інструмент дозволяє легко перемикатися між локальною версією UI бібліотеки та версією з NPM.
 
@@ -142,3 +142,113 @@ projects/
 - `dotenv` - для читання змінних середовища (опційно)
 
 Ці пакети автоматично встановлюються разом з UI бібліотекою.
+
+### Усунення несправностей
+
+Відсутній лінк на бібліотеку після першого завантаження. Запустіть
+
+```bash
+npm link
+```
+
+---
+
+# 🔹 Інструкція інтеграції UI-kit у Next.js з Tailwind
+
+Цей UI-kit побудований на **TailwindCSS** і постачається з власною конфігурацією (`tailwind.config.js`).
+Щоб уникнути конфліктів і дозволити кастомізацію у проєкті, потрібно **мерджити** конфіг UI-kit із конфігом Next.js.
+
+---
+
+## 1. Встановіть залежності
+
+У вашому Next.js-проєкті мають бути встановлені:
+
+```bash
+pnpm add tailwindcss postcss autoprefixer
+```
+
+---
+
+## 2. Створіть `tailwind.config.js` у Next.js
+
+У корені вашого Next.js-проєкту створіть файл `tailwind.config.js` і підключіть конфіг із UI-kit.
+Ми будемо мерджити конфіги за допомогою `lodash.merge`:
+
+```bash
+pnpm add lodash.merge
+```
+
+**`tailwind.config.js`**
+
+```js
+const merge = require('lodash.merge');
+const uiKitConfig = require('ui-kit/tailwind.config.js'); // шлях до UI-kit пакета
+
+module.exports = merge({}, uiKitConfig, {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,tsx}',
+    './app/**/*.{js,ts,jsx,tsx}', // якщо використовуєте app router
+    './node_modules/ui-kit/**/*.{js,ts,tsx}', // важливо: UI-kit компоненти
+  ],
+  theme: {
+    extend: {
+      colors: {
+        accent: '#f59e0b', // локальні кольори вашого проєкту
+      },
+    },
+  },
+});
+```
+
+---
+
+## 3. Підключіть Tailwind у глобальні стилі
+
+У вашому Next.js проєкті додайте у `globals.css` (або `app/globals.css`):
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+---
+
+## 4. Використання компонентів із UI-kit
+
+Тепер ви можете імпортувати і використовувати компоненти з UI-kit у будь-яких файлах вашого Next.js-проєкту:
+
+```tsx
+import { Button } from 'ui-kit';
+
+export default function Page() {
+  return (
+    <div className="p-6">
+      <Button variant="primary">Клікни мене</Button>
+    </div>
+  );
+}
+```
+
+---
+
+## 5. Кастомізація теми
+
+Якщо потрібно змінити кольори, spacing чи інші токени —
+додавайте їх у секцію `theme.extend` вашого `tailwind.config.js`.
+
+⚡️ Вони автоматично поєднаються з токенами з UI-kit.
+
+---
+
+✅ У результаті:
+
+- UI-kit і Next.js використовують одну базу токенів
+- ви можете кастомізувати тему локально у проєкті
+- конфліктів у Tailwind-конфігах не буде
+
+---
+
+Хочеш, я під це ще складу **готовий приклад `README.md`** для твого UI-kit (з секціями Install / Setup / Usage), щоб воно виглядало як справжня документація пакета?

package/dist/index.d.mts

@@ -1,16 +1,13 @@
-import * as react from 'react';
-import react__default, { SVGProps, CSSProperties as CSSProperties$1, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
-import * as styled_components from 'styled-components';
 import { CSSProperties, DefaultTheme } from 'styled-components';
 export { ServerStyleSheet, StyleSheetManager } from 'styled-components';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
+import * as react from 'react';
+import react__default, { SVGProps, CSSProperties as CSSProperties$1, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PopoverPosition, PopoverAlign } from 'react-tiny-popover';
 import { IContentLoaderProps } from 'react-content-loader';
 
-declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
-
 interface ThemeProviderProps {
     children: any;
     mode?: 'light' | 'LIGHT' | 'dark' | 'DARK';
@@ -814,19 +811,10 @@ interface RotateRightIconProps extends SVGProps<SVGSVGElement> {
 }
 declare const RotateRightIcon: ({ fill, ...props }: RotateRightIconProps) => react_jsx_runtime.JSX.Element;
 
-interface BurgerMenuIconProps extends SVGProps<SVGSVGElement> {
-    fill?: string;
-}
-declare const BurgerMenuIcon: ({ fill, ...props }: BurgerMenuIconProps) => react_jsx_runtime.JSX.Element;
-
-interface ClockIconProps extends SVGProps<SVGSVGElement> {
-    fill?: string;
-}
-declare const ClockIcon: ({ fill, ...props }: ClockIconProps) => react_jsx_runtime.JSX.Element;
-
 interface SidebarProps {
     defaultCollapsed?: boolean;
     children: any;
+    canGrow: boolean;
 }
 declare const Sidebar: react__default.ForwardRefExoticComponent<SidebarProps & {
     m?: string | number;
@@ -856,6 +844,7 @@ declare const Sidebar: react__default.ForwardRefExoticComponent<SidebarProps & {
 interface SidebarContext {
     collapsed: boolean;
     setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+    canGrow: boolean;
 }
 declare const SidebarContext: react.Context<SidebarContext>;
 
@@ -863,8 +852,6 @@ interface SidebarItemBase {
     active?: boolean;
     icon?: React.ComponentType<SVGProps<SVGSVGElement>>;
     label?: string;
-    height?: number;
-    iconSize?: number;
 }
 interface SidebarItemAnchor {
     href: string;
@@ -876,19 +863,17 @@ interface SidebarItemButton {
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 type SidebarItemProps = SidebarItemBase & (SidebarItemAnchor | SidebarItemButton);
-declare const SidebarItem: ({ active, icon: Icon, label, height, iconSize, ...props }: SidebarItemProps) => react_jsx_runtime.JSX.Element;
+declare const SidebarItem: ({ active, icon: Icon, label, ...props }: SidebarItemProps) => react_jsx_runtime.JSX.Element;
 
 declare const SidebarDelimeter: () => react_jsx_runtime.JSX.Element;
 
-type SectionRole = 'header' | 'footer' | 'content';
 interface SidebarSectionProps {
     grow?: number;
     shrink?: number;
     basis?: CSSProperties['flexBasis'];
     items: React.ReactElement[];
-    role: SectionRole;
 }
-declare const SidebarSection: ({ grow, shrink, basis, items, role }: SidebarSectionProps) => react_jsx_runtime.JSX.Element;
+declare const SidebarSection: ({ grow, shrink, basis, items }: SidebarSectionProps) => react_jsx_runtime.JSX.Element;
 
 type TypographyProps = FabricComponent<{
     style?: CSSProperties$1;
@@ -1026,7 +1011,7 @@ declare const ListMenuSection: ({ title, items }: ListMenuSectionProps) => react
 interface HeaderProps {
     children?: any;
 }
-declare const Header: react.ForwardRefExoticComponent<HeaderProps & react.RefAttributes<HTMLHeadElement>>;
+declare const Header: ({ children }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
 declare const HeaderDelimeter: () => react_jsx_runtime.JSX.Element;
 
@@ -1090,9 +1075,9 @@ interface ContextMenuProps {
 }
 declare const ContextMenu: ({ isOpen, onClickOutside, onClick, anchor, size, disabled, fullWidth, className, positions, align, children, hasBorder, maxHeight, matchAnchorWidth, anchorIcon, }: ContextMenuProps) => react_jsx_runtime.JSX.Element;
 
-interface StyledProps$1 {
+interface StyledProps {
 }
-declare const ContextMenuDelimiter: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps$1>> & string;
+declare const ContextMenuDelimiter: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
 
 declare const useContextMenuControl: () => {
     isOpen: boolean;
@@ -1629,30 +1614,24 @@ declare const ModalHeader: styled_components_dist_types.IStyledComponentBase<"we
 declare const ModalBody: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<ModalChildrenProps | (ModalChildrenProps & react.RefAttributes<react.Component<ModalChildrenProps, any, any>>), StyledFabricComponent<ModalChildrenProps>>> & (string & (Omit<react.ComponentClass<ModalChildrenProps, any>, keyof react.Component<any, {}, any>> | Omit<react.FunctionComponent<ModalChildrenProps>, keyof react.Component<any, {}, any>>));
 declare const ModalFooter: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<ModalChildrenProps | (ModalChildrenProps & react.RefAttributes<react.Component<ModalChildrenProps, any, any>>), StyledFabricComponent<ModalChildrenProps>>> & (string & (Omit<react.ComponentClass<ModalChildrenProps, any>, keyof react.Component<any, {}, any>> | Omit<react.FunctionComponent<ModalChildrenProps>, keyof react.Component<any, {}, any>>));
 
-interface PageLayoutProps {
-    children?: any;
-    className?: string;
+interface TailwindExampleProps {
+    variant?: 'primary' | 'secondary' | 'success' | 'danger';
+    children: react__default.ReactNode;
 }
-declare const PageLayout: ({ children, className }: PageLayoutProps) => react_jsx_runtime.JSX.Element;
-declare const StyledContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const TailwindExample: react__default.FC<TailwindExampleProps>;
 
-interface ContentProps {
-    children: any;
-    className?: string;
-}
-declare const PageContent: ({ children, className }: ContentProps) => react_jsx_runtime.JSX.Element;
-declare const StyledMain: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-
-interface SubNavProps {
+interface PageLayoutProps {
+    header?: any;
+    sidebar?: any;
     children?: any;
     className?: string;
-    top?: number;
 }
-declare const SubNav: ({ children, className, top }: SubNavProps) => react_jsx_runtime.JSX.Element;
-type StyledProps = {
-    $top: number;
-};
-declare const Styled: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
+declare const PageLayout: ({ children, header, sidebar, className }: PageLayoutProps) => react_jsx_runtime.JSX.Element;
+interface StyledContainerProps {
+    $withHeader?: boolean;
+    $withSidebar?: boolean;
+}
+declare const StyledContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContainerProps>> & string;
 
 type ContainerProps = {
     children: any;
@@ -1835,4 +1814,4 @@ declare const FullscreenCard: react.ForwardRefExoticComponent<FullscreenCardProp
     } | undefined;
 } & react.RefAttributes<unknown>>;
 
-export { type Action, Alert, AlertIcon, AndroidIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BreakpointProvider, BugReportIcon, BurgerMenuIcon, BusIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CarIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContentLoader, type ContentLoaderProps, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FileIcon, FiltersIcon, FlashIcon, FlexContainer, FlexItem, FolderAlertIcon, FolderInfoIcon, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, type GraphState, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, IosIcon, Label, type LabelSize, type LabelSizeStyle, Line, LinerProgress, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MicrosoftIcon, Modal, ModalBody, ModalFooter, ModalHeader, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, Overlay, type OverlayProps, PageContent, PageLayout, Pagination, type PaginationProps, PassportIcon, PasswordFinderIcon, PencilIcon, PhonebookIcon, PlaneIcon, PlusIcon, PointIcon, PrintIcon, Profiler2Icon, ProfilerIcon, RelationIcon, RelationPointsIcon, type RenderCellProps, type RenderHeaderCellProps, RotateLeftIcon, RotateRightIcon, RowActionsMenu, SandBoxIcon, SearchIcon, Select, ShipIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, Styled, StyledContainer, type StyledFabricComponent, StyledMain, SubNav, SunIcon, Switch, type SwitchState, Table, Tag, type TagColor, type TagElementStyle, type TagVariant, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Tooltip, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UserInCircleIcon, UsersIcon, VectorIcon, WayIcon, convertPaletteToRem, createComponent, createStyledComponent, darkTheme, darkThemePx, destructSpaceProps, generatePropertySpaceStyle, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getResponsiveProps, getTypographyStyles, hexToRgba, lightTheme, lightThemePx, propToRem, pxToRem, remToPx, resolveThemeColor, useBreakpoint, useContextMenuControl, useTheme };
+export { type Action, Alert, AlertIcon, AndroidIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BreakpointProvider, BugReportIcon, BusIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CarIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContentLoader, type ContentLoaderProps, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FileIcon, FiltersIcon, FlashIcon, FlexContainer, FlexItem, FolderAlertIcon, FolderInfoIcon, FullscreenCard, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, type GraphState, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, IosIcon, Label, type LabelSize, type LabelSizeStyle, Line, LinerProgress, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MicrosoftIcon, Modal, ModalBody, ModalFooter, ModalHeader, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, Overlay, type OverlayProps, PageLayout, Pagination, type PaginationProps, PassportIcon, PasswordFinderIcon, PencilIcon, PhonebookIcon, PlaneIcon, PlusIcon, PointIcon, PrintIcon, Profiler2Icon, ProfilerIcon, RelationIcon, RelationPointsIcon, type RenderCellProps, type RenderHeaderCellProps, RotateLeftIcon, RotateRightIcon, RowActionsMenu, SandBoxIcon, SearchIcon, Select, ShipIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, type StyledFabricComponent, SunIcon, Switch, type SwitchState, Table, Tag, type TagColor, type TagElementStyle, type TagVariant, TailwindExample, type TailwindExampleProps, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Tooltip, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UserInCircleIcon, UsersIcon, VectorIcon, WayIcon, convertPaletteToRem, createComponent, createStyledComponent, darkTheme, darkThemePx, destructSpaceProps, generatePropertySpaceStyle, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getResponsiveProps, getTypographyStyles, hexToRgba, lightTheme, lightThemePx, propToRem, pxToRem, remToPx, resolveThemeColor, useBreakpoint, useContextMenuControl, useTheme };

package/dist/index.d.ts

@@ -1,16 +1,13 @@
-import * as react from 'react';
-import react__default, { SVGProps, CSSProperties as CSSProperties$1, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
-import * as styled_components from 'styled-components';
 import { CSSProperties, DefaultTheme } from 'styled-components';
 export { ServerStyleSheet, StyleSheetManager } from 'styled-components';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
+import * as react from 'react';
+import react__default, { SVGProps, CSSProperties as CSSProperties$1, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PopoverPosition, PopoverAlign } from 'react-tiny-popover';
 import { IContentLoaderProps } from 'react-content-loader';
 
-declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
-
 interface ThemeProviderProps {
     children: any;
     mode?: 'light' | 'LIGHT' | 'dark' | 'DARK';
@@ -814,19 +811,10 @@ interface RotateRightIconProps extends SVGProps<SVGSVGElement> {
 }
 declare const RotateRightIcon: ({ fill, ...props }: RotateRightIconProps) => react_jsx_runtime.JSX.Element;
 
-interface BurgerMenuIconProps extends SVGProps<SVGSVGElement> {
-    fill?: string;
-}
-declare const BurgerMenuIcon: ({ fill, ...props }: BurgerMenuIconProps) => react_jsx_runtime.JSX.Element;
-
-interface ClockIconProps extends SVGProps<SVGSVGElement> {
-    fill?: string;
-}
-declare const ClockIcon: ({ fill, ...props }: ClockIconProps) => react_jsx_runtime.JSX.Element;
-
 interface SidebarProps {
     defaultCollapsed?: boolean;
     children: any;
+    canGrow: boolean;
 }
 declare const Sidebar: react__default.ForwardRefExoticComponent<SidebarProps & {
     m?: string | number;
@@ -856,6 +844,7 @@ declare const Sidebar: react__default.ForwardRefExoticComponent<SidebarProps & {
 interface SidebarContext {
     collapsed: boolean;
     setCollapsed: React.Dispatch<React.SetStateAction<boolean>>;
+    canGrow: boolean;
 }
 declare const SidebarContext: react.Context<SidebarContext>;
 
@@ -863,8 +852,6 @@ interface SidebarItemBase {
     active?: boolean;
     icon?: React.ComponentType<SVGProps<SVGSVGElement>>;
     label?: string;
-    height?: number;
-    iconSize?: number;
 }
 interface SidebarItemAnchor {
     href: string;
@@ -876,19 +863,17 @@ interface SidebarItemButton {
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 type SidebarItemProps = SidebarItemBase & (SidebarItemAnchor | SidebarItemButton);
-declare const SidebarItem: ({ active, icon: Icon, label, height, iconSize, ...props }: SidebarItemProps) => react_jsx_runtime.JSX.Element;
+declare const SidebarItem: ({ active, icon: Icon, label, ...props }: SidebarItemProps) => react_jsx_runtime.JSX.Element;
 
 declare const SidebarDelimeter: () => react_jsx_runtime.JSX.Element;
 
-type SectionRole = 'header' | 'footer' | 'content';
 interface SidebarSectionProps {
     grow?: number;
     shrink?: number;
     basis?: CSSProperties['flexBasis'];
     items: React.ReactElement[];
-    role: SectionRole;
 }
-declare const SidebarSection: ({ grow, shrink, basis, items, role }: SidebarSectionProps) => react_jsx_runtime.JSX.Element;
+declare const SidebarSection: ({ grow, shrink, basis, items }: SidebarSectionProps) => react_jsx_runtime.JSX.Element;
 
 type TypographyProps = FabricComponent<{
     style?: CSSProperties$1;
@@ -1026,7 +1011,7 @@ declare const ListMenuSection: ({ title, items }: ListMenuSectionProps) => react
 interface HeaderProps {
     children?: any;
 }
-declare const Header: react.ForwardRefExoticComponent<HeaderProps & react.RefAttributes<HTMLHeadElement>>;
+declare const Header: ({ children }: HeaderProps) => react_jsx_runtime.JSX.Element;
 
 declare const HeaderDelimeter: () => react_jsx_runtime.JSX.Element;
 
@@ -1090,9 +1075,9 @@ interface ContextMenuProps {
 }
 declare const ContextMenu: ({ isOpen, onClickOutside, onClick, anchor, size, disabled, fullWidth, className, positions, align, children, hasBorder, maxHeight, matchAnchorWidth, anchorIcon, }: ContextMenuProps) => react_jsx_runtime.JSX.Element;
 
-interface StyledProps$1 {
+interface StyledProps {
 }
-declare const ContextMenuDelimiter: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps$1>> & string;
+declare const ContextMenuDelimiter: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
 
 declare const useContextMenuControl: () => {
     isOpen: boolean;
@@ -1629,30 +1614,24 @@ declare const ModalHeader: styled_components_dist_types.IStyledComponentBase<"we
 declare const ModalBody: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<ModalChildrenProps | (ModalChildrenProps & react.RefAttributes<react.Component<ModalChildrenProps, any, any>>), StyledFabricComponent<ModalChildrenProps>>> & (string & (Omit<react.ComponentClass<ModalChildrenProps, any>, keyof react.Component<any, {}, any>> | Omit<react.FunctionComponent<ModalChildrenProps>, keyof react.Component<any, {}, any>>));
 declare const ModalFooter: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<ModalChildrenProps | (ModalChildrenProps & react.RefAttributes<react.Component<ModalChildrenProps, any, any>>), StyledFabricComponent<ModalChildrenProps>>> & (string & (Omit<react.ComponentClass<ModalChildrenProps, any>, keyof react.Component<any, {}, any>> | Omit<react.FunctionComponent<ModalChildrenProps>, keyof react.Component<any, {}, any>>));
 
-interface PageLayoutProps {
-    children?: any;
-    className?: string;
+interface TailwindExampleProps {
+    variant?: 'primary' | 'secondary' | 'success' | 'danger';
+    children: react__default.ReactNode;
 }
-declare const PageLayout: ({ children, className }: PageLayoutProps) => react_jsx_runtime.JSX.Element;
-declare const StyledContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const TailwindExample: react__default.FC<TailwindExampleProps>;
 
-interface ContentProps {
-    children: any;
-    className?: string;
-}
-declare const PageContent: ({ children, className }: ContentProps) => react_jsx_runtime.JSX.Element;
-declare const StyledMain: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-
-interface SubNavProps {
+interface PageLayoutProps {
+    header?: any;
+    sidebar?: any;
     children?: any;
     className?: string;
-    top?: number;
 }
-declare const SubNav: ({ children, className, top }: SubNavProps) => react_jsx_runtime.JSX.Element;
-type StyledProps = {
-    $top: number;
-};
-declare const Styled: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
+declare const PageLayout: ({ children, header, sidebar, className }: PageLayoutProps) => react_jsx_runtime.JSX.Element;
+interface StyledContainerProps {
+    $withHeader?: boolean;
+    $withSidebar?: boolean;
+}
+declare const StyledContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContainerProps>> & string;
 
 type ContainerProps = {
     children: any;
@@ -1835,4 +1814,4 @@ declare const FullscreenCard: react.ForwardRefExoticComponent<FullscreenCardProp
     } | undefined;
 } & react.RefAttributes<unknown>>;
 
-export { type Action, Alert, AlertIcon, AndroidIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BreakpointProvider, BugReportIcon, BurgerMenuIcon, BusIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CarIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClockIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContentLoader, type ContentLoaderProps, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FileIcon, FiltersIcon, FlashIcon, FlexContainer, FlexItem, FolderAlertIcon, FolderInfoIcon, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, type GraphState, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, IosIcon, Label, type LabelSize, type LabelSizeStyle, Line, LinerProgress, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MicrosoftIcon, Modal, ModalBody, ModalFooter, ModalHeader, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, Overlay, type OverlayProps, PageContent, PageLayout, Pagination, type PaginationProps, PassportIcon, PasswordFinderIcon, PencilIcon, PhonebookIcon, PlaneIcon, PlusIcon, PointIcon, PrintIcon, Profiler2Icon, ProfilerIcon, RelationIcon, RelationPointsIcon, type RenderCellProps, type RenderHeaderCellProps, RotateLeftIcon, RotateRightIcon, RowActionsMenu, SandBoxIcon, SearchIcon, Select, ShipIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, Styled, StyledContainer, type StyledFabricComponent, StyledMain, SubNav, SunIcon, Switch, type SwitchState, Table, Tag, type TagColor, type TagElementStyle, type TagVariant, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Tooltip, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UserInCircleIcon, UsersIcon, VectorIcon, WayIcon, convertPaletteToRem, createComponent, createStyledComponent, darkTheme, darkThemePx, destructSpaceProps, generatePropertySpaceStyle, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getResponsiveProps, getTypographyStyles, hexToRgba, lightTheme, lightThemePx, propToRem, pxToRem, remToPx, resolveThemeColor, useBreakpoint, useContextMenuControl, useTheme };
+export { type Action, Alert, AlertIcon, AndroidIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BreakpointProvider, BugReportIcon, BusIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CarIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContentLoader, type ContentLoaderProps, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, Drawer, DrawerBody, DrawerHeader, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FileIcon, FiltersIcon, FlashIcon, FlexContainer, FlexItem, FolderAlertIcon, FolderInfoIcon, FullscreenCard, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, type GraphState, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, IosIcon, Label, type LabelSize, type LabelSizeStyle, Line, LinerProgress, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MicrosoftIcon, Modal, ModalBody, ModalFooter, ModalHeader, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, Overlay, type OverlayProps, PageLayout, Pagination, type PaginationProps, PassportIcon, PasswordFinderIcon, PencilIcon, PhonebookIcon, PlaneIcon, PlusIcon, PointIcon, PrintIcon, Profiler2Icon, ProfilerIcon, RelationIcon, RelationPointsIcon, type RenderCellProps, type RenderHeaderCellProps, RotateLeftIcon, RotateRightIcon, RowActionsMenu, SandBoxIcon, SearchIcon, Select, ShipIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, type StyledFabricComponent, SunIcon, Switch, type SwitchState, Table, Tag, type TagColor, type TagElementStyle, type TagVariant, TailwindExample, type TailwindExampleProps, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Tooltip, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UserInCircleIcon, UsersIcon, VectorIcon, WayIcon, convertPaletteToRem, createComponent, createStyledComponent, darkTheme, darkThemePx, destructSpaceProps, generatePropertySpaceStyle, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getResponsiveProps, getTypographyStyles, hexToRgba, lightTheme, lightThemePx, propToRem, pxToRem, remToPx, resolveThemeColor, useBreakpoint, useContextMenuControl, useTheme };