@fluidattacks/design 1.5.0 → 1.6.0

package/dist/src/components/little-flag/index.d.ts

@@ -0,0 +1,4 @@
+import { ILittleFlagProps } from './types';
+declare const LittleFlag: ({ bgColor, children, txtDecoration, ml, }: Readonly<ILittleFlagProps>) => JSX.Element;
+export type { ILittleFlagProps };
+export { LittleFlag };

package/dist/src/components/little-flag/styles.d.ts

@@ -0,0 +1,6 @@
+interface IStyledLittleFlagProps {
+    $bgColor?: string;
+    $txtDecoration?: string;
+}
+declare const LittleFlag: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IStyledLittleFlagProps>> & string;
+export { LittleFlag };

package/dist/src/components/little-flag/types.d.ts

@@ -0,0 +1,15 @@
+type TNums0To7 = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+/**
+ * Little flag component props.
+ * @interface ILittleFlagProps
+ * @extends React.HTMLAttributes<HTMLSpanElement>
+ * @property { number } [ml] - The margin left value for the little flag.
+ * @property { string } [bgColor] - The background color for the little flag.
+ * @property { string } [txtDecoration] - The text decoration for the little flag.
+ */
+interface ILittleFlagProps extends Partial<React.HTMLAttributes<HTMLSpanElement>> {
+    ml?: TNums0To7;
+    bgColor?: string;
+    txtDecoration?: string;
+}
+export type { ILittleFlagProps };

package/dist/src/components/lottie/index.d.ts

@@ -0,0 +1,3 @@
+import { ILottieProps } from './types';
+declare const Lottie: (props: Readonly<ILottieProps>) => JSX.Element;
+export { Lottie };

package/dist/src/components/lottie/styles.d.ts

