@fluidattacks/design 3.1.4 → 3.1.5

package/package.json

@@ -69,8 +69,21 @@
       "plugin:storybook/recommended"
     ]
   },
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./index.mjs",
+      "require": "./index.js"
+    },
+    "./button": {
+      "types": "./types/components/button/types.d.ts",
+      "import": "./button.mjs",
+      "require": "./button.js"
+    }
+  },
   "files": [
     "README.md",
+    "./types",
     "*.js"
   ],
   "homepage": "https://gitlab.com/fluidattacks/universe",
@@ -106,5 +119,5 @@
     "test-storybook": "test-storybook"
   },
   "typings": "types/index.d.ts",
-  "version": "3.1.4"
+  "version": "3.1.5"
 }

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

@@ -0,0 +1,2 @@
+declare const hiddenProps: string[];
+export { hiddenProps };

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

@@ -0,0 +1,5 @@
+export * from "./variants/utils";
+export * from "./constants";
+export * from "./styles";
+export * from "./types";
+export * from "./utils";

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

@@ -0,0 +1,6 @@
+import type { TModifiable } from "./types";
+declare const BaseComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TModifiable>> & string;
+declare const BaseButtonComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TModifiable>> & string;
+declare const BaseTextComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, TModifiable>> & string;
+declare const BaseSpanComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TModifiable>> & string;
+export { BaseComponent, BaseButtonComponent, BaseTextComponent, BaseSpanComponent, };

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

