@addev-be/ui 2.5.20 → 2.6.0

package/src/components/ui/Ellipsis.tsx

@@ -1,33 +1,33 @@
-import styled from 'styled-components';
-
-type EllipsisProps = React.HTMLAttributes<HTMLElement> & {
-  $width?: string;
-  $maxWidth?: string;
-  $multiline?: boolean;
-  $lineClamp?: number;
-};
-
-/**
- * Ellipsis component that truncates text with an ellipsis when it overflows
- * Can be rendered as any HTML element (div, span, p, etc.) using the "as" prop
- */
-export const Ellipsis = styled.div<EllipsisProps>`
-  overflow: hidden;
-  width: ${({ $width }) => $width || 'auto'};
-  max-width: ${({ $maxWidth }) => $maxWidth || '100%'};
-
-  ${({ $multiline, $lineClamp = 1 }) =>
-    $multiline
-      ? `
-        display: -webkit-box;
-        -webkit-line-clamp: ${$lineClamp};
-        -webkit-box-orient: vertical;
-        white-space: normal;
-        line-height: 1.25;
-        max-height: calc(${1.25 * $lineClamp}em);
-      `
-      : `
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      `}
-`;
+import styled from 'styled-components';
+
+type EllipsisProps = React.HTMLAttributes<HTMLElement> & {
+  $width?: string;
+  $maxWidth?: string;
+  $multiline?: boolean;
+  $lineClamp?: number;
+};
+
+/**
+ * Ellipsis component that truncates text with an ellipsis when it overflows
+ * Can be rendered as any HTML element (div, span, p, etc.) using the "as" prop
+ */
+export const Ellipsis = styled.div<EllipsisProps>`
+  overflow: hidden;
+  width: ${({ $width }) => $width || 'auto'};
+  max-width: ${({ $maxWidth }) => $maxWidth || '100%'};
+
+  ${({ $multiline, $lineClamp = 1 }) =>
+    $multiline
+      ? `
+        display: -webkit-box;
+        -webkit-line-clamp: ${$lineClamp};
+        -webkit-box-orient: vertical;
+        white-space: normal;
+        line-height: 1.25;
+        max-height: calc(${1.25 * $lineClamp}em);
+      `
+      : `
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      `}
+`;

package/src/components/ui/Label.tsx

@@ -1,93 +1,93 @@
-import styled, { css } from 'styled-components';
-
-import { ComponentProps } from 'react';
-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-text-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 = ({
-  children,
-  size = 'medium',
-  className = '',
-  ref,
-  ...props
-}: ComponentProps<typeof StyledLabel> & LabelProps) => (
-  <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
-    {children}
-  </StyledLabel>
-);
+import styled, { css } from 'styled-components';
+
+import { ComponentProps } from 'react';
+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-text-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 = ({
+  children,
+  size = 'medium',
+  className = '',
+  ref,
+  ...props
+}: ComponentProps<typeof StyledLabel> & LabelProps) => (
+  <StyledLabel ref={ref} className={`${size} ${className}`} {...props}>
+    {children}
+  </StyledLabel>
+);

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