@@ -0,0 +1,41 @@
+import { ILottieProps } from './types';
+interface IStyledLottieProps extends Partial<ILottieProps> {
+    $size?: ILottieProps["size"];
+}
+declare const StyledLottie: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('styled-components').FastOmit<import('styled-components/dist/types').Substitute<Omit<Omit<import('lottie-web').AnimationConfigWithData<"svg">, "container" | "animationData"> & {
+    animationData: unknown;
+    lottieRef?: import('lottie-light-react').LottieRef;
+    onComplete?: import('react').AnimationEventHandler | null;
+    onLoopComplete?: import('react').AnimationEventHandler | null;
+    onEnterFrame?: import('react').AnimationEventHandler | null;
+    onSegmentStart?: import('react').AnimationEventHandler | null;
+    onConfigReady?: import('react').AnimationEventHandler | null;
+    onDataReady?: import('react').AnimationEventHandler | null;
+    onDataFailed?: import('react').AnimationEventHandler | null;
+    onLoadedImages?: import('react').AnimationEventHandler | null;
+    onDOMLoaded?: import('react').AnimationEventHandler | null;
+    onDestroy?: import('react').AnimationEventHandler | null;
+} & Omit<import('react').HTMLProps<HTMLDivElement>, "loop"> & {
+    interactivity?: Omit<import('lottie-light-react').InteractivityProps, "lottieObj">;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, Omit<Omit<import('lottie-web').AnimationConfigWithData<"svg">, "container" | "animationData"> & {
+    animationData: unknown;
+    lottieRef?: import('lottie-light-react').LottieRef;
+    onComplete?: import('react').AnimationEventHandler | null;
+    onLoopComplete?: import('react').AnimationEventHandler | null;
+    onEnterFrame?: import('react').AnimationEventHandler | null;
+    onSegmentStart?: import('react').AnimationEventHandler | null;
+    onConfigReady?: import('react').AnimationEventHandler | null;
+    onDataReady?: import('react').AnimationEventHandler | null;
+    onDataFailed?: import('react').AnimationEventHandler | null;
+    onLoadedImages?: import('react').AnimationEventHandler | null;
+    onDOMLoaded?: import('react').AnimationEventHandler | null;
+    onDestroy?: import('react').AnimationEventHandler | null;
+} & Omit<import('react').HTMLProps<HTMLDivElement>, "loop"> & {
+    interactivity?: Omit<import('lottie-light-react').InteractivityProps, "lottieObj">;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}>, never>, IStyledLottieProps>> & string & Omit<(props: import('lottie-light-react').LottieComponentProps) => import('react').ReactElement<any, string | import('react').JSXElementConstructor<any>>, keyof import('react').Component<any, {}, any>>;
+export type { IStyledLottieProps };
+export { StyledLottie };

package/dist/src/components/lottie/types.d.ts

@@ -0,0 +1,11 @@
+import { LottieComponentProps } from 'lottie-light-react';
+/**
+ * Lottie component props.
+ * @interface ILottieProps
+ * @extends LottieComponentProps
+ * @property { number } [size] - The size of the lottie animation. Default is 16px.
+ */
+interface ILottieProps extends Partial<Pick<LottieComponentProps, "animationData" | "autoplay" | "className">> {
+    size?: number;
+}
+export type { ILottieProps };

package/dist/src/components/notification/index.d.ts

@@ -0,0 +1,3 @@
+import { INotificationProps } from './types';
+declare const Notification: ({ description, onClose, title, variant, }: Readonly<INotificationProps>) => JSX.Element;
+export { Notification };

package/dist/src/components/notification/styles.d.ts

@@ -0,0 +1,7 @@
+import { TNotificationVariant } from './types';
+interface IAlertAndNotifyBoxProps {
+    $variant: TNotificationVariant;
+}
+declare const NotificationContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAlertAndNotifyBoxProps>> & string;
+declare const IconsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IAlertAndNotifyBoxProps>> & string;
+export { IconsContainer, NotificationContainer };

package/dist/src/components/notification/types.d.ts

@@ -0,0 +1,16 @@
+type TNotificationVariant = "error" | "info" | "success" | "warning";
+/**
+ * Notification component props.
+ * @interface INotificationProps
+ * @property {string} description - The main content of the notification.
+ * @property {string} title - The title of the notification.
+ * @property {TNotificationVariant} variant - The notification custom variant.
+ * @property { Function } [onClose] - Optional callback function when the notification is closed.
+ */
+interface INotificationProps {
+    description: string;
+    title: string;
+    variant: TNotificationVariant;
+    onClose?: () => void;
+}
+export type { INotificationProps, TNotificationVariant };

package/dist/src/components/notification/utils.d.ts

@@ -0,0 +1,4 @@
+import { IconName } from '@fortawesome/free-solid-svg-icons';
+import { TNotificationVariant } from './types';
+declare const getIcon: (variant: TNotificationVariant) => IconName;
+export { getIcon };

package/dist/src/components/number-input/index.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { INumberInputProps } from './types';
+declare const NumberInput: React.ForwardRefExoticComponent<Readonly<INumberInputProps> & React.RefAttributes<HTMLInputElement>>;
+export type { INumberInputProps };
+export { NumberInput };

package/dist/src/components/number-input/styles.d.ts

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

package/dist/src/components/number-input/types.d.ts

@@ -0,0 +1,17 @@
+import { InputHTMLAttributes } from 'react';
+/**
+ *  Number input component props.
+ * @interface INumberInputProps
+ * @extends InputHTMLAttributes<HTMLInputElement>
+ * @property { boolean } [autoUpdate] - Whether the input value should be updated automatically.
+ * @property { number } [decimalPlaces] - Number of decimal places to display.
+ * @property { Function } [onEnter] - Function to be called when the enter key is pressed.
+ * @property { string } [tooltipMessage] - Tooltip message to display when hovering over the input.
+ */
+interface INumberInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    autoUpdate?: boolean;
+    decimalPlaces?: number;
+    onEnter: (value?: number) => void;
+    tooltipMessage?: string;
+}
+export type { INumberInputProps };

package/dist/src/components/step-lapse/index.d.ts

@@ -0,0 +1,3 @@
+import { IStepLapseProps } from './types';
+declare const StepLapse: ({ button: { disabled, text, type, onClick }, steps, }: Readonly<IStepLapseProps>) => JSX.Element;
+export { StepLapse };

package/dist/src/components/step-lapse/styles.d.ts

@@ -0,0 +1,8 @@
+import { TStepVariant } from './types';
+declare const StepperContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const StepContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const StyledButtonsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const StyledStepLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $variant: TStepVariant;
+}>> & string;
+export { StyledStepLabel, StyledButtonsContainer, StepContainer, StepperContainer, };

package/dist/src/components/step-lapse/types.d.ts

@@ -0,0 +1,44 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+type TStepVariant = "completed" | "current" | "disabled";
+/**
+ * Step component props.
+ * @interface IStep
+ * @property { ReactNode } content - The content to be displayed in the step.
+ * @property { boolean } [isDisabledNext] - A flag indicating whether the next button should be disabled.
+ * @property { boolean } [isDisabledPrevious] - A flag indicating whether the previous button should be disabled.
+ * @property { Function } [nextAction] - The callback function to be executed when the next button is clicked.
+ * @property { Function } [previousAction] - The callback function to be executed when the previous button is clicked.
+ * @property { string } title - The title of the step.
+ */
+interface IStep {
+    content: ReactNode;
+    isDisabledNext?: boolean;
+    isDisabledPrevious?: boolean;
+    nextAction?: () => void;
+    previousAction?: () => void;
+    title: string;
+}
+/**
+ * Step lapse button props.
+ * @interface IStepLapseButton
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
+ * @property { boolean } disabled - Whether the button should be disabled.
+ * @property { string } text - Button text.
+ * @property { Function } onClick - Callback function to be executed when the button is clicked.
+ */
+interface IStepLapseButton extends Pick<ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
+    disabled?: boolean;
+    text: string;
+    onClick?: () => void;
+}
+/**
+ * Step lapse component props.
+ * @interface IStepLapseProps
+ * @property { IStepLapseButton } button - The button to be displayed at the end of the step lapse.
+ * @property { IStep[] } steps - The steps to be included in the step lapse.
+ */
+interface IStepLapseProps {
+    button: IStepLapseButton;
+    steps: IStep[];
+}
+export type { IStepLapseProps, TStepVariant };

package/dist/src/components/tour/index.d.ts

@@ -0,0 +1,6 @@
+import { Step } from 'react-joyride';
+import { ITourProps } from './types';
+declare const baseStep: Step;
+declare const Tour: ({ run, steps, onFinish }: Readonly<ITourProps>) => JSX.Element;
+export { baseStep, Tour };
+export type { Step };

package/dist/src/components/tour/types.d.ts

@@ -0,0 +1,14 @@
+import { Step } from 'react-joyride';
+/**
+ * Tour component props.
+ * @interface ITourProps
+ * @property { Function } [onFinish] - The callback function to be executed when the tour finishes.
+ * @property { boolean } run - A flag indicating whether the tour should be run.
+ * @property { Step[] } steps - The steps to be included in the tour.
+ */
+interface ITourProps {
+    onFinish?: () => void;
+    run: boolean;
+    steps: Step[];
+}
+export type { ITourProps };

package/dist/src/index.d.ts

@@ -20,10 +20,14 @@ export * from './components/interactive-card';
 export * from './components/language-selector';
 export * from './components/link';
 export * from './components/list-item';
+export * from './components/little-flag';
 export * from './components/logo';
 export * from './components/logo-carousel';
+export * from './components/lottie';
 export * from './components/message-banner';
+export * from './components/notification';
 export * from './components/notification-sign';
+export * from './components/number-input';
 export * from './components/progress-bar';
 export * from './components/radio-button';
 export * from './components/search-bar';

package/package.json

@@ -8,10 +8,12 @@
     "@cloudinary/url-gen": "1.21.0",
     "@fortawesome/free-solid-svg-icons": "6.7.1",
     "@fortawesome/react-fontawesome": "0.2.2",
+    "lottie-light-react": "2.4.0",
     "prismjs": "1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-international-phone": "4.3.0",
+    "react-joyride": "2.9.3",
     "react-tooltip": "5.28.0",
     "styled-components": "6.1.13"
   },
@@ -96,5 +98,5 @@
     "test-storybook": "test-storybook"
   },
   "types": "dist/src/index.d.ts",
-  "version": "1.5.0"
+  "version": "1.6.0"
 }