@useloops/design-system 1.4.394 → 1.4.396

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
@@ -4,15 +4,15 @@ import * as _mui_material from '@mui/material';
4
4
  import { SxProps, Theme, CSSObject, AvatarProps as AvatarProps$1, AvatarGroupProps as AvatarGroupProps$1, LinkProps as LinkProps$1, ButtonProps as ButtonProps$1, CheckboxProps as CheckboxProps$1, ContainerProps, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, TypographyProps as TypographyProps$1, BoxProps, FormControlLabelProps as FormControlLabelProps$1, IconButtonProps as IconButtonProps$1, TooltipProps as TooltipProps$1, ButtonGroupProps, TextFieldProps as TextFieldProps$1, PaperProps, PopperProps as PopperProps$1, ClickAwayListenerProps, FadeProps, LinearProgressProps, SelectProps as SelectProps$1, SelectChangeEvent, SkeletonProps as SkeletonProps$1, SwitchProps as SwitchProps$1, Breakpoint, PaletteMode, Direction } from '@mui/material';
5
5
  import { PopupState } from 'material-ui-popup-state/hooks';
6
6
  import * as react_jsx_runtime from 'react/jsx-runtime';
7
+ import { SemanticColor as SemanticColor$1, IconName as IconName$2 } from 'systems/BrandCore';
8
+ import { IconName as IconName$1 } from 'systems/BrandCore/Icon';
9
+ import { KpiIndicatorProps as KpiIndicatorProps$1 } from 'systems/Platform/KpiIndicator';
7
10
  import { BoxProps as BoxProps$1 } from '@mui/material/Box';
8
- import { IconName as IconName$2, SemanticColor as SemanticColor$1 } from 'systems/BrandCore';
9
11
  import { IconProps as IconProps$1 } from 'systems/BrandCore/Icon/Icon';
10
12
  import { CheckboxProps as CheckboxProps$2 } from 'systems/WebCore';
11
13
  import { TooltipProps as TooltipProps$2 } from 'systems/WebCore/Tooltip';
12
14
  import { CommentEmotion } from 'utils/EmojiCommentList';
13
15
  import { KpiIndicatorColor as KpiIndicatorColor$1 } from 'systems/Platform/KpiIndicator/utils';
14
- import { IconName as IconName$1 } from 'systems/BrandCore/Icon';
15
- import { KpiIndicatorProps as KpiIndicatorProps$1 } from 'systems/Platform/KpiIndicator';
16
16
  import { ChipProps } from '@mui/material/Chip';
17
17
  import { SubmitHandler } from 'react-hook-form';
18
18
  import { Theme as Theme$1, SxProps as SxProps$1 } from '@mui/material/styles';
@@ -1764,6 +1764,7 @@ type SelectProps = {
1764
1764
  sizing?: 'xs' | 'md' | 'lg';
1765
1765
  sx?: SelectProps$1['sx'];
1766
1766
  onOpen?: SelectProps$1['onOpen'];
1767
+ inputProps?: SelectProps$1['inputProps'];
1767
1768
  value?: SelectProps$1['value'];
1768
1769
  renderListItem?: (value: string, label: string) => ReactElement;
1769
1770
  renderSelectedItem?: (value: string, label?: string) => ReactElement;
@@ -1946,66 +1947,6 @@ interface AuthContainerSurfaceProps extends SurfaceProps {
1946
1947
  }
1947
1948
  declare const AuthContainerSurface: FunctionComponent<AuthContainerSurfaceProps>;
1948
1949
 
1949
- interface StyledLinearProgressProps extends LinearProgressProps {
1950
- checked?: boolean;
1951
- barColor?: KpiIndicatorColor$1;
1952
- }
1953
-
1954
- /**
1955
- * Renders a customizable bar graph item with optional icon, label, value, respondent count, and checkbox.
1956
- *
1957
- * @component
1958
- * @param {GraphBarProps} props - The props for the GraphBar component.
1959
- * @param {string} props.label - The label displayed for the bar.
1960
- * @param {number | null | undefined} props.value - The value represented by the bar (used for progress).
1961
- * @param {React.ReactNode} [props.tooltipContent] - Optional tooltip content shown on hover.
1962
- * @param {number | null | undefined} [props.respondentCount] - Optional count of respondents displayed in a column.
1963
- * @param {object} [props.icon] - Optional icon configuration (emoji or standard icon).
1964
- * @param {boolean} [props.hideIcon] - If true, hides the icon.
1965
- * @param {boolean} [props.hideCheckbox] - If true, hides the checkbox.
1966
- * @param {boolean} [props.hideUnitColumn1] - If true, hides the first unit column (value).
1967
- * @param {boolean} [props.hideUnitColumn2] - If true, hides the second unit column (respondent count).
1968
- * @param {object} [props.checkboxProps] - Additional props for the checkbox.
1969
- * @param {object} [props.slotProps] - Additional slot props for customizing subcomponents.
1970
- * @param {boolean} [props.percentageSymbol] - If true, appends a percentage symbol to the value.
1971
- * @param {boolean} [props.checkedDefaultValue] - The initial checked state of the checkbox.
1972
- *
1973
- * @returns {JSX.Element} The rendered GraphBar component.
1974
- */
1975
- interface GraphBarProps {
1976
- hideIcon?: boolean;
1977
- hideCheckbox?: boolean;
1978
- hideUnitColumn1?: boolean;
1979
- hideUnitColumn2?: boolean;
1980
- checkedDefaultValue?: boolean;
1981
- icon?: {
1982
- type: 'emoji' | 'icon';
1983
- name: CommentEmotion | IconName$2;
1984
- };
1985
- label: string;
1986
- value: number;
1987
- tooltipContent?: ReactNode;
1988
- respondentCount?: number;
1989
- maxValue?: number;
1990
- slotProps?: {
1991
- graphBar?: StyledLinearProgressProps;
1992
- checkbox?: CheckboxProps$2;
1993
- icon?: IconProps$1;
1994
- emojiIcon?: BoxProps$1;
1995
- tooltip?: TooltipProps$2;
1996
- };
1997
- percentageSymbol?: boolean;
1998
- }
1999
-
2000
- interface BarGraphProps {
2001
- graphData: GraphBarProps[];
2002
- hideIcons?: boolean;
2003
- hideCheckboxes?: boolean;
2004
- hideUnitColumn1?: boolean;
2005
- hideUnitColumn2?: boolean;
2006
- }
2007
- declare const BarGraph: FunctionComponent<BarGraphProps>;
2008
-
2009
1950
  interface CommentCardProps {
2010
1951
  comment: string;
2011
1952
  sentimentScore: number;
@@ -2077,6 +2018,60 @@ type FilteredItemsCardProps = {
2077
2018
  };
2078
2019
  declare const FilteredItemsCard: FunctionComponent<FilteredItemsCardProps>;
2079
2020
 
2021
+ interface StyledLinearProgressProps extends LinearProgressProps {
2022
+ checked?: boolean;
2023
+ barColor?: KpiIndicatorColor$1;
2024
+ }
2025
+
2026
+ /**
2027
+ * Renders a customizable bar graph item with optional icon, label, value, respondent count, and checkbox.
2028
+ *
2029
+ * @component
2030
+ * @param {GraphBarProps} props - The props for the GraphBar component.
2031
+ * @param {string} props.label - The label displayed for the bar.
2032
+ * @param {number | null | undefined} props.value - The value represented by the bar (used for progress).
2033
+ * @param {React.ReactNode} [props.tooltipContent] - Optional tooltip content shown on hover.
2034
+ * @param {number | null | undefined} [props.respondentCount] - Optional count of respondents displayed in a column.
2035
+ * @param {object} [props.icon] - Optional icon configuration (emoji or standard icon).
2036
+ * @param {boolean} [props.hideIcon] - If true, hides the icon.
2037
+ * @param {boolean} [props.hideCheckbox] - If true, hides the checkbox.
2038
+ * @param {boolean} [props.hideUnitColumn1] - If true, hides the first unit column (value).
2039
+ * @param {boolean} [props.hideUnitColumn2] - If true, hides the second unit column (respondent count).
2040
+ * @param {object} [props.checkboxProps] - Additional props for the checkbox.
2041
+ * @param {object} [props.slotProps] - Additional slot props for customizing subcomponents.
2042
+ * @param {boolean} [props.percentageSymbol] - If true, appends a percentage symbol to the value.
2043
+ * @param {boolean} [props.checkedDefaultValue] - The initial checked state of the checkbox.
2044
+ *
2045
+ * @returns {JSX.Element} The rendered GraphBar component.
2046
+ */
2047
+ interface GraphBarProps {
2048
+ hideIcon?: boolean;
2049
+ hideCheckbox?: boolean;
2050
+ hideUnitColumn1?: boolean;
2051
+ hideUnitColumn2?: boolean;
2052
+ icon?: {
2053
+ type: 'emoji' | 'icon';
2054
+ name: CommentEmotion | IconName$2;
2055
+ };
2056
+ label: string;
2057
+ value: number;
2058
+ tooltipContent?: ReactNode;
2059
+ respondentCount?: number;
2060
+ maxValue?: number;
2061
+ checked?: boolean;
2062
+ disabled?: boolean;
2063
+ onChange?: React.MouseEventHandler<HTMLDivElement> | undefined | any;
2064
+ slotProps: {
2065
+ graphBar?: StyledLinearProgressProps;
2066
+ checkbox?: CheckboxProps$2;
2067
+ icon?: IconProps$1;
2068
+ emojiIcon?: BoxProps$1;
2069
+ tooltip?: TooltipProps$2;
2070
+ };
2071
+ percentageSymbol?: boolean;
2072
+ }
2073
+ declare const GraphBar: FunctionComponent<GraphBarProps>;
2074
+
2080
2075
  interface HeaderProps {
2081
2076
  backAction?: IconButtonProps['onClick'];
2082
2077
  title?: string;
@@ -2238,6 +2233,16 @@ interface QuestionBlockProps {
2238
2233
  }
2239
2234
  declare const QuestionBlock: FunctionComponent<QuestionBlockProps>;
2240
2235
 
2236
+ interface QuestionControllerProps extends PropsWithChildren {
2237
+ }
2238
+ declare const QuestionController: FunctionComponent<QuestionControllerProps>;
2239
+
2240
+ type QuestionType = 'single-punch' | 'multi-punch' | 'slider' | 'likert' | 'rank' | 'open-question' | 'emoji' | 'focus';
2241
+ interface QuestionLabelProps extends PropsWithChildren {
2242
+ type?: QuestionType;
2243
+ }
2244
+ declare const QuestionLabel: FunctionComponent<QuestionLabelProps>;
2245
+
2241
2246
  interface SectionHeaderProps {
2242
2247
  buttons?: ReactNode;
2243
2248
  loading?: boolean;
@@ -2337,12 +2342,6 @@ type VideoControlsProps = {
2337
2342
  };
2338
2343
  declare const _default: react.MemoExoticComponent<react.ForwardRefExoticComponent<VideoControlsProps & react.RefAttributes<any>>>;
2339
2344
 
2340
- type QuestionType = 'single-punch' | 'multi-punch' | 'slider' | 'likert' | 'rank' | 'open-question' | 'emoji' | 'focus';
2341
- interface QuestionLabelProps extends PropsWithChildren {
2342
- type?: QuestionType;
2343
- }
2344
- declare const QuestionLabel: FunctionComponent<QuestionLabelProps>;
2345
-
2346
2345
  type BreakpointOrNull = Breakpoint | null;
2347
2346
  declare const useBreakpoint: () => Breakpoint;
2348
2347
 
@@ -2616,4 +2615,4 @@ declare module '@mui/system' {
2616
2615
  }
2617
2616
  }
2618
2617
 
2619
- export { AiWrittenByLockUp as AIWrittenByLockUp, Accordion, type AccordionProps, AiContentContainer, type AiContentContainerProps, type AiWrittenByLockUpProps, AnnualController, type AnnualControllerProps, AssetItem, type AssetItemProps, AuthContainerSurface, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarGraph, type BarGraphProps, BrandBadge, type BrandBadgeProps, Breadcrumb, type BreadcrumbProps, type BreakpointOrNull, BulletGraphic, type BulletGraphicProps, Button, ButtonBase, type ButtonBaseProps, type ButtonProps, type ButtonSizing, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ColorBackgroundContainer, type ColorBackgroundContainerProps, type ColorRange$1 as ColorRange, type ColorRangeAlpha$1 as ColorRangeAlpha, CommentCard, type CommentCardProps, CreatableAutocomplete, type CreatableAutocompleteOption, type CreatableAutocompleteProps, CustomField, type CustomFieldProps, DEFAULT_MAX_INPUT_LENGTH, DataPointInfo, type DataPointInfoProps, Differential, type DifferentialProps, DropdownMenu, EmptyStateCard, type EmptyStateCardProps, ExpandableTypographyClamp, type ExpandableTypographyClampProps, type FieldType, type FieldTypes, FilteredItemsCard, type FilteredItemsCardProps, Flag, type FlagProps, FontWeight, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, type GenericSizeMap, GridOverlay, type GridOverlayProps, type GroupSelectOption, Header, type HeaderProps, Html, HtmlParser, type HtmlParserProps, type HtmlProps, Icon, IconButton, IconButtonBase, type IconButtonBaseProps, IconButtonGroup, type IconButtonGroupProps, type IconButtonProps, type IconName, Image, type ImageProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, KpiDataPopover, type KpiDataPopoverProps, KpiIndicator, type KpiIndicatorProps, Label, type LabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, LoopItem, LoopItemEmpty, type LoopItemEmptyProps, type LoopItemProps, LoopsAiButton, type LoopsAiButtonProps, Markdown, type MarkdownProps, type MarkerComponentProps, Menu, type MenuProps, ModalActionsWrapper, ModalContentWrapper, ModalLayout, type ModalLayoutProps, Navigation, NavigationButton, type NavigationButtonProps, type NavigationProps, type NavigationSizing, Nudge, type NudgeProps, NumberField, type NumberFieldProps, OnboardingCard, type OnboardingCardProps, type OnboardingItem, Pill, type PillProps, PlanFeatureTable, type PlanFeatureTableData, type PlanFeatureTableProps, PlanTierCard, type PlanTierCardProps, Popper, type PopperProps, PoweredByWatermarkLogo, Progress, ProgressBar, type ProgressBarProps, type ProgressProps, ProjectItem, ProjectItemEmpty, type ProjectItemEmptyProps, type ProjectItemProps, Projects, type ProjectsProps, QuestionBlock, type QuestionBlockProps, QuestionLabel, type QuestionLabelProps, type QuestionStats, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, type Section, SectionHeader, type SectionHeaderProps, Select, type SelectOption, type SelectProps, type SemanticColor, Skeleton, type SkeletonProps, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, TestItem, type TestItemProps, TestKPICard, type TestKPICardProps, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeContext, type ThemeCtx, ThemeProvider, TickGroup, type TickGroupProps, Toast, type ToastProps, Tooltip, type TooltipProps, TrialCard, type TrialCardProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, _default as VideoControls, type VideoControlsProps, VideoModal, type VideoModalProps, backgroundCreator, base, blue, blueRamp, boxShadow, breakpoints, buttonHeightMap, buttonInteraction, chooseArticle, compareArrayMembers, customTheme, darkNeutral, darkNeutralAlpha, defaultInputValidation, easing, elevation, elevationFilter, emailValidation, fonts, generateRamp, getButtonSizing, getButtonTypography, getIconSizing$1 as getIconSizing, getKpiIndicatorColor, green, greenRamp, IconButton_variantHelpers as iconButtonHelpers, iconSizeMap, isButton, mapKpiColorSchemeByInteger, margin, neutral, neutralAlpha, neutralRamp, outlined$1 as outlined, padding, passwordValidation, peach, peachRamp, primary, purple, purpleRamp, radius, red, redRamp, secondary, semantic, space, subtle, useBreakpoint, useDropdownMenu, useKeyCombo, usePrevious, useScreenSize, useTheme, useThemeBuilder, yellow, yellowRamp };
2618
+ export { AiWrittenByLockUp as AIWrittenByLockUp, Accordion, type AccordionProps, AiContentContainer, type AiContentContainerProps, type AiWrittenByLockUpProps, AnnualController, type AnnualControllerProps, AssetItem, type AssetItemProps, AuthContainerSurface, AuthFormHeader, type AuthFormHeaderProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BrandBadge, type BrandBadgeProps, Breadcrumb, type BreadcrumbProps, type BreakpointOrNull, BulletGraphic, type BulletGraphicProps, Button, ButtonBase, type ButtonBaseProps, type ButtonProps, type ButtonSizing, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, ColorBackgroundContainer, type ColorBackgroundContainerProps, type ColorRange$1 as ColorRange, type ColorRangeAlpha$1 as ColorRangeAlpha, CommentCard, type CommentCardProps, CreatableAutocomplete, type CreatableAutocompleteOption, type CreatableAutocompleteProps, CustomField, type CustomFieldProps, DEFAULT_MAX_INPUT_LENGTH, DataPointInfo, type DataPointInfoProps, Differential, type DifferentialProps, DropdownMenu, EmptyStateCard, type EmptyStateCardProps, ExpandableTypographyClamp, type ExpandableTypographyClampProps, type FieldType, type FieldTypes, FilteredItemsCard, type FilteredItemsCardProps, Flag, type FlagProps, FontWeight, FormControlLabel, FormGenerator, type FormGeneratorConfig, type FormGeneratorHandler, type GenericSizeMap, GraphBar, type GraphBarProps, GridOverlay, type GridOverlayProps, type GroupSelectOption, Header, type HeaderProps, Html, HtmlParser, type HtmlParserProps, type HtmlProps, Icon, IconButton, IconButtonBase, type IconButtonBaseProps, IconButtonGroup, type IconButtonGroupProps, type IconButtonProps, type IconName, Image, type ImageProps, InputFieldBase, type InputFieldBaseProps, InputLabel, InputLabelHelp, type InputLabelHelpProps, type InputLabelProps, KpiDataPopover, type KpiDataPopoverProps, KpiIndicator, type KpiIndicatorProps, Label, type LabelProps, Likert, type LikertProps, Link, type LinkProps, Loader, type LoaderProps, Logo, LoopItem, LoopItemEmpty, type LoopItemEmptyProps, type LoopItemProps, LoopsAiButton, type LoopsAiButtonProps, Markdown, type MarkdownProps, type MarkerComponentProps, Menu, type MenuProps, ModalActionsWrapper, ModalContentWrapper, ModalLayout, type ModalLayoutProps, Navigation, NavigationButton, type NavigationButtonProps, type NavigationProps, type NavigationSizing, Nudge, type NudgeProps, NumberField, type NumberFieldProps, OnboardingCard, type OnboardingCardProps, type OnboardingItem, Pill, type PillProps, PlanFeatureTable, type PlanFeatureTableData, type PlanFeatureTableProps, PlanTierCard, type PlanTierCardProps, Popper, type PopperProps, PoweredByWatermarkLogo, Progress, ProgressBar, type ProgressBarProps, type ProgressProps, ProjectItem, ProjectItemEmpty, type ProjectItemEmptyProps, type ProjectItemProps, Projects, type ProjectsProps, QuestionBlock, type QuestionBlockProps, QuestionController, type QuestionControllerProps, QuestionLabel, type QuestionLabelProps, type QuestionStats, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rank, type RankProps, RichTextField, type RichTextFieldProps, type Section, SectionHeader, type SectionHeaderProps, Select, type SelectOption, type SelectProps, type SemanticColor, Skeleton, type SkeletonProps, Slider, type SliderProps, SortableList, type SortableListProps, StarRating, type StarRatingProps, Surface, type SurfaceProps, Switch, type SwitchProps, TestItem, type TestItemProps, TestKPICard, type TestKPICardProps, TextBarDivider, type TextBarDividerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, ThemeContext, type ThemeCtx, ThemeProvider, TickGroup, type TickGroupProps, Toast, type ToastProps, Tooltip, type TooltipProps, TrialCard, type TrialCardProps, Typography, type TypographyProps, UserMenu, type UserMenuProps, _default as VideoControls, type VideoControlsProps, VideoModal, type VideoModalProps, backgroundCreator, base, blue, blueRamp, boxShadow, breakpoints, buttonHeightMap, buttonInteraction, chooseArticle, compareArrayMembers, customTheme, darkNeutral, darkNeutralAlpha, defaultInputValidation, easing, elevation, elevationFilter, emailValidation, fonts, generateRamp, getButtonSizing, getButtonTypography, getIconSizing$1 as getIconSizing, getKpiIndicatorColor, green, greenRamp, IconButton_variantHelpers as iconButtonHelpers, iconSizeMap, isButton, mapKpiColorSchemeByInteger, margin, neutral, neutralAlpha, neutralRamp, outlined$1 as outlined, padding, passwordValidation, peach, peachRamp, primary, purple, purpleRamp, radius, red, redRamp, secondary, semantic, space, subtle, useBreakpoint, useDropdownMenu, useKeyCombo, usePrevious, useScreenSize, useTheme, useThemeBuilder, yellow, yellowRamp };