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;
    onClick: (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;
    onClick: (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;
    onClick: (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;
    onClick: (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;
    onClick: (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;
    onClick: (params: T) => void;
};
declare const FloatingActionButton: <T>(props: FloatingActionButtonProps<T>) => React.JSX.Element;

type FilledTextFieldProps = {
    value: string;
    onValueChange: (value: string) => void;
    type?: "textarea" | "";
    rows?: number;
    containerWidth?: string;
    leadingIcon?: string;
    labelText: string;
    inputType?: string;
    maxLength?: number;
    required?: boolean;
    supportingText?: string;
    trailingIcon?: string;
    disabled?: boolean;
    error?: boolean;
};
declare function FilledTextField(props: FilledTextFieldProps): React.JSX.Element;

type OutlinedTextFieldProps = {
    type?: "textarea" | "";
    rows?: number;
    value: string;
    onValueChange: (value: string) => void;
    containerWidth?: string;
    leadingIcon?: string;
    labelText: string;
    inputType?: string;
    maxLength?: number;
    required?: boolean;
    supportingText?: string;
    trailingIcon?: string;
    disabled?: boolean;
    error?: boolean;
};
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 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;

export { Badge, BottomAppBar, Checkbox, DatePicker, Divider, ElevatedButton, FilledButton, FilledTextField, FilledTonalButton, FloatingActionButton, OutlinedButton, OutlinedTextField, RadioButton, RadioGroup, Scaffold, SnackBar, TextButton, TopAppBarCenterAligned, TopAppBarCenterLarge as TopAppBarLarge, TopAppBarCenterMedium as TopAppBarMedium, TopAppBarCenterSmall as TopAppBarSmall, useScaffoldHost };