@cyber-harbour/ui 1.0.47 → 1.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.47",
+  "version": "1.0.48",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/Tag/Tag.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FabricComponent, createComponent, TagVariant, TagColor, hexToRgba } from '../../Theme';
+import { CrossIcon } from '../IconComponents';
+
+type TagProps = FabricComponent<{
+  children?: any;
+  variant?: TagVariant;
+  color?: TagColor;
+  className?: string;
+  icon?: any;
+  disabled?: boolean;
+  onClick?: () => void;
+  onDelete?: () => void;
+}> &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
+
+export const Tag = ({
+  children,
+  variant = 'fill',
+  color = 'default',
+  className,
+  disabled,
+  icon,
+  onClick,
+  onDelete,
+  ...props
+}: TagProps) => {
+  return (
+    <StyledContainer
+      $variant={variant}
+      $color={color}
+      $clickable={!!onClick && !disabled}
+      onClick={!disabled ? onClick : undefined}
+      className={className}
+      {...props}
+    >
+      {!!children && <Content>{children}</Content>}
+      {!!onDelete && !disabled && (
+        <DeleteButton
+          aria-label="delete"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+        >
+          <CrossIcon />
+        </DeleteButton>
+      )}
+    </StyledContainer>
+  );
+};
+
+type StyledProps = {
+  $variant: TagVariant;
+  $color: TagColor;
+  $clickable: boolean;
+};
+
+const Content = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+
+  font-size: 14px;
+  line-height: 16px;
+`;
+
+const DeleteButton = styled.button`
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+  color: currentColor;
+  transition: color 0.2s ease;
+  svg {
+    width: 10px;
+    height: 10px;
+    fill: currentColor;
+  }
+`;
+
+const StyledContainer = styled(createComponent<StyledProps>('div'))(
+  ({
+    theme,
+    $variant,
+    $color,
+    $clickable,
+    py = theme.tag[$variant].paddingBlock,
+    px = theme.tag[$variant].paddingInline,
+  }) => {
+    const color = theme.tag[$variant].color[$color] || $color;
+    return `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding-block: 0;
+    padding-inline: 0;
+    min-width: 0;
+    border-width: ${theme.tag[$variant].borderWidth};
+    border-style: solid;
+    border-color: ${color};
+    border-radius: ${theme.tag[$variant].borderRadius};
+    background-color: ${$variant === 'outlined' ? theme.colors.background : hexToRgba(color, 0.05)};
+    color: ${color};
+
+    ${Content} {
+      padding-block: ${py};
+      padding-inline: ${px};
+      color: ${color};
+      ${
+        $clickable
+          ? `
+        cursor: pointer;
+        transition: color 0.2s ease;
+        &:hover {
+          color: ${hexToRgba(color, 0.7)};
+        }
+        `
+          : ''
+      }
+    }
+    ${DeleteButton} {
+      padding-right: ${px};
+      padding-block: ${py};
+      &:hover {
+        color: ${hexToRgba(color, 0.7)};
+      }
+    }
+  `;
+  }
+);

package/src/Core/Tag/index.ts

@@ -0,0 +1 @@
+export * from './Tag';

package/src/Core/index.ts

@@ -14,3 +14,4 @@ export * from './Flex';
 export * from './Box';
 export * from './Line';
 export * from './EmptyData';
+export * from './Tag';

package/src/Theme/themes/dark.ts

@@ -706,6 +706,36 @@ export const darkThemePx: Theme = {
     foreground: '#99989C',
     background: '#535353',
   },
+  tag: {
+    outlined: {
+      borderRadius: 50,
+      paddingBlock: 5,
+      paddingInline: 10,
+      borderWidth: 1,
+      color: {
+        default: '#99989C',
+        primary: '#3991FA',
+        error: '#D82323',
+        success: '#38A473',
+        warning: '#DEB839',
+        disabled: '#ebebeb',
+      },
+    },
+    fill: {
+      borderRadius: 4,
+      paddingBlock: 5,
+      paddingInline: 10,
+      borderWidth: 0,
+      color: {
+        default: '#99989C',
+        primary: '#3991FA',
+        error: '#D82323',
+        success: '#38A473',
+        warning: '#DEB839',
+        disabled: '#ebebeb',
+      },
+    },
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -705,6 +705,36 @@ export const lightThemePx: Theme = {
     foreground: '#E2E2E2E2',
     background: '#F3F3F3',
   },
+  tag: {
+    outlined: {
+      borderRadius: 50,
+      paddingBlock: 5,
+      paddingInline: 10,
+      borderWidth: 1,
+      color: {
+        default: '#535353',
+        primary: '#0042EC',
+        error: '#D82323',
+        success: '#38A473',
+        warning: '#DEB839',
+        disabled: '#ebebeb',
+      },
+    },
+    fill: {
+      borderRadius: 4,
+      paddingBlock: 5,
+      paddingInline: 10,
+      borderWidth: 0,
+      color: {
+        default: '#535353',
+        primary: '#0042EC',
+        error: '#D82323',
+        success: '#38A473',
+        warning: '#DEB839',
+        disabled: '#ebebeb',
+      },
+    },
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -10,6 +10,9 @@ export type InputVariant = 'outlined' | 'empty';
 export type InputState = 'default' | 'focus' | 'error' | 'disabled';
 export type InputSize = 'empty' | 'small' | 'medium';
 
+export type TagVariant = 'fill' | 'outlined';
+export type TagColor = 'default' | 'primary' | 'error' | 'warning' | 'success' | 'disabled' | string;
+
 // Типи для spacing та breakpoints
 export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
 
@@ -57,6 +60,14 @@ export type InputSizeStyle = {
   lineHeight: number;
 };
 
+export type TagElementStyle = {
+  paddingInline: number | string;
+  paddingBlock: number | string;
+  borderRadius: number | string;
+  borderWidth: number | string;
+  color: Record<TagColor, string>;
+};
+
 // Тип для палітри
 export type Theme = {
   mode: 'light' | 'dark';
@@ -235,6 +246,7 @@ export type Theme = {
     foreground: string;
     background: string;
   };
+  tag: Record<TagVariant, TagElementStyle>;
 };
 
 //TODO check and refactoring

package/src/Theme/utils.ts

@@ -173,3 +173,17 @@ export const getTypographyStyles = (theme: DefaultTheme, variant: string = 'body
 export const getBreakpoint = (theme: DefaultTheme, size: Breakpoint = 'm') => {
   return `@media (min-width: ${theme.breakpoints[size]}px)`;
 };
+
+/**
+ * Функція для отримання rgba кольору з hex формату
+ */
+export const hexToRgba = (hex: string, alpha: number): string => {
+  try {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+  } catch {
+    return hex;
+  }
+};