@fluidattacks/design 2.0.0 → 2.3.0

package/dist/types/components/@core/types.d.ts

@@ -126,6 +126,7 @@ interface IIconModifiable {
     iconColor?: string;
     iconSize: TIconSize;
     iconType?: TIconType;
+    iconTransform?: string;
 }
 interface ISizeModifiable {
     size: TSize;

package/dist/types/components/button/types.d.ts

@@ -1,7 +1,7 @@
 import type { ButtonHTMLAttributes } from "react";
 import type { IBorderModifiable, IDisplayModifiable, IIconModifiable, IMarginModifiable, IPaddingModifiable, TMode } from "components/@core";
 import type { TPlace } from "components/tooltip/types";
-type TVariant = "primary" | "primaryWeb" | "secondary" | "secondaryWeb" | "tertiary" | "ghost" | "ghostWeb" | "link";
+type TVariant = "primary" | "secondary" | "tertiary" | "ghost" | "link";
 /**
  * Button component props.
  * @interface IButtonProps
@@ -11,20 +11,16 @@ type TVariant = "primary" | "primaryWeb" | "secondary" | "secondaryWeb" | "terti
  * @extends IPaddingModifiable
  * @extends IIconModifiable
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
- * @property {boolean} [bold] - Text bold for link variant.
  * @property {boolean} [external] - Whether the link should open in a new tab.
  * @property {string} [href] - Link URL for link variant.
- * @property {TMode} [mode] - The background theme: dark or light.
  * @property {string} [tooltip] - Tooltip message.
  * @property {TPlace} [tooltipPlace] - Tooltip message relative place.
  * @property {boolean} [underline] - Text underlined for link variant.
  * @property {TVariant} [variant] - The button variant type.
  */
 interface IButtonProps extends IBorderModifiable, IDisplayModifiable, IMarginModifiable, IPaddingModifiable, Partial<IIconModifiable>, ButtonHTMLAttributes<HTMLButtonElement> {
-    bold?: boolean;
     external?: boolean;
     href?: string;
-    mode?: TMode;
     showArrow?: boolean;
     tooltip?: string;
     tooltipPlace?: TPlace;

package/dist/types/components/icon/types.d.ts

@@ -24,11 +24,9 @@ interface IIconWrapProps extends IIconModifiable, IMarginModifiable {
  * @extends IIconWrapProps
  * @property {string} [iconClass] - The icon class from fontawesome.
  * @property {string} [iconMask] - The data-fa-mask prop of icon.
- * @property {string} [iconTransform] - The data-fa-transform prop of icon.
  */
 interface IIconProps extends IIconWrapProps {
     iconClass?: string;
     iconMask?: string;
-    iconTransform?: string;
 }
 export type { IIconProps, IIconWrapProps };

package/dist/types/components/loading/index.d.ts

@@ -0,0 +1,4 @@
+import type { ILoadingProps } from "./types";
+declare const Loading: ({ color, label, size, }: Readonly<ILoadingProps>) => JSX.Element;
+export type { ILoadingProps };
+export { Loading };

package/dist/types/components/loading/styles.d.ts

@@ -0,0 +1,9 @@
+import type { TColor, TSize } from "./types";
+interface IStyledLoadingProps {
+    $color?: TColor;
+    $size?: TSize;
+}
+declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGSVGElement>, IStyledLoadingProps>> & string;
+declare const Circle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, IStyledLoadingProps>> & string;
+declare const CircleBg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGCircleElement>, IStyledLoadingProps>> & string;
+export { Circle, CircleBg, LoadingContainer };

package/dist/types/components/loading/types.d.ts

@@ -0,0 +1,15 @@
+type TSize = "lg" | "md" | "sm";
+type TColor = "red" | "white";
+/**
+ * Loading component props.
+ * @interface ILoadingProps
+ * @property { TColor } [color] - Color of the loading circle.
+ * @property { string } [label] - Label to display inside the loading circle.
+ * @property { TSize } [size] - Size of the loading circle
+ */
+interface ILoadingProps {
+    color?: TColor;
+    label?: string;
+    size?: TSize;
+}
+export type { ILoadingProps, TColor, TSize };

package/dist/types/components/menu/index.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from "react";
+import type { IMenuProps } from "./types";
+declare const Menu: ({ children, commitSha, commitShortSha, parentElement, userInfo, setVisibility, }: Readonly<PropsWithChildren<IMenuProps>>) => JSX.Element;
+export { Menu };

package/dist/types/components/menu/types.d.ts

@@ -0,0 +1,31 @@
+/**
+ * User information interface.
+ * @interface IUserInfo
+ * @property {string} userName - User's name.
+ * @property {string} email - User's email.
+ * @property {number | string} [phone] - User's phone number.
+ * @property {string} userRole - User's role.
+ */
+interface IUserInfo {
+    userName: string;
+    email: string;
+    phone?: number | string;
+    userRole: string;
+}
+/**
+ * Menu component props.
+ * @interface IMenuProps
+ * @property {string} commitSha - The commit SHA of the integration.
+ * @property { string } commitShortSha - The shortened commit SHA of the integration.
+ * @property { HTMLElement | null } parentElement - The parent element of the menu.
+ * @property { Function } setVisibility - Function to set the menu visibility.
+ * @property { IUserInfo } userInfo - User information.
+ */
+interface IMenuProps {
+    commitSha: string;
+    commitShortSha: string;
+    parentElement: HTMLElement | null;
+    setVisibility: (visible: boolean) => void;
+    userInfo: IUserInfo;
+}
+export type { IUserInfo, IMenuProps };

package/dist/types/components/premium-feature/index.d.ts

@@ -0,0 +1,3 @@
+import type { IPremiumFeatureProps } from "./types";
+declare const PremiumFeature: ({ margin, onClick, text, }: Readonly<IPremiumFeatureProps>) => JSX.Element;
+export { PremiumFeature };

package/dist/types/components/premium-feature/styles.d.ts

@@ -0,0 +1,2 @@
+declare const IconsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { IconsContainer };

package/dist/types/components/premium-feature/types.d.ts

@@ -0,0 +1,14 @@
+import { IMarginModifiable } from "components/@core";
+/**
+ * Premium feature component props.
+ * @interface IPremiumFeatureProps
+ * @property { string } [margin] - The margin for the premium feature.
+ * @property { Function } [onClick] - Event handler for the premium feature click.
+ * @property { string } [text] - Text for the premium feature.
+ */
+interface IPremiumFeatureProps {
+    margin?: IMarginModifiable["mr"];
+    onClick?: () => void;
+    text?: string;
+}
+export type { IPremiumFeatureProps };

package/dist/types/components/progress/index.d.ts

@@ -0,0 +1,4 @@
+import type { IProgressBarProps } from "./types";
+declare const Progress: ({ progressTime, onComplete, }: Readonly<IProgressBarProps>) => JSX.Element;
+export { Progress };
+export type { IProgressBarProps };

package/dist/types/components/progress/styles.d.ts

@@ -0,0 +1,6 @@
+declare const ProgressLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("components/@core").IPaddingModifiable | keyof import("components/@core").IMarginModifiable | keyof import("components/@core").IPositionModifiable | keyof import("components/@core").IBorderModifiable | keyof import("components/@core").IDisplayModifiable | keyof import("components/@core").ITextModifiable | keyof import("components/@core").IInteractionModifiable> & import("components/@core").IBorderModifiable & import("components/@core").IDisplayModifiable & import("components/@core").IInteractionModifiable & import("components/@core").IMarginModifiable & import("components/@core").IPaddingModifiable & import("components/@core").IPositionModifiable & import("components/@core").ITextModifiable, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, {
+    $animationTime: number;
+}>> & string;
+export { ProgressLine };

package/dist/types/components/progress/types.d.ts

@@ -0,0 +1,12 @@
+import { IDisplayModifiable } from "components/@core";
+/**
+ * Progress bar component props
+ * @interface IProgressBarProps
+ * @property {number} [progressTime] - Time to complete.
+ * @property {Function} [onComplete] - Action when progress complete.
+ */
+interface IProgressBarProps extends IDisplayModifiable {
+    progressTime?: number;
+    onComplete?: () => void;
+}
+export type { IProgressBarProps };

package/dist/types/components/progress-bar/index.d.ts

@@ -1,4 +1,3 @@
 import type { IProgressBarProps } from "./types";
-declare const ProgressBar: ({ progressTime, onComplete, }: Readonly<IProgressBarProps>) => JSX.Element;
+declare const ProgressBar: ({ minWidth, percentage, percentageLocation, showPercentage, orientation, rounded, variant, }: Readonly<IProgressBarProps>) => JSX.Element;
 export { ProgressBar };
-export type { IProgressBarProps };

package/dist/types/components/progress-bar/styles.d.ts

@@ -1,6 +1,13 @@
-declare const ProgressLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("components/@core").IPaddingModifiable | keyof import("components/@core").IMarginModifiable | keyof import("components/@core").IPositionModifiable | keyof import("components/@core").IBorderModifiable | keyof import("components/@core").IDisplayModifiable | keyof import("components/@core").ITextModifiable | keyof import("components/@core").IInteractionModifiable> & import("components/@core").IBorderModifiable & import("components/@core").IDisplayModifiable & import("components/@core").IInteractionModifiable & import("components/@core").IMarginModifiable & import("components/@core").IPaddingModifiable & import("components/@core").IPositionModifiable & import("components/@core").ITextModifiable, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    $animationTime: number;
+import type { TOrientation, TProgressVariant } from "./types";
+declare const Bar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $minWidth: number;
+    $orientation: TOrientation;
+    $rounded: boolean;
+    $variant: TProgressVariant;
 }>> & string;
-export { ProgressLine };
+declare const StyledProgressBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $percentage: number;
+    $rounded: boolean;
+    $variant: TProgressVariant;
+}>> & string;
+export { Bar, StyledProgressBar };

package/dist/types/components/progress-bar/types.d.ts

@@ -1,12 +1,24 @@
-import { IDisplayModifiable } from "components/@core";
+type TOrientation = "horizontal" | "vertical";
+type TPercentageLocation = "left" | "right";
+type TProgressVariant = "compliance" | "default" | "progressIndicator" | "progressIndicatorError" | "small";
 /**
- * Progress bar component props
+ * Progress bar component props.
  * @interface IProgressBarProps
- * @property {number} [progressTime] - Time to complete.
- * @property {Function} [onComplete] - Action when progress complete.
+ * @property { number } [minWidth] - Minimum width of the progress bar.
+ * @property { number } percentage - Percentage of the progress bar.
+ * @property { TPercentageLocation } [percentageLocation] - Location of the percentage text.
+ * @property { boolean } [rounded] - Whether to round the progress bar corners.
+ * @property { boolean } [showPercentage] - Whether to show the percentage text.
+ * @property { TOrientation } [orientation] - Orientation of the progress bar.
+ * @property { TProgressVariant } [variant] - Progress bar variant.
  */
-interface IProgressBarProps extends IDisplayModifiable {
-    progressTime?: number;
-    onComplete?: () => void;
+interface IProgressBarProps {
+    minWidth?: number;
+    percentage: number;
+    percentageLocation?: TPercentageLocation;
+    rounded?: boolean;
+    showPercentage?: boolean;
+    orientation?: TOrientation;
+    variant?: TProgressVariant;
 }
-export type { IProgressBarProps };
+export type { IProgressBarProps, TProgressVariant, TOrientation };

package/dist/types/components/scroll-button/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import { IScrollUpButtonProps } from "./types";
+declare const ScrollUpButton: FC<IScrollUpButtonProps>;
+export { ScrollUpButton };

package/dist/types/components/scroll-button/styles.d.ts

@@ -0,0 +1,4 @@
+declare const FloatButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export { FloatButton };

package/dist/types/components/scroll-button/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Scroll up button component props.
+ * @interface IScrollUpButtonProps
+ * @property { string } [scrollerId] - The ID of the scrollable element.
+ * @property { number } [visibleAt] - The pixel value at which the scroll up button should become visible.
+ */
+interface IScrollUpButtonProps {
+    scrollerId?: string;
+    visibleAt?: number;
+}
+export type { IScrollUpButtonProps };

package/dist/types/components/search/index.d.ts

@@ -0,0 +1,3 @@
+import type { ISearchProps } from "./types";
+declare const Search: import("react").ForwardRefExoticComponent<Readonly<ISearchProps> & import("react").RefAttributes<HTMLInputElement>>;
+export { Search };

package/dist/types/components/search/styles.d.ts

@@ -0,0 +1,6 @@
+declare const StyledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $isEmpty: boolean;
+}>> & string;
+declare const OutlineContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const OutlineDropdown: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { StyledInput, OutlineContainer, OutlineDropdown };

package/dist/types/components/search/types.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from "react";
+/**
+ * Search component props interface.
+ * @interface ISearchProps
+ * @property { boolean } [smallSearch] - Use smaller search bar size.
+ */
+interface ISearchProps extends InputHTMLAttributes<HTMLInputElement> {
+    smallSearch?: boolean;
+}
+export type { ISearchProps };

package/dist/types/components/severity-badge/index.d.ts

@@ -0,0 +1,3 @@
+import { ISeverityBadgeProps } from "./types";
+declare const SeverityBadge: ({ textL, textR, variant, }: Readonly<ISeverityBadgeProps>) => JSX.Element;
+export { SeverityBadge };

package/dist/types/components/severity-badge/types.d.ts

@@ -0,0 +1,26 @@
+type TSeverityBadgeVariant = "critical" | "disable" | "high" | "low" | "medium";
+/**
+ * Severity badge variant props.
+ * @interface IVariant
+ * @property {string} bgColor - Background color of the badge.
+ * @property {string} colorL - Color of the left text.
+ * @property {string} colorR - Color of the right text.
+ */
+interface IVariant {
+    bgColor: string;
+    colorL: string;
+    colorR: string;
+}
+/**
+ * Severity badge component props.
+ * @interface ISeverityBadgeProps
+ * @property { string } textL - Left text of the badge.
+ * @property { string } textR - Right text of the badge.
+ * @property { TSeverityBadgeVariant } variant - Variant of the badge.
+ */
+interface ISeverityBadgeProps {
+    textL: string;
+    textR: string;
+    variant: TSeverityBadgeVariant;
+}
+export type { TSeverityBadgeVariant, ISeverityBadgeProps, IVariant };

package/dist/types/components/severity-badge/utils.d.ts

@@ -0,0 +1,3 @@
+import { IVariant, TSeverityBadgeVariant } from "./types";
+declare const variants: Record<TSeverityBadgeVariant, IVariant>;
+export { variants };

package/dist/types/components/severity-overview/badge/index.d.ts

@@ -0,0 +1,3 @@
+import { ISeverityOverviewBadgeProps } from "../types";
+declare const SeverityOverviewBadge: ({ variant, value, }: Readonly<ISeverityOverviewBadgeProps>) => JSX.Element;
+export { SeverityOverviewBadge };

package/dist/types/components/severity-overview/index.d.ts

@@ -0,0 +1,3 @@
+import { ISeverityOverviewProps } from "./types";
+declare const SeverityOverview: ({ critical, high, medium, low, }: Readonly<ISeverityOverviewProps>) => JSX.Element;
+export { SeverityOverview };

package/dist/types/components/severity-overview/types.d.ts

@@ -0,0 +1,40 @@
+type TSeverityOverviewBadgeVariant = "critical" | "high" | "low" | "medium";
+/**
+ * Severity overview badge component props.
+ * @interface ISeverityOverviewBadgeProps
+ * @property { TSeverityOverviewBadgeVariant } variant - Variant of the badge.
+ * @property { number } value - Value of the badge.
+ */
+interface ISeverityOverviewBadgeProps {
+    variant: TSeverityOverviewBadgeVariant;
+    value: number;
+}
+/**
+ * Variant of severity badge.
+ * @interface IVariant
+ * @property { string } iconColor - Color of the icon.
+ * @property { string } iconText - Text of the icon.
+ * @property { string } iconTextColor - Color of the icon text.
+ * @property { string } textColor - Color of the text.
+ */
+interface IVariant {
+    iconColor: string;
+    iconText: string;
+    iconTextColor: string;
+    textColor: string;
+}
+/**
+ * Severity overview component props.
+ * @interface ISeverityOverviewProps
+ * @property { number } critical - Number of critical vulnerabilities.
+ * @property { number } high - Number of high vulnerabilities.
+ * @property { number } medium - Number of medium vulnerabilities.
+ * @property { number } low - Number of low vulnerabilities.
+ */
+interface ISeverityOverviewProps {
+    critical: number;
+    high: number;
+    medium: number;
+    low: number;
+}
+export type { ISeverityOverviewProps, ISeverityOverviewBadgeProps, IVariant, TSeverityOverviewBadgeVariant, };

package/dist/types/components/severity-overview/utils.d.ts

@@ -0,0 +1,3 @@
+import { IVariant, TSeverityOverviewBadgeVariant } from "./types";
+declare const getVariant: (variant: TSeverityOverviewBadgeVariant, value: number) => IVariant;
+export { getVariant };

package/dist/types/components/show-on-hover/index.d.ts

@@ -0,0 +1,3 @@
+import type { IShowOnHoverProps } from "./types";
+declare const ShowOnHover: ({ visibleElement, hiddenElement, }: Readonly<IShowOnHoverProps>) => JSX.Element;
+export { ShowOnHover };

package/dist/types/components/show-on-hover/styles.d.ts

@@ -0,0 +1,2 @@
+declare const ParentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { ParentContainer };

package/dist/types/components/show-on-hover/types.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+/**
+ * Show on hover component props.
+ * @interface IShowOnHoverProps
+ * @property { ReactNode } visibleElement - The element to show by default.
+ * @property { ReactNode } hiddenElement - The element to show when hovering.
+ */
+interface IShowOnHoverProps {
+    visibleElement: ReactNode;
+    hiddenElement: ReactNode;
+}
+export type { IShowOnHoverProps };

package/dist/types/components/slide-out-menu/index.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from "react";
+import type { ISlideOutMenuProps } from "./types";
+declare const SlideOutMenu: ({ children, closeIconId, isOpen, items, onClose, primaryButtonText, primaryOnClick, secondaryButtonText, secondaryOnClick, title, }: Readonly<PropsWithChildren<ISlideOutMenuProps>>) => JSX.Element;
+export { SlideOutMenu };

package/dist/types/components/slide-out-menu/menu-item/index.d.ts

@@ -0,0 +1,3 @@
+import type { IMenuItemProps } from "../types";
+declare const MenuItem: ({ customBadge, description, icon, onClick, requiresUpgrade, title, }: Readonly<IMenuItemProps>) => JSX.Element;
+export { MenuItem };