@pautena/react-design-system 0.18.0 → 0.19.0

package/dist/action/action.d.ts

@@ -2,18 +2,60 @@ import { Variant } from '@mui/material/styles/createTypography';
 import { ReactElement } from 'react';
 export type ActionVariant = "primary" | "error" | "warning" | "success";
 export interface ActionProps {
+    /**
+     * The variant of the action.
+     */
     variant: ActionVariant;
+    /**
+     * The title of the action.
+     */
     title: string;
+    /**
+     * The variant of the title.
+     */
     titleVariant?: Extract<Variant, "h4" | "h5" | "h6">;
+    /**
+     * The description of the action.
+     */
     description?: string | ReactElement;
+    /**
+     * The variant of the description.
+     */
     descriptionVariant?: Variant;
+    /**
+     * The helper text for the action.
+     */
     helperText?: string;
+    /**
+     * The variant of the helper text.
+     */
     helperTextVariant?: Variant;
+    /**
+     * The text for the action button.
+     */
     buttonText: string;
+    /**
+     * Indicates if the action requires confirmation.
+     */
     confirmable?: boolean;
+    /**
+     * The title for the confirmation dialog.
+     */
     confirmTitle?: string;
+    /**
+     * The description for the confirmation dialog.
+     */
     confirmDescription?: string;
+    /**
+     * The passphrase required to perform action.
+     */
     passphrase?: string;
+    /**
+     * The callback function to be executed when the action is triggered.
+     */
     onAction: () => void;
 }
+/**
+ * Renders an action button with a text that explains what it does.
+ */
 export declare const Action: ({ variant, title, titleVariant, description, descriptionVariant, buttonText, helperText, helperTextVariant, confirmable, passphrase, confirmTitle, confirmDescription, onAction, }: ActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/autocomplete/autocomplete.d.ts

@@ -1,11 +1,39 @@
 import { AutocompleteProps as MuiAutocompleteProps } from '@mui/material/Autocomplete';
 import { default as React } from 'react';
 import { ChipTypeMap } from '@mui/material/Chip';
+/**
+ * Props for the Autocomplete component.
+ */
 export interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]> extends Omit<MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, "renderInput" | "onChange" | "color"> {
+    /**
+     * The label for the autocomplete input.
+     */
     label: string;
+    /**
+     * Optional helper text to display below the input.
+     */
     helperText?: string;
+    /**
+     * Optional color for the autocomplete component.
+     */
     color?: string;
+    /**
+     * If `true`, indicates that data is being fetched.
+     */
     fetching?: boolean;
+    /**
+     * Optional callback function that is called when the value changes.
+     */
     onChangeValue?: (value: T) => void;
 }
+export interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]> extends Omit<MuiAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, "renderInput" | "onChange" | "color"> {
+    label: string;
+    helperText?: string;
+    color?: string;
+    fetching?: boolean;
+    onChangeValue?: (value: T) => void;
+}
+/**
+ * Autocomplete component that wraps the MUI Autocomplete component with additional props.
+ */
 export declare const Autocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = "div">(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => import("react/jsx-runtime").JSX.Element;

package/dist/board/board.d.ts

@@ -1,8 +1,25 @@
 import { SxProps, Theme } from '@mui/material/styles';
 import { PropsWithChildren } from 'react';
+/**
+ * Props for the Board component.
+ */
 export type BoardProps = PropsWithChildren<{
+    /**
+     * The content to be displayed on the board. It can be a single string or an array of strings.
+     */
     content: string | string[];
+    /**
+     * Optional spacing value for the board. It can be one of the values: 0, 1, 2, 3, 4, or 5.
+     */
     spacing?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * Optional styling properties for the board, using the theme's styling system.
+     */
     sx?: SxProps<Theme>;
 }>;
+/**
+ * Board component that displays content within a styled Paper component.
+ * It supports rendering an array of content lines or a single content string.
+ * Additionally, it provides a button to copy the content to the clipboard.
+ */
 export declare const Board: ({ content: contentProp, spacing, children, sx }: BoardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/bootstrap-dialog/bootstrap-dialog.d.ts

@@ -1,2 +1,5 @@
 import { BootstrapDialogDialogProps } from '../dialog/dialog.types';
+/**
+ * A customizable dialog component. Use it as a base to create more dialogs
+ */
 export declare const BootstrapDialog: ({ open, title, component, componentProps, disabled, disableAccept, disableCancel, actions, children, loading, cancelable, callCloseWhenCancel, acceptable, acceptText, cancelText, onAccept, onCancel, onClose, acceptType, }: BootstrapDialogDialogProps) => import("react/jsx-runtime").JSX.Element;

package/dist/center-container/center-container.d.ts

@@ -1,9 +1,25 @@
-import { ReactNode } from 'react';
+import { PropsWithChildren } from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
-export interface CenterContainerProps {
-    children: ReactNode | undefined;
+/**
+ * Props for the CenterContainer component.
+ */
+export type CenterContainerProps = PropsWithChildren<{
+    /**
+     * If true, centers the content vertically.
+     * @default false
+     */
     centerVertical?: boolean;
+    /**
+     * If true, centers the content horizontally.
+     * @default false
+     */
     centerHorizontal?: boolean;
+    /**
+     * Custom styles to be applied to the container.
+     */
     sx?: SxProps<Theme>;
-}
+}>;
+/**
+ * A container component that centers its children both vertically and horizontally by default.
+ */
 export declare function CenterContainer({ children, centerVertical, centerHorizontal, sx, }: CenterContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/confirm-dialog/confirm-dialog.d.ts

@@ -1,11 +1,31 @@
 import { BootstrapDialogDialogProps } from '../dialog/dialog.types';
 type OmitBaseDialogProps = "cancelable" | "acceptable" | "onAccept" | "onCancel" | "onClose" | "actions" | "callCloseWhenCancel" | "component" | "acceptType";
 export interface ConfirmDialogProps extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {
+    /**
+     * Text to display on the confirm button.
+     */
     confirmText?: string;
-    canceText?: string;
+    /**
+     * Text to display on the cancel button.
+     */
+    cancelText?: string;
+    /**
+     * Optional passphrase for additional confirmation.
+     */
     passphrase?: string;
+    /**
+     * Callback function to handle cancel action.
+     */
     onCancel: () => void;
+    /**
+     * Callback function to handle confirm action.
+     */
     onConfirm: () => void;
 }
+/**
+ * ConfirmDialog component renders a dialog to ask a user to confirm an action
+ * with customizable title, confirmation and cancellation actions.
+ * It optionally requires a passphrase to enable the confirmation action.
+ */
 export declare const ConfirmDialog: ({ open, title, loading, disabled, confirmText, cancelText, passphrase, children, onConfirm, onCancel, }: ConfirmDialogProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/content/content.d.ts

@@ -1,2 +1,5 @@
 import { ContentProps } from './content.types';
+/**
+ * A functional component that renders its children inside a main container.
+ */
 export declare const Content: ({ children }: ContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/content-placeholder/content-placeholder.d.ts

@@ -1,6 +1,18 @@
 import { PropsWithChildren } from 'react';
+/**
+ * Props for the ContentPlaceholder component.
+ */
 export type ContentPlaceholderProps = PropsWithChildren<{
+    /**
+     * Optional size of the placeholder.
+     */
     size?: number;
+    /**
+     * Optional padding for the placeholder.
+     */
     p?: number;
 }>;
+/**
+ * A component that serves as a placeholder for content, displaying a skeleton grid.
+ */
 export declare const ContentPlaceholder: ({ size, children, p }: ContentPlaceholderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/date-range-calendar/date-range-calendar.d.ts

@@ -1,7 +1,22 @@
 type DateRange = [Date, Date | undefined];
+/**
+ * Props for the DateRangeCalendar component.
+ */
 export interface DateRangeCalendarProps {
+    /**
+     * The default date range value.
+     */
     defaultValue: DateRange;
+    /**
+     * Callback function that is called when the date range value changes.
+     *
+     * @param value - The new date range value.
+     * @param updatedIndex - The index of the updated date range.
+     */
     onValueChange: (value: DateRange, updatedIndex: number) => void;
 }
+/**
+ * A Date Range Calendar component that allows users to select a range of dates.
+ */
 export declare const DateRangeCalendar: ({ defaultValue, onValueChange }: DateRangeCalendarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/date-range-picker/date-range-picker.d.ts

@@ -1,11 +1,39 @@
 type DateRange = [Date, Date | undefined];
+/**
+ * Props for the DateRangePicker component.
+ */
 export interface DateRangePickerProps {
+    /**
+     * The label for the date range picker.
+     */
     label: string;
+    /**
+     * The default value for the date range picker.
+     */
     defaultValue: DateRange;
+    /**
+     * The format in which the date range should be displayed.
+     */
     format: string;
+    /**
+     * If true, the date range picker will take up the full width of its container.
+     * @default false
+     */
     fullWidth?: boolean;
+    /**
+     * The size of the date range picker.
+     * @default "medium"
+     */
     size?: "small" | "medium";
+    /**
+     * Callback function that is called when the value of the date range picker changes.
+     * @param value - The new date range value.
+     * @param index - The index of the date range picker.
+     */
     onValueChange: (value: DateRange, index: number) => void;
 }
+/**
+ * DateRangePicker component allows users to select a date range.
+ */
 export declare const DateRangePicker: ({ defaultValue, format: fmt, label, fullWidth, onValueChange, size, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/dialog/dialog.types.d.ts

@@ -6,24 +6,94 @@ export interface DialogAction {
     color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
     onClick?: () => void;
 }
+/**
+ * Props for the BootstrapDialog component.
+ */
 export type BootstrapDialogDialogProps = {
+    /**
+     * Whether the dialog is open.
+     */
     open: boolean;
+    /**
+     * The title of the dialog.
+     */
     title: string;
+    /**
+     * Whether the dialog is in a loading state.
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Whether the dialog is disabled.
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * Whether the accept button is disabled.
+     * @default false
+     */
     disableAccept?: boolean;
+    /**
+     * Whether the cancel button is disabled.
+     * @default false
+     */
     disableCancel?: boolean;
+    /**
+     * Whether the dialog is cancelable.
+     * @default true
+     */
     cancelable?: boolean;
+    /**
+     * Whether the dialog is acceptable.
+     * @default true
+     */
     acceptable?: boolean;
+    /**
+     * Whether to call the onClose function when the cancel button is clicked.
+     * @default true
+     */
     callCloseWhenCancel?: boolean;
+    /**
+     * Actions to be displayed in the dialog.
+     */
     actions?: DialogAction[];
+    /**
+     * Text for the cancel button.
+     * @default "Cancel"
+     */
     cancelText?: string;
+    /**
+     * Text for the accept button.
+     * @default "Accept"
+     */
     acceptText?: string;
+    /**
+     * Type of the accept button.
+     * @default "button"
+     */
     acceptType?: "button" | "submit";
+    /**
+     * Function to call when the dialog is closed.
+     */
     onClose: () => void;
+    /**
+     * Function to call when the cancel button is clicked.
+     */
     onCancel?: () => void;
+    /**
+     * Function to call when the accept button is clicked.
+     */
     onAccept?: () => void;
+    /**
+     * Component to be rendered inside the dialog.
+     */
     component?: React.ElementType;
+    /**
+     * Props to be passed to the component.
+     */
     componentProps?: any;
+    /**
+     * Children to be rendered inside the dialog.
+     */
     children?: ReactNode | undefined;
 };

package/dist/drawerx/drawer/drawer.d.ts

@@ -1,4 +1,7 @@
 import { Theme } from '@mui/material/styles';
 import { DrawerComponent } from '../drawer.types';
 export declare const DrawerHeader: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/**
+ * Drawer component that provides a customizable drawer interface.
+ */
 export declare const Drawer: DrawerComponent;

package/dist/drawerx/drawer-app-bar/drawer-app-bar.d.ts

@@ -1,5 +1,11 @@
 import { AppBarProps as MuiAppBarProps } from '@mui/material';
 export interface DrawerAppBarProps extends MuiAppBarProps {
+    /**
+     * Title to display in the AppBar.
+     */
     title?: string;
 }
+/**
+ * DrawerAppBar component that renders an AppBar adapted to work inside a Drawer context.
+ */
 export declare const DrawerAppBar: ({ title, sx, children, ...rest }: DrawerAppBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/drawerx/drawer-item/drawer-item.d.ts

@@ -9,4 +9,7 @@ export interface DrawerItemProps {
      */
     level?: number;
 }
+/**
+ * Component representing a drawer item in the navigation drawer.
+ */
 export declare const DrawerItem: ({ item, level }: DrawerItemProps) => false | import("react/jsx-runtime").JSX.Element;

package/dist/drawerx/drawer-layout/drawer-layout.d.ts

@@ -1,20 +1,67 @@
 import { DrawerProviderProps } from '../drawer-context';
 import { DrawerAppBarProps } from '../drawer-app-bar';
 import { DrawerContentProps, DrawerNavigation, DrawerProps } from '../drawer.types';
+import { JSXElementConstructor } from 'react';
+/**
+ * Interface representing the slots for the DrawerLayout component.
+ */
 export interface DrawerLayoutSlots {
-    drawerAppBar?: React.JSXElementConstructor<DrawerAppBarProps>;
-    drawer?: React.JSXElementConstructor<DrawerProps>;
-    drawerContent?: React.JSXElementConstructor<DrawerContentProps>;
+    /**
+     * Slot for the DrawerAppBar component.
+     * This component is responsible for rendering the app bar within the drawer layout.
+     */
+    drawerAppBar?: JSXElementConstructor<DrawerAppBarProps>;
+    /**
+     * Slot for the Drawer component.
+     * This component is responsible for rendering the drawer within the drawer layout.
+     */
+    drawer?: JSXElementConstructor<DrawerProps>;
+    /**
+     * Slot for the DrawerContent component.
+     * This component is responsible for rendering the content within the drawer layout.
+     */
+    drawerContent?: JSXElementConstructor<DrawerContentProps>;
 }
+/**
+ * Interface representing the slot properties for the DrawerLayout component.
+ */
 export interface DrawerLayoutSlotProps {
+    /**
+     * Properties for the DrawerAppBar component.
+     */
     drawerAppBar?: DrawerAppBarProps;
+    /**
+     * Properties for the Drawer component.
+     */
     drawer?: DrawerProps;
+    /**
+     * Properties for the DrawerContent component.
+     */
     drawerContent?: DrawerContentProps;
 }
+/**
+ * Props for the DrawerLayout component.
+ */
 export interface DrawerLayoutProps extends DrawerProviderProps {
+    /**
+     * The title of the drawer layout.
+     */
     title: string;
+    /**
+     * The navigation configuration for the drawer.
+     */
     navigation: DrawerNavigation;
+    /**
+     * Optional slots for custom rendering within the drawer layout.
+     */
     slots?: DrawerLayoutSlots;
+    /**
+     * Optional props for the slots.
+     */
     slotsProps?: DrawerLayoutSlotProps;
 }
+/**
+ * DrawerLayout component provides a layout structure with a drawer and an app bar.
+ * It allows customization of the drawer, app bar, and drawer content through slots and slot properties.
+ */
 export declare const DrawerLayout: ({ children, navigation, title, slots, slotsProps, ...rest }: DrawerLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/drawerx/drawer-subheader/drawer-subheader.d.ts

@@ -1,3 +1,6 @@
 import { ListSubheaderProps } from '@mui/material/ListSubheader';
 export type DrawerSubheaderProps = ListSubheaderProps;
+/**
+ * A functional component that renders a `ListSubheader` with custom styles.
+ */
 export declare const DrawerSubheader: ({ sx, ...rest }: DrawerSubheaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/drawerx/drawer.types.d.ts

@@ -1,4 +1,4 @@
-import { FunctionComponent, ReactElement } from 'react';
+import { CSSProperties, FunctionComponent, PropsWithChildren, ReactElement } from 'react';
 import { BulletVariant } from '../bullet';
 import { LabelVariant } from '../label';
 import { DrawerProps as MuiDrawerProps } from '@mui/material/Drawer';
@@ -47,14 +47,12 @@ export interface DrawerContentProps {
 }
 export type DrawerContentComponent = FunctionComponent<DrawerContentProps>;
 export type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;
-export interface DrawerProps extends MuiDrawerProps {
-    children: DrawerContentElement;
-}
+export type DrawerProps = PropsWithChildren<MuiDrawerProps>;
 export type DrawerComponent = FunctionComponent<DrawerProps>;
 export type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;
 export declare const getDrawerItemColors: (theme: Theme, selected: boolean | undefined) => {
-    color: string | undefined;
-    fontWeight: import("csstype").Property.FontWeight | undefined;
+    color?: string;
+    fontWeight: CSSProperties["fontWeight"];
 };
 export type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;
 export type DrawerAppBarElement = ReactElement<DrawerAppBarProps, DrawerAppBarComponent>;

package/dist/enhanced-remote-table/enhanced-remote-table.d.ts

@@ -1,12 +1,46 @@
 import { ReactNode } from 'react';
 import { HeadCell, Order } from '../enhanced-table';
 export interface EnhancedRemoteTableProps<T> {
+    /**
+     * The array of data to be displayed in the table.
+     */
     data: T[];
+    /**
+     * Indicates whether the table is in a loading state.
+     */
     loading: boolean;
+    /**
+     * The default column to sort by.
+     */
     defaultSort: keyof T;
+    /**
+     * The default order of sorting (ascending or descending).
+     */
     defaultOrder?: Order;
+    /**
+     * The columns configuration for the table.
+     */
     columns: HeadCell<T>[];
+    /**
+     * A render function for each row of data.
+     */
     children: (data: T, index: number) => ReactNode;
+    /**
+     * Callback function to handle sorting requests.
+     */
     onRequestSort: (col: keyof T, orderBy: "asc" | "desc") => void;
 }
+export interface EnhancedRemoteTableProps<T> {
+    data: T[];
+    loading: boolean;
+    defaultSort: keyof T;
+    defaultOrder?: Order;
+    columns: HeadCell<T>[];
+    children: (data: T, index: number) => ReactNode;
+    onRequestSort: (col: keyof T, orderBy: "asc" | "desc") => void;
+}
+/**
+ * EnhancedRemoteTable component provides a table with remote data handling capabilities.
+ * It supports sorting and displays a loading indicator while data is being fetched.
+ */
 export declare const EnhancedRemoteTable: <T>({ children, data, loading, columns, defaultSort, defaultOrder, onRequestSort, }: EnhancedRemoteTableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/enhanced-table/enhanced-table.d.ts

@@ -1,16 +1,54 @@
 import { ReactNode } from 'react';
 import { HeadCell, Order } from './enhanced-table-head';
-interface Props<T> {
+/**
+ * Props for the EnhancedTable component.
+ *
+ * @template T - The type of data being displayed in the table.
+ */
+interface EnhancedTableProps<T> {
+    /**
+     * The array of data to be displayed in the table.
+     */
     readonly data: T[];
+    /**
+     * Optional. If true, enables the search functionality.
+     */
     search?: boolean;
+    /**
+     * The key of the data to sort by default.
+     */
     defaultSort: keyof T;
+    /**
+     * Optional. The default order of sorting (ascending or descending).
+     */
     defaultOrder?: Order;
+    /**
+     * Optional. If true, displays a loading indicator.
+     */
     loading?: boolean;
+    /**
+     * The columns configuration for the table.
+     */
     columns: HeadCell<T>[];
+    /**
+     * A render prop function that takes the sorted and filtered data and returns a ReactNode.
+     */
     children: (data: T[]) => ReactNode;
 }
+interface EnhancedTableProps<T> {
+    readonly data: T[];
+    search?: boolean;
+    defaultSort: keyof T;
+    defaultOrder?: Order;
+    loading?: boolean;
+    columns: HeadCell<T>[];
+    children: (data: T[]) => ReactNode;
+}
+/**
+ * EnhancedTable component provides a table with sorting, filtering, and loading states.
+ */
 export declare const EnhancedTable: {
-    <T>({ children, data, search, columns, defaultSort, defaultOrder, loading, }: Props<T>): import("react/jsx-runtime").JSX.Element;
+    <T>({ children, data, search, columns, defaultSort, defaultOrder, loading, }: EnhancedTableProps<T>): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         defaultOrder: string;
     };

package/dist/form-dialog/form-dialog.d.ts

@@ -1,10 +1,32 @@
 import { BootstrapDialogDialogProps } from '../dialog';
 type OmitBaseDialogProps = "cancelable" | "acceptable" | "onAccept" | "onCancel" | "onClose" | "actions" | "callCloseWhenCancel" | "component" | "acceptType";
+/**
+ * Props for the FormDialog component.
+ */
 export interface FormDialogProps<T> extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {
+    /**
+     * The text to display on the submit button.
+     * @default "Submit"
+     */
     submitText?: string;
-    canceText?: string;
+    /**
+     * The text to display on the cancel button.
+     * @default "Cancel"
+     */
+    cancelText?: string;
+    /**
+     * Callback function to be called when the cancel button is clicked.
+     */
     onCancel: () => void;
+    /**
+     * Callback function to be called when the submit button is clicked.
+     * @param data - The data to be submitted.
+     */
     onSubmit: (data: T) => void;
 }
+/**
+ * A generic form dialog component that wraps a BootstrapDialog and handles form submission.
+ * Put your form inside and receive the data validated using the input name field.
+ */
 export declare const FormDialog: <T>({ open, title, loading, disabled, submitText, cancelText, children, onSubmit, onCancel, }: FormDialogProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};