@useloops/design-system 1.4.149 → 1.4.151

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import react, { ReactElement, FunctionComponent, ChangeEvent, PropsWithChildren, ReactNode, FC, Dispatch, SetStateAction } from 'react';
 import * as _mui_material from '@mui/material';
-import { AvatarGroupProps as AvatarGroupProps$1, SxProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, MenuProps, MenuItemProps, FormControlLabelProps as FormControlLabelProps$1, Theme, Breakpoint, IconButtonProps as IconButtonProps$1, TooltipProps as TooltipProps$1, ButtonGroupProps, TextFieldProps as TextFieldProps$1, LinkProps as LinkProps$1, SelectProps as SelectProps$1, SelectChangeEvent, PaperProps, SwitchProps as SwitchProps$1, TypographyProps as TypographyProps$1, PaletteMode, Direction } from '@mui/material';
+import { AvatarGroupProps as AvatarGroupProps$1, SxProps, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, MenuProps, MenuItemProps, FormControlLabelProps as FormControlLabelProps$1, Theme, Breakpoint, TooltipProps as TooltipProps$1, IconButtonProps as IconButtonProps$1, ButtonGroupProps, TextFieldProps as TextFieldProps$1, LinkProps as LinkProps$1, SelectProps as SelectProps$1, SelectChangeEvent, PaperProps, SwitchProps as SwitchProps$1, TypographyProps as TypographyProps$1, PaletteMode, Direction } from '@mui/material';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
@@ -9,6 +9,7 @@ import { MuiMarkdownProps } from 'mui-markdown';
 import { NumericFormatProps } from 'react-number-format';
 import { UniqueIdentifier } from '@dnd-kit/core';
 import { SubmitHandler } from 'react-hook-form';
+import { TextFieldProps as TextFieldProps$2, NumberFieldProps as NumberFieldProps$1, TextareaProps as TextareaProps$1, SelectProps as SelectProps$2, CheckboxProps as CheckboxProps$2, CheckboxGroupProps as CheckboxGroupProps$1, SwitchProps as SwitchProps$2, SliderProps as SliderProps$1, DifferentialProps as DifferentialProps$1, LikertProps as LikertProps$1, RadioGroupProps as RadioGroupProps$1, RankProps as RankProps$1, RichTextFieldProps as RichTextFieldProps$1, StarRatingProps as StarRatingProps$1, HtmlProps as HtmlProps$1, CustomFieldProps as CustomFieldProps$1, InputLabelProps as InputLabelProps$1, InputLabelHelpProps as InputLabelHelpProps$1 } from 'WebCore';
 
 interface ColorRange {
     0: string;
@@ -180,11 +181,11 @@ interface AuthFormHeaderProps {
 declare const AuthFormHeader: FunctionComponent<AuthFormHeaderProps>;
 
 interface AvatarProps {
-    variation?: 'sm' | 'lg';
-    src?: string;
     alt?: string;
-    className?: string;
     children?: ReactElement;
+    className?: string;
+    sizing?: 'sm' | 'lg';
+    src?: string;
 }
 declare const Avatar: FunctionComponent<AvatarProps>;
 
@@ -195,7 +196,7 @@ interface AvatarGroupProps extends AvatarGroupProps$1 {
 }
 declare const AvatarGroup: FunctionComponent<AvatarGroupProps>;
 
-type GenericSizeMap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type GenericSizeMap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
 
 type ButtonSizing = Exclude<GenericSizeMap, 'none'>;
 
@@ -326,6 +327,7 @@ interface FormControlLabelProps {
     checked?: boolean;
     disabled?: boolean;
     label?: string | ReactElement;
+    labelPlacement?: FormControlLabelProps$1['labelPlacement'];
     sx?: SxProps<Theme>;
     onChange?: FormControlLabelProps$1['onChange'];
     value?: unknown;
@@ -348,12 +350,19 @@ interface HtmlProps {
 declare const Html: FunctionComponent<HtmlProps>;
 
 interface IconProps {
-    name: 'arrow-forward' | 'expand-more' | 'close' | 'play' | 'positive' | 'negative' | 'neutral' | 'info' | 'check-circle' | 'error-outline' | 'lightbulb' | 'warning-amber' | 'access-time' | 'linkedin' | 'medium' | 'menu' | 'unfold-more' | 'navigation-arrow' | 'lock' | 'loopsOfficial' | 'google' | 'linkedin-color' | 'check' | 'dash' | 'gift' | 'push-left' | 'push-right' | 'star' | 'open-in-new' | 'notification' | 'chevron-right' | 'check-thin' | 'home' | 'folder' | 'help' | string;
+    name: 'access-time' | 'arrow-forward' | 'check-circle' | 'check-thin' | 'check' | 'chevron-right' | 'close' | 'dash' | 'error-outline' | 'expand-more' | 'folder' | 'gift' | 'google' | 'help' | 'home' | 'info' | 'lightbulb' | 'linkedin-color' | 'linkedin' | 'lock' | 'loopsOfficial' | 'medium' | 'menu' | 'navigation-arrow' | 'negative' | 'neutral' | 'notification' | 'open-in-new' | 'play' | 'positive' | 'push-left' | 'push-right' | 'settings' | 'star' | 'unfold-more' | 'warning-amber' | string;
     size?: number;
     sx?: SxProps;
 }
 declare const Icon: FunctionComponent<IconProps>;
 
+interface TooltipProps extends PropsWithChildren {
+    message: TooltipProps$1['title'];
+    variation?: 'primary';
+    placement?: TooltipProps$1['placement'];
+}
+declare const Tooltip: FunctionComponent<TooltipProps>;
+
 type IconButtonSizing = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type IconButtonShapeMap = 'default' | 'round';
 type IconButtonVariation = 'default' | 'toggle' | 'outlined' | 'raised';
@@ -365,13 +374,6 @@ interface StyledIconButtonProps extends IconButtonProps$1 {
     loading?: boolean;
 }
 
-interface TooltipProps extends PropsWithChildren {
-    message: TooltipProps$1['title'];
-    variation?: 'primary';
-    placement?: TooltipProps$1['placement'];
-}
-declare const Tooltip: FunctionComponent<TooltipProps>;
-
 interface IconButtonProps {
     variation?: IconButtonVariation;
     shape?: IconButtonShapeMap;
@@ -473,22 +475,27 @@ declare const Logo: FunctionComponent<React.SVGProps<SVGSVGElement>>;
 
 declare const Markdown: (props: MuiMarkdownProps) => react_jsx_runtime.JSX.Element;
 
-interface NavButtonProps {
+type NavigationSizing = 'sm' | 'lg';
+
+type MenuButtonSizing = 'sm' | 'md' | 'lg';
+interface MenuButtonProps {
     active?: boolean;
+    danger?: boolean;
+    fullWidth?: boolean;
     href?: string;
     icon?: string;
     label: string;
+    navigationSizing: NavigationSizing;
     onClick?: () => void;
-    variation?: 'sm' | 'lg';
+    sizing?: MenuButtonSizing;
 }
-declare const NavButton: FunctionComponent<NavButtonProps>;
+declare const MenuButton: FunctionComponent<MenuButtonProps>;
 
-type NudgeVariation = 'sm' | 'lg';
 interface NudgeProps extends PropsWithChildren {
     description: string;
     notification?: boolean;
     title: string;
-    variation?: NudgeVariation;
+    navigationSizing: NavigationSizing;
 }
 declare const Nudge: FunctionComponent<NudgeProps>;
 
@@ -691,9 +698,18 @@ interface SurfaceProps extends PropsWithChildren {
 }
 declare const Surface: FC<SurfaceProps>;
 
-interface SwitchProps extends SwitchProps$1 {
+interface StyledSwitchProps extends SwitchProps$1 {
+}
+
+interface SwitchProps extends StyledSwitchProps {
+    value?: boolean;
+    label?: string | ReactElement;
+    labelPlacement?: Exclude<FormControlLabelProps['labelPlacement'], 'top' | 'bottom'>;
+    fullWidth?: boolean;
+    onChange?: (event: React.SyntheticEvent<Element, Event>, checked: boolean) => void;
+    internalChange?: () => void;
 }
-declare const Switch: _emotion_styled.StyledComponent<SwitchProps & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
+declare const Switch: FunctionComponent<SwitchProps>;
 
 type TextareaProps = InputFieldBaseProps & {
     startAdornment?: ReactElement;
@@ -703,10 +719,11 @@ type TextareaProps = InputFieldBaseProps & {
 declare const Textarea: FunctionComponent<TextareaProps>;
 
 interface TypographyProps {
-    variation: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
+    clamp?: number;
     component: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+    type?: 'default' | 'button';
+    variation: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
     weight?: 'default' | 'bold';
-    clamp?: number;
 }
 declare const Typography: FunctionComponent<TypographyProps & TypographyProps$1>;
 
@@ -734,19 +751,19 @@ interface ToastProps {
 }
 declare const Toast: FunctionComponent<ToastProps>;
 
-interface MenuItem {
-    children?: MenuItem[];
-    danger?: boolean;
-    onClick?: () => void;
-    selected?: boolean;
-    title: string;
-}
 interface UserMenuProps extends PropsWithChildren {
     avatar?: string;
     email: string;
     menuItems?: MenuItem[];
     name: string;
-    variation?: 'sm' | 'lg';
+    navigationSizing: NavigationSizing;
+}
+interface MenuItem {
+    children?: MenuItem[];
+    danger?: boolean;
+    label: string;
+    onClick?: () => void;
+    selected?: boolean;
 }
 declare const UserMenu: FunctionComponent<UserMenuProps>;
 
@@ -756,6 +773,9 @@ interface BackgroundOptions {
 }
 declare const backgroundCreator: (theme: Theme, options: BackgroundOptions) => string;
 
+/**
+ * Form Generator Core Types
+ */
 interface FormGeneratorHandler {
     set: () => void;
     reset: () => void;
@@ -766,12 +786,12 @@ interface FormGeneratorHandler {
     triggerFormValidation: () => Promise<unknown>;
 }
 type FormGeneratorProps = FunctionComponent<{
+    ref?: any;
     formConfig: FormGeneratorConfig;
     onFormSubmit?: SubmitHandler<any>;
     onFormChange?: (formData: any) => void;
     submitButton?: ReactElement;
     secondaryButton?: ReactElement;
-    ref?: any;
 }>;
 interface FormGeneratorConfig {
     fields: FieldTypes[];
@@ -785,78 +805,47 @@ interface FormGeneratorConfig {
         sxStack?: SxProps<Theme>;
     };
 }
-type TextFieldType = {
-    fieldType: 'textfield';
-} & BaseField & Omit<TextFieldProps, 'value' | 'onChange' | 'name'>;
-type NumberFieldType = {
-    fieldType: 'numberfield';
-} & BaseField & Omit<NumberFieldProps, 'value' | 'onChange' | 'name'>;
-type TextareaType = {
-    fieldType: 'textarea';
-} & BaseField & Omit<TextareaProps, 'value' | 'onChange' | 'name'>;
-type SelectType = {
-    fieldType: 'select';
-    defaultValue?: SelectProps['value'];
-} & BaseField & Omit<SelectProps, 'value' | 'onChange' | 'name'>;
-type CheckboxType = {
-    fieldType: 'checkbox';
-    defaultValue?: CheckboxProps['value'];
-} & BaseField & Omit<CheckboxProps, 'value' | 'onChange' | 'name'>;
-type CheckboxGroupType = {
-    fieldType: 'checkboxGroup';
-    defaultValue?: string[];
-} & BaseField & Omit<CheckboxGroupProps, 'value' | 'onChange' | 'name'>;
-type SliderType = {
-    fieldType: 'slider';
-    defaultValue?: SliderProps['value'];
-} & BaseField & Omit<SliderProps, 'value' | 'onChange' | 'name'>;
-type DifferentialType = {
-    fieldType: 'differential';
-    defaultValue?: DifferentialProps['value'];
-} & BaseField & Omit<DifferentialProps, 'value' | 'onChange' | 'name'>;
-type LikertType = {
-    fieldType: 'likert';
-    defaultValue?: LikertProps['value'];
-} & BaseField & Omit<LikertProps, 'value' | 'onChange' | 'name'>;
-type RadioGroupType = {
-    fieldType: 'radioGroup';
-    defaultValue?: RadioGroupProps['value'];
-} & BaseField & Omit<RadioGroupProps, 'value' | 'onChange' | 'name'>;
-type DragAndDropRankingType = {
-    fieldType: 'ranking';
-    defaultValue?: RankProps['value'];
-} & BaseField & Omit<RankProps, 'value' | 'onChange' | 'name'>;
-type RichTextFieldType = {
-    fieldType: 'richTextfield';
-    defaultValue?: RichTextFieldProps['value'];
-} & BaseField & Omit<RichTextFieldProps, 'value' | 'onChange' | 'name'>;
-type StarRatingType = {
-    fieldType: 'starRating';
-    defaultValue?: StarRatingProps['value'];
-} & BaseField & Omit<StarRatingProps, 'value' | 'onChange' | 'name'>;
+/**
+ * Field Types
+ */
+type FieldTypes = CheckboxType | CheckboxGroupType | SwitchType | TextareaType | SelectType | TextFieldType | SliderType | DifferentialType | RichTextFieldType | LikertType | RadioGroupType | DragAndDropRankingType | NumberFieldType | StarRatingType | HTMLType | CustomFieldType;
+type TextFieldType = CreateFieldType<'textfield', TextFieldProps$2, string>;
+type NumberFieldType = CreateFieldType<'numberfield', NumberFieldProps$1, number>;
+type TextareaType = CreateFieldType<'textarea', TextareaProps$1, string>;
+type SelectType = CreateFieldType<'select', SelectProps$2, SelectProps$2['value']>;
+type CheckboxType = CreateFieldType<'checkbox', CheckboxProps$2, NonNullable<CheckboxProps$2['value']>>;
+type CheckboxGroupType = CreateFieldType<'checkboxGroup', CheckboxGroupProps$1, string[]>;
+type SwitchType = CreateFieldType<'switch', SwitchProps$2, NonNullable<SwitchProps$2['checked']>>;
+type SliderType = CreateFieldType<'slider', SliderProps$1, NonNullable<SliderProps$1['value']>>;
+type DifferentialType = CreateFieldType<'differential', DifferentialProps$1, NonNullable<DifferentialProps$1['value']>>;
+type LikertType = CreateFieldType<'likert', LikertProps$1, LikertProps$1['value']>;
+type RadioGroupType = CreateFieldType<'radioGroup', RadioGroupProps$1, RadioGroupProps$1['value']>;
+type DragAndDropRankingType = CreateFieldType<'ranking', RankProps$1, NonNullable<RankProps$1['value']>>;
+type RichTextFieldType = CreateFieldType<'richTextfield', RichTextFieldProps$1, RichTextFieldProps$1['value']>;
+type StarRatingType = CreateFieldType<'starRating', StarRatingProps$1, NonNullable<StarRatingProps$1['value']>>;
 type HTMLType = {
     fieldType: 'html';
-    content: HtmlProps['children'];
+    content: HtmlProps$1['children'];
     defaultValue?: never;
 } & BaseField;
 type CustomFieldType = {
     fieldType: 'customfield';
-    defaultValue?: CustomFieldProps['value'];
-} & BaseField & CustomFieldProps;
-type DynamicFieldType = 'textfield' | 'numberfield' | 'textarea' | 'select' | 'checkbox' | 'checkboxGroup' | 'slider' | 'differential' | 'likert' | 'starRating' | 'radioGroup' | 'ranking' | 'richTextfield' | 'customfield';
-type FieldType = DynamicFieldType | 'html';
-type FieldTypes = CheckboxType | CheckboxGroupType | TextareaType | SelectType | TextFieldType | SliderType | DifferentialType | RichTextFieldType | LikertType | RadioGroupType | DragAndDropRankingType | NumberFieldType | StarRatingType | HTMLType | CustomFieldType;
+    defaultValue?: CustomFieldProps$1['value'];
+} & BaseField & CustomFieldProps$1;
+/**
+ * Field Type Utilities
+ */
 interface BaseField {
     name: string;
     ref?: any;
     multiline?: boolean;
     content?: ReactElement;
     label?: string;
-    labelProps?: InputLabelProps;
+    labelProps?: InputLabelProps$1;
     helperText?: string;
     hidden?: boolean;
     type?: string;
-    helpTextProps?: InputLabelHelpProps;
+    helpTextProps?: InputLabelHelpProps$1;
     validation?: any;
     valueTransformer?: (valueToTransform: string) => string;
     disabled?: boolean;
@@ -867,6 +856,12 @@ interface BaseField {
         sxInputStack?: SxProps<Theme>;
     };
 }
+type CreateFieldType<TFieldType extends string, TProps, TDefaultValue extends any = void> = {
+    fieldType: TFieldType;
+} & BaseField & Omit<TProps, 'value' | 'defaultValue' | 'onChange' | 'name'> & (TDefaultValue extends void ? unknown : {
+    defaultValue?: TDefaultValue;
+});
+type FieldType = FieldTypes['fieldType'];
 
 declare const FormGenerator: FormGeneratorProps;
 
@@ -1305,4 +1300,4 @@ declare module '@mui/system' {
     }
 }
 
-export { AnnualController, type AnnualControllerProps, AuthContainerSurface, type AuthContainerSurfaceProps, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, CheckboxGroup as CheckBoxGroup, Checkbox, type CheckboxGroupProps, type CheckboxProps, ColorBackgroundContainer, type ColorBackgroundContainerProps, CustomField, type CustomFieldProps, DEFAULT_MAX_INPUT_LENGTH, Differential, type DifferentialProps, DropdownMenu, type FieldType, type FieldTypes, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, GridOverlay, type GridOverlayProps, Html, type HtmlProps, Icon, IconButton, IconButtonGroup, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, Markdown, NavButton, type NavButtonProps, Nudge, type NudgeProps, NumberField, type NumberFieldProps, Pill, type PillProps, PlanFeatureTable, type PlanFeatureTableProps, PlanTierCard, type PlanTierCardProps, PlanTierCardScale, type PlanTierCardScaleProps, Portal, type PortalProps, PoweredByWatermarkLogo, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, Select, type SelectProps, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, Textarea as TextArea, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, type TextareaProps, ThemeProvider, TickGroup, type TickGroupProps, Toast, type ToastProps, Tooltip, type TooltipProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, backgroundCreator, chooseArticle, defaultInputValidation, emailValidation, passwordValidation, useDropdownMenu };
+export { AnnualController, type AnnualControllerProps, AuthContainerSurface, type AuthContainerSurfaceProps, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Button, type ButtonProps, CheckboxGroup as CheckBoxGroup, Checkbox, type CheckboxGroupProps, type CheckboxProps, ColorBackgroundContainer, type ColorBackgroundContainerProps, CustomField, type CustomFieldProps, DEFAULT_MAX_INPUT_LENGTH, Differential, type DifferentialProps, DropdownMenu, type FieldType, type FieldTypes, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, GridOverlay, type GridOverlayProps, Html, type HtmlProps, Icon, IconButton, IconButtonGroup, type IconButtonProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, Markdown, MenuButton, type MenuButtonProps, Nudge, type NudgeProps, NumberField, type NumberFieldProps, Pill, type PillProps, PlanFeatureTable, type PlanFeatureTableProps, PlanTierCard, type PlanTierCardProps, PlanTierCardScale, type PlanTierCardScaleProps, Portal, type PortalProps, PoweredByWatermarkLogo, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, Select, type SelectProps, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, Textarea as TextArea, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, type TextareaProps, ThemeProvider, TickGroup, type TickGroupProps, Toast, type ToastProps, Tooltip, type TooltipProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, backgroundCreator, chooseArticle, defaultInputValidation, emailValidation, passwordValidation, useDropdownMenu };