@cyber-harbour/ui 1.0.17 → 1.0.19

package/dist/index.d.mts

@@ -1,15 +1,221 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { SVGProps, ElementType, CSSProperties as CSSProperties$1, ReactNode, FC } from 'react';
+import react__default, { SVGProps, ElementType, CSSProperties as CSSProperties$1 } from 'react';
 import * as styled_components from 'styled-components';
-import { CSSProperties, DefaultTheme } from 'styled-components';
+import { DefaultTheme, CSSProperties } from 'styled-components';
 import * as styled_components_dist_types from 'styled-components/dist/types';
+import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
 
-interface ButtonProps {
+declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
+
+declare const ThemeProvider: ({ children }: {
     children: any;
-    color?: string;
+}) => react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = 'fill' | 'outlined' | 'empty';
+type ButtonColor = 'default' | 'primary' | 'secondary' | 'error';
+type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
+type ButtonSize = 'small' | 'medium';
+type InputVariant = 'default' | 'outlined' | 'filled';
+type InputState = 'default' | 'focus' | 'error' | 'disabled';
+type InputSize = 'small' | 'medium' | 'large';
+type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
+type ButtonElementStyle = {
+    background: string;
+    text: string;
+    border: string;
+    boxShadow: string;
+};
+type ButtonSizeStyle = {
+    fontSize: number | string;
+    paddingInline: number | string;
+    paddingBlock: number | string;
+    borderRadius: number | string;
+    borderWidth: number | string;
+    gap: number | string;
+    iconSize: number | string;
+};
+type Theme = {
+    mode: 'light' | 'dark';
+    colors: {
+        background: string;
+        primary: {
+            main: string;
+            light: string;
+            lighter: string;
+            lightest: string;
+            lightest2: string;
+        };
+        text: {
+            main: string;
+            light: string;
+            lighter: string;
+            invert: string;
+        };
+        stroke: {
+            main: string;
+            light: string;
+            lighter: string;
+        };
+        disable: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    typography: {
+        fontFamily: string;
+        lineHeight: number;
+        variants: {
+            h1: {
+                fontSize: number | string;
+            };
+            h2: {
+                fontSize: number | string;
+            };
+            h3: {
+                fontSize: number | string;
+            };
+            body: {
+                fontSize: number | string;
+            };
+        };
+    };
+    breakpoints: Record<Breakpoint, number>;
+    zIndex: {
+        dropdown: number;
+        sticky: number;
+        fixed: number;
+        backdrop: number;
+        modal: number;
+        popover: number;
+        tooltip: number;
+    };
+    button: {
+        fill: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
+        outlined: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
+        empty: Record<ButtonColor, Record<ButtonState, ButtonElementStyle>>;
+        sizes: Record<ButtonSize, ButtonSizeStyle>;
+    };
+    sidebar: {
+        background: string;
+        width: number;
+        collapsedWidth: number;
+        text: {
+            default: string;
+            active: string;
+            hover: string;
+        };
+        item: {
+            default: {
+                background: string;
+                border: string;
+                padding: string;
+                height: number;
+            };
+            active: {
+                background: string;
+                borderLeft: string;
+                padding: string;
+                height: number;
+            };
+            hover: {
+                background: string;
+                border: string;
+                padding: string;
+                height: number;
+            };
+        };
+        section: {
+            background: string;
+            padding: string;
+            title: {
+                color: string;
+                fontSize: string;
+                fontWeight: number;
+            };
+        };
+        delimeter: {
+            color: string;
+            thickness: number;
+            margin: string;
+        };
+    };
+};
+type ThemeColors = Theme['colors'];
+type ColorCategory = keyof ThemeColors;
+type NestedColorPaths = keyof Pick<ThemeColors, 'background' | 'disable'> | `${Extract<ColorCategory, 'primary'>}.${keyof ThemeColors['primary']}` | `${Extract<ColorCategory, 'text'>}.${keyof ThemeColors['text']}` | `${Extract<ColorCategory, 'stroke'>}.${keyof ThemeColors['stroke']}`;
+type ColorVariant = NestedColorPaths;
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body';
+
+/**
+ * Helper function to resolve nested color paths from theme
+ * Supports formats like 'primary.main', 'text.lightest', 'background'
+ *
+ * @param theme - The styled-components theme object
+ * @param colorPath - A dot-notation path to the color in the theme, e.g. 'primary.main'
+ * @returns The resolved color value or undefined if not found
+ */
+declare const resolveThemeColor: (theme: DefaultTheme, colorPath: string | undefined) => string | undefined;
+/**
+ * Converts a pixel value to rem units
+ *
+ * @param pxValue - The pixel value to convert. Can be a number or a string with 'px' suffix
+ * @param baseSize - Base font size in pixels. Default is 16px (browser default)
+ * @returns The value in rem units as a string (e.g., "1.25rem")
+ */
+declare const pxToRem: (pxValue: number | string, baseSize?: number) => string;
+/**
+ * Recursively converts all pixel values in an object to rem units
+ *
+ * @param obj - The object containing values to convert
+ * @param baseSize - Base font size in pixels. Default is 16px
+ * @returns A new object with pixel values converted to rem
+ */
+declare const convertPaletteToRem: (obj: Record<string, any>, baseSize?: number) => Record<string, any>;
+/**
+ * Функція для отримання стилів кнопки за варіантом, кольором, станом та розміром
+ */
+declare const getButtonStyles: <V extends ButtonVariant>(theme: DefaultTheme, variant: ButtonVariant, color: ButtonColor, state: ButtonState) => ButtonElementStyle;
+declare const getButtonSizeStyles: (theme: DefaultTheme, size: ButtonSize) => ButtonSizeStyle;
+/**
+ * Функція для отримання типографічних стилів
+ */
+declare const getTypographyStyles: (theme: DefaultTheme, variant?: string) => {
+    fontSize: number | string;
+} | {
+    fontSize: number | string;
+} | {
+    fontSize: number | string;
+} | {
+    fontSize: number | string;
+};
+/**
+ * Функція для отримання медіа-запитів для breakpoints
+ */
+declare const getBreakpoint: (theme: DefaultTheme, size?: Breakpoint) => string;
+
+/**
+ * Палітра, що містить як кольори, так і розміри в px
+ * Кольори взято з теми, розміри будуть автоматично конвертовані в rem
+ */
+declare const lightThemePx: Theme;
+declare const lightTheme: DefaultTheme$1;
+declare const darkTheme: DefaultTheme$1;
+
+interface BaseButtonProps {
+    children?: any;
+    variant?: ButtonVariant;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+    icon?: any;
+    iconPosition?: 'left' | 'right';
 }
-declare const Button: ({ children, color }: ButtonProps) => react_jsx_runtime.JSX.Element;
+type ButtonProps = BaseButtonProps & (react__default.AnchorHTMLAttributes<HTMLAnchorElement> | react__default.ButtonHTMLAttributes<HTMLButtonElement>);
+declare const Button: ({ children, variant, color, size, disabled, fullWidth, className, icon, iconPosition, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface AlertIconProps extends SVGProps<SVGSVGElement> {
     fill?: string;
@@ -46,10 +252,10 @@ interface ChevronLeftIconProps extends SVGProps<SVGSVGElement> {
 }
 declare const ChevronLeftIcon: ({ fill, ...props }: ChevronLeftIconProps) => react_jsx_runtime.JSX.Element;
 
-interface ChevronRightIconProps extends SVGProps<SVGSVGElement> {
+interface ChevronRightIconProps$2 extends SVGProps<SVGSVGElement> {
     fill?: string;
 }
-declare const ChevronRightIcon: ({ fill, ...props }: ChevronRightIconProps) => react_jsx_runtime.JSX.Element;
+declare const ChevronRightIcon: ({ fill, ...props }: ChevronRightIconProps$2) => react_jsx_runtime.JSX.Element;
 
 interface ClosedLockIconProps extends SVGProps<SVGSVGElement> {
     fill?: string;
@@ -106,10 +312,10 @@ interface HomepageIconProps extends SVGProps<SVGSVGElement> {
 }
 declare const HomepageIcon: ({ fill, ...props }: HomepageIconProps) => react_jsx_runtime.JSX.Element;
 
-interface InfoCircleIconProps extends SVGProps<SVGSVGElement> {
+interface InfoCircleIconProps$2 extends SVGProps<SVGSVGElement> {
     fill?: string;
 }
-declare const InfoCircleIcon: ({ fill, ...props }: InfoCircleIconProps) => react_jsx_runtime.JSX.Element;
+declare const InfoCircleIcon: ({ fill, ...props }: InfoCircleIconProps$2) => react_jsx_runtime.JSX.Element;
 
 interface MapRadarIconProps extends SVGProps<SVGSVGElement> {
     fill?: string;
@@ -182,6 +388,26 @@ interface VectorIconProps extends SVGProps<SVGSVGElement> {
 }
 declare const VectorIcon: ({ fill, ...props }: VectorIconProps) => react_jsx_runtime.JSX.Element;
 
+interface InfoCircleIconProps$1 extends SVGProps<SVGSVGElement> {
+    fill?: string;
+}
+declare const BallsMenu: ({ fill, ...props }: InfoCircleIconProps$1) => react_jsx_runtime.JSX.Element;
+
+interface InfoCircleIconProps extends SVGProps<SVGSVGElement> {
+    fill?: string;
+}
+declare const CheckIcon: ({ fill, ...props }: InfoCircleIconProps) => react_jsx_runtime.JSX.Element;
+
+interface ChevronRightIconProps$1 extends SVGProps<SVGSVGElement> {
+    fill?: string;
+}
+declare const ChevronDownIcon: ({ fill, ...props }: ChevronRightIconProps$1) => react_jsx_runtime.JSX.Element;
+
+interface ChevronRightIconProps extends SVGProps<SVGSVGElement> {
+    fill?: string;
+}
+declare const ChevronUpIcon: ({ fill, ...props }: ChevronRightIconProps) => react_jsx_runtime.JSX.Element;
+
 interface SidebarProps {
     defaultCollapsed?: boolean;
     children: any;
@@ -221,58 +447,6 @@ interface SidebarSectionProps {
 }
 declare const SidebarSection: ({ grow, shrink, basis, items }: SidebarSectionProps) => react_jsx_runtime.JSX.Element;
 
-type ThemeColors = DefaultTheme['colors'];
-type ColorCategory = keyof ThemeColors;
-type NestedColorPaths = keyof Pick<ThemeColors, 'background' | 'disable'> | `${Extract<ColorCategory, 'primary'>}.${keyof ThemeColors['primary']}` | `${Extract<ColorCategory, 'text'>}.${keyof ThemeColors['text']}` | `${Extract<ColorCategory, 'stroke'>}.${keyof ThemeColors['stroke']}`;
-type ColorVariant = NestedColorPaths;
-type TypographyVariant = 'h1' | 'h2' | 'h3' | 'body';
-declare module 'styled-components' {
-    interface DefaultTheme {
-        colors: {
-            background: CSSProperties['color'];
-            primary: {
-                main: CSSProperties['color'];
-                light: CSSProperties['color'];
-                lighter: CSSProperties['color'];
-                lightest: CSSProperties['color'];
-                lightest2: CSSProperties['color'];
-            };
-            text: {
-                main: CSSProperties['color'];
-                light: CSSProperties['color'];
-                lighter: CSSProperties['color'];
-                invert: CSSProperties['color'];
-            };
-            stroke: {
-                main: CSSProperties['color'];
-                light: CSSProperties['color'];
-                lighter: CSSProperties['color'];
-            };
-            disable: string;
-            chart: {
-                changelog: [
-                    CSSProperties['color'],
-                    CSSProperties['color'],
-                    CSSProperties['color'],
-                    CSSProperties['color'],
-                    CSSProperties['color']
-                ];
-            };
-        };
-        type: 'light' | 'dark';
-        typography: {
-            fontFamily: CSSProperties['fontFamily'];
-            lineHeight: CSSProperties['lineHeight'];
-            h1: CSSProperties['fontSize'];
-            h2: CSSProperties['fontSize'];
-            h3: CSSProperties['fontSize'];
-            body: CSSProperties['fontSize'];
-        };
-    }
-}
-declare const lightTheme: DefaultTheme;
-declare const darkTheme: DefaultTheme;
-
 interface TypographyProps {
     variant?: TypographyVariant;
     element?: ElementType;
@@ -308,7 +482,7 @@ type ListMenuItemProps = ListMenuItemBase & (ListMenuItemAnchorProps | ListMenuI
 declare const ListMenuItem: ({ active, label, count, ...props }: ListMenuItemProps) => react_jsx_runtime.JSX.Element;
 
 interface ListMenuSectionProps {
-    items: ReactNode | ReactNode[];
+    items: any;
     title?: string;
 }
 declare const ListMenuSection: ({ title, items }: ListMenuSectionProps) => react_jsx_runtime.JSX.Element;
@@ -347,11 +521,11 @@ type RenderHeaderCellProps<T = string> = {
 interface TableProps {
     columns: ColumnTable[];
     rowCount: number;
-    renderCell: (props: RenderCellProps<any>) => ReactNode;
-    renderHeaderCell: (props: RenderHeaderCellProps<any>) => ReactNode;
+    renderCell: (props: RenderCellProps<any>) => any;
+    renderHeaderCell: (props: RenderHeaderCellProps<any>) => any;
     rowIds?: string[];
 }
-declare const Table: FC<TableProps>;
+declare const Table: ({ columns, rowCount, renderCell, renderHeaderCell, rowIds }: TableProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     total_items: number;
@@ -359,7 +533,7 @@ interface PaginationProps {
     offset: number;
     onChangePage: (offset: number) => void;
 }
-declare const Pagination: FC<PaginationProps>;
+declare const Pagination: ({ total_items, limit, offset, onChangePage }: PaginationProps) => react_jsx_runtime.JSX.Element;
 
 interface PageLayoutProps {
     header?: any;
@@ -373,20 +547,4 @@ interface StyledContainerProps {
 }
 declare const StyledContainer: styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContainerProps>> & string;
 
-declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
-
-declare const ThemeProvider: ({ children }: {
-    children: any;
-}) => react_jsx_runtime.JSX.Element;
-
-/**
- * Helper function to resolve nested color paths from theme
- * Supports formats like 'primary.main', 'text.lightest', 'background'
- *
- * @param theme - The styled-components theme object
- * @param colorPath - A dot-notation path to the color in the theme, e.g. 'primary.main'
- * @returns The resolved color value or undefined if not found
- */
-declare const resolveThemeColor: (theme: DefaultTheme, colorPath: string | undefined) => string | undefined;
-
-export { AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BugReportIcon, Button, CalendarIcon, ChevronLeftIcon, ChevronRightIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EnableVisibleIcon, EnterArrowLeftIcon, FiltersIcon, GlobalStyle, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleIcon, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, SandBoxIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, ThemeProvider, Typography, type TypographyProps, type TypographyVariant, UpRightArrowCircleIcon, VectorIcon, darkTheme, lightTheme, resolveThemeColor };
+export { AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EnableVisibleIcon, EnterArrowLeftIcon, FiltersIcon, GlobalStyle, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleIcon, type InputSize, type InputState, type InputVariant, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, SandBoxIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type Theme, ThemeProvider, Typography, type TypographyProps, type TypographyVariant, UpRightArrowCircleIcon, VectorIcon, convertPaletteToRem, darkTheme, getBreakpoint, getButtonSizeStyles, getButtonStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, resolveThemeColor };