@simoncomputing/mui-bueno-v3 0.1.12

package/dist/components/Form/Inputs/Select/Select.d.ts

@@ -0,0 +1,91 @@
+import { SelectProps as MuiSelectProps, TypographyProps } from '@mui/material';
+import * as React from 'react';
+/**
+ * *Interface used exclusively for creating the select menu within Select*
+ *
+ * SelectOption is an interface that defines the label and value of a select option.
+ * An array of this interface (`SelectOption<T>[]`) is used in the `<Select>` component as the `options` prop to
+ * define and create the select menu.
+ */
+export interface SelectOption<T> {
+    /**
+     * The ID for the option. This is the value that is returned to the form.
+     * @required
+     */
+    value: T;
+    /**
+     * The label that is displayed in the select menu.
+     * @required
+     */
+    label: string;
+    /**
+     * If true, the option will be disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the component becomes readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Margin for the FormControl
+     */
+    margin?: 'dense' | 'none' | 'normal';
+    /**
+     * If true, an asterisk will be displayed next to the label
+     * Most browsers will automatically validate this, but it's recommended to also
+     * have Formik also validate as well so that `Error` displays for consistency.
+     * @default false
+     */
+    required?: boolean;
+}
+type BaseSelectProps<T> = {
+    /**
+     * Must match the initialValue name in BForm.
+     * @required
+     */
+    name: string;
+    /**
+     * Label for the select component
+     */
+    label?: string;
+    /**
+     * A list of options for the select component.
+     */
+    options?: SelectOption<T>[];
+    /**
+     * Displays an icon or text next to selected options
+     * @default undefined
+     */
+    selectedOptionIcon?: React.ReactNode | string;
+    /**
+     * Specifies the visual input style.
+     * @default 'standard'
+     */
+    variant?: 'filled' | 'outlined' | 'standard';
+    /**
+     * If true, the prepackaged dynamic input label that comes with Material UI's input components
+     * will be replaced with a static typography label above the input.
+     * @default false
+     */
+    staticLabel?: boolean;
+    /**
+     * Props from MUI-Bueno's Typography component.
+     * Used to customize the label when the static label option is selected.
+     */
+    staticLabelProps?: TypographyProps;
+    /**
+     * If true, the component will be read only.
+     * @default false
+     */
+    readOnly?: boolean;
+};
+export type SelectProps<T> = BaseSelectProps<T> & Omit<MuiSelectProps, 'native' | 'onChange' | 'readOnly' | 'fullWidth'>;
+/**
+ * *Must be a child of BForm*
+ *
+ * `Select` provides a Material-UI Select Component.
+ */
+export declare const Select: <T = string>(props: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Form/Inputs/Switch/Switch.d.ts

@@ -0,0 +1,61 @@
+import { SwitchProps as MuiSwitchProps, TypographyProps, Theme, SwitchPropsColorOverrides } from '@mui/material';
+import { OverridableStringUnion } from '@mui/types';
+import { SystemProps } from '@mui/system';
+export type BaseSwitchProps<T = boolean> = {
+    /**
+     * Name and ID of the component. Must match a key from defaultValues in React Hook Form.
+     * @required
+     */
+    name: string;
+    /**
+     * Label that goes next to the switch.
+     * @recommended
+     */
+    label?: string;
+    /**
+     * Disabled
+     */
+    disabled?: boolean;
+    /**
+     * The position of the label.
+     * @default 'end'
+     */
+    labelPlacement?: 'start' | 'end' | 'top' | 'bottom';
+    /**
+     * If set, the component becomes readonly.
+     * By default, displays as "True" or "False". To use "On" or "Off", set to 'ON_OFF. To use "Yes" or "No", use 'YES_NO'
+     */
+    readOnly?: true | 'ON_OFF' | 'YES_NO';
+    /**
+     * Props from MUI-Bueno's Typography component.
+     * Used to customize the label when the static label option is selected or the field is readOnly.
+     */
+    staticLabelProps?: TypographyProps;
+    /**
+     * Override the value used in React Hook Form when the switch is ON
+     * @default True
+     */
+    activeValue?: T extends boolean ? true : string;
+    /**
+     * Override the value used in React Hook Form when the switch is OFF
+     * @default False
+     */
+    inactiveValue?: T extends boolean ? false : string;
+    /**
+     * Handle changes to the React Hook Form value when interacted with by the user
+     */
+    onChange?: (checked: T) => void;
+    /**
+     * If defined, shows the switch on top of a chip of the provided color
+     */
+    chipColor?: SystemProps<Theme>['color'];
+    /**
+     * Color of the switch & text
+     */
+    color?: OverridableStringUnion<'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | 'default', SwitchPropsColorOverrides>;
+};
+export type SwitchProps<T> = BaseSwitchProps<T> & Omit<MuiSwitchProps, 'checked' | 'onChange' | 'name' | 'value' | 'readOnly'>;
+/**
+ * `Switch` provides a Material-UI Switch.
+ */
+export declare const Switch: <T = boolean>(props: SwitchProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Form/Inputs/TextField/TextField.d.ts

@@ -0,0 +1,60 @@
+import { TypographyProps, TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import * as React from "react";
+type BaseTextFieldProps = {
+    /**
+     * Name and ID of the component. Must match a key from initialValues in Formik.
+     * @required
+     */
+    name: string;
+    /**
+     * If true, ensures that user enters only input that matches the format.
+     * Defaults to true if a format is specified.
+     * @default format ? true : false
+     */
+    autoFormat?: boolean;
+    /**
+     * A format string that will be used for formatting the user input.
+     * 9 = numbers, X = characters
+     * @example
+     * format='999-XXX-9999'
+     */
+    format?: string;
+    /**
+     * If true, the prepackaged dynamic input label that comes with Material UI's input components
+     * will be replaced with a static typography label above the input.
+     * @default false
+     */
+    staticLabel?: boolean;
+    /**
+     * Props from MUI-Bueno's Typography component.
+     * Used to customize the label when the static label option is selected or the field is readOnly.
+     */
+    staticLabelProps?: TypographyProps;
+    /**
+     * If `true`, the component becomes readonly.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * If provided, will show the icon at the start of the input field.
+     */
+    startIcon?: React.JSX.Element;
+    /**
+     * If provided, will show the icon at the end of the input field.
+     */
+    endIcon?: React.JSX.Element;
+    /**
+     * Margin for the FormControl
+     */
+    margin?: "dense" | "none" | "normal";
+    /**
+     * By default, TextField will trim leading and trailing whitespace on blur. To disable this, set `noTrimOnBlur` to true.
+     */
+    noTrimOnBlur?: boolean;
+};
+export type TextFieldProps = BaseTextFieldProps & Omit<MuiTextFieldProps, "defaultValue" | "error" | "fullWidth" | "select" | "SelectProps" | "value">;
+/**
+ * The `TextField` is a MUI input. For use with validation, view the examples at the bottom of this page.
+ */
+export declare const TextField: React.FC<TextFieldProps>;
+export {};

package/dist/components/Form/MForm/MForm.d.ts

@@ -0,0 +1,19 @@
+import { SubmitHandler, FieldValues, DefaultValues, FieldErrors, UseFormSetValue, UseFormReturn } from 'react-hook-form';
+import { AnyObjectSchema } from 'yup';
+type MFormProps<T extends FieldValues> = Readonly<{
+    initialValues: DefaultValues<T>;
+    initialErrors?: FieldErrors<T>;
+    onSubmit: SubmitHandler<T>;
+    children: React.ReactNode | ((props: {
+        values: T;
+        setValue: UseFormSetValue<T>;
+        methods: UseFormReturn<T>;
+    }) => React.ReactNode);
+    validationSchema?: AnyObjectSchema;
+    shouldValidateOption?: boolean;
+    shouldDirtyOption?: boolean;
+    validationOnMount?: boolean;
+    enableReinitialize?: boolean;
+}>;
+export declare function MForm<T extends FieldValues>({ initialValues, onSubmit, children, initialErrors, validationSchema, shouldValidateOption, shouldDirtyOption, validationOnMount, enableReinitialize }: MFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export default MForm;

package/dist/components/Form/MForm/useMyForm.d.ts

@@ -0,0 +1 @@
+export declare function useMyForm(): import('react-hook-form').UseFormReturn<import('react-hook-form').FieldValues, any, import('react-hook-form').FieldValues>;

package/dist/components/Form/RepeatableFormGroup/RepeatableFormGroup.d.ts

@@ -0,0 +1,89 @@
+import { SxProps, Theme, TypographyProps } from '@mui/material';
+import { default as React, ReactNode } from 'react';
+type RepeatableGroupWrapperType = 'card' | 'elevatedCard' | 'none';
+type RepeatableRemovePosition = 'bottom' | 'right';
+export type RepeatableFormGroupProps<T> = {
+    /**
+     * Name of field. Must match the name of the array in Formik.
+     */
+    name: string;
+    /**
+     * An "empty" object of type T.
+     * This is what you would normally pass to initialState for Formik for a single object of type T
+     */
+    initialState: T;
+    /**
+     * Component that makes up the fields in your form group.
+     *
+     * IMPORTANT: Make sure to pass the name to your fields such that name={`${name}.fieldName`}.
+     * For example: `<Text`Field name={`${name}.phoneNumber`} label="Phone Number" />`
+     *
+     * @param name
+     * @returns
+     */
+    renderFormGroup: (name: string, index: number) => React.ReactNode;
+    /**
+     * Content for the Add button. @default "Add Another"
+     */
+    addButtonContent?: ReactNode;
+    /**
+     * Content for the Remove button. @default "Remove"
+     */
+    removeButtonContent?: ReactNode;
+    /**
+     * Variant for the wrapper for each group. @default card
+     */
+    variant?: RepeatableGroupWrapperType;
+    /**
+     * Style overrides for the Add button
+     */
+    addButtonSx?: SxProps<Theme>;
+    /**
+     * Style overrides for the Remove button
+     */
+    removeButtonSx?: SxProps<Theme>;
+    /**
+     * If true, will always display 'Remove' button on all field groups.
+     * If false, will only display 'Remove' button as long as there are 2 or more field groups displayed.
+     * @default false
+     */
+    allowRemoveAll?: boolean;
+    /**
+     * If `true`, the component becomes readonly. The `add` and `remove` buttons are hidden.
+     * This does not change the individual formGroups, which must be made readOnly separately.
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * (Optional) Label for entire group.
+     */
+    label?: string;
+    /**
+     * Props from MUI-Bueno's Typography component.
+     * Used to customize the label when the static label option is selected or the field is readOnly.
+     */
+    labelProps?: TypographyProps;
+    /**
+     * This will display as the "value" when the field is readonly
+     * @default "None"
+     */
+    emptyListMsg?: string;
+    /**
+     * If true, adds a horizontal divider line in between each field grouping
+     * @default false
+     */
+    showDivider?: boolean;
+    /**
+     * Defines the position of the remove buttons relative to each grouping of fields.
+     * - "bottom" (default) - remove button will appear BELOW each grouping of fields
+     * - "right" - remove button will appear to the RIGHT (centered vertically) of each grouping of fields -- best for inline field groups
+     * - sx - pass in your own MUI style to fine-tune the flexbox container settings
+     */
+    removePosition?: RepeatableRemovePosition | SxProps<Theme>;
+};
+/**
+ * Repeatable Form Group is used for handling arrays in forms. It automatically handles adding & removing
+ * field groups (components containing one or multiple fields) using Formik.
+ */
+export declare const RepeatableFormGroup: <T>(props: RepeatableFormGroupProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default RepeatableFormGroup;

package/dist/components/Form/Stepper/Stepper.d.ts

@@ -0,0 +1,27 @@
+import { StepperProps as MuiStepperProps } from '@mui/material';
+import * as React from 'react';
+type BaseStepperProps = {
+    /**
+     * Array of labels for each step
+     */
+    steps: string[];
+    /**
+     * If true, displays labels inline. Ignored when orientation is set to vertical. Works best with a small number of steps, otherwise it can look cluttered.
+     * @default false
+     * @requires stepperOrientation='horizontal'
+     */
+    inlineLabel?: boolean;
+    /**
+     * If true, the orientation will automatically change to vertical when screen size is small, and horizontal when screen size is large. Orientation prop is ignored.
+     * @default false
+     */
+    isResponsive?: boolean;
+};
+export type StepperProps = BaseStepperProps & Omit<MuiStepperProps, 'alternativeLabel'>;
+/**
+ * The `Stepper` component displays progress through a sequence of steps. It is intended to be used with multiple page forms, as the stepper will automatically mark previous steps as complete.
+ *
+ * It is built on the [MUI React Stepper](https://mui.com/material-ui/react-stepper/)
+ */
+export declare const Stepper: React.FC<StepperProps>;
+export {};

package/dist/components/Layout/MGrid/MGrid.d.ts

@@ -0,0 +1,13 @@
+import { Grid2Props } from '@mui/material/Grid2';
+/**
+ * MGridProps
+ * @property {number} sm - breakpoint for small screen sizes
+ */
+export type MGridProps = Readonly<Grid2Props & {
+    sm?: number;
+}>;
+/**
+ * `MGrid` is a responsive layout grid component.
+ */
+export declare function MGrid({ size, spacing, sm, ...rest }: MGridProps): import("react/jsx-runtime").JSX.Element;
+export default MGrid;

package/dist/components/Layout/MPanel/MPanel.d.ts

@@ -0,0 +1,13 @@
+import { PaperProps } from '@mui/material/Paper';
+/**
+ * MPanelProps
+ * @property {string} title - Title to be displayed in the panel
+ */
+export type MPanelProps = Readonly<PaperProps & {
+    title?: string;
+}>;
+/**
+ * `MPanel` is an elevated layout component with a title and optional content.
+ */
+export declare function MPanel(props: MPanelProps): import("react/jsx-runtime").JSX.Element;
+export default MPanel;

package/dist/components/Layout/MStack/MStack.d.ts

@@ -0,0 +1,6 @@
+import { StackProps } from '@mui/material/Stack';
+/**
+ * `MStack` is a layout container used for arranging elements.
+ */
+export declare function MStack(props: StackProps): import("react/jsx-runtime").JSX.Element;
+export default MStack;

package/dist/components/LoadingIndicator/LoadingIndicator.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export type LoadingIndicatorProps = {
+    /**
+     * Custom title
+     * @default 'Loading...'
+     */
+    title?: string;
+    /**
+     * Custom message
+     * @optional
+     * @default undefined
+     */
+    message?: string;
+};
+/**
+ * Consistently styled LoadingIndicator
+ *
+ * @param props
+ * @returns
+ */
+export declare const LoadingIndicator: React.FC<LoadingIndicatorProps>;
+export default LoadingIndicator;

package/dist/components/Modals/AlertModal/AlertModal.d.ts

@@ -0,0 +1,11 @@
+import { ModalProps } from '../Modal';
+export type AlertModalProps = Omit<ModalProps, 'actions'> & {};
+/**
+ * Informational modal that does not require user feedback.
+ * Recommend using these sparringly, as they block the user until they close the modal.
+ *
+ * For a modal that requires a user response (ex. Yes/No), use `ConfirmationModal` instead (2-buttons)
+ * For a modal that requires the user to make a choice, use `DecisionModal` instead (3-buttons)
+ */
+export declare const AlertModal: (props: AlertModalProps) => import("react/jsx-runtime").JSX.Element;
+export default AlertModal;

package/dist/components/Modals/ConfirmationModal/ConfirmationModal.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { ModalProps } from '../Modal';
+import { ButtonProps } from '../../Buttons/Button/Button';
+export type ConfirmationModalProps = Omit<ModalProps, 'actions'> & {
+    /**
+     * Label for the confirm/action button.
+     */
+    confirmBtnLabel: string;
+    /**
+     * Postive/negative action. Should close modal and perform the action requested by the user.
+     */
+    onConfirm: () => void;
+    /**
+     * Override the default styling of the confirm button. Defaults are:
+     * `{ color: 'primary', variant: 'contained' }`
+     */
+    confirmButtonProps?: Omit<ButtonProps, 'onClick'>;
+};
+/**
+ * Modal that requires user to cancel or proceed.
+ *
+ * For a modal that is strictly informational and does not require the user to make a choice, use `AlertModal` instead (1-button)
+ * For a modal that requires the user to make a choice, use `DecisionModal` instead (3-buttons)
+ */
+export declare const ConfirmationModal: React.FC<ConfirmationModalProps>;
+export default ConfirmationModal;

package/dist/components/Modals/DecisionModal/DecisionModal.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+import { ModalProps } from '../Modal';
+import { ButtonProps } from '../../Buttons/Button/Button';
+export type DecisionModalProps = Omit<ModalProps, 'actions'> & {
+    /**
+     * Label for primary action (button)
+     */
+    primaryBtnLabel: string;
+    /**
+     * Callback when user clicks on primary action (button)
+     */
+    onPrimaryAction: () => void;
+    /**
+     * Override styling for primary action (button)
+     */
+    primaryActionProps?: Omit<ButtonProps, 'onClick'>;
+    /**
+     * Label for secondary action (button)
+     */
+    secondaryBtnLabel: string;
+    /**
+     * Callback when user clicks on secondary action (button)
+     */
+    onSecondaryAction: () => void;
+    /**
+     * Override styling for secondary action (button)
+     */
+    secondaryActionProps?: Omit<ButtonProps, 'onClick'>;
+};
+/**
+ * Modal that requires user to cancel, or choose between two choices.
+ *
+ * For a modal that is strictly informational and does not require the user to make a choice, use `AlertModal` instead (1-button)
+ * For a modal that requires the user to decide whether or not they want to proceed (cancel or confirm), use `ConfirmationModal` instead (2-buttons)
+ */
+export declare const DecisionModal: React.FC<DecisionModalProps>;
+export default DecisionModal;

package/dist/components/Modals/Modal.d.ts

@@ -0,0 +1,45 @@
+import { default as React, ReactNode } from 'react';
+import { DialogProps } from '@mui/material';
+import { ButtonProps } from '../Buttons/Button/Button';
+export type ModalProps = Omit<DialogProps, 'onClose' | 'title' | 'content'> & {
+    /**
+     * Title of the modal. Pass a string to have the modal auto-format the title, or pass a
+     * component if you want more control over the style/appearance.
+     */
+    title?: ReactNode;
+    /**
+     * Called when the user closes the modal. Make sure to close your modal using this callback.
+     */
+    onClose?: () => void;
+    /**
+     * Position of the close button.
+     *   - bottom (default): displays close button, with label `closeBtnLabel` (Cancel, by default), on the bottom-left corner.
+     *   - top: display close button as an X (only when `title` is type string), in the top-right corner.
+     *   - top-and-bottom: displays close button in both top and bottom
+     */
+    closeButtonPosition?: 'top' | 'bottom' | 'top-and-bottom';
+    /**
+     * Array of buttons that perform a MODIFYING action (not simply just closing the modal).
+     */
+    actions?: React.ReactNode[];
+    /**
+     * Label for the close/cancel button. Use when `closeButtonPosition` is `'bottom'` or `'top-and-bottom'`
+     */
+    closeBtnLabel?: string;
+    /**
+     * Override the default styling of the close/cancel button. Defaults are:
+     * `{ color: 'primary', variant: 'text' }`
+     */
+    closeButtonProps?: Omit<ButtonProps, 'onClick'>;
+    /**
+     * Set to true to disable the modal from dismissing when the user clicks outside the modal (backdrop) or clicks the escape key.
+     *
+     * Recommended for modals with forms, to prevent users from accidentally dismissing the modal and losing the data they entered.
+     */
+    disableDismiss?: boolean;
+};
+/**
+ * Modal (internal for now, might expose later)
+ */
+export declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/dist/components/Navigation/Footer/Footer.d.ts

@@ -0,0 +1,31 @@
+import { Theme, SxProps, LinkPropsColorOverrides } from '@mui/material';
+import { MenuOption } from '../../../@types';
+import { OverridableStringUnion } from '@mui/types';
+import * as React from 'react';
+export type FooterProps = {
+    /**
+     * Links that will appear under the logo, on the left side.
+     *
+     * NOTE: For each `MenuOption`, if `path` is defined, but NOT `onClick`, it will behave as a link. Otherwise, it will
+     * behave as a button.
+     */
+    featureMenuOptions?: MenuOption[];
+    /**
+     * Informational text, renders on the right side. Can be used for copyright, build info, etc.
+     */
+    copyright?: string;
+    /**
+     * Logo for the footer. Pass in a path (string) to have the styling be handled automatically, or pass in a component for more control.
+     */
+    logo: string | React.ReactNode;
+    /**
+     * override styles for Footer
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * quick override font color for links & copyright
+     */
+    fontColor?: OverridableStringUnion<'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error', LinkPropsColorOverrides>;
+};
+export declare const Footer: React.FC<FooterProps>;
+export default Footer;

package/dist/components/Navigation/Header/DarkModeToggle/DarkModeToggle.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Dark Mode toggle button. Uses MUI's palette to determine which icon (light or dark) to display.
+ *
+ * NOTE: You will need to update the theme via onToggle. This allows you to persist the user's selection via Redux.
+ */
+export type DarkModeToggleProps = {
+    /**
+     * Callback when dark mode toggle button is clicked (IMPORTANT: you will have to implement changing the theme)
+     */
+    onToggle: () => void;
+};
+export declare const DarkModeToggle: (props: DarkModeToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default DarkModeToggle;

package/dist/components/Navigation/Header/Drawer.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { DrawerProps as MuiDrawerProps } from '@mui/material';
+import { MenuOption } from '../../../@types';
+type DrawerBaseProps = {
+    /**
+     * Array of navigation items to show
+     *
+     * NOTE: For each `MenuOption`, if `path` is defined, but NOT `onClick`, it will behave as a link. Otherwise, it will
+     * behave as a button._
+     */
+    menuOptionLists?: MenuOption[][];
+};
+export type DrawerProps = DrawerBaseProps & MuiDrawerProps;
+/**
+ * Mobile drawer. Renders as hamburger icon that, when clicked, toggles a side menu on the left (default) side of the screen.
+ */
+export declare const Drawer: React.FC<DrawerProps>;
+export default Drawer;

package/dist/components/Navigation/Header/EnvironmentBanner.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { EnvironmentInfo } from '../../../@types';
+export declare const EnvironmentBanner: React.FC<EnvironmentInfo>;
+export default EnvironmentBanner;