@@ -1,57 +1,57 @@
-import * as styles from './styles';
-
-import {
-  CircleCheckIcon,
-  CircleInfoIcon,
-  CircleXMarkIcon,
-  TriangleExclamationIcon,
-} from '../../../Icons';
-import { FC, PropsWithChildren } from 'react';
-
-import { ThemeColor } from '../../../providers/ThemeProvider/types';
-
-type MessageType = 'success' | 'info' | 'warning' | 'error';
-
-type MessageProps = PropsWithChildren<{
-  className?: string;
-  title?: string;
-  type: MessageType;
-}>;
-
-const colorsMap: Record<
-  MessageType,
-  {
-    baseColor: ThemeColor;
-    iconComponent: FC<{ className?: string }>;
-  }
-> = {
-  success: {
-    baseColor: 'green',
-    iconComponent: CircleCheckIcon,
-  },
-  info: {
-    baseColor: 'sky',
-    iconComponent: CircleInfoIcon,
-  },
-  warning: {
-    baseColor: 'amber',
-    iconComponent: TriangleExclamationIcon,
-  },
-  error: {
-    baseColor: 'red',
-    iconComponent: CircleXMarkIcon,
-  },
-};
-
-export const Message: FC<MessageProps> = ({ children, title, type }) => {
-  const { iconComponent: Icon, baseColor = 'base' } = colorsMap[type];
-  return (
-    <styles.MessageContainer $baseColor={baseColor}>
-      <Icon className="MessageIcon" />
-      <styles.MessageContent>
-        {title && <styles.MessageTitle>{title}</styles.MessageTitle>}
-        <div>{children}</div>
-      </styles.MessageContent>
-    </styles.MessageContainer>
-  );
-};
+import * as styles from './styles';
+
+import {
+  CircleCheckIcon,
+  CircleInfoIcon,
+  CircleXMarkIcon,
+  TriangleExclamationIcon,
+} from '../../../Icons';
+import { FC, PropsWithChildren } from 'react';
+
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+
+type MessageType = 'success' | 'info' | 'warning' | 'error';
+
+type MessageProps = PropsWithChildren<{
+  className?: string;
+  title?: string;
+  type: MessageType;
+}>;
+
+const colorsMap: Record<
+  MessageType,
+  {
+    baseColor: ThemeColor;
+    iconComponent: FC<{ className?: string }>;
+  }
+> = {
+  success: {
+    baseColor: 'green',
+    iconComponent: CircleCheckIcon,
+  },
+  info: {
+    baseColor: 'sky',
+    iconComponent: CircleInfoIcon,
+  },
+  warning: {
+    baseColor: 'amber',
+    iconComponent: TriangleExclamationIcon,
+  },
+  error: {
+    baseColor: 'red',
+    iconComponent: CircleXMarkIcon,
+  },
+};
+
+export const Message: FC<MessageProps> = ({ children, title, type }) => {
+  const { iconComponent: Icon, baseColor = 'base' } = colorsMap[type];
+  return (
+    <styles.MessageContainer $baseColor={baseColor}>
+      <Icon className="MessageIcon" />
+      <styles.MessageContent>
+        {title && <styles.MessageTitle>{title}</styles.MessageTitle>}
+        <div>{children}</div>
+      </styles.MessageContent>
+    </styles.MessageContainer>
+  );
+};

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

@@ -1,44 +1,44 @@
-import styled, { css } from 'styled-components';
-
-import { ThemeColor } from '../../../providers/ThemeProvider/types';
-
-export const MessageContainer = styled.div.attrs({
-  className: 'MessageContainer',
-})<{
-  $baseColor: ThemeColor;
-}>`
-  display: flex;
-  flex-direction: row;
-  box-shadow: var(--shadow-md);
-  border-radius: var(--rounded-md);
-  padding: var(--space-4);
-  gap: var(--space-4);
-
-  ${({ $baseColor }) => css`
-    border: 1px solid var(--color-${$baseColor}-300);
-    background-color: var(--color-${$baseColor}-100);
-    color: var(--color-${$baseColor}-600);
-
-    .MessageIcon {
-      fill: var(--color-${$baseColor}-600);
-    }
-  `}
-
-  .MessageIcon {
-    width: var(--space-5);
-    height: var(--space-5);
-    flex-shrink: 0;
-  }
-`;
-
-export const MessageContent = styled.div.attrs({
-  className: 'MessageContent',
-})`
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`;
-
-export const MessageTitle = styled.h3`
-  font-weight: bold;
-`;
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+
+export const MessageContainer = styled.div.attrs({
+  className: 'MessageContainer',
+})<{
+  $baseColor: ThemeColor;
+}>`
+  display: flex;
+  flex-direction: row;
+  box-shadow: var(--shadow-md);
+  border-radius: var(--rounded-md);
+  padding: var(--space-4);
+  gap: var(--space-4);
+
+  ${({ $baseColor }) => css`
+    border: 1px solid var(--color-${$baseColor}-300);
+    background-color: var(--color-${$baseColor}-100);
+    color: var(--color-${$baseColor}-600);
+
+    .MessageIcon {
+      fill: var(--color-${$baseColor}-600);
+    }
+  `}
+
+  .MessageIcon {
+    width: var(--space-5);
+    height: var(--space-5);
+    flex-shrink: 0;
+  }
+`;
+
+export const MessageContent = styled.div.attrs({
+  className: 'MessageContent',
+})`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;
+
+export const MessageTitle = styled.h3`
+  font-weight: bold;
+`;

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

@@ -1,44 +1,49 @@
-import { FC, useEffect, useState } from 'react';
-import { TabContainer, TabsListContainer } from './styles';
-
-import { SpaceProps } from '../../../helpers/styled/space';
-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 { Card } from '../Card';
+import { SpaceProps } from '../../../helpers/styled/space';
+import { Tab } from './types';
+
+type TabsListProps = {
+  card?: boolean;
+  tabs: Tab[];
+  selectedIndex?: number;
+  onSelectedIndexChanged?: (index: number) => void;
+} & SpaceProps;
+
+export const TabsList: FC<TabsListProps> = ({
+  card,
+  tabs,
+  selectedIndex,
+  onSelectedIndexChanged,
+  ...spaceProps
+}) => {
+  const [activeIndex, setActiveIndex] = useState(selectedIndex ?? 0);
+
+  useEffect(() => {
+    setActiveIndex(selectedIndex ?? 0);
+  }, [selectedIndex]);
+
+  useEffect(() => {
+    onSelectedIndexChanged?.(activeIndex);
+  }, [activeIndex, onSelectedIndexChanged]);
+
+  const tabsList = (
+    <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>
+  );
+
+  return card ? <Card p="2">{tabsList}</Card> : tabsList;
+};

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

@@ -1,38 +1,42 @@
-import { FC, useEffect, useState } from 'react';
-import { TabContentContainer, TabsViewContainer } from './styles';
-
-import { Tab } from './types';
-import { TabsList } from './TabsList';
-
-type TabsViewProps = {
-  tabs: Tab[];
-  overflow?: boolean;
-  onSelectedTabChanged?: (tab: Tab, index: number) => void;
-};
-
-export const TabsView: FC<TabsViewProps> = ({
-  tabs,
-  overflow = false,
-  onSelectedTabChanged,
-}) => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const activeTab = tabs[activeIndex];
-
-  useEffect(() => {
-    onSelectedTabChanged?.(tabs[activeIndex], activeIndex);
-  }, [activeIndex, tabs, onSelectedTabChanged]);
-
-  return (
-    <TabsViewContainer>
-      <TabsList
-        tabs={tabs}
-        selectedIndex={activeIndex}
-        onSelectedIndexChanged={setActiveIndex}
-        p="2"
-      />
-      <TabContentContainer $isOverflow={overflow}>
-        {activeTab.content}
-      </TabContentContainer>
-    </TabsViewContainer>
-  );
-};
+import { FC, useEffect, useState } from 'react';
+import { TabContentContainer, TabsViewContainer } from './styles';
+
+import { SpaceProps } from '../../../helpers/styled/space';
+import { Tab } from './types';
+import { TabsList } from './TabsList';
+
+type TabsViewProps = {
+  tabs: Tab[];
+  overflow?: boolean;
+  onSelectedTabChanged?: (tab: Tab, index: number) => void;
+  card?: boolean;
+} & SpaceProps;
+
+export const TabsView: FC<TabsViewProps> = ({
+  tabs,
+  overflow = false,
+  onSelectedTabChanged,
+  card,
+}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const activeTab = tabs[activeIndex];
+
+  useEffect(() => {
+    onSelectedTabChanged?.(tabs[activeIndex], activeIndex);
+  }, [activeIndex, tabs, onSelectedTabChanged]);
+
+  return (
+    <TabsViewContainer>
+      <TabsList
+        card={card}
+        tabs={tabs}
+        selectedIndex={activeIndex}
+        onSelectedIndexChanged={setActiveIndex}
+        p={card ? '0' : '2'}
+      />
+      <TabContentContainer $isOverflow={overflow}>
+        {activeTab.content}
+      </TabContentContainer>
+    </TabsViewContainer>
+  );
+};