@cyber-harbour/ui 1.0.47 → 1.0.48

package/dist/index.d.mts

@@ -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,7 @@ type Theme = {
         foreground: string;
         background: string;
     };
+    tag: Record<TagVariant, TagElementStyle>;
 };
 type ThemeColors = Theme['colors'];
 type ColorCategory = keyof ThemeColors;
@@ -297,6 +307,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
@@ -850,6 +864,18 @@ 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;
+
 interface PageLayoutProps {
     header?: any;
     sidebar?: any;
@@ -943,4 +969,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, 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, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, hexToRgba, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };

package/dist/index.d.ts

@@ -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,7 @@ type Theme = {
         foreground: string;
         background: string;
     };
+    tag: Record<TagVariant, TagElementStyle>;
 };
 type ThemeColors = Theme['colors'];
 type ColorCategory = keyof ThemeColors;
@@ -297,6 +307,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
@@ -850,6 +864,18 @@ 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;
+
 interface PageLayoutProps {
     header?: any;
     sidebar?: any;
@@ -943,4 +969,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, 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, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, hexToRgba, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };