@useloops/design-system 1.4.188 → 1.4.190

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as _mui_material from '@mui/material';
2
- import { SxProps, Theme, PaperProps, PopperProps as PopperProps$1, AvatarGroupProps as AvatarGroupProps$1, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, FormControlLabelProps as FormControlLabelProps$1, Breakpoint, TypographyProps as TypographyProps$1, TooltipProps as TooltipProps$1, IconButtonProps as IconButtonProps$1, ButtonGroupProps, TextFieldProps as TextFieldProps$1, LinkProps as LinkProps$1, ClickAwayListenerProps, FadeProps, LinearProgressProps, SelectProps as SelectProps$1, SelectChangeEvent, SwitchProps as SwitchProps$1, PaletteMode, Direction } from '@mui/material';
2
+ import { SxProps, Theme, PaperProps, PopperProps as PopperProps$1, AvatarGroupProps as AvatarGroupProps$1, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, FormControlLabelProps as FormControlLabelProps$1, Breakpoint, TypographyProps as TypographyProps$1, TooltipProps as TooltipProps$1, IconButtonProps as IconButtonProps$1, ButtonGroupProps, TextFieldProps as TextFieldProps$1, LinkProps as LinkProps$1, ClickAwayListenerProps, FadeProps, LinearProgressProps, SelectProps as SelectProps$1, SelectChangeEvent, SwitchProps as SwitchProps$1, SkeletonProps as SkeletonProps$1, PaletteMode, Direction } from '@mui/material';
3
3
  import react, { FunctionComponent, PropsWithChildren, FC, ReactNode, ReactElement, ChangeEvent, Dispatch, SetStateAction } from 'react';
4
+ import { PopupState } from 'material-ui-popup-state/hooks';
4
5
  import { SubmitHandler } from 'react-hook-form';
5
6
  import { Theme as Theme$1 } from '@mui/material/styles';
6
7
  import { NumericFormatProps } from 'react-number-format';
@@ -10,7 +11,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
10
11
  import { UniqueIdentifier } from '@dnd-kit/core';
11
12
  import { Mark } from '@mui/material/Slider/useSlider.types';
12
13
  import { LazyLoadImageProps } from 'react-lazy-load-image-component';
13
- import { PopupState } from 'material-ui-popup-state/hooks';
14
14
 
15
15
  interface ColorRange$1 {
16
16
  0: string;
@@ -507,7 +507,7 @@ interface IconProps {
507
507
  }
508
508
  declare const Icon: FunctionComponent<IconProps>;
509
509
 
510
- type IconName = 'brand-wordmark' | 'brand-logomark' | 'menu' | 'menu-open' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'arrow-left' | 'arrow-right' | 'search' | 'close' | 'more-horizontal' | 'more-vertical' | 'home' | 'home-filled' | 'settings' | 'controls' | 'help' | 'filter-list' | 'open-in-new' | 'nav-toggle' | 'nav-collapse' | 'nav-expand' | 'play-circle' | 'play-video' | 'email' | 'document' | 'folder' | 'attach-file' | 'photo-add' | 'upload' | 'upload-cloud' | 'time' | 'time-filled' | 'zoom-in' | 'zoom-out' | 'add' | 'remove' | 'test' | 'dashboard' | 'list-view' | 'grid-view' | 'grid-view-filled' | 'eye' | 'eye-off' | 'notification' | 'pound' | 'euro' | 'dollar' | 'send' | 'comment' | 'chat' | 'error' | 'warning' | 'lightbulb' | 'check-circle' | 'thumb-up' | 'info' | 'info-filled' | 'cancel' | 'compress' | 'expand' | 'unfold' | 'drag-handle' | 'focus' | 'lock' | 'copy' | 'edit' | 'delete' | 'check' | 'star' | 'star-half' | 'star-filled' | 'ai' | 'work' | 'gift' | 'social-medium-single-colour' | 'social-linkedin-single-colour' | 'social-youtube-single-colour' | 'social-linkedin-full-colour' | 'social-google-full-colour' | 'badge-tick' | 'badge-tick-in-circle' | 'badge-cross' | 'badge-cross-in-circle' | 'badge-hyphen' | 'badge-hyphen-in-circle' | 'badge-question' | 'badge-question-in-circle';
510
+ type IconName = 'brand-wordmark' | 'brand-logomark' | 'menu' | 'menu-open' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'arrow-left' | 'arrow-right' | 'search' | 'close' | 'more-horizontal' | 'more-vertical' | 'home' | 'home-filled' | 'settings' | 'controls' | 'help' | 'filter-list' | 'open-in-new' | 'nav-toggle' | 'nav-collapse' | 'nav-expand' | 'play-circle' | 'play-video' | 'email' | 'document' | 'folder' | 'attach-file' | 'photo-add' | 'upload' | 'upload-cloud' | 'time' | 'time-filled' | 'zoom-in' | 'zoom-out' | 'add' | 'remove' | 'test' | 'dashboard' | 'list-view' | 'grid-view' | 'grid-view-filled' | 'eye' | 'eye-off' | 'notification' | 'pound' | 'euro' | 'dollar' | 'send' | 'comment' | 'chat' | 'error' | 'warning' | 'lightbulb' | 'check-circle' | 'thumb-up' | 'info' | 'info-filled' | 'cancel' | 'compress' | 'expand' | 'unfold' | 'drag-handle' | 'focus' | 'lock' | 'copy' | 'edit' | 'delete' | 'check' | 'alert-dot' | 'star' | 'star-half' | 'star-filled' | 'ai' | 'work' | 'gift' | 'social-medium-single-colour' | 'social-linkedin-single-colour' | 'social-youtube-single-colour' | 'social-linkedin-full-colour' | 'social-google-full-colour' | 'badge-tick' | 'badge-tick-in-circle' | 'badge-cross' | 'badge-cross-in-circle' | 'badge-hyphen' | 'badge-hyphen-in-circle' | 'badge-question' | 'badge-question-in-circle';
511
511
 
512
512
  interface CustomTheme {
513
513
  palette: {
@@ -692,6 +692,8 @@ interface NavigationButtonProps {
692
692
  danger?: boolean;
693
693
  fullWidth?: boolean;
694
694
  href?: string;
695
+ target?: '_blank' | '_self' | '_parent' | '_top';
696
+ external?: boolean;
695
697
  icon?: IconName;
696
698
  label?: string;
697
699
  navigationSizing?: NavigationSizing;
@@ -703,6 +705,7 @@ declare const NavigationButton: FunctionComponent<NavigationButtonProps>;
703
705
  interface MenuItemProps {
704
706
  active?: boolean;
705
707
  children?: MenuItemProps[];
708
+ baseState?: PopupState;
706
709
  closeOnClick?: boolean;
707
710
  danger?: boolean;
708
711
  divider?: boolean;
@@ -729,7 +732,7 @@ declare const UserMenu: FunctionComponent<UserMenuProps>;
729
732
  type NavigationSizing = 'sm' | 'lg';
730
733
  interface NavigationProps {
731
734
  isMobile?: boolean;
732
- logoLink?: string;
735
+ logoLink?: () => void;
733
736
  nudgeProps?: NudgeProps$1;
734
737
  primaryMenuItemProps?: NavigationButtonProps[];
735
738
  secondaryMenuItemProps?: NavigationButtonProps[];
@@ -815,6 +818,7 @@ declare const Projects: FunctionComponent<ProjectsProps>;
815
818
 
816
819
  interface SectionHeaderProps {
817
820
  buttons?: ReactNode;
821
+ loading?: boolean;
818
822
  subtitle?: string;
819
823
  title?: string;
820
824
  }
@@ -1117,6 +1121,7 @@ declare const FormGenerator: FormGeneratorProps;
1117
1121
 
1118
1122
  interface GridOverlayProps {
1119
1123
  breakpoint?: Breakpoint;
1124
+ position?: 'fixed' | 'absolute';
1120
1125
  }
1121
1126
  declare const GridOverlay: FunctionComponent<GridOverlayProps>;
1122
1127
 
@@ -1542,6 +1547,18 @@ interface ToastProps {
1542
1547
  }
1543
1548
  declare const Toast: FunctionComponent<ToastProps>;
1544
1549
 
1550
+ interface SkeletonProps {
1551
+ animation?: SkeletonProps$1['animation'];
1552
+ children?: SkeletonProps$1['children'];
1553
+ height?: SkeletonProps$1['height'];
1554
+ sx?: SkeletonProps$1['sx'];
1555
+ variant?: SkeletonProps$1['variant'];
1556
+ width?: SkeletonProps$1['width'];
1557
+ component?: SkeletonProps$1['component'];
1558
+ ref?: SkeletonProps$1['ref'];
1559
+ }
1560
+ declare const Skeleton: FunctionComponent<SkeletonProps>;
1561
+
1545
1562
  type SupportedCurrency = 'gbp' | 'eur' | 'usd';
1546
1563
  type SupportedFrequency = 'monthly' | 'annual';
1547
1564
  interface AnnualControllerProps {
@@ -1965,4 +1982,4 @@ declare module '@mui/system' {
1965
1982
  }
1966
1983
  }
1967
1984
 
1968
- export { AnnualController, type AnnualControllerProps, AuthContainerSurface, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbProps, type BreakpointOrNull, Button, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ColorBackgroundContainer, type ColorBackgroundContainerProps, type ColorRange$1 as ColorRange, type ColorRangeAlpha$1 as ColorRangeAlpha, CustomField, type CustomFieldProps, DEFAULT_MAX_INPUT_LENGTH, Differential, type DifferentialProps, DropdownMenu, type FieldType, type FieldTypes, FontWeight, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, type GenericSizeMap, GridOverlay, type GridOverlayProps, Header, type HeaderProps, Html, HtmlParser, type HtmlParserProps, type HtmlProps, Icon, IconButton, IconButtonGroup, type IconButtonProps, type IconName, Image, type ImageProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, LoopsAiButton, type LoopsAiButtonProps, Markdown, type MarkdownProps, Menu, type MenuProps, Navigation, NavigationButton, type NavigationButtonProps, type NavigationProps, type NavigationSizing, Nudge, type NudgeProps, NumberField, type NumberFieldProps, OnboardingCard, type OnboardingCardProps, type OnboardingItem, Pill, type PillProps, PlanFeatureTable, type PlanFeatureTableProps, PlanTierCard, type PlanTierCardProps, PlanTierCardScale, type PlanTierCardScaleProps, Popper, type PopperProps, PoweredByWatermarkLogo, Progress, ProgressBar, type ProgressBarProps, type ProgressProps, ProjectItem, ProjectItemEmpty, type ProjectItemEmptyProps, type ProjectItemProps, Projects, type ProjectsProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, SectionHeader, type SectionHeaderProps, Select, type SelectProps, type SemanticColor, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeProvider, TickGroup, type TickGroupProps, Toast, type ToastProps, Tooltip, type TooltipProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, backgroundCreator, base, blue, blueRamp, boxShadow, breakpoints, chooseArticle, compareArrayMembers, darkNeutral, darkNeutralAlpha, defaultInputValidation, easing, elevation, elevationFilter, emailValidation, fonts, generateRamp, green, greenRamp, iconSizeMap, margin, neutral, neutralAlpha, neutralRamp, padding, passwordValidation, peach, peachRamp, purple, purpleRamp, radius, red, redRamp, semantic, space, useBreakpoint, useDropdownMenu, usePrevious, useScreenSize, yellow, yellowRamp };
1985
+ export { AnnualController, type AnnualControllerProps, AuthContainerSurface, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, Breadcrumb, type BreadcrumbProps, type BreakpointOrNull, Button, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ColorBackgroundContainer, type ColorBackgroundContainerProps, type ColorRange$1 as ColorRange, type ColorRangeAlpha$1 as ColorRangeAlpha, CustomField, type CustomFieldProps, DEFAULT_MAX_INPUT_LENGTH, Differential, type DifferentialProps, DropdownMenu, type FieldType, type FieldTypes, FontWeight, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, type GenericSizeMap, GridOverlay, type GridOverlayProps, Header, type HeaderProps, Html, HtmlParser, type HtmlParserProps, type HtmlProps, Icon, IconButton, IconButtonGroup, type IconButtonProps, type IconName, Image, type ImageProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, LoopsAiButton, type LoopsAiButtonProps, Markdown, type MarkdownProps, Menu, type MenuProps, Navigation, NavigationButton, type NavigationButtonProps, type NavigationProps, type NavigationSizing, Nudge, type NudgeProps, NumberField, type NumberFieldProps, OnboardingCard, type OnboardingCardProps, type OnboardingItem, Pill, type PillProps, PlanFeatureTable, type PlanFeatureTableProps, PlanTierCard, type PlanTierCardProps, PlanTierCardScale, type PlanTierCardScaleProps, Popper, type PopperProps, PoweredByWatermarkLogo, Progress, ProgressBar, type ProgressBarProps, type ProgressProps, ProjectItem, ProjectItemEmpty, type ProjectItemEmptyProps, type ProjectItemProps, Projects, type ProjectsProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, SectionHeader, type SectionHeaderProps, Select, type SelectProps, type SemanticColor, Skeleton, type SkeletonProps, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeProvider, TickGroup, type TickGroupProps, Toast, type ToastProps, Tooltip, type TooltipProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, backgroundCreator, base, blue, blueRamp, boxShadow, breakpoints, chooseArticle, compareArrayMembers, darkNeutral, darkNeutralAlpha, defaultInputValidation, easing, elevation, elevationFilter, emailValidation, fonts, generateRamp, green, greenRamp, iconSizeMap, margin, neutral, neutralAlpha, neutralRamp, padding, passwordValidation, peach, peachRamp, purple, purpleRamp, radius, red, redRamp, semantic, space, useBreakpoint, useDropdownMenu, usePrevious, useScreenSize, yellow, yellowRamp };