material-you-react/dist/index.d.ts

Material You: Material You (M3) Design system and its components for simple integration with Next.Js or other react-based frameworks

import React from 'react';

type BottomAppBarProps = {
    innerRef?: React.RefObject<HTMLDivElement>;
    backgroundColor?: string;
    items: string[];
    floatingActionButton?: React.ReactNode;
};
/**
 * @params backgroundColor: string - sets Background color
 * @params items: string[] - An array of icon names to display. Example: `['home', 'search']`.
 * @params floatingActionButton: Displays the FAB when `true`. Example: `true`.                        |
 * @returns React.ReactNode-
 * @description
 * This component is a BottomAppBar component.
 */
declare function BottomAppBar({ innerRef, ...props }: BottomAppBarProps): React.JSX.Element;

type TopAppBarCenterAlignedProps = {
    containerBackgroundColor?: string;
    headline: string;
    leadingIcon?: string;
    avatar?: boolean;
    avatarImage?: string;
};
declare function TopAppBarCenterAligned(props: TopAppBarCenterAlignedProps): React.JSX.Element;

type TopAppBarCenterSmallProps = {
    containerBackgroundColor?: string;
    headline: string;
    leadingIcon?: string;
    avatar?: boolean;
    avatarImage?: string;
    trailingIcons?: string[];
};
declare function TopAppBarCenterSmall(props: TopAppBarCenterSmallProps): React.JSX.Element;

type TopAppBarCenterMediumProps = {
    containerBackgroundColor?: string;
    headline: string;
    leadingIcon?: string;
    trailingIcons?: string[];
};
declare function TopAppBarCenterMedium(props: TopAppBarCenterMediumProps): React.JSX.Element;

type TopAppBarCenterLargeProps = {
    containerBackgroundColor?: string;
    headline: string;
    leadingIcon?: string;
    trailingIcons?: string[];
};
declare function TopAppBarCenterLarge(props: TopAppBarCenterLargeProps): React.JSX.Element;

type ElevatedButtonProps<T = void> = {
    children: React.ReactNode;
    onClickCallback: (params: T) => void;
    icon?: string;
    disabled?: boolean;
    containerColor?: string;
    contentColor?: string;
    width?: string;
};
declare const ElevatedButton: <T>(props: ElevatedButtonProps<T>) => React.JSX.Element;

type FilledButtonProps<T = void> = {
    children: React.ReactNode;
    onClickCallback: (params: T) => void;
    icon?: string;
    disabled?: boolean;
    containerColor?: string;
    contentColor?: string;
    width?: string;
    draggable?: boolean;
};
declare const FilledButton: <T>(props: FilledButtonProps<T>) => React.JSX.Element;

type FilledTonalButtonProps<T = void> = {
    children: React.ReactNode;
    onClickCallback: (params: T) => void;
    icon?: string;
    disabled?: boolean;
    containerColor?: string;
    contentColor?: string;
    width?: string;
};
declare const FilledTonalButton: <T>(props: FilledTonalButtonProps<T>) => React.JSX.Element;

type OutlinedButtonProps<T = void> = {
    children: React.ReactNode[] | React.ReactNode;
    onClickCallback: (params: T) => void;
    icon?: string;
    disabled?: boolean;
    contentColor?: string;
    width?: string;
};
declare const OutlinedButton: <T>(props: OutlinedButtonProps<T>) => React.JSX.Element;

type TextButtonProps<T = void> = {
    children: React.ReactNode[] | React.ReactNode;
    onClickCallback: (params: T) => void;
    icon?: string;
    disabled?: boolean;
    width?: string;
    contentColor?: string;
};
declare const TextButton: <T>(props: TextButtonProps<T>) => React.JSX.Element;

type FloatingActionButtonProps<T = void> = {
    icon: string;
    onClickCallback: (params: T) => void;
};
declare const FloatingActionButton: <T>(props: FloatingActionButtonProps<T>) => React.JSX.Element;

type FilledTextFieldProps = {
    value: string;
    onValueChange: (value: string) => void;
    type?: "textarea" | "" | "dropdown";
    options?: string[];
    rows?: number;
    containerWidth?: string;
    leadingIcon?: string;
    labelText: string;
    inputType?: string;
    maxLength?: number;
    required?: boolean;
    supportingText?: string;
    trailingIcon?: string;
    disabled?: boolean;
    error?: boolean;
};
/**
 * Props for OutlinedTextField Component
 * @param (string) [required] `value` - Current value of the input field
 * @param (function) [required] `onValueChange` - Handler function for value changes
 * @param ("textarea" | "" | "dropdown") [optional] `type` - Type of input field
 * @param (string[]) [optional] `options` - Available options for dropdown type
 * @param (number) [optional] `rows` - Number of rows for textarea
 * @param (string) [optional] `containerWidth` - Width of the input container
 * @param (string) [optional] `leadingIcon` - Icon displayed at start of input
 * @param (string) [required] `labelText` - Label text for the input field
 * @param (string) [optional] `inputType` - HTML input type attribute
 * @param (number) [optional] `maxLength` - Maximum allowed input length
 * @param (boolean) [optional] `required` - Whether field is required
 * @param (string) [optional] `supportingText` - Helper text below input
 * @param (string) [optional] `trailingIcon` - Icon displayed at end of input
 * @param (boolean) [optional] `disabled` - Whether field is disabled
 * @param (boolean) [optional] `error` - Whether field is in error state
 */
declare function FilledTextField(props: FilledTextFieldProps): React.JSX.Element;

type OutlinedTextFieldProps = {
    value: string;
    onValueChange: (value: string) => void;
    type?: "textarea" | "" | "dropdown";
    options?: string[];
    rows?: number;
    containerWidth?: string;
    leadingIcon?: string;
    labelText: string;
    inputType?: string;
    maxLength?: number;
    required?: boolean;
    supportingText?: string;
    trailingIcon?: string;
    disabled?: boolean;
    error?: boolean;
};
/**
 * Props for OutlinedTextField Component
 * @param (string) [required] `value` - Current value of the input field
 * @param (function) [required] `onValueChange` - Handler function for value changes
 * @param ("textarea" | "" | "dropdown") [optional] `type` - Type of input field
 * @param (string[]) [optional] `options` - Available options for dropdown type
 * @param (number) [optional] `rows` - Number of rows for textarea
 * @param (string) [optional] `containerWidth` - Width of the input container
 * @param (string) [optional] `leadingIcon` - Icon displayed at start of input
 * @param (string) [required] `labelText` - Label text for the input field
 * @param (string) [optional] `inputType` - HTML input type attribute
 * @param (number) [optional] `maxLength` - Maximum allowed input length
 * @param (boolean) [optional] `required` - Whether field is required
 * @param (string) [optional] `supportingText` - Helper text below input
 * @param (string) [optional] `trailingIcon` - Icon displayed at end of input
 * @param (boolean) [optional] `disabled` - Whether field is disabled
 * @param (boolean) [optional] `error` - Whether field is in error state
 */
declare function OutlinedTextField(props: OutlinedTextFieldProps): React.JSX.Element;

type DividerProps = {
    type: "horizontal";
    variant: "fullWidth" | "inset" | "middleInset" | "rightMargin";
} | {
    type: "vertical";
    variant?: never;
};
/**
 * @description A Divider Component - Used to differentiate items.
 * @params type : string ( `horizontal` | `vertical` )
 * @params variant: string ( *Allowed Inputs ( 🔴 NOTE: only if type : horizontal )* = `fullWidth` | `inset` | `middleInset` | `rightMargin` )
 */
declare function Divider(props: DividerProps): React.JSX.Element;

declare const DatePicker: React.FC;

type CheckboxProps = {
    value?: boolean | null | undefined;
    isError?: boolean;
    onChange?: (value?: boolean | null) => void;
    disabled?: boolean;
};
declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;

type TabProps = {
    children: React.ReactNode;
};
/**
 * A Tab Component used for moving from one page to another.
 *
 * `TabPrimary` | `TabSecondary` are accepted as children.
 */
declare function Tab(props: TabProps): React.JSX.Element;

type TabsDefaultProps<T = void> = {
    label: string;
    badge?: string;
    active?: boolean;
    onClickCallback: (params: T) => void;
};
type PrimaryProps<T = void> = TabsDefaultProps<T> & {
    icon: string;
};
type SecondaryProps<T = void> = TabsDefaultProps<T> & {
    icon?: string;
};

/**
 * A Tab Component used for moving from one page to another.
 *
 * @param {string} `label` - A label that will be shown.
 * @param {boolean} `active` - A Default selected Tab.
 * @param {string} `badge` - A string that represents a no.of notifications.
 * @param {string} `icon` - The material icon name to display next to the action. Optional.
 * @params {() => void} `onClickCallback`   : A callback function hits when user Clicks.
 */
declare const TabPrimary: <T>(props: PrimaryProps<T>) => React.JSX.Element;

/**
 * A Tab Component used for moving from one page to another.
 *
 * @param {string} `label` - A label that will be shown.
 * @param {boolean} `active` - A Default selected Tab.
 * @param {string} `badge` - A string that represents a no.of notifications.
 * @param {string} `icon` - The material icon name to display next to the action. Optional.
 * @params {() => void} `onClickCallback`   : A callback function hits when user Clicks.
 */
declare const TabSecondary: <T>(props: SecondaryProps<T>) => React.JSX.Element;

type BaseSnackBarProps = {
    supportingText: string;
    action?: string;
    actionCallback?: (...args: any[]) => any;
    icon?: string;
    duration?: number;
    offset?: string;
    enterTransition?: "slide" | "grow";
    align?: "start" | "center";
};
type SnackBarProps = (Omit<BaseSnackBarProps, "longerAction"> & {
    variant: "singleLine";
}) | (BaseSnackBarProps & {
    variant: "twoLine";
});
/**
 * A component for displaying brief messages to users, with optional actions.
 * The SnackBar component supports single-line and two-line variants.
 *
 * @param {string} `supportingText` - The main message text displayed inside the SnackBar.
 * @param {string} `action` - The label for the action button. Optional.
 * @param {Function} `actionCallback` - A callback function executed when the action button is clicked. Optional.
 * @param {string} `icon` - The material icon name to display next to the action. Optional.
 * @param {number} [duration=5] - The duration (in seconds) for which the SnackBar is visible. Defaults to 5 seconds.
 * @param {'singleLine' | 'twoLine'} `variant` - The layout variant of the SnackBar: either single-line or two-line.
 */
declare function SnackBar(props: SnackBarProps): React.JSX.Element | null;

type SnackbarParams = {
    action?: string;
    actionCallback?: () => void;
};
type ScaffoldHost = {
    showSnackBar: (message: string, params?: SnackbarParams) => void;
    openDrawer: () => void;
};
declare const useScaffoldHost: () => ScaffoldHost | null;

type ScaffoldProps = {
    children?: React.ReactNode | ((props: ScaffoldHost | null) => React.ReactNode);
    appBar?: React.ReactNode;
    fab?: React.ReactNode;
    bottomAppBar?: React.ReactElement;
    drawer?: React.ReactNode;
};
declare const Scaffold: ({ children, ...props }: ScaffoldProps) => React.JSX.Element;

type RadioButtonProps = {
    selected: boolean;
    disabled?: boolean;
    onClick: () => void;
};
declare const RadioButton: (props: RadioButtonProps) => React.JSX.Element;

type RadioGroupProps = {
    children: string[];
    value: string | null;
    onChange: (value: string) => void;
};
declare const RadioGroup: ({ children, value, onChange }: RadioGroupProps) => React.JSX.Element;

type BadgeProps = {
    content?: string;
    disableAlign?: boolean | true;
};
declare const Badge: (props: BadgeProps) => React.JSX.Element;

type SwitchProps<T = void> = {
    mode: "ON" | "OFF";
    offIcon?: boolean;
    onIcon?: boolean;
    disable?: boolean;
    onClickCallback: (params: T) => void;
};
/**
 * Switch is used to toggle.
 * @params {'ON' | 'OFF'} `mode`: says wheather the toggle is on or off state.
 * @params {boolean} `offIcon` : The close icon to me shown when toggle is off.
 * @params {boolean} `onIcon` : The Check icon to me shown when toggle is on.
 * @params {() => void} `onClickCallback`   : A callback function hits when user toggle's.
 */
declare const Switch: <T>(props: SwitchProps<T>) => React.JSX.Element;

type MenuProps = {
    children: React.ReactNode;
    displayLimit?: number;
};
/**
 * Props for the Menu component.
 * @params {React.ReactNode} `children` - The content to be rendered inside the menu. Accepts `MenuItem` as a childrens.
 * @params {number} `displayLimit` - Optional. Specifies the maximum number of items to display before enabling scroll.
 *                                    If not provided, the menu will expand to fit all content without scrolling.
*/
declare function Menu(props: MenuProps): React.JSX.Element;

type MenuItemProps<T = void> = {
    leadingIcon?: string;
    trailingIcon?: string;
    trailingText?: string;
    label: string;
    disable?: boolean;
    children?: React.ReactNode;
    onClickCallback?: (params: T) => void;
};
/**
 * Props for MenuItem Component
 * @param (string) [optional] `leadingIcon` - Icon displayed at start of item
 * @param (string) [optional] `trailingIcon` - Icon displayed at end of item
 * @param (string) [optional] `trailingText` - Text displayed at end of item
 * @param (string) [required] `label` - Primary text content of menu item
 * @param (boolean) [optional] `disable` - Whether item is disabled
 * @param (React.ReactNode) [optional] `children` - Inner content to render
 * @param (function) [optional] `onClickCallback` - Callback fired on item click, accepts generic param
 */
declare const MenuItem: <T>(props: MenuItemProps<T>) => React.JSX.Element;

interface LinearProgressProps {
    percentage?: number;
    indeterminate?: boolean;
}
/**
 * @description A Linear Progress Indicator Component - shows the status of a process in real time
 * @params percentage: number (optional) - Percentage determines how much does progress done.
 * @params indeterminate: boolean (optional) - Indeterminate for an unspecified amount of progress.
*/
declare function LinearProgress(props: LinearProgressProps): React.JSX.Element;

interface CircularProgressProps {
    percentage?: number;
    indeterminate?: boolean;
}
/**
 * @description A Circular Progress Indicator Component - shows the status of a process in real time, for better UI experience.
 * @params percentage: number (optional) - Percentage determines how much does progress done.
 * @params indeterminate: boolean (optional) - Indeterminate for an unspecified amount of progress.
*/
declare function CircularProgress(props: CircularProgressProps): React.JSX.Element;

export { Badge, BottomAppBar, Checkbox, CircularProgress, DatePicker, Divider, ElevatedButton, FilledButton, FilledTextField, FilledTonalButton, FloatingActionButton, LinearProgress, Menu, MenuItem, OutlinedButton, OutlinedTextField, RadioButton, RadioGroup, Scaffold, SnackBar, Switch, Tab, TabPrimary, TabSecondary, TextButton, TopAppBarCenterAligned, TopAppBarCenterLarge as TopAppBarLarge, TopAppBarCenterMedium as TopAppBarMedium, TopAppBarCenterSmall as TopAppBarSmall, useScaffoldHost };