@cyber-harbour/ui 1.0.47 → 1.0.49

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 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, WebTarget } from 'styled-components';
+import { CSSProperties, DefaultTheme } 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 { PopoverPosition, PopoverAlign } from 'react-tiny-popover';
@@ -23,6 +23,8 @@ type ButtonSize = 'small' | 'medium';
 type InputVariant = 'outlined' | 'empty';
 type InputState = 'default' | 'focus' | 'error' | 'disabled';
 type InputSize = 'empty' | 'small' | 'medium';
+type TagVariant = 'fill' | 'outlined';
+type TagColor = 'default' | 'primary' | 'error' | 'warning' | 'success' | 'disabled' | string;
 type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
 type ButtonElementStyle = {
     background: string;
@@ -60,6 +62,13 @@ type InputSizeStyle = {
     height: number | string;
     lineHeight: number;
 };
+type TagElementStyle = {
+    paddingInline: number | string;
+    paddingBlock: number | string;
+    borderRadius: number | string;
+    borderWidth: number | string;
+    color: Record<TagColor, string>;
+};
 type Theme = {
     mode: 'light' | 'dark';
     baseSize: number;
@@ -239,6 +248,25 @@ type Theme = {
         foreground: string;
         background: string;
     };
+    tag: Record<TagVariant, TagElementStyle>;
+    alert: {
+        paddingBlock: number | string;
+        paddingLeft: number | string;
+        paddingRight: number | string;
+        borderRadius: number | string;
+        fontSize: number | string;
+        gap: number | string;
+        icon: {
+            width: number | string;
+            height: number | string;
+            paddingTop: number | string;
+        };
+        color: {
+            icon: string;
+            text: string;
+            background: string;
+        };
+    };
 };
 type ThemeColors = Theme['colors'];
 type ColorCategory = keyof ThemeColors;
@@ -297,6 +325,10 @@ declare const getTypographyStyles: (theme: DefaultTheme, variant?: string) => {
  * Функція для отримання медіа-запитів для breakpoints
  */
 declare const getBreakpoint: (theme: DefaultTheme, size?: Breakpoint) => string;
+/**
+ * Функція для отримання rgba кольору з hex формату
+ */
+declare const hexToRgba: (hex: string, alpha: number) => string;
 
 /**
  * Палітра, що містить як кольори, так і розміри в px
@@ -329,7 +361,12 @@ type MarginProps = {
     py?: string | number;
 };
 type FabricComponent<T = object> = T & MarginProps;
-declare const createComponent: <T = object>(element: WebTarget) => styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<any, FabricComponent<T>>> & (string & (styled_components_dist_types.BaseObject | Omit<styled_components_dist_types.ExoticComponentWithDisplayName<any>, keyof react.Component<any, {}, any>> | Omit<react.ComponentClass<any, any>, keyof react.Component<any, {}, any>> | Omit<react.FunctionComponent<any>, keyof react.Component<any, {}, any>>));
+type GeneratedFabricMarginProperties = 'margin' | 'margin-top' | 'margin-right' | 'margin-bottom' | 'margin-left' | 'margin-inline' | 'margin-block' | 'padding' | 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left' | 'padding-inline' | 'padding-block';
+declare const generatePropertySpaceStyle: (theme: DefaultTheme, property: GeneratedFabricMarginProperties, value?: string | number, ignoredOptions?: GeneratedFabricMarginProperties[]) => string;
+type FabricComponentOptions = {
+    ignoreStyles?: GeneratedFabricMarginProperties[] | undefined;
+};
+declare const createComponent: <T extends object = {}>(component: React.ComponentType<T>, options?: FabricComponentOptions) => styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<T | (react.PropsWithoutRef<T> & react.RefAttributes<react.Component<T, any, any>>), T & object & MarginProps>> & (string & (Omit<react.ComponentClass<T, any>, keyof react.Component<any, {}, any>> | Omit<react.FunctionComponent<T>, keyof react.Component<any, {}, any>>));
 
 type BaseButtonProps = FabricComponent<{
     children?: any;
@@ -656,7 +693,7 @@ type TypographyProps = FabricComponent<{
     color?: ColorVariant | string;
     className?: string;
     ellipsis?: boolean;
-}>;
+}> & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 declare const Typography: ({ variant, element, children, weight, fontStyle, color, className, style, ellipsis, ...props }: TypographyProps) => react_jsx_runtime.JSX.Element;
 
 interface ListMenuProps {
@@ -850,6 +887,24 @@ interface EmptyDataProps {
 }
 declare const EmptyData: ({ children, title, note, className }: EmptyDataProps) => react_jsx_runtime.JSX.Element;
 
+type TagProps = FabricComponent<{
+    children?: any;
+    variant?: TagVariant;
+    color?: TagColor;
+    className?: string;
+    icon?: any;
+    disabled?: boolean;
+    onClick?: () => void;
+    onDelete?: () => void;
+}> & Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const Tag: ({ children, variant, color, className, disabled, icon, onClick, onDelete, ...props }: TagProps) => react_jsx_runtime.JSX.Element;
+
+type AlertProps = FabricComponent<{
+    title?: any;
+    note?: any;
+}> & Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const Alert: ({ title, note, ...props }: AlertProps) => react_jsx_runtime.JSX.Element;
+
 interface PageLayoutProps {
     header?: any;
     sidebar?: any;
@@ -943,4 +998,4 @@ interface FullscreenCardProps {
 }
 declare const FullscreenCard: ({ isActive, position, top, left, right, bottom, ...props }: FullscreenCardProps) => react_jsx_runtime.JSX.Element;
 
-export { type Action, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, BusIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FileIcon, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlaneIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, ShipIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, WayIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };
+export { type Action, Alert, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, BusIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FileIcon, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlaneIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, ShipIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, Tag, type TagColor, type TagElementStyle, type TagVariant, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, WayIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, generatePropertySpaceStyle, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, hexToRgba, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 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, WebTarget } from 'styled-components';
+import { CSSProperties, DefaultTheme } 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 { PopoverPosition, PopoverAlign } from 'react-tiny-popover';
@@ -23,6 +23,8 @@ type ButtonSize = 'small' | 'medium';
 type InputVariant = 'outlined' | 'empty';
 type InputState = 'default' | 'focus' | 'error' | 'disabled';
 type InputSize = 'empty' | 'small' | 'medium';
+type TagVariant = 'fill' | 'outlined';
+type TagColor = 'default' | 'primary' | 'error' | 'warning' | 'success' | 'disabled' | string;
 type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
 type ButtonElementStyle = {
     background: string;
@@ -60,6 +62,13 @@ type InputSizeStyle = {
     height: number | string;
     lineHeight: number;
 };
+type TagElementStyle = {
+    paddingInline: number | string;
+    paddingBlock: number | string;
+    borderRadius: number | string;
+    borderWidth: number | string;
+    color: Record<TagColor, string>;
+};
 type Theme = {
     mode: 'light' | 'dark';
     baseSize: number;
@@ -239,6 +248,25 @@ type Theme = {
         foreground: string;
         background: string;
     };
+    tag: Record<TagVariant, TagElementStyle>;
+    alert: {
+        paddingBlock: number | string;
+        paddingLeft: number | string;
+        paddingRight: number | string;
+        borderRadius: number | string;
+        fontSize: number | string;
+        gap: number | string;
+        icon: {
+            width: number | string;
+            height: number | string;
+            paddingTop: number | string;
+        };
+        color: {
+            icon: string;
+            text: string;
+            background: string;
+        };
+    };
 };
 type ThemeColors = Theme['colors'];
 type ColorCategory = keyof ThemeColors;
@@ -297,6 +325,10 @@ declare const getTypographyStyles: (theme: DefaultTheme, variant?: string) => {
  * Функція для отримання медіа-запитів для breakpoints
  */
 declare const getBreakpoint: (theme: DefaultTheme, size?: Breakpoint) => string;
+/**
+ * Функція для отримання rgba кольору з hex формату
+ */
+declare const hexToRgba: (hex: string, alpha: number) => string;
 
 /**
  * Палітра, що містить як кольори, так і розміри в px
@@ -329,7 +361,12 @@ type MarginProps = {
     py?: string | number;
 };
 type FabricComponent<T = object> = T & MarginProps;
-declare const createComponent: <T = object>(element: WebTarget) => styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<any, FabricComponent<T>>> & (string & (styled_components_dist_types.BaseObject | Omit<styled_components_dist_types.ExoticComponentWithDisplayName<any>, keyof react.Component<any, {}, any>> | Omit<react.ComponentClass<any, any>, keyof react.Component<any, {}, any>> | Omit<react.FunctionComponent<any>, keyof react.Component<any, {}, any>>));
+type GeneratedFabricMarginProperties = 'margin' | 'margin-top' | 'margin-right' | 'margin-bottom' | 'margin-left' | 'margin-inline' | 'margin-block' | 'padding' | 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left' | 'padding-inline' | 'padding-block';
+declare const generatePropertySpaceStyle: (theme: DefaultTheme, property: GeneratedFabricMarginProperties, value?: string | number, ignoredOptions?: GeneratedFabricMarginProperties[]) => string;
+type FabricComponentOptions = {
+    ignoreStyles?: GeneratedFabricMarginProperties[] | undefined;
+};
+declare const createComponent: <T extends object = {}>(component: React.ComponentType<T>, options?: FabricComponentOptions) => styled_components_dist_types.IStyledComponentBase<"web", styled_components_dist_types.Substitute<T | (react.PropsWithoutRef<T> & react.RefAttributes<react.Component<T, any, any>>), T & object & MarginProps>> & (string & (Omit<react.ComponentClass<T, any>, keyof react.Component<any, {}, any>> | Omit<react.FunctionComponent<T>, keyof react.Component<any, {}, any>>));
 
 type BaseButtonProps = FabricComponent<{
     children?: any;
@@ -656,7 +693,7 @@ type TypographyProps = FabricComponent<{
     color?: ColorVariant | string;
     className?: string;
     ellipsis?: boolean;
-}>;
+}> & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 declare const Typography: ({ variant, element, children, weight, fontStyle, color, className, style, ellipsis, ...props }: TypographyProps) => react_jsx_runtime.JSX.Element;
 
 interface ListMenuProps {
@@ -850,6 +887,24 @@ interface EmptyDataProps {
 }
 declare const EmptyData: ({ children, title, note, className }: EmptyDataProps) => react_jsx_runtime.JSX.Element;
 
+type TagProps = FabricComponent<{
+    children?: any;
+    variant?: TagVariant;
+    color?: TagColor;
+    className?: string;
+    icon?: any;
+    disabled?: boolean;
+    onClick?: () => void;
+    onDelete?: () => void;
+}> & Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const Tag: ({ children, variant, color, className, disabled, icon, onClick, onDelete, ...props }: TagProps) => react_jsx_runtime.JSX.Element;
+
+type AlertProps = FabricComponent<{
+    title?: any;
+    note?: any;
+}> & Omit<react__default.HTMLAttributes<HTMLDivElement>, 'children'>;
+declare const Alert: ({ title, note, ...props }: AlertProps) => react_jsx_runtime.JSX.Element;
+
 interface PageLayoutProps {
     header?: any;
     sidebar?: any;
@@ -943,4 +998,4 @@ interface FullscreenCardProps {
 }
 declare const FullscreenCard: ({ isActive, position, top, left, right, bottom, ...props }: FullscreenCardProps) => react_jsx_runtime.JSX.Element;
 
-export { type Action, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, BusIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FileIcon, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlaneIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, ShipIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, WayIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };
+export { type Action, Alert, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, BusIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FileIcon, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlaneIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, ShipIcon, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, Tag, type TagColor, type TagElementStyle, type TagVariant, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, WayIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, generatePropertySpaceStyle, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, hexToRgba, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };