@addev-be/ui 0.20.8 → 0.21.0

package/src/components/ui/Avatar/styles.ts

@@ -1,61 +1,61 @@
-import styled, { css } from 'styled-components';
-
-export type AvatarContainerProps = {
-  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-};
-
-const stylesMap: Record<
-  AvatarContainerProps['size'],
-  ReturnType<typeof css>
-> = {
-  xs: css`
-    width: var(--size-6);
-    height: var(--size-6);
-    min-width: var(--size-6);
-    min-height: var(--size-6);
-    font-size: var(--text-xs);
-    line-height: var(--text-xs);
-  `,
-  sm: css`
-    width: var(--size-8);
-    height: var(--size-8);
-    min-width: var(--size-8);
-    min-height: var(--size-8);
-    font-size: var(--text-sm);
-    line-height: var(--text-sm);
-  `,
-  md: css`
-    width: var(--size-10);
-    height: var(--size-10);
-    min-width: var(--size-10);
-    min-height: var(--size-10);
-    font-size: var(--text-md);
-    line-height: var(--text-md);
-  `,
-  lg: css`
-    width: var(--size-12);
-    height: var(--size-12);
-    min-width: var(--size-12);
-    min-height: var(--size-12);
-    font-size: var(--text-lg);
-    line-height: var(--text-lg);
-  `,
-  xl: css`
-    width: var(--size-14);
-    height: var(--size-14);
-    min-width: var(--size-14);
-    min-height: var(--size-14);
-    font-size: var(--text-2xl);
-    line-height: var(--text-2xl);
-  `,
-};
-
-export const AvatarContainer = styled.div<AvatarContainerProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--rounded-full);
-  user-select: none;
-
-  ${({ size }) => stylesMap[size]}
-`;
+import styled, { css } from 'styled-components';
+
+export type AvatarContainerProps = {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+
+const stylesMap: Record<
+  AvatarContainerProps['size'],
+  ReturnType<typeof css>
+> = {
+  xs: css`
+    width: var(--size-6);
+    height: var(--size-6);
+    min-width: var(--size-6);
+    min-height: var(--size-6);
+    font-size: var(--text-xs);
+    line-height: var(--text-xs);
+  `,
+  sm: css`
+    width: var(--size-8);
+    height: var(--size-8);
+    min-width: var(--size-8);
+    min-height: var(--size-8);
+    font-size: var(--text-sm);
+    line-height: var(--text-sm);
+  `,
+  md: css`
+    width: var(--size-10);
+    height: var(--size-10);
+    min-width: var(--size-10);
+    min-height: var(--size-10);
+    font-size: var(--text-md);
+    line-height: var(--text-md);
+  `,
+  lg: css`
+    width: var(--size-12);
+    height: var(--size-12);
+    min-width: var(--size-12);
+    min-height: var(--size-12);
+    font-size: var(--text-lg);
+    line-height: var(--text-lg);
+  `,
+  xl: css`
+    width: var(--size-14);
+    height: var(--size-14);
+    min-width: var(--size-14);
+    min-height: var(--size-14);
+    font-size: var(--text-2xl);
+    line-height: var(--text-2xl);
+  `,
+};
+
+export const AvatarContainer = styled.div<AvatarContainerProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--rounded-full);
+  user-select: none;
+
+  ${({ size }) => stylesMap[size]}
+`;

package/src/components/ui/Card/styles.ts

@@ -5,11 +5,11 @@ export const CardContainer = styled.div.attrs({
 })`
   display: flex;
   flex-direction: column;
-  background-color: var(--color-neutral-0);
+  background-color: var(--color-base-0);
   border-radius: var(--rounded-md);
   box-shadow: var(--shadow-md);
   padding: var(--space-4);
-  border: 1px solid var(--color-neutral-100);
+  border: 1px solid var(--color-base-100);
 `;
 
 export const CardHeader = styled.div.attrs({
@@ -19,7 +19,7 @@ export const CardHeader = styled.div.attrs({
   flex-direction: row;
   align-items: center;
   padding-bottom: var(--space-2);
-  border-bottom: 1px solid var(--color-neutral-200);
+  border-bottom: 1px solid var(--color-base-200);
   margin-bottom: var(--space-2);
   gap: var(--space-2);
 `;
@@ -31,7 +31,7 @@ export const CardFooter = styled.div.attrs({
   flex-direction: row;
   align-items: center;
   padding-top: var(--space-2);
-  border-top: 1px solid var(--color-neutral-200);
+  border-top: 1px solid var(--color-base-200);
   margin-top: var(--space-2);
   gap: var(--space-2);
 `;

package/src/components/ui/ContextMenu/styles.ts

@@ -4,13 +4,13 @@ import { ThemeColor } from '../../../providers/ThemeProvider/types';
 
 const menuContainerCss = css`
   position: absolute;
-  color: var(--color-neutral-900);
+  color: var(--color-base-900);
   border-radius: var(--rounded-md);
   padding: var(--space-1) 0;
   box-shadow: var(--shadow-lg);
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-base-100);
   min-width: 20em;
-  outline: 1px solid var(--color-neutral-200);
+  outline: 1px solid var(--color-base-200);
   display: flex;
   flex-direction: column;
 `;
@@ -63,30 +63,30 @@ export const MenuItemContainer = styled.div.attrs({
         top: 50%;
         transform: translateY(-50%);
         border: 4px solid transparent;
-        border-left-color: var(--color-neutral-600);
+        border-left-color: var(--color-base-600);
       }
     `}
 
   ${({ $color, disabled }) =>
     disabled
       ? css`
-          color: var(--color-neutral-300);
-          background-color: var(--color-neutral-100);
+          color: var(--color-base-300);
+          background-color: var(--color-base-100);
           cursor: default;
         `
       : $color
       ? css`
           color: var(--color-${$color}-600);
-          background-color: var(--color-neutral-100);
+          background-color: var(--color-base-100);
           &:hover {
             background-color: var(--color-${$color}-200);
           }
         `
       : css`
-          color: var(--color-neutral-900);
-          background-color: var(--color-neutral-100);
+          color: var(--color-base-900);
+          background-color: var(--color-base-100);
           &:hover {
-            background-color: var(--color-neutral-200);
+            background-color: var(--color-base-200);
           }
         `}
 
@@ -114,6 +114,6 @@ MenuItemContainer.displayName = 'MenuItemContainer';
 export const Divider = styled.div.attrs({
   className: 'Divider',
 })`
-  border-top: 1px solid var(--color-neutral-200);
+  border-top: 1px solid var(--color-base-200);
   margin: var(--space-1) 0;
 `;

package/src/components/ui/Label.tsx

@@ -1,90 +1,90 @@
-import { ComponentProps, forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../providers/ThemeProvider/types';
-
-export const StyledLabel = styled.span.withConfig({
-  shouldForwardProp: () => true,
-})<LabelProps>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--font-sans);
-  font-weight: 500;
-
-  ${({ color }) =>
-    color
-      ? css`
-          background-color: var(--color-${color}-100);
-          color: var(--color-${color}-700);
-          svg {
-            fill: var(--color-${color}-700);
-          }
-        `
-      : css`
-          background-color: var(--color-neutral-100);
-          color: var(--color-neutral-700);
-          svg {
-            fill: var(--color-neutral-700);
-          }
-        `}
-
-  ${({ bordered, color }) =>
-    bordered
-      ? css`
-          border: 1px solid
-            ${color ? `var(--color-${color}-200)` : 'var(--color-neutral-200)'};
-        `
-      : 'border: none;'}
-
-  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
-
-  &.small {
-    padding: var(--space-0_5) var(--space-1_5);
-    font-size: var(--text-xs);
-    border-radius: var(--rounded-sm);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-3);
-      height: var(--space-3);
-    }
-  }
-
-  &.medium {
-    padding: var(--space-1) var(--space-2);
-    font-size: var(--text-sm);
-    border-radius: var(--rounded-md);
-    svg {
-      margin-right: var(--space-1);
-      width: var(--space-3_5);
-      height: var(--space-3_5);
-    }
-  }
-
-  &.large {
-    padding: var(--space-1_5) var(--space-2_5);
-    font-size: var(--text-base);
-    border-radius: var(--rounded-lg);
-    svg {
-      margin-right: var(--space-1_5);
-      width: var(--space-4);
-      height: var(--space-4);
-    }
-  }
-`;
-
-export type LabelProps = {
-  color?: ThemeColor;
-  size?: 'small' | 'medium' | 'large';
-  rounded?: boolean;
-  bordered?: boolean;
-};
-
-export const Label = forwardRef<
-  HTMLSpanElement,
-  ComponentProps<typeof StyledLabel> & LabelProps
->(({ children, size = 'medium', className = '', ...props }, ref) => (
-  <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
-    {children}
-  </StyledLabel>
-));
+import { ComponentProps, forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../providers/ThemeProvider/types';
+
+export const StyledLabel = styled.span.withConfig({
+  shouldForwardProp: () => true,
+})<LabelProps>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-sans);
+  font-weight: 500;
+
+  ${({ color }) =>
+    color
+      ? css`
+          background-color: var(--color-${color}-100);
+          color: var(--color-${color}-700);
+          svg {
+            fill: var(--color-${color}-700);
+          }
+        `
+      : css`
+          background-color: var(--color-base-100);
+          color: var(--color-base-700);
+          svg {
+            fill: var(--color-base-700);
+          }
+        `}
+
+  ${({ bordered, color }) =>
+    bordered
+      ? css`
+          border: 1px solid
+            ${color ? `var(--color-${color}-200)` : 'var(--color-base-200)'};
+        `
+      : 'border: none;'}
+
+  ${({ rounded }) => rounded && 'border-radius: var(--rounded-full);'}
+
+  &.small {
+    padding: var(--space-0_5) var(--space-1_5);
+    font-size: var(--text-xs);
+    border-radius: var(--rounded-sm);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3);
+      height: var(--space-3);
+    }
+  }
+
+  &.medium {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-sm);
+    border-radius: var(--rounded-md);
+    svg {
+      margin-right: var(--space-1);
+      width: var(--space-3_5);
+      height: var(--space-3_5);
+    }
+  }
+
+  &.large {
+    padding: var(--space-1_5) var(--space-2_5);
+    font-size: var(--text-base);
+    border-radius: var(--rounded-lg);
+    svg {
+      margin-right: var(--space-1_5);
+      width: var(--space-4);
+      height: var(--space-4);
+    }
+  }
+`;
+
+export type LabelProps = {
+  color?: ThemeColor;
+  size?: 'small' | 'medium' | 'large';
+  rounded?: boolean;
+  bordered?: boolean;
+};
+
+export const Label = forwardRef<
+  HTMLSpanElement,
+  ComponentProps<typeof StyledLabel> & LabelProps
+>(({ children, size = 'medium', className = '', ...props }, ref) => (
+  <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
+    {children}
+  </StyledLabel>
+));

package/src/components/ui/Message/index.tsx

@@ -44,7 +44,7 @@ const colorsMap: Record<
 };
 
 export const Message: FC<MessageProps> = ({ children, title, type }) => {
-  const { iconComponent: Icon, baseColor = 'neutral' } = colorsMap[type];
+  const { iconComponent: Icon, baseColor = 'base' } = colorsMap[type];
   return (
     <styles.MessageContainer $baseColor={baseColor}>
       <Icon className="MessageIcon" />

package/src/components/ui/TabsView/TabsList.tsx

@@ -1,44 +1,44 @@
-import { FC, useEffect, useState } from 'react';
-import { TabContainer, TabsListContainer } from './styles';
-
-import { SpaceProps } from '../../../helpers';
-import { Tab } from './types';
-
-type TabsListProps = {
-  tabs: Tab[];
-  selectedIndex?: number;
-  onSelectedIndexChanged?: (index: number) => void;
-} & SpaceProps;
-
-export const TabsList: FC<TabsListProps> = ({
-  tabs,
-  selectedIndex,
-  onSelectedIndexChanged,
-  ...spaceProps
-}) => {
-  const [activeIndex, setActiveIndex] = useState(selectedIndex ?? 0);
-
-  useEffect(() => {
-    setActiveIndex(selectedIndex ?? 0);
-  }, [selectedIndex]);
-
-  useEffect(() => {
-    onSelectedIndexChanged?.(activeIndex);
-  }, [activeIndex, onSelectedIndexChanged]);
-
-  return (
-    <TabsListContainer {...spaceProps}>
-      {tabs.map((tab, index) => (
-        <TabContainer
-          key={index}
-          $color={tab.color}
-          $isActive={activeIndex === index}
-          onClick={() => setActiveIndex(index)}
-        >
-          {tab.icon ? <tab.icon /> : null}
-          {tab.tabName}
-        </TabContainer>
-      ))}
-    </TabsListContainer>
-  );
-};
+import { FC, useEffect, useState } from 'react';
+import { TabContainer, TabsListContainer } from './styles';
+
+import { SpaceProps } from '../../../helpers';
+import { Tab } from './types';
+
+type TabsListProps = {
+  tabs: Tab[];
+  selectedIndex?: number;
+  onSelectedIndexChanged?: (index: number) => void;
+} & SpaceProps;
+
+export const TabsList: FC<TabsListProps> = ({
+  tabs,
+  selectedIndex,
+  onSelectedIndexChanged,
+  ...spaceProps
+}) => {
+  const [activeIndex, setActiveIndex] = useState(selectedIndex ?? 0);
+
+  useEffect(() => {
+    setActiveIndex(selectedIndex ?? 0);
+  }, [selectedIndex]);
+
+  useEffect(() => {
+    onSelectedIndexChanged?.(activeIndex);
+  }, [activeIndex, onSelectedIndexChanged]);
+
+  return (
+    <TabsListContainer {...spaceProps}>
+      {tabs.map((tab, index) => (
+        <TabContainer
+          key={index}
+          $color={tab.color}
+          $isActive={activeIndex === index}
+          onClick={() => setActiveIndex(index)}
+        >
+          {tab.icon ? <tab.icon /> : null}
+          {tab.tabName}
+        </TabContainer>
+      ))}
+    </TabsListContainer>
+  );
+};

package/src/components/ui/TabsView/index.ts

@@ -1,3 +1,3 @@
-export * from './types';
-export * from './TabsView';
-export * from './TabsList';
+export * from './types';
+export * from './TabsView';
+export * from './TabsList';

package/src/components/ui/TabsView/styles.ts

@@ -32,15 +32,20 @@ export const TabContainer = styled.div<{
   gap: var(--space-2);
   cursor: pointer;
   padding: 0 var(--space-2);
+  color: var(--color-base-800);
+
+  svg {
+    height: var(--space-4);
+    width: var(--space-4);
+    fill: var(--color-base-800);
+  }
 
   ${({ $color = 'primary' }) => css`
     &:hover {
       color: var(--color-${getColorWithIntensity($color, 500)});
-      fill: var(--color-${getColorWithIntensity($color, 500)});
-    }
-    svg {
-      height: var(--space-4);
-      width: var(--space-4);
+      svg {
+        fill: var(--color-${getColorWithIntensity($color, 500)});
+      }
     }
   `};
 
@@ -49,7 +54,9 @@ export const TabContainer = styled.div<{
     css`
       border-bottom: var(--space-0_5) solid;
       color: var(--color-${getColorWithIntensity($color, 500)});
-      fill: var(--color-${getColorWithIntensity($color, 500)});
+      svg {
+        fill: var(--color-${getColorWithIntensity($color, 500)});
+      }
     `}
 `;
 

package/src/helpers/styled/index.ts

@@ -1 +1 @@
-export * from './space';
+export * from './space';