@@ -0,0 +1,181 @@
+import type { IconName } from "@fortawesome/free-solid-svg-icons";
+import type { Property } from "csstype";
+type ColorGradient = "01" | "02";
+type ColorPalette = "25" | "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+/**
+ * Fluidattacks Default theme design
+ */
+interface DefaultTheme {
+    breakpoints: {
+        mobile: string;
+        tablet: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    spacing: {
+        0: "0rem";
+        0.125: "0.125rem";
+        0.188: "0.188rem";
+        0.25: "0.25rem";
+        0.5: "0.5rem";
+        0.625: "0.625rem";
+        0.75: "0.75rem";
+        1: "1rem";
+        1.25: "1.25rem";
+        1.5: "1.5rem";
+        1.75: "1.75rem";
+        2: "2rem";
+        2.25: "2.25rem";
+        2.5: "2.5rem";
+        3: "3rem";
+        3.5: "3.5rem";
+        4: "4rem";
+        4.5: "4.5rem";
+        5: "5rem";
+        6: "6rem";
+    };
+    typography: {
+        type: {
+            primary: string;
+            poppins: string;
+            mono: string;
+        };
+        heading: {
+            xxl: string;
+            xl: string;
+            lg: string;
+            md: string;
+            sm: string;
+            xs: string;
+        };
+        text: {
+            xl: string;
+            lg: string;
+            md: string;
+            sm: string;
+            xs: string;
+        };
+        weight: {
+            bold: string;
+            semibold: string;
+            regular: string;
+        };
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    palette: {
+        primary: Record<ColorPalette, string>;
+        complementary: Record<ColorPalette, string>;
+        error: Record<ColorPalette, string>;
+        info: Record<ColorPalette, string>;
+        warning: Record<ColorPalette, string>;
+        success: Record<ColorPalette, string>;
+        gray: Record<ColorPalette, string>;
+        gradients: Record<ColorGradient, string>;
+        black: string;
+        white: string;
+    };
+}
+type TSize = keyof DefaultTheme["typography"]["heading"];
+type TSpacing = keyof DefaultTheme["spacing"];
+type TShadows = keyof DefaultTheme["shadows"];
+type TIconSize = "xl" | "lg" | "md" | "sm" | "xs" | "xxs" | "xxss";
+type TIconType = "fa-brands" | "fa-kit" | "fa-light" | "fa-regular" | "fa-solid";
+type TMode = "dark" | "light";
+interface IPaddingModifiable {
+    padding?: [TSpacing, TSpacing, TSpacing, TSpacing];
+    px?: TSpacing;
+    py?: TSpacing;
+    pl?: TSpacing;
+    pr?: TSpacing;
+    pt?: TSpacing;
+    pb?: TSpacing;
+}
+interface IMarginModifiable {
+    margin?: [TSpacing, TSpacing, TSpacing, TSpacing];
+    mx?: TSpacing;
+    my?: TSpacing;
+    ml?: TSpacing;
+    mr?: TSpacing;
+    mt?: TSpacing;
+    mb?: TSpacing;
+}
+interface IPositionModifiable {
+    zIndex?: number;
+    position?: Property.Position;
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+}
+interface IBorderModifiable {
+    border?: string;
+    borderTop?: string;
+    borderRight?: string;
+    borderBottom?: string;
+    borderLeft?: string;
+    borderColor?: string;
+    borderRadius?: string;
+}
+interface IIconModifiable {
+    icon: IconName | "priority-bars-high" | "priority-bars-low" | "priority-bars-medium";
+    iconColor?: string;
+    iconSize: TIconSize;
+    iconType?: TIconType;
+    iconTransform?: string;
+}
+interface ISizeModifiable {
+    size: TSize;
+    sizeMd?: TSize;
+    sizeSm?: TSize;
+}
+interface IDisplayModifiable {
+    scroll?: "none" | "x" | "xy" | "y";
+    visibility?: Property.Visibility;
+    display?: Property.Display;
+    height?: string;
+    width?: string;
+    maxHeight?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    minWidth?: string;
+    shadow?: TShadows;
+    bgColor?: string;
+    bgGradient?: string;
+    gap?: TSpacing;
+    flexDirection?: Property.FlexDirection;
+    flexGrow?: Property.FlexGrow;
+    justify?: Property.JustifyContent;
+    justifySelf?: Property.JustifyContent;
+    alignItems?: Property.AlignItems;
+    alignSelf?: Property.AlignItems;
+    wrap?: Property.FlexWrap;
+}
+interface ITextModifiable {
+    color?: string;
+    fontFamily?: Property.FontFamily;
+    fontSize?: Property.FontSize<number | string>;
+    fontWeight?: Property.FontWeight;
+    letterSpacing?: Property.LetterSpacing;
+    lineSpacing?: Property.LineHeight<number | string>;
+    textAlign?: Property.TextAlign;
+    textDecoration?: Property.TextDecoration;
+    textOverflow?: Property.Overflow;
+    whiteSpace?: Property.WhiteSpace;
+    wordBreak?: Property.WordBreak;
+    wordWrap?: Property.WordWrap;
+}
+interface IInteractionModifiable {
+    cursor?: Property.Cursor;
+    transition?: string;
+    borderColorHover?: string;
+    bgColorHover?: string;
+    shadowHover?: TShadows;
+}
+type TModifiable = IBorderModifiable & IDisplayModifiable & IInteractionModifiable & IMarginModifiable & IPaddingModifiable & IPositionModifiable & ITextModifiable;
+export type { DefaultTheme as ThemeType, TSpacing, IPaddingModifiable, IMarginModifiable, IDisplayModifiable, IIconModifiable, ITextModifiable, IInteractionModifiable, IPositionModifiable, IBorderModifiable, ISizeModifiable, TIconSize, TIconType, TModifiable, TMode, TSize, };

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

@@ -0,0 +1,11 @@
+import type { StyledOptions } from "styled-components";
+import type { IBorderModifiable, IDisplayModifiable, IInteractionModifiable, IMarginModifiable, IPaddingModifiable, IPositionModifiable, ITextModifiable } from "./types";
+declare const setPadding: (props: Readonly<IPaddingModifiable>) => string;
+declare const setMargin: (props: Readonly<IMarginModifiable>) => string;
+declare const setPosition: (props: Readonly<IPositionModifiable>) => string;
+declare const setBorder: (props: Readonly<IBorderModifiable>) => string;
+declare const setDisplay: (props: Readonly<IDisplayModifiable>) => string;
+declare const setText: (props: Readonly<ITextModifiable>) => string;
+declare const setInteraction: (props: Readonly<IInteractionModifiable>) => string;
+declare const getStyledConfig: () => StyledOptions<"web", object>;
+export { setPadding, setText, setMargin, setInteraction, setPosition, setDisplay, setBorder, getStyledConfig, };

package/types/components/@core/variants/utils.d.ts

@@ -0,0 +1,59 @@
+import type { IconPrefix } from "@fortawesome/free-solid-svg-icons";
+import type { DefaultTheme } from "styled-components";
+/**
+ * Object with the icons to be printed on Iconography section.
+ * The key is the name of the icon and the value is an array of icon prefixes.
+ *
+ * Possible prefixes are:
+ * - `fas`: for solid icons
+ * - `far`: for regular icons
+ *
+ * Example:
+ * ```ts
+ * const icons: IconsList = {
+ *   "user": ["far", "fas"],
+ *   "search": ["fas"],
+ *   ...
+ * };
+ * ```
+ */
+type TIconsList = Record<string, [IconPrefix, IconPrefix] | [IconPrefix]>;
+interface IComponentVariant<T extends string> {
+    /**
+     * Get the variant css string. It can be added to `styled` template string.
+     *
+     * @param theme Theme to use
+     * @param variant Variant to get
+     * @returns Css string for the variant
+     */
+    getVariant: (theme: Readonly<DefaultTheme>, variant: T) => string;
+}
+/**
+ * Builder function to create a function for getting component variants
+ * injecting the theme.
+ *
+ * Example:
+ * ```ts
+ * const { getVariant } = variantBuilder((theme) => ({
+ *  primary: css`
+ *    background: ${theme.colors.primary};
+ *    border: 2px solid ${theme.colors.primary};
+ *    color: ${theme.colors.white};
+ *  `,
+ *  secondary: css`
+ *    background: ${theme.colors.secondary};
+ *    border: 2px solid ${theme.colors.secondary};
+ *    color: ${theme.colors.white};
+ *  `,
+ * }));
+ *
+ * getVariant(theme, "primary"); // returns the primary variant
+ * ```
+ *
+ * @param variants A function that returns the variants of a component as
+ * an object with variants as keys and values as css strings.
+ * @returns An object with a function to get the variant.
+ */
+declare const variantBuilder: <T extends string>(variants: (theme: Readonly<DefaultTheme>) => Record<T, string>) => IComponentVariant<T>;
+export type { IComponentVariant, TIconsList };
+export { variantBuilder };

package/types/components/accordion/accordion-content/index.d.ts

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

package/types/components/accordion/index.d.ts

@@ -0,0 +1,4 @@
+import type { IAccordionProps } from "./types";
+declare const Accordion: import("react").ForwardRefExoticComponent<Readonly<IAccordionProps> & import("react").RefAttributes<HTMLDivElement>>;
+export { Accordion };
+export type { IAccordionProps };

package/types/components/accordion/types.d.ts

@@ -0,0 +1,36 @@
+type TAligned = "end" | "start";
+/**
+ * Accordion item properties.
+ * @interface IAccordionItemProps
+ * @property {string} title - Accordion title.
+ * @property {string} [description] - Accordion description.
+ * @property {JSX.Element} [extraElement] - Additional elements for the accordion.
+ */
+interface IAccordionItemProps {
+    title: string;
+    description?: string;
+    extraElement?: JSX.Element;
+}
+/**
+ * Accordion Content props
+ * @interface IAccordionContentProps
+ * @property {IAccordionItemProps} item Accordion item.
+ */
+interface IAccordionContentProps {
+    item: IAccordionItemProps;
+}
+/**
+ * Pass more than 1 item to activate the progress variant.
+ *
+ * Accordion component properties.
+ * @interface IAccordionProps
+ * @property {TAligned} [aligned] - Alignment of the accordion title.
+ * @property {IAccordionItemProps[]} items - A list of accordion items.
+ * @property {string} [bgColor] - Background color of the accordion.
+ */
+interface IAccordionProps {
+    aligned?: TAligned;
+    items: IAccordionItemProps[];
+    bgColor?: string;
+}
+export type { IAccordionProps, IAccordionItemProps, IAccordionContentProps, TAligned, };

package/types/components/alert/index.d.ts

@@ -0,0 +1,4 @@
+import type { IAlertProps } from "./types";
+declare const Alert: import("react").ForwardRefExoticComponent<Readonly<IAlertProps> & import("react").RefAttributes<HTMLDivElement>>;
+export type { IAlertProps };
+export { Alert };

package/types/components/alert/styles.d.ts

@@ -0,0 +1,9 @@
+import type { IconName } from "@fortawesome/free-solid-svg-icons";
+import { TAlertAndNotifyVariant } from "./types";
+interface IStyledAlertAndNotifyProps {
+    $variant?: TAlertAndNotifyVariant;
+}
+declare const getIcon: (variant: TAlertAndNotifyVariant) => IconName;
+declare const AlertContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IStyledAlertAndNotifyProps>> & string;
+declare const MessageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { getIcon, AlertContainer, MessageContainer };

package/types/components/alert/types.d.ts

@@ -0,0 +1,23 @@
+import type { Dispatch, HTMLAttributes, SetStateAction } from "react";
+import type { IMarginModifiable } from "components/@core/types";
+type TAlertAndNotifyVariant = "error" | "info" | "success" | "warning";
+/**
+ * Alert component props.
+ * @interface IAlertProps
+ * @extends IMarginModifiable
+ * @property {boolean} [autoHide] - Automatically hide the alert after a certain time.
+ * @property {boolean} [closable] - Whether the alert should be closable.
+ * @property {boolean} [show] - Whether the alert should be visible.
+ * @property {number} [time] - The duration (in seconds) to show the alert.
+ * @property {Function} [onTimeOut] - Callback function to be executed when the alert timeout.
+ * @property {TAlertAndNotifyVariant} [variant] - The variant of the alert (error, info, success, warning).
+ */
+interface IAlertProps extends IMarginModifiable, HTMLAttributes<HTMLDivElement> {
+    autoHide?: boolean;
+    closable?: boolean;
+    show?: boolean;
+    time?: 4 | 8 | 12;
+    onTimeOut?: Dispatch<SetStateAction<boolean>>;
+    variant?: TAlertAndNotifyVariant;
+}
+export type { IAlertProps, TAlertAndNotifyVariant };

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

@@ -0,0 +1,4 @@
+import type { IButtonProps } from "./types";
+declare const Button: import("react").ForwardRefExoticComponent<Readonly<IButtonProps> & import("react").RefAttributes<HTMLButtonElement>>;
+export type { IButtonProps };
+export { Button };

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

@@ -0,0 +1,9 @@
+import type { TVariant } from "./types";
+interface IStyledButtonProps {
+    $variant?: TVariant;
+}
+declare const StyledButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 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: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, IStyledButtonProps>> & string;
+export type { IStyledButtonProps, TVariant };
+export { StyledButton };

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

@@ -0,0 +1,30 @@
+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" | "secondary" | "tertiary" | "ghost" | "link";
+/**
+ * Button component props.
+ * @interface IButtonProps
+ * @extends IBorderModifiable
+ * @extends IDisplayModifiable
+ * @extends IMarginModifiable
+ * @extends IPaddingModifiable
+ * @extends IIconModifiable
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
+ * @property {boolean} [external] - Whether the link should open in a new tab.
+ * @property {string} [href] - Link URL for link variant.
+ * @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> {
+    external?: boolean;
+    href?: string;
+    showArrow?: boolean;
+    tooltip?: string;
+    tooltipPlace?: TPlace;
+    underline?: boolean;
+    variant?: TVariant;
+}
+export type { IButtonProps, TMode, TVariant };

package/types/components/card/card-header/index.d.ts

@@ -0,0 +1,3 @@
+import type { ICardHeader } from "../types";
+declare const CardHeader: ({ authorEmail, date, description, descriptionColor, id, title, titleColor, textAlign, textSpacing, tooltip, }: Readonly<ICardHeader>) => JSX.Element;
+export { CardHeader };

package/types/components/card/card-with-image/index.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from "react";
+import type { ICardWithImageProps } from "../types";
+declare const CardWithImage: ({ alt, authorEmail, date, description, src, children, isEditing, onClick, title, hideDescription, headerType, showMaximize, }: Readonly<PropsWithChildren<ICardWithImageProps>>) => JSX.Element;
+export { CardWithImage };

package/types/components/card/card-with-input/index.d.ts

@@ -0,0 +1,3 @@
+import type { ICardWithInputProps } from "../types";
+declare const CardWithInput: ({ description, disabled, id, align, inputType, inputNumberProps, minHeight, minWidth, name, placeholder, tooltip, title, }: Readonly<ICardWithInputProps>) => JSX.Element;
+export { CardWithInput };

package/types/components/card/card-with-input/styles.d.ts

@@ -0,0 +1,8 @@
+import type { Property } from "csstype";
+interface ICardInputContainerProps {
+    $align?: Property.TextAlign;
+    $minHeight?: string;
+    $minWidth?: string;
+}
+declare const CardInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICardInputContainerProps>> & string;
+export { CardInputContainer };

package/types/components/card/card-with-selector/index.d.ts

@@ -0,0 +1,3 @@
+import type { ICardWithSelectorProps } from "../types";
+declare const CardWithSelector: ({ alt, imageId, icon, selectorProps, onClick, title, width, }: Readonly<ICardWithSelectorProps>) => JSX.Element;
+export { CardWithSelector };

package/types/components/card/card-with-switch/index.d.ts

@@ -0,0 +1,3 @@
+import type { ICardWithSwitchProps } from "../types";
+declare const CardWithSwitch: ({ id, title, toggles, minWidth, height, }: Readonly<ICardWithSwitchProps>) => JSX.Element;
+export { CardWithSwitch };

package/types/components/card/index.d.ts

@@ -0,0 +1,6 @@
+import { CardHeader } from "./card-header";
+import { CardWithImage } from "./card-with-image";
+import { CardWithInput } from "./card-with-input";
+import { CardWithSelector } from "./card-with-selector";
+import { CardWithSwitch } from "./card-with-switch";
+export { CardHeader, CardWithInput, CardWithImage, CardWithSelector, CardWithSwitch, };

package/types/components/card/types.d.ts

@@ -0,0 +1,121 @@
+import { IconName } from "@fortawesome/free-solid-svg-icons";
+import type { Property } from "csstype";
+import type { MouseEventHandler } from "react";
+import type { TSpacing } from "components/@core/types";
+import type { TFileType } from "components/file-preview/types";
+import { IRadioButtonProps } from "components/radio-button/types";
+import { IToggleProps } from "components/toggle/types";
+type TInputType = "date" | "number" | "text";
+/**
+ * Card component shared props.
+ * @interface ISharedProps
+ * @property { string } [authorEmail] - Card author email.
+ * @property { string } [date] - Card date.
+ * @property { string } [description] - Card description.
+ * @property { string } [title] - Card title.
+ */
+interface ISharedProps {
+    authorEmail?: string;
+    date?: string;
+    description?: string;
+    title: string;
+}
+/**
+ * Card header component props.
+ * @interface ICardHeader
+ * @extends ISharedProps
+ * @property { string } [textAlign] - Card title text alignment.
+ * @property { string } [tooltip] - Card tooltip.
+ * @property { string } id - Card id.
+ * @property { string } [titleColor] - Card title color.
+ * @property { string } [descriptionColor] - Card description color.
+ * @property { TSpacing } [textSpacing] - Card text spacing.
+ */
+interface ICardHeader extends ISharedProps {
+    textAlign?: Property.TextAlign;
+    tooltip?: string;
+    id: string;
+    titleColor?: string;
+    descriptionColor?: string;
+    textSpacing?: TSpacing;
+}
+/**
+ * Card with image component props.
+ * @interface ICardWithImageProps
+ * @extends ISharedProps
+ * @property { string } alt - Card image alt.
+ * @property { string } [src] - Card image source.
+ * @property { boolean } [isEditing] - Card is editing.
+ * @property { boolean } [showMaximize] - Card show maximize.
+ * @property { boolean } [hideDescription] - Card hide description.
+ * @property { MouseEventHandler<HTMLDivElement> } [onClick] - Card onClick.
+ * @property { TFileType } [headerType] - Card header type.
+ */
+interface ICardWithImageProps extends ISharedProps {
+    alt: string;
+    hideDescription?: boolean;
+    onClick?: MouseEventHandler<HTMLDivElement>;
+    src: string;
+    headerType?: TFileType;
+    isEditing: boolean;
+    showMaximize?: boolean;
+}
+/**
+ * Card with switch component props.
+ * @interface ICardWithSwitchProps
+ * @property { string } [minWidth] - Card min width.
+ * @property { string } [height] - Card height.
+ * @property { IToggleProps[] } toggles - Card toggles.
+ */
+interface ICardWithSwitchProps extends ICardHeader {
+    minWidth?: string;
+    height?: string;
+    toggles: IToggleProps[];
+}
+/**
+ * Card with selector component props.
+ * @interface ICardWithSelectorProps
+ * @extends ISharedProps
+ * @property { string } [alt] - Card image alt.
+ * @property { string } [imageId] - Card image id.
+ * @property { IconName } [icon] - Card icon.
+ * @property { Function } [onClick] - Card onClick.
+ * @property { IRadioButtonProps } selectorProps - Card selector props.
+ * @property { string } [width] - Card width.
+ */
+interface ICardWithSelectorProps extends Pick<ISharedProps, "description" | "title"> {
+    alt?: string;
+    imageId?: string;
+    icon?: IconName;
+    onClick?: () => void;
+    selectorProps: IRadioButtonProps;
+    width?: string;
+}
+/**
+ * Card with input component props.
+ * @interface ICardWithInputProps
+ * @extends ICardHeader
+ * @property { string } [align] - Card input align.
+ * @property { Interface } [inputNumberProps] - Card input number props.
+ * @property { boolean } [disabled] - Card disabled.
+ * @property { string } [inputType] - Card input type.
+ * @property { string } [minHeight] - Card min height.
+ * @property { string } [minWidth] - Card min width.
+ * @property { string } name - Card name.
+ * @property { string } [placeholder] - Card placeholder.
+ */
+interface ICardWithInputProps extends ICardHeader {
+    align?: Property.TextAlign;
+    inputNumberProps?: {
+        decimalPlaces?: number;
+        max?: number;
+        min?: number;
+    };
+    disabled?: boolean;
+    inputType?: TInputType;
+    minHeight?: string;
+    minWidth?: string;
+    name: string;
+    placeholder?: string;
+}
+export type { ICardHeader, ICardWithImageProps, ICardWithSwitchProps, ICardWithSelectorProps, ICardWithInputProps, };

package/types/components/carousel/index.d.ts

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

package/types/components/carousel/styles.d.ts

@@ -0,0 +1,10 @@
+declare const CarouselContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const CarouselWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $currentIndex: number;
+}>> & string;
+declare const CarouselSlide: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const NavButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $isActive: boolean;
+}>> & string;
+declare const NavContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { CarouselContainer, CarouselWrapper, CarouselSlide, NavContainer, NavButton, };

package/types/components/carousel/types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Slide component props.
+ * @interface ISlide
+ * @property {JSX.Element} content - The content to be displayed in the slide.
+ */
+interface ISlide {
+    content: JSX.Element;
+}
+/**
+ * Carousel component props.
+ * @interface ICarouselProps
+ * @property {ISlide[]} slides - The array of slides to be displayed in the carousel.
+ * @property {number} [interval] - The interval (in milliseconds) between slide transitions. Default is 300.
+ */
+interface ICarouselProps {
+    slides: ISlide[];
+    interval?: number;
+}
+export type { ICarouselProps, ISlide };

package/types/components/checkbox/index.d.ts

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

package/types/components/checkbox/styles.d.ts

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