@pautena/react-design-system 0.7.4 → 0.8.0

package/dist/esm/types/components/data-display/label/label.d.ts

@@ -1,5 +1,5 @@
 import { SxProps, Theme } from "@mui/material";
-export type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
+export type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error" | "success";
 export declare const labelClasses: {
     root: string;
 };
@@ -16,8 +16,12 @@ export interface LabelProps {
      * Custom styles
      */
     sx?: SxProps<Theme>;
+    /**
+     * Show the text as uppercase
+     */
+    textTransform?: "none" | "capitalize" | "uppercase";
 }
 /**
  * Compact element to represent a text
  */
-export declare const Label: ({ text, variant, sx }: LabelProps) => JSX.Element;
+export declare const Label: ({ text, variant, textTransform, sx, }: LabelProps) => JSX.Element;

package/dist/esm/types/components/dialogs/bootstrap-dialog/bootstrap-dialog.d.ts

@@ -1,2 +1,2 @@
 import { BootstrapDialogDialogProps } from "../dialog.types";
-export declare const BootstrapDialog: ({ open, title, component, componentProps, disabled, actions, children, loading, cancelable, callCloseWhenCancel, acceptable, acceptText, cancelText, onAccept, onCancel, onClose, acceptType, }: BootstrapDialogDialogProps) => JSX.Element;
+export declare const BootstrapDialog: ({ open, title, component, componentProps, disabled, disableAccept, disableCancel, actions, children, loading, cancelable, callCloseWhenCancel, acceptable, acceptText, cancelText, onAccept, onCancel, onClose, acceptType, }: BootstrapDialogDialogProps) => JSX.Element;

package/dist/esm/types/components/dialogs/confirm-dialog/confirm-dialog.d.ts

@@ -3,8 +3,9 @@ type OmitBaseDialogProps = "cancelable" | "acceptable" | "onAccept" | "onCancel"
 export interface ConfirmDialogProps extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {
     confirmText?: string;
     canceText?: string;
+    passphrase?: string;
     onCancel: () => void;
     onConfirm: () => void;
 }
-export declare const ConfirmDialog: ({ open, title, loading, disabled, confirmText, cancelText, children, onConfirm, onCancel, }: ConfirmDialogProps) => JSX.Element;
+export declare const ConfirmDialog: ({ open, title, loading, disabled, confirmText, cancelText, passphrase, children, onConfirm, onCancel, }: ConfirmDialogProps) => JSX.Element;
 export {};

package/dist/esm/types/components/dialogs/dialog.types.d.ts

@@ -11,6 +11,8 @@ export type BootstrapDialogDialogProps = PropsWithChildren<{
     title: string;
     loading?: boolean;
     disabled?: boolean;
+    disableAccept?: boolean;
+    disableCancel?: boolean;
     cancelable?: boolean;
     acceptable?: boolean;
     callCloseWhenCancel?: boolean;

package/dist/esm/types/components/navigation/index.d.ts

@@ -1 +1,2 @@
-export * from "./tab";
+export * from "./tab-card";
+export * from "./tab-panel";

package/dist/esm/types/components/navigation/tab-card/tab-card-panel.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from "react";
+import { SxProps, Theme } from "@mui/material";
+export type TabCardPanelProps = PropsWithChildren<{
+    index: number | number[];
+    sx?: SxProps<Theme>;
+}>;
+export declare const TabCardPanel: ({ index, children, sx }: TabCardPanelProps) => JSX.Element | null;

package/dist/esm/types/components/navigation/tab-card/tab-card.context.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch, SetStateAction } from "react";
+export declare const TabCardContext: import("react").Context<[number, Dispatch<SetStateAction<number>>]>;
+export declare const TabCardContextProvider: import("react").Provider<[number, Dispatch<SetStateAction<number>>]>;

package/dist/esm/types/components/navigation/tab-card/tab-card.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren, ReactElement } from "react";
+export interface TabData {
+    text: string;
+    icon?: ReactElement;
+}
+export type TabCardProps = PropsWithChildren<{
+    tabs: TabData[];
+    initialTab?: number;
+    onChangeTab?: (tab: TabData, index: number) => void;
+}>;
+export declare const TabCard: ({ children, tabs, initialTab, onChangeTab, }: TabCardProps) => JSX.Element;

