@foxford/ui 2.30.0 → 2.32.0-beta-69fa699-20240618

package/dts/index.d.ts

@@ -244,6 +244,7 @@ declare enum BaseColorNames {
     'border-focus' = "border-focus",
     'border-oncolor-disabled' = "border-oncolor-disabled",
     'border-oncolor-default' = "border-oncolor-default",
+    'border-oncolor-default-large' = "border-oncolor-default-large",
     'bg-onmain-main' = "bg-onmain-main",
     'bg-onmain-primary' = "bg-onmain-primary",
     'bg-onmain-secondary' = "bg-onmain-secondary",
@@ -466,6 +467,7 @@ declare const ColorNames: {
     'border-focus': (typeof BaseColorNames)["border-focus"];
     'border-oncolor-disabled': (typeof BaseColorNames)["border-oncolor-disabled"];
     'border-oncolor-default': (typeof BaseColorNames)["border-oncolor-default"];
+    'border-oncolor-default-large': (typeof BaseColorNames)["border-oncolor-default-large"];
     'bg-onmain-main': (typeof BaseColorNames)["bg-onmain-main"];
     'bg-onmain-primary': (typeof BaseColorNames)["bg-onmain-primary"];
     'bg-onmain-secondary': (typeof BaseColorNames)["bg-onmain-secondary"];
@@ -2140,6 +2142,8 @@ interface ListItemProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit
     palette?: Partial<Record<keyof ListItemPalette, Color>>;
     /** Root border-radius */
     borderRadius?: string | number;
+    /** Apply text-overflow: ellipsis; to text content (default true) */
+    ellipsis?: boolean;
     /** Appearance variant */
     primary?: boolean;
     /** Appearance variant */
@@ -2258,10 +2262,113 @@ ColorProperty<'color'>, Omit<React.ComponentPropsWithRef<'span'>, 'color'> {
  *
  * Exposed "ref" attached to root node.
  *
- * See full [AvatarProps](https://github.com/foxford/ui/blob/master/src/components/AvatarProps/types.ts)
+ * See full [AvatarProps](https://github.com/foxford/ui/blob/master/src/components/Avatar/types.ts)
  */
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps>;
 
+declare type IconButtonPalette = {
+    color: CSSColor;
+    backgroundColor: CSSColor;
+    colorHover: CSSColor;
+    backgroundColorHover: CSSColor;
+    colorActive: CSSColor;
+    backgroundColorActive: CSSColor;
+    colorDisabled: CSSColor;
+    backgroundColorDisabled: CSSColor;
+};
+interface IconButtonProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+    /** Custom colors */
+    palette?: Partial<Record<keyof IconButtonPalette, Color>>;
+    /** Icon to display */
+    icon?: JSX.Element | IconName;
+    /** Props for icon component */
+    iconProps?: IconProps;
+    /** Shape variant */
+    square?: boolean;
+    /** Appearance variant */
+    primary?: boolean;
+    /** Appearance variant */
+    secondary?: boolean;
+    /** Appearance variant */
+    contrast?: boolean;
+}
+
+/**
+ *
+ * Component accepts all \<button\> attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [IconButtonProps](https://github.com/foxford/ui/blob/master/src/components/IconButton/types.ts)
+ */
+declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps>;
+
+declare type ChipPalette = {
+    color: CSSColor;
+    backgroundColor: CSSColor;
+    borderColor: CSSColor;
+    colorHover: CSSColor;
+    backgroundColorHover: CSSColor;
+    borderColorHover: CSSColor;
+    colorDisabled: CSSColor;
+    backgroundColorDisabled: CSSColor;
+    borderColorDisabled: CSSColor;
+};
+interface ChipProps extends ResponsiveSizeProps, ResponsiveMarginProps, React.RefAttributes<HTMLElement>, Omit<React.ButtonHTMLAttributes<HTMLElement>, 'children'> {
+    /** Custom colors */
+    palette?: Partial<Record<keyof ChipPalette, Color>>;
+    /** Main text content or render function */
+    children?: React.ReactNode | ((props: {
+        textProps: TextProps;
+        captionProps: TextProps;
+        discardButtonProps: IconButtonProps;
+    }) => React.ReactNode);
+    /** Main text (alternative to children) */
+    text?: React.ReactNode;
+    /** Props for main text component */
+    textProps?: TextProps;
+    /** Additional text */
+    caption?: React.ReactNode;
+    /** Props for caption text component */
+    captionProps?: TextProps;
+    /** Icons before and after content */
+    icon?: JSX.Element | IconName | [Nullable<JSX.Element | IconName>, Nullable<JSX.Element | IconName>];
+    /** Props for icon components */
+    iconProps?: IconProps;
+    /** Props for avatar component */
+    avatarProps?: AvatarProps;
+    /** Props for indicator component */
+    indicatorProps?: IndicatorProps;
+    /** Props for button with 'close' icon */
+    discardButtonProps?: IconButtonProps;
+    /** Appearance variant */
+    primary?: boolean;
+    /** Appearance variant */
+    secondary?: boolean;
+    /** Appearance variant */
+    outline?: boolean;
+    /** Appearance variant */
+    black?: boolean;
+    /** Appearance variant */
+    contrast?: boolean;
+    /** Appearance variant */
+    active?: boolean;
+}
+
+/**
+ *
+ * Component accepts all root HTML attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [ChipProps](https://github.com/foxford/ui/blob/master/src/components/Chip/types.ts)
+ */
+declare const Chip: React.ForwardRefExoticComponent<ChipProps>;
+
 interface Theme {
     breakpoints: Readonly<Record<Lowercase<Breakpoint>, number>>;
     colors: Record<keyof typeof ColorNames, CSSColor>;
@@ -2284,25 +2391,27 @@ interface Theme {
     name: ThemeName;
     components?: {
         Alert?: AlertProps;
+        Anchor?: AnchorProps;
         Arrow?: ArrowProps;
+        ArrowBadge?: ArrowBadgeProps;
+        Avatar?: AvatarProps;
+        Badge?: BadgeProps;
         Button?: ButtonProps;
         Checkbox?: CheckboxProps;
-        Textarea?: TextareaProps;
-        Text?: TextProps;
-        ArrowBadge?: ArrowBadgeProps;
-        'Text.Heading'?: TextHeadingProps;
+        Chip?: ChipProps;
+        IconButton?: IconButtonProps;
+        Indicator?: IndicatorProps;
+        ListItem?: ListItemProps;
+        Popover?: PopoverProps;
+        PopoverComponent?: PopoverComponentProps;
+        Skeleton?: SkeletonProps;
         Switcher?: SwitcherProps;
         Tab?: TabProps;
-        Badge?: BadgeProps;
-        Anchor?: AnchorProps;
-        Skeleton?: SkeletonProps;
+        Text?: TextProps;
+        'Text.Heading'?: TextHeadingProps;
+        Textarea?: TextareaProps;
         Tooltip?: TooltipProps;
         TooltipComponent?: TooltipComponentProps;
-        Popover?: PopoverProps;
-        PopoverComponent?: PopoverComponentProps;
-        ListItem?: ListItemProps;
-        Indicator?: IndicatorProps;
-        Avatar?: AvatarProps;
     };
 }
 
@@ -3891,4 +4000,4 @@ interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, Rea
  */
 declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps>;
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Indicator, Input, ListItem, Modal, Nullable, Paper, Popover, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
+export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Chip, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, IconButton, Indicator, Input, ListItem, Modal, Nullable, Paper, Popover, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Skeleton, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };