mui-design-system 0.0.36 → 0.0.38

package/README.md

@@ -15,7 +15,7 @@ npm install mui-design-system
 Install in your project if not already present:
 
 - `react` & `react-dom` (^18.2.0)
-- `@mui/material` (^6.1.9)
+- `@mui/material` (^7.3.9)
 - `@emotion/react`, `@emotion/styled`
 - `styled-components` (^6.1.8)
 - `stylis-plugin-rtl` (for RTL)

package/dist/components/custom-tabs/CustomTabs.d.ts

@@ -1,22 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
-import { TabProps, TabsProps } from '@mui/material';
-import { BoxProps } from '@mui/material/Box';
-interface ITabProps {
-    label: ReactNode;
-    icon?: string | ReactElement;
-    disabled?: boolean;
-}
-export interface CustomTabsProps extends TabsProps {
-    indicator?: 'line' | 'fullHeight' | 'none';
-    tabs: ITabProps[];
-    tabPanels?: {
-        component: ReactNode;
-    }[];
-    color?: string;
-    withoutDivider?: boolean;
-    tabProps?: TabProps;
-    wrapperProps?: BoxProps;
-    tabOrientation?: 'horizontal' | 'vertical';
-}
-declare const CustomTabs: ({ tabs, tabPanels, indicator, orientation, color, withoutDivider, tabProps, wrapperProps, tabOrientation, ...props }: CustomTabsProps) => import("react/jsx-runtime").JSX.Element;
+import type { CustomTabsProps } from './types';
+export type { CustomTabsProps } from './types';
+declare const CustomTabs: (props: CustomTabsProps) => import("react/jsx-runtime").JSX.Element;
 export default CustomTabs;

package/dist/components/custom-tabs/CustomTabs.js

@@ -1,70 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Tab as MuiTab, Tabs as MuiTabs, useTheme, } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
 import Box from '@mui/material/Box';
-const CustomTabs = ({ tabs, tabPanels, indicator = 'none', orientation = 'horizontal', color, withoutDivider, tabProps, wrapperProps, tabOrientation = 'horizontal', ...props }) => {
-    const theme = useTheme();
-    const [value, setValue] = useState(0);
-    const handleChange = (event, newValue) => {
-        setValue(newValue);
-    };
-    return (_jsxs(Box, { width: '100%', display: 'flex', height: '100%', flexDirection: orientation === 'vertical' ? 'row' : 'column', ...wrapperProps, children: [_jsx(MuiTabs, { centered: props?.centered, orientation: orientation, variant: props?.variant, value: value, onChange: handleChange, "aria-label": 'basic tabs', TabIndicatorProps: {
-                    style: {
-                        background: color || theme.palette.primary.main,
-                        ...(indicator === 'fullHeight'
-                            ? {
-                                ...(orientation === 'horizontal' && {
-                                    height: 'calc(100% - 4px)',
-                                }),
-                                ...(orientation === 'vertical' && {
-                                    width: 'calc(100% - 4px)',
-                                    marginLeft: '4px',
-                                }),
-                                borderRadius: 8,
-                                marginBottom: '4px',
-                            }
-                            : {}),
-                    },
-                    hidden: indicator === 'none',
-                }, style: { borderBottom: withoutDivider ? 'none' : '' }, ...props, children: tabs?.map(({ label, icon, disabled }, index) => (_jsx(MuiTab, { disabled: disabled, label: label, id: `tab-${index}`, "aria-controls": `tabPanel-${index}`, icon: icon ? icon : undefined, ...tabProps, sx: [
-                        {
-                            ...theme.typography.caption2,
-                            ...(tabOrientation === 'vertical'
-                                ? { writingMode: 'tb-rl' }
-                                : {}),
-                            '&.Mui-selected': {
-                                ...theme.typography['caption2.medium'],
-                                ...(indicator === 'fullHeight'
-                                    ? {
-                                        backgroundColor: 'transparent',
-                                        zIndex: 10,
-                                        color: (theme) => theme.palette.mode === 'light'
-                                            ? theme.palette.text.secondary
-                                            : theme.palette.text.primary,
-                                        stroke: (theme) => theme.palette.mode === 'light'
-                                            ? theme.palette.text.secondary
-                                            : theme.palette.text.primary,
-                                    }
-                                    : indicator === 'line'
-                                        ? {
-                                            backgroundColor: 'transparent',
-                                            color: (theme) => color || theme.palette.primary.main,
-                                            stroke: (theme) => theme.palette.primary.main,
-                                        }
-                                        : {
-                                            backgroundColor: 'transparent',
-                                            ...(orientation === 'vertical' && {
-                                                width: '100%',
-                                                justifyContent: 'flex-start',
-                                            }),
-                                        }),
-                            },
-                        },
-                        ...(Array.isArray(tabProps?.sx) ? tabProps.sx : [tabProps?.sx]),
-                    ] }, index))) }), tabPanels?.map((children, index) => (_jsx(CustomTabPanel, { value: value, index: index, children: children.component }, index)))] }));
+import { Tab, Tabs } from '@mui/material';
+const CustomTabs = (props) => {
+    const { tabs, tabsProps, tabProps, wrapperProps, value, onChange, } = props;
+    return (_jsx(Box, { width: "100%", ...wrapperProps, children: _jsx(Tabs, { value: value, onChange: onChange, ...tabsProps, children: tabs.map(({ label, icon, disabled }, index) => (_jsx(Tab, { disabled: disabled, label: label, id: `tab-${index}`, icon: icon ? icon : undefined, iconPosition: 'start', ...tabProps }, index))) }) }));
 };
 export default CustomTabs;
-function CustomTabPanel(props) {
-    const { children, value, index, ...other } = props;
-    return (_jsx("div", { role: 'tabpanel', hidden: value !== index, id: `tabPanel-${index}`, "aria-labelledby": `tab-${index}`, ...other, children: value === index && children }));
-}

package/dist/components/custom-tabs/components/TabPanel.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export interface TabPanelProps {
+    children: ReactNode;
+    value: number;
+    index: number;
+    idPrefix?: string;
+    labelIdPrefix?: string;
+}
+export declare function TabPanel({ children, value, index, idPrefix, labelIdPrefix, }: TabPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/custom-tabs/components/TabPanel.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function TabPanel({ children, value, index, idPrefix = 'tabPanel-', labelIdPrefix = 'tab-', }) {
+    const panelId = `${idPrefix}${index}`;
+    const labelledById = `${labelIdPrefix}${index}`;
+    return (_jsx("div", { role: "tabpanel", hidden: value !== index, id: panelId, "aria-labelledby": labelledById, children: value === index ? children : null }));
+}

package/dist/components/custom-tabs/hooks/useControllableTabsValue.d.ts

@@ -0,0 +1,12 @@
+import type { SyntheticEvent } from 'react';
+type TabsOnChange = (event: SyntheticEvent, value: number) => void;
+interface UseControllableTabsValueArgs {
+    value?: number;
+    defaultValue?: number;
+    onChange?: TabsOnChange;
+}
+export declare function useControllableTabsValue({ value, defaultValue, onChange, }: UseControllableTabsValueArgs): {
+    selectedValue: number;
+    handleChange: (event: SyntheticEvent, newValue: number) => void;
+};
+export {};

package/dist/components/custom-tabs/hooks/useControllableTabsValue.js

@@ -0,0 +1,13 @@
+import { useCallback, useState } from 'react';
+export function useControllableTabsValue({ value, defaultValue = 0, onChange, }) {
+    const isControlled = typeof value === 'number';
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const selectedValue = isControlled ? value : uncontrolledValue;
+    const handleChange = useCallback((event, newValue) => {
+        if (!isControlled) {
+            setUncontrolledValue(newValue);
+        }
+        onChange?.(event, newValue);
+    }, [isControlled, onChange]);
+    return { selectedValue, handleChange };
+}

package/dist/components/custom-tabs/types.d.ts

@@ -0,0 +1,20 @@
+import type { BoxProps } from '@mui/material/Box';
+import type { TabProps, TabsProps } from '@mui/material';
+import type { ReactElement, ReactNode } from 'react';
+export type CustomTabsIndicator = 'line' | 'fullHeight' | 'none';
+export type CustomTabsOrientation = 'horizontal' | 'vertical';
+export interface CustomTabItem {
+    label: ReactNode;
+    icon?: string | ReactElement;
+    disabled?: boolean;
+}
+export interface CustomTabPanelConfig {
+    component: ReactNode;
+}
+export interface CustomTabsProps extends TabsProps {
+    tabs: CustomTabItem[];
+    tabPanels?: CustomTabPanelConfig[];
+    tabProps?: TabProps;
+    tabsProps?: TabsProps;
+    wrapperProps?: BoxProps;
+}

package/dist/components/custom-tabs/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/custom-tabs/utils/getTabIndicatorProps.d.ts

@@ -0,0 +1,11 @@
+import type { TabsProps } from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+import type { CustomTabsIndicator, CustomTabsOrientation } from '../types';
+interface GetTabIndicatorPropsArgs {
+    indicator: CustomTabsIndicator;
+    color?: string;
+    orientation: CustomTabsOrientation;
+    theme: Theme;
+}
+export declare function getTabIndicatorProps({ indicator, color, orientation, theme, }: GetTabIndicatorPropsArgs): TabsProps['TabIndicatorProps'];
+export {};

package/dist/components/custom-tabs/utils/getTabIndicatorProps.js

@@ -0,0 +1,21 @@
+export function getTabIndicatorProps({ indicator, color, orientation, theme, }) {
+    const background = color || theme.palette.primary.main;
+    const style = {
+        background,
+    };
+    if (indicator === 'fullHeight') {
+        if (orientation === 'horizontal') {
+            style.height = 'calc(100% - 4px)';
+        }
+        else {
+            style.width = 'calc(100% - 4px)';
+            style.marginLeft = '4px';
+        }
+        style.borderRadius = 8;
+        style.marginBottom = '4px';
+    }
+    return {
+        style,
+        hidden: indicator === 'none',
+    };
+}

package/dist/components/custom-tabs/utils/getTabSx.d.ts

@@ -0,0 +1,18 @@
+import type { SxProps, Theme } from '@mui/material/styles';
+import type { CustomTabsIndicator, CustomTabsOrientation } from '../types';
+interface GetTabSxArgs {
+    theme: Theme;
+    indicator: CustomTabsIndicator;
+    color?: string;
+    /**
+     * Visual orientation for the Tab label (writing mode, alignment).
+     * Usually equals the MUI Tabs `orientation`.
+     */
+    tabOrientation: CustomTabsOrientation;
+    /**
+     * The actual MUI Tabs `orientation` (used for alignment differences).
+     */
+    orientation: CustomTabsOrientation;
+}
+export declare function getTabSx({ theme, indicator, color, tabOrientation, orientation, }: GetTabSxArgs): SxProps<Theme>;
+export {};

package/dist/components/custom-tabs/utils/getTabSx.js

@@ -0,0 +1,31 @@
+export function getTabSx({ theme, indicator, color, tabOrientation, orientation, }) {
+    return [
+        {
+            ...theme.typography.caption2,
+            ...(tabOrientation === 'vertical' ? { writingMode: 'tb-rl' } : {}),
+            '&.Mui-selected': {
+                ...theme.typography['caption2.medium'],
+                ...(indicator === 'fullHeight'
+                    ? {
+                        backgroundColor: 'transparent',
+                        zIndex: 10,
+                        color: (t) => t.palette.mode === 'light' ? t.palette.text.secondary : t.palette.text.primary,
+                        stroke: (t) => t.palette.mode === 'light' ? t.palette.text.secondary : t.palette.text.primary,
+                    }
+                    : indicator === 'line'
+                        ? {
+                            backgroundColor: 'transparent',
+                            color: () => color || theme.palette.primary.main,
+                            stroke: () => theme.palette.primary.main,
+                        }
+                        : {
+                            backgroundColor: 'transparent',
+                            ...(orientation === 'vertical' && {
+                                width: '100%',
+                                justifyContent: 'flex-start',
+                            }),
+                        }),
+            },
+        },
+    ];
+}

package/dist/components/index.d.ts

@@ -1,131 +1,118 @@
 /// <reference types="react" />
 import useTable from './custom-table/components/useTable';
-declare const FormWithErrorBoundary: import("react").FC<import("./form/Form").FormProps & {
+export { useTable };
+export declare const Form: import("react").FC<import("./form/Form").FormProps & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-declare const CustomTableWithErrorBoundary: import("react").FC<import("./custom-table/types").ICustomTable & {
+export declare const CustomTable: import("react").FC<import("./custom-table/types").ICustomTable & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-declare const UFAutoCompleteWithErrorBoundary: import("react").FC<import("./form/type").IAutoCompleteForm & {
+export declare const UFAutoComplete: import("react").FC<import("./form/type").IAutoCompleteForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-declare const UFCheckboxWithErrorBoundary: import("react").FC<import("./form/type").ICheckboxForm & {
+export declare const UFCheckbox: import("react").FC<import("./form/type").ICheckboxForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-declare const UFRadioWithErrorBoundary: import("react").FC<import("./form/type").IRadioForm & {
+export declare const UFRadio: import("react").FC<import("./form/type").IRadioForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-declare const UFCurrencyWithErrorBoundary: import("react").FC<import("./form/type").ICurrencyForm & {
+export declare const UFCurrency: import("react").FC<import("./form/type").ICurrencyForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFDatePickerWithErrorBoundary: import("react").FC<import("./form/type").IDatePickerForm & {
+export declare const UFDatePicker: import("react").FC<import("./form/type").IDatePickerForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFMultiSelectWithErrorBoundary: import("react").FC<import("./form/type").IMultiSelectForm & {
+export declare const UFMultiSelect: import("react").FC<import("./form/type").IMultiSelectForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFSelectWithErrorBoundary: import("react").FC<import("./form/type").ISelectForm & {
+export declare const UFSelect: import("react").FC<import("./form/type").ISelectForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFTextAreaWithErrorBoundary: import("react").FC<import("./form/type").ITextAreaForm & {
+export declare const UFTextArea: import("react").FC<import("./form/type").ITextAreaForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFTextFieldWithErrorBoundary: import("react").FC<import("./form/type").ITextFieldForm & {
+export declare const UFTextField: import("react").FC<import("./form/type").ITextFieldForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFMultiCheckboxWithErrorBoundary: import("react").FC<import("./form/type").IMultiCheckboxForm & {
+export declare const UFMultiCheckbox: import("react").FC<import("./form/type").IMultiCheckboxForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const CheckboxListWithErrorBoundary: import("react").FC<import("./form/checkbox-list/CheckboxList").CheckboxListProps & {
+export declare const CheckboxList: import("react").FC<import("./form/checkbox-list/CheckboxList").CheckboxListProps & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const FormProviderWithErrorBoundary: import("react").FC<import("../context/FormContext").IFormProvider & {
+export declare const FormProvider: import("react").FC<import("../context/FormContext").IFormProvider & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFSwitchWithErrorBoundary: import("react").FC<import("./form/type").ISwitchForm & {
+export declare const UFSwitch: import("react").FC<import("./form/type").ISwitchForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error?: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFTimeWithErrorBoundary: import("react").FC<import("./form/type").ITimeForm & {
+export declare const UFTime: import("react").FC<import("./form/type").ITimeForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export declare const UFUploaderWithErrorBoundary: import("react").FC<import("./form/type").IUploaderForm & {
+export declare const UFUploader: import("react").FC<import("./form/type").IUploaderForm & {
     form: import("react-hook-form").UseFormReturn<any>;
     error: any;
 } & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
-export { useTable };
-export { FormWithErrorBoundary as Form };
-export { CustomTableWithErrorBoundary as CustomTable };
-export { UFAutoCompleteWithErrorBoundary as UFAutoComplete };
-export { UFCheckboxWithErrorBoundary as UFCheckbox };
-export { UFRadioWithErrorBoundary as UFRadio };
-export { UFCurrencyWithErrorBoundary as UFCurrency };
-export { UFDatePickerWithErrorBoundary as UFDatePicker };
-export { UFMultiSelectWithErrorBoundary as UFMultiSelect };
-export { UFSelectWithErrorBoundary as UFSelect };
-export { UFTextAreaWithErrorBoundary as UFTextArea };
-export { UFTextFieldWithErrorBoundary as UFTextField };
-export { UFMultiCheckboxWithErrorBoundary as UFMultiCheckbox };
-export { UFSwitchWithErrorBoundary as UFSwitch };
-export { UFTimeWithErrorBoundary as UFTime };
-export { UFUploaderWithErrorBoundary as UFUploader };
-export { CheckboxListWithErrorBoundary as CheckboxList };
-export { FormProviderWithErrorBoundary as FormProvider };
 export declare const OTPInput: import("react").FC<import("./otp-input/OTPInput").OTPInputProps & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
+export declare const CustomTabs: import("react").FC<import("./custom-tabs/types").CustomTabsProps & {
+    skeletonWidth?: string | number | undefined;
+    skeletonHeight?: string | number | undefined;
+}>;

package/dist/components/index.js

@@ -1,58 +1,41 @@
 import withErrorBoundary from './error boundary/withErrorBoundary';
 import useTable from './custom-table/components/useTable';
-import Form from "./form/Form";
-import CustomTable from "./custom-table/CustomTable";
-import UFAutoComplete from "./form/components/UFAutoComplete";
-import UFCheckbox from "./form/components/UFCheckbox";
-import UFRadio from "./form/components/UFRadio";
-import UFCurrency from "./form/components/UFCurrency";
-import UFDatePicker from './form/components/UFDatePicker';
-import UFMultiSelect from './form/components/UFMultiSelect';
-import UFSelect from './form/components/UFSelect';
-import UFTextArea from './form/components/UFTextArea';
-import UFTextField from './form/components/UFTextField';
-import UFMultiCheckbox from './form/components/UFMultiCheckbox';
-import CheckboxList from './form/checkbox-list/CheckboxList';
-import FormProvider from '../context/FormContext';
-import UFSwitch from './form/components/UFSwitch';
-import UFTime from './form/components/UFTime';
-import UFUploader from './form/components/UFUploader';
-import OTPInputComponent from './otp-input/OTPInput';
-// Wrap components with the HOC
-const FormWithErrorBoundary = withErrorBoundary(Form);
-const CustomTableWithErrorBoundary = withErrorBoundary(CustomTable);
-const UFAutoCompleteWithErrorBoundary = withErrorBoundary(UFAutoComplete);
-const UFCheckboxWithErrorBoundary = withErrorBoundary(UFCheckbox);
-const UFRadioWithErrorBoundary = withErrorBoundary(UFRadio);
-const UFCurrencyWithErrorBoundary = withErrorBoundary(UFCurrency);
-export const UFDatePickerWithErrorBoundary = withErrorBoundary(UFDatePicker);
-export const UFMultiSelectWithErrorBoundary = withErrorBoundary(UFMultiSelect);
-export const UFSelectWithErrorBoundary = withErrorBoundary(UFSelect);
-export const UFTextAreaWithErrorBoundary = withErrorBoundary(UFTextArea);
-export const UFTextFieldWithErrorBoundary = withErrorBoundary(UFTextField);
-export const UFMultiCheckboxWithErrorBoundary = withErrorBoundary(UFMultiCheckbox);
-export const CheckboxListWithErrorBoundary = withErrorBoundary(CheckboxList);
-export const FormProviderWithErrorBoundary = withErrorBoundary(FormProvider);
-export const UFSwitchWithErrorBoundary = withErrorBoundary(UFSwitch);
-export const UFTimeWithErrorBoundary = withErrorBoundary(UFTime);
-export const UFUploaderWithErrorBoundary = withErrorBoundary(UFUploader);
-// Export wrapped components
+import FormBase from './form/Form';
+import CustomTableBase from './custom-table/CustomTable';
+import UFAutoCompleteBase from './form/components/UFAutoComplete';
+import UFCheckboxBase from './form/components/UFCheckbox';
+import UFRadioBase from './form/components/UFRadio';
+import UFCurrencyBase from './form/components/UFCurrency';
+import UFDatePickerBase from './form/components/UFDatePicker';
+import UFMultiSelectBase from './form/components/UFMultiSelect';
+import UFSelectBase from './form/components/UFSelect';
+import UFTextAreaBase from './form/components/UFTextArea';
+import UFTextFieldBase from './form/components/UFTextField';
+import UFMultiCheckboxBase from './form/components/UFMultiCheckbox';
+import CheckboxListBase from './form/checkbox-list/CheckboxList';
+import FormProviderBase from '../context/FormContext';
+import UFSwitchBase from './form/components/UFSwitch';
+import UFTimeBase from './form/components/UFTime';
+import UFUploaderBase from './form/components/UFUploader';
+import OTPInputBase from './otp-input/OTPInput';
+import CustomTabsBase from './custom-tabs/CustomTabs';
 export { useTable };
-export { FormWithErrorBoundary as Form };
-export { CustomTableWithErrorBoundary as CustomTable };
-export { UFAutoCompleteWithErrorBoundary as UFAutoComplete };
-export { UFCheckboxWithErrorBoundary as UFCheckbox };
-export { UFRadioWithErrorBoundary as UFRadio };
-export { UFCurrencyWithErrorBoundary as UFCurrency };
-export { UFDatePickerWithErrorBoundary as UFDatePicker };
-export { UFMultiSelectWithErrorBoundary as UFMultiSelect };
-export { UFSelectWithErrorBoundary as UFSelect };
-export { UFTextAreaWithErrorBoundary as UFTextArea };
-export { UFTextFieldWithErrorBoundary as UFTextField };
-export { UFMultiCheckboxWithErrorBoundary as UFMultiCheckbox };
-export { UFSwitchWithErrorBoundary as UFSwitch };
-export { UFTimeWithErrorBoundary as UFTime };
-export { UFUploaderWithErrorBoundary as UFUploader };
-export { CheckboxListWithErrorBoundary as CheckboxList };
-export { FormProviderWithErrorBoundary as FormProvider };
-export const OTPInput = withErrorBoundary(OTPInputComponent);
+export const Form = withErrorBoundary(FormBase);
+export const CustomTable = withErrorBoundary(CustomTableBase);
+export const UFAutoComplete = withErrorBoundary(UFAutoCompleteBase);
+export const UFCheckbox = withErrorBoundary(UFCheckboxBase);
+export const UFRadio = withErrorBoundary(UFRadioBase);
+export const UFCurrency = withErrorBoundary(UFCurrencyBase);
+export const UFDatePicker = withErrorBoundary(UFDatePickerBase);
+export const UFMultiSelect = withErrorBoundary(UFMultiSelectBase);
+export const UFSelect = withErrorBoundary(UFSelectBase);
+export const UFTextArea = withErrorBoundary(UFTextAreaBase);
+export const UFTextField = withErrorBoundary(UFTextFieldBase);
+export const UFMultiCheckbox = withErrorBoundary(UFMultiCheckboxBase);
+export const CheckboxList = withErrorBoundary(CheckboxListBase);
+export const FormProvider = withErrorBoundary(FormProviderBase);
+export const UFSwitch = withErrorBoundary(UFSwitchBase);
+export const UFTime = withErrorBoundary(UFTimeBase);
+export const UFUploader = withErrorBoundary(UFUploaderBase);
+export const OTPInput = withErrorBoundary(OTPInputBase);
+export const CustomTabs = withErrorBoundary(CustomTabsBase);

package/dist/theme/theme.js

@@ -6,7 +6,6 @@ import { MuiTextField } from '../mui/TextField/TextField';
 import { MuiAlert } from '../mui/Alert/Alert';
 import { MuiButton } from '../mui/Button/MuiButton';
 import { MuiChip } from '../mui/Chip/MuiChip';
-import { MuiTab } from '../mui/Tabs/Tab/MuiTab';
 import { MuiPagination } from '../mui/Pagination/MuiPagination';
 import { MuiPaginationItem } from '../mui/Pagination/MuiPaginationItem';
 import { MuiCheckbox } from '../mui/Checkbox/Checkbox';
@@ -28,7 +27,6 @@ import { MuiAutoComplete as MuiAutocomplete } from '../mui/AutoComplete/MuiAutoC
 import { MuiBreadcrumbs } from '../mui/BreadCrumbs/MuiBreadCrumbs';
 import { MuiDialog } from '../mui/Dialog/MuiDialog';
 import { breakpoints } from '../mui/breakpoints';
-import { MuiTabs } from '../mui/Tabs/MuiTabs';
 import { MuiMenuItem } from '../mui/menu/MuiMenuItem';
 const getDesignTokens = (mode) => ({
     mode,
@@ -45,7 +43,6 @@ export const themeOptions = (mode, isRtl) => ({
         MuiAccordion,
         MuiAlert,
         MuiChip,
-        MuiTab,
         MuiPagination,
         MuiPaginationItem,
         MuiSelect,
@@ -60,7 +57,6 @@ export const themeOptions = (mode, isRtl) => ({
         MuiAutocomplete,
         MuiBreadcrumbs,
         MuiDialog,
-        MuiTabs,
         MuiMenuItem,
         MuiTextField,
         MuiOutlinedInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-design-system",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "MUI-based design system with theme, form components, and utilities",
   "main": "dist/index.js",
   "module": "dist/index.js",