package/dist/esm/types/components/navigation/tab-card/tab-card.dummy.d.ts

@@ -0,0 +1,14 @@
+import { TabData } from "./tab-card";
+export declare const DummyTabs: ({
+    text: string;
+    icon?: undefined;
+} | {
+    text: string;
+    icon: JSX.Element;
+})[];
+export interface TabCardDummyProps {
+    tabs: TabData[];
+    initialTab: number;
+    onChangeTab: (tab: TabData, index: number) => void;
+}
+export declare function TabCardDummy({ tabs, initialTab, onChangeTab }: TabCardDummyProps): JSX.Element;

package/dist/index.d.ts

@@ -196,7 +196,7 @@ interface BulletProps {
  */
 declare const Bullet: ({ variant, sx }: BulletProps) => JSX.Element;
 
-type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
+type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error" | "success";
 declare const labelClasses: {
     root: string;
 };
@@ -213,11 +213,15 @@ interface LabelProps {
      * Custom styles
      */
     sx?: SxProps<Theme>;
+    /**
+     * Show the text as uppercase
+     */
+    textTransform?: "none" | "capitalize" | "uppercase";
 }
 /**
  * Compact element to represent a text
  */
-declare const Label: ({ text, variant, sx }: LabelProps) => JSX.Element;
+declare const Label: ({ text, variant, textTransform, sx, }: LabelProps) => JSX.Element;
 
 type HeaderPreset = PropTypes.Color | "transparent";
 type HeaderActionVariant = "text" | "outlined" | "contained";
@@ -511,17 +515,23 @@ type TextFieldProps = TextFieldProps$1 & {
 };
 declare const TextField: ({ id: overrideId, label, InputLabelProps, InputProps, fetching, loading, helperText, hexColor, size, fullWidth, sx, ...rest }: TextFieldProps) => JSX.Element;
 
+interface TabData {
+    text: string;
+    icon?: ReactElement;
+}
+type TabCardProps = PropsWithChildren<{
+    tabs: TabData[];
+    initialTab?: number;
+    onChangeTab?: (tab: TabData, index: number) => void;
+}>;
+declare const TabCard: ({ children, tabs, initialTab, onChangeTab, }: TabCardProps) => JSX.Element;
+
 interface TabPanelProps {
     children?: React__default.ReactNode;
     index: number | number[];
 }
 declare function TabPanel({ children, index }: TabPanelProps): JSX.Element;
 
-type TabCardProps = PropsWithChildren<{
-    tabs: string[];
-}>;
-declare const TabCard: ({ children, tabs }: TabCardProps) => JSX.Element;
-
 type Order = "asc" | "desc";
 interface HeadCell<T> {
     disablePadding: boolean;
@@ -634,6 +644,8 @@ type BootstrapDialogDialogProps = PropsWithChildren<{
     title: string;
     loading?: boolean;
     disabled?: boolean;
+    disableAccept?: boolean;
+    disableCancel?: boolean;
     cancelable?: boolean;
     acceptable?: boolean;
     callCloseWhenCancel?: boolean;
@@ -652,10 +664,11 @@ type OmitBaseDialogProps$1 = "cancelable" | "acceptable" | "onAccept" | "onCance
 interface ConfirmDialogProps extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps$1> {
     confirmText?: string;
     canceText?: string;
+    passphrase?: string;
     onCancel: () => void;
     onConfirm: () => void;
 }
-declare const ConfirmDialog: ({ open, title, loading, disabled, confirmText, cancelText, children, onConfirm, onCancel, }: ConfirmDialogProps) => JSX.Element;
+declare const ConfirmDialog: ({ open, title, loading, disabled, confirmText, cancelText, passphrase, children, onConfirm, onCancel, }: ConfirmDialogProps) => JSX.Element;
 
 type OmitBaseDialogProps = "cancelable" | "acceptable" | "onAccept" | "onCancel" | "onClose" | "actions" | "callCloseWhenCancel" | "component" | "acceptType";
 interface FormDialogProps<T> extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {
@@ -666,7 +679,7 @@ interface FormDialogProps<T> extends Omit<BootstrapDialogDialogProps, OmitBaseDi
 }
 declare const FormDialog: <T>({ open, title, loading, disabled, submitText, cancelText, children, onSubmit, onCancel, }: FormDialogProps<T>) => JSX.Element;
 
-declare const BootstrapDialog: ({ open, title, component, componentProps, disabled, actions, children, loading, cancelable, callCloseWhenCancel, acceptable, acceptText, cancelText, onAccept, onCancel, onClose, acceptType, }: BootstrapDialogDialogProps) => JSX.Element;
+declare const BootstrapDialog: ({ open, title, component, componentProps, disabled, disableAccept, disableCancel, actions, children, loading, cancelable, callCloseWhenCancel, acceptable, acceptText, cancelText, onAccept, onCancel, onClose, acceptType, }: BootstrapDialogDialogProps) => JSX.Element;
 
 declare const useDialog: (intialOpen?: boolean) => {
     isOpen: boolean;
@@ -1001,4 +1014,4 @@ type TabProviderProps = PropsWithChildren<{
 }>;
 declare const TabProvider: ({ children, initialValue }: TabProviderProps) => JSX.Element;
 
-export { ArrayFieldType, ArrayGroupField, ArrayInstanceType, Autocomplete, AutocompleteProps, BaseFieldType, BaseValueProps, BasicModelInstance, Board, BoardProps, BootstrapDialog, BootstrapDialogDialogProps, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, ConfirmDialog, ConfirmDialogProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DefaultPlaceholder, DialogAction, Drawer, DrawerAppBar, DrawerAppBarComponent, DrawerAppBarElement, DrawerAppBarProps, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerHeader, DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel, DrawerLayout, DrawerLayoutProps, DrawerMain, DrawerMainProps, DrawerNavigation, DrawerNavigationItem, DrawerNavigationItemCollapsable, DrawerNavigationItemLink, DrawerNavigationSection, DrawerProps, DrawerProvider, DrawerProviderProps, DrawerSection, DrawerSectionProps, DrawerSize, DrawerState, DrawerSubheader, DrawerSubheaderProps, DrawerVariant, EditInputType, EditableValueProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedTable, EnhancedTableHead, ExpandableAlert, ExpandableAlertProps, FieldType, FormDialog, FormDialogProps, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutError, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, Markdown, MarkdownProps, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIcon, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, Select, SelectProps, SelectSize, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardProps, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, TextField, TextFieldProps, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueEditButton, ValueEditButtonProps, ValueEditButtons, ValueEditButtonsProps, ValueItem, ValueItemComponent, ValueItemElement, ValueItemProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getDrawerItemColors, getFormData, getRandomItem, labelClasses, markdownDefaultOptions, newArrayWithSize, newBreakpointsCounter, newInstanceFromValuesOrZeroValue, useDialog, useDrawer, useEditableValueDisplay, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab, valueItemClasses };
+export { ArrayFieldType, ArrayGroupField, ArrayInstanceType, Autocomplete, AutocompleteProps, BaseFieldType, BaseValueProps, BasicModelInstance, Board, BoardProps, BootstrapDialog, BootstrapDialogDialogProps, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, ConfirmDialog, ConfirmDialogProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DefaultPlaceholder, DialogAction, Drawer, DrawerAppBar, DrawerAppBarComponent, DrawerAppBarElement, DrawerAppBarProps, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerHeader, DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel, DrawerLayout, DrawerLayoutProps, DrawerMain, DrawerMainProps, DrawerNavigation, DrawerNavigationItem, DrawerNavigationItemCollapsable, DrawerNavigationItemLink, DrawerNavigationSection, DrawerProps, DrawerProvider, DrawerProviderProps, DrawerSection, DrawerSectionProps, DrawerSize, DrawerState, DrawerSubheader, DrawerSubheaderProps, DrawerVariant, EditInputType, EditableValueProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedTable, EnhancedTableHead, ExpandableAlert, ExpandableAlertProps, FieldType, FormDialog, FormDialogProps, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutError, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, Markdown, MarkdownProps, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIcon, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, Select, SelectProps, SelectSize, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardProps, TabContext, TabContextProvider, TabData, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, TextField, TextFieldProps, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueEditButton, ValueEditButtonProps, ValueEditButtons, ValueEditButtonsProps, ValueItem, ValueItemComponent, ValueItemElement, ValueItemProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getDrawerItemColors, getFormData, getRandomItem, labelClasses, markdownDefaultOptions, newArrayWithSize, newBreakpointsCounter, newInstanceFromValuesOrZeroValue, useDialog, useDrawer, useEditableValueDisplay, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab, valueItemClasses };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.7.4",
+  "version": "0.8.0",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/data-display/board/board.tsx

@@ -48,10 +48,20 @@ export const Board = ({
   const markdown = markdownProps && <Markdown content={markdownProps} />;
 
   return (
-    <Paper sx={{ pl: 2, pr: 4, py: 1, backgroundColor: blueGrey[800], color: "white", ...sx }}>
+    <Paper
+      sx={{
+        position: "relative",
+        pl: 2,
+        pr: 4,
+        py: 1,
+        backgroundColor: blueGrey[800],
+        color: "white",
+        ...sx,
+      }}
+    >
       <Box display="flex" flexDirection="row">
         <Box width={1}>{children || markdown || content}</Box>
-        <Box sx={{ position: "absolute", top: themeSpacing(2), right: themeSpacing(2) }}>
+        <Box sx={{ position: "absolute", top: themeSpacing(0.5), right: themeSpacing(0.5) }}>
           {copyContent && (
             <IconButton
               aria-label="copy board content"
@@ -59,7 +69,7 @@ export const Board = ({
               onClick={() => navigator.clipboard.writeText(copyContent)}
             >
               <Tooltip title="Copy">
-                <ContentCopyIcon sx={{ fontSize: typography.pxToRem(22) }} />
+                <ContentCopyIcon sx={{ fontSize: typography.pxToRem(18) }} />
               </Tooltip>
             </IconButton>
           )}

package/src/components/data-display/header/header.stories.tsx

@@ -7,7 +7,7 @@ import React from "react";
 import { TabProvider } from "~/providers";
 import { Content } from "~/components/containers";
 import { Box, Typography } from "@mui/material";
-import { TabPanel } from "~/components/navigation/tab/tab-panel";
+import { TabPanel } from "~/components/navigation/tab-panel";
 import { Route, Routes, useLocation } from "react-router-dom";
 
 export default {

package/src/components/data-display/label/label.test.tsx

@@ -10,13 +10,13 @@ describe("Label", () => {
   it("renders the label text", () => {
     renderComponent();
 
-    expect(screen.getByText("LOREM IPSUM")).toBeInTheDocument();
+    expect(screen.getByText("lorem ipsum")).toBeInTheDocument();
   });
 
   it("renders as default without a variant", () => {
     renderComponent(undefined);
 
-    expect(screen.getByRole("label")).toHaveAttribute("aria-describedby", "default");
+    expect(screen.getByRole("label", { name: /default/i })).toBeVisible();
   });
 
   it.each([["primary"], ["secondary"], ["default"], ["info"], ["warning"], ["error"]])(
@@ -24,7 +24,7 @@ describe("Label", () => {
     (variant: string) => {
       renderComponent(variant as LabelVariant);
 
-      expect(screen.getByRole("label")).toHaveAttribute("aria-describedby", variant);
+      expect(screen.getByRole("label", { name: `lorem ipsum ${variant} label` })).toBeVisible();
     },
   );
 });

package/src/components/data-display/label/label.tsx

@@ -1,7 +1,14 @@
-import { Box, SxProps, Theme, Typography, useTheme } from "@mui/material";
+import { Box, SxProps, Theme, useTheme } from "@mui/material";
 import React from "react";
 
-export type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
+export type LabelVariant =
+  | "primary"
+  | "secondary"
+  | "default"
+  | "info"
+  | "warning"
+  | "error"
+  | "success";
 
 export const labelClasses = {
   root: "RdsLabel-root",
@@ -21,21 +28,32 @@ export interface LabelProps {
    * Custom styles
    */
   sx?: SxProps<Theme>;
+
+  /**
+   * Show the text as uppercase
+   */
+  textTransform?: "none" | "capitalize" | "uppercase";
 }
 
 /**
  * Compact element to represent a text
  */
-export const Label = ({ text, variant = "default", sx }: LabelProps) => {
-  const { palette } = useTheme();
+export const Label = ({
+  text,
+  variant = "default",
+  textTransform = "capitalize",
+  sx,
+}: LabelProps) => {
+  const { palette, typography } = useTheme();
 
   const backgroundColor: Record<LabelVariant, string> = {
     default: palette.mode === "light" ? palette.grey[100] : palette.grey[900],
-    primary: palette.primary.main,
-    secondary: palette.secondary.main,
-    info: palette.info.main,
-    warning: palette.warning.main,
-    error: palette.error.main,
+    primary: palette.primary.light,
+    secondary: palette.secondary.light,
+    info: palette.info.light,
+    warning: palette.warning.light,
+    error: palette.error.light,
+    success: palette.success.light,
   };
 
   const textColor: Record<LabelVariant, string> = {
@@ -45,21 +63,31 @@ export const Label = ({ text, variant = "default", sx }: LabelProps) => {
     info: palette.info.contrastText,
     warning: palette.warning.contrastText,
     error: palette.error.contrastText,
+    success: palette.success.contrastText,
   };
 
   return (
     <Box
-      px={1}
-      sx={{ backgroundColor: backgroundColor[variant], ...sx }}
-      borderRadius={1}
+      height={24}
+      minWidth={22}
+      display="inline-flex"
+      justifyContent="center"
+      alignItems="center"
+      bgcolor={backgroundColor[variant]}
       color={textColor[variant]}
-      className={labelClasses.root}
+      fontSize={typography.caption.fontSize}
+      fontWeight={typography.fontWeightBold}
+      lineHeight={0}
+      textTransform={textTransform}
+      whiteSpace="nowrap"
+      borderRadius={2}
       role="label"
-      aria-describedby={variant}
+      aria-label={`${text} ${variant} label`}
+      py={0}
+      px={1}
+      sx={{ cursor: "default", ...sx }}
     >
-      <Typography variant="caption" fontWeight={700}>
-        {text.toUpperCase()}
-      </Typography>
+      {text}
     </Box>
   );
 };

package/src/components/dialogs/bootstrap-dialog/bootstrap-dialog.test.tsx

@@ -9,6 +9,8 @@ import { vi } from "vitest";
 interface DialogRenderArgs {
   open: boolean;
   disabled?: boolean;
+  disableCancel?: boolean;
+  disableAccept?: boolean;
   cancelable?: boolean;
   acceptable?: boolean;
   callCloseWhenCancel?: boolean;
@@ -41,6 +43,8 @@ describe("BootstrapDialog", () => {
   const renderComponent = ({
     open,
     disabled,
+    disableCancel,
+    disableAccept,
     cancelable,
     acceptable,
     callCloseWhenCancel,
@@ -57,6 +61,8 @@ describe("BootstrapDialog", () => {
       <BootstrapDialog
         open={open}
         disabled={disabled}
+        disableAccept={disableAccept}
+        disableCancel={disableCancel}
         cancelable={cancelable}
         acceptable={acceptable}
         callCloseWhenCancel={callCloseWhenCancel}
@@ -136,6 +142,34 @@ describe("BootstrapDialog", () => {
     });
   });
 
+  describe("disableCancel", () => {
+    it("should have the Cancel button as disabled if is true", () => {
+      renderComponent({ open: true, disableCancel: true, cancelable: true });
+
+      expect(screen.getByRole("button", { name: /cancel/i })).toBeDisabled();
+    });
+
+    it("should not have the Cancel button as disabled if is false", () => {
+      renderComponent({ open: true, disableCancel: false, cancelable: true });
+
+      expect(screen.getByRole("button", { name: /cancel/i })).not.toBeDisabled();
+    });
+  });
+
+  describe("disableAccept", () => {
+    it("should have the Cancel button as disabled if is true", () => {
+      renderComponent({ open: true, disableAccept: true, acceptable: true });
+
+      expect(screen.getByRole("button", { name: /accept/i })).toBeDisabled();
+    });
+
+    it("should not have the Cancel button as disabled if is false", () => {
+      renderComponent({ open: true, disableAccept: false, acceptable: true });
+
+      expect(screen.getByRole("button", { name: /accept/i })).not.toBeDisabled();
+    });
+  });
+
   it("should be able to change the cancel button text", () => {
     renderComponent({ open: true, cancelable: true, cancelText: "updated cancel" });
 

package/src/components/dialogs/bootstrap-dialog/bootstrap-dialog.tsx

@@ -19,6 +19,8 @@ export const BootstrapDialog = ({
   component,
   componentProps = {},
   disabled,
+  disableAccept,
+  disableCancel,
   actions = [],
   children,
   loading,
@@ -67,7 +69,7 @@ export const BootstrapDialog = ({
             {cancelable && (
               <Button
                 color="error"
-                disabled={disabled}
+                disabled={disabled || disableCancel}
                 onClick={() => {
                   onCancel();
                   callCloseWhenCancel && onClose();
@@ -81,7 +83,7 @@ export const BootstrapDialog = ({
               <LoadingButton
                 type={acceptType}
                 loading={loading}
-                disabled={disabled}
+                disabled={disabled || disableAccept}
                 onClick={onAccept}
               >
                 {acceptText}

package/src/components/dialogs/confirm-dialog/confirm-dialog.stories.tsx

@@ -1,5 +1,5 @@
 import { DialogContentText } from "@mui/material";
-import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { loremIpsum } from "lorem-ipsum";
 import React from "react";
 import { StoryDialogManager } from "~/storybook";
@@ -44,3 +44,15 @@ export const CustomButtonText: Story = {
     cancelText: "Don't create a token",
   },
 };
+
+export const Passphrase: Story = {
+  args: {
+    title: "Lorem ipsum",
+    children: (
+      <DialogContentText sx={{ mb: 1 }}>
+        Write the passphrase to confirm your action
+      </DialogContentText>
+    ),
+    passphrase: "delete permanently",
+  },
+};

package/src/components/dialogs/confirm-dialog/confirm-dialog.test.tsx

@@ -12,6 +12,7 @@ interface DialogRenderArgs {
   cancelText?: string;
   loading?: boolean;
   content?: string | string[];
+  passphrase?: string;
 }
 
 describe("ConfirmDialog", () => {
@@ -21,6 +22,7 @@ describe("ConfirmDialog", () => {
     confirmText,
     cancelText,
     loading,
+    passphrase,
   }: DialogRenderArgs) => {
     const onCancel = vi.fn();
     const onConfirm = vi.fn();
@@ -30,6 +32,7 @@ describe("ConfirmDialog", () => {
         open={open}
         disabled={disabled}
         loading={loading}
+        passphrase={passphrase}
         title="lorem ipsum"
         onCancel={onCancel}
         onConfirm={onConfirm}
@@ -148,4 +151,36 @@ describe("ConfirmDialog", () => {
       expect(screen.getByRole("button", { name: /confirm/i })).toBeDisabled();
     });
   });
+
+  describe("passphrase", () => {
+    it("should render an input to enter a passphrase", () => {
+      renderComponent({ open: true, passphrase: "delete permanently" });
+
+      const input = screen.getByRole("textbox");
+      expect(input).toBeVisible();
+      expect(input).toHaveAttribute("placeholder", "delete permanently");
+    });
+
+    it("should have the confirm button disabled by default", () => {
+      renderComponent({ open: true, passphrase: "delete permanently" });
+
+      expect(screen.getByRole("button", { name: /confirm/i })).toBeDisabled();
+    });
+
+    it("should have the confirm button disabled if the user writes a non valid passphrase", async () => {
+      renderComponent({ open: true, passphrase: "delete permanently" });
+
+      await userEvent.type(screen.getByRole("textbox"), "invalid passphrase");
+
+      expect(screen.getByRole("button", { name: /confirm/i })).toBeDisabled();
+    });
+
+    it("should have the confirm button enabled if the user writes a valid passphrase", async () => {
+      renderComponent({ open: true, passphrase: "delete permanently" });
+
+      await userEvent.type(screen.getByRole("textbox"), "delete permanently");
+
+      expect(screen.getByRole("button", { name: /confirm/i })).not.toBeDisabled();
+    });
+  });
 });

package/src/components/dialogs/confirm-dialog/confirm-dialog.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { BootstrapDialog } from "../bootstrap-dialog";
 import { BootstrapDialogDialogProps } from "../dialog.types";
+import { TextField } from "@mui/material";
 
 type OmitBaseDialogProps =
   | "cancelable"
@@ -15,6 +16,7 @@ type OmitBaseDialogProps =
 export interface ConfirmDialogProps extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {
   confirmText?: string;
   canceText?: string;
+  passphrase?: string;
   onCancel: () => void;
   onConfirm: () => void;
 }
@@ -26,15 +28,20 @@ export const ConfirmDialog = ({
   disabled,
   confirmText = "Confirm",
   cancelText = "Cancel",
+  passphrase,
   children,
   onConfirm,
   onCancel,
 }: ConfirmDialogProps) => {
+  const [inputPassphrase, setInputPassphrase] = useState("");
+  const validPassphrase = !passphrase || inputPassphrase === passphrase;
+
   return (
     <BootstrapDialog
       title={title}
       loading={loading}
       disabled={loading || disabled}
+      disableAccept={!validPassphrase}
       open={open}
       onClose={onCancel}
       acceptable
@@ -46,6 +53,15 @@ export const ConfirmDialog = ({
       onAccept={onConfirm}
     >
       {children}
+      {passphrase && (
+        <TextField
+          size="small"
+          fullWidth
+          value={inputPassphrase}
+          onChange={(e) => setInputPassphrase(e.target.value)}
+          placeholder={passphrase}
+        />
+      )}
     </BootstrapDialog>
   );
 };

package/src/components/dialogs/dialog.types.ts

@@ -12,6 +12,8 @@ export type BootstrapDialogDialogProps = PropsWithChildren<{
   title: string;
   loading?: boolean;
   disabled?: boolean;
+  disableAccept?: boolean;
+  disableCancel?: boolean;
   cancelable?: boolean;
   acceptable?: boolean;
   callCloseWhenCancel?: boolean;

package/src/components/drawers/drawer-item/drawer-item.test.tsx

@@ -228,9 +228,8 @@ describe("DrawerItem", () => {
       it("should render a label when is set", () => {
         renderComponent({ item: mockLinkLabelDrawerNavigationItem });
 
-        const label = screen.getByRole("label", { name: /10/i });
+        const label = screen.getByRole("label", { name: "10 error label" });
         expect(label).toBeVisible();
-        expect(label).toHaveAttribute("aria-describedby", "error");
       });
 
       it("shouldn't render a label if is not set", () => {

package/src/components/navigation/index.ts

@@ -1 +1,2 @@
-export * from "./tab";
+export * from "./tab-card";
+export * from "./tab-panel";

package/src/components/navigation/tab-card/tab-card-panel.tsx

@@ -0,0 +1,19 @@
+import { PropsWithChildren, useContext } from "react";
+import { TabCardContext } from "./tab-card.context";
+import React from "react";
+import { Box, SxProps, Theme } from "@mui/material";
+
+export type TabCardPanelProps = PropsWithChildren<{
+  index: number | number[];
+  sx?: SxProps<Theme>;
+}>;
+
+export const TabCardPanel = ({ index, children, sx }: TabCardPanelProps) => {
+  const [value] = useContext(TabCardContext);
+  let isTab = value === index;
+  if (Array.isArray(index)) {
+    isTab = index.includes(value);
+  }
+
+  return isTab ? <Box sx={sx}>{children}</Box> : null;
+};

package/src/components/navigation/tab-card/tab-card.context.tsx

@@ -0,0 +1,7 @@
+import { createContext, Dispatch, SetStateAction } from "react";
+
+export const TabCardContext = createContext<[number, Dispatch<SetStateAction<number>>]>([
+  0,
+  () => null,
+]);
+export const TabCardContextProvider = TabCardContext.Provider;