@fluidattacks/design 1.2.22 → 1.2.24

package/dist/src/components/accordion/accordion-content/types.d.ts

@@ -1,10 +1,11 @@
 import { IAccordionItemProps, TVariant } from '../types';
 /**
  * Accordion Content props
- * @property {boolean} [isSelectedAndOpen] If item in accordion is selected and open.
- * @property {IAccordionItemProps} [item] Accordion item.
- * @property {TVariant} [variant] Type of accordion.
- * @property {boolean} [render] Render condition.
+ * @interface IAccordionContentProps
+ * @property {boolean} isSelectedAndOpen If item in accordion is selected and open.
+ * @property {IAccordionItemProps} item Accordion item.
+ * @property {TVariant} variant Type of accordion.
+ * @property {boolean} render Render condition.
  */
 interface IAccordionContentProps {
     isSelectedAndOpen: boolean;

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

@@ -2,7 +2,8 @@ type TVariant = "progress" | "simple" | "platform";
 type TAligned = "end" | "start";
 /**
  * Accordion item props
- * @property {string} [title] Accordion title.
+ * @interface IAccordionItemProps
+ * @property {string} title Accordion title.
  * @property {string} [description] Accordion description.
  * @property {JSX.Element} [extraElement] Accordion extra components.
  */
@@ -15,8 +16,9 @@ interface IAccordionItemProps {
  * Pass more than 1 item to activate progress variant
  *
  * Accordion component props
+ * @interface IAccordionProps
  * @property {TAligned} [aligned] Align title.
- * @property {IAccordionItemProps} [items] A list of accordion items.
+ * @property {IAccordionItemProps} items A list of accordion items.
  * @property {number} [progressTime] Time remaining until the next item (in seconds).
  * @property {string} [bgColor] Accordion background color.
  * @property {TVariant} [variant] Type of accordion.

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

@@ -4,6 +4,7 @@ import { TPlace } from '../tooltip/types';
 type TVariant = "primary" | "primaryWeb" | "secondary" | "secondaryWeb" | "tertiary" | "ghost" | "ghostWeb" | "link";
 /**
  * Button component props.
+ * @interface IButtonProps
  * @extends IBorderModifiable
  * @extends IDisplayModifiable
  * @extends IMarginModifiable

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

@@ -0,0 +1,3 @@
+import { ICheckboxProps } from './types';
+declare const Checkbox: ({ defaultChecked, disabled, label, name, onChange, onClick, onFocus, onKeyDown, value, variant, }: Readonly<ICheckboxProps>) => JSX.Element;
+export { Checkbox };

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

@@ -0,0 +1,7 @@
+import { TVariant } from './types';
+declare const InputContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $alert?: boolean;
+    $disabled: boolean;
+    $variant: TVariant;
+}>> & string;
+export { InputContainer };

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

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+type TVariant = "web" | "platform";
+/**
+ * Checkbox props.
+ * @interface ICheckboxProps
+ * @extends HTMLAttributes<HTMLInputElement>
+ * @property {boolean} [disabled] Disable checkbox.
+ * @property {string} name Input name.
+ * @property {string} [label] Checkbox label.
+ * @property {string} [value] Checkbox value.
+ * @property {Function} [variant] Checkbox variant type.
+ */
+interface ICheckboxProps extends HTMLAttributes<HTMLInputElement> {
+    disabled?: boolean;
+    label?: string;
+    name: string;
+    value?: string;
+    variant?: TVariant;
+}
+export type { ICheckboxProps, TVariant };

package/dist/src/components/cloud-image/types.d.ts

@@ -1,6 +1,7 @@
 import { Plugins } from '@cloudinary/html';
 /**
  * Cloud image component props.
+ * @interface ICloudImageProps
  * @property {string} [alt] The alternate text for an image.
  * @property {number | string} [height] The height of the image.
  * @property {number | string} [width] The width of the image.

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

@@ -3,6 +3,7 @@ import { TModifiable } from '../@core';
 type THtmlTag = keyof ReactHTML;
 /**
  * Container component props.
+ * @interface IContainerProps
  * @extends TModifiable
  * @extends HTMLAttributes<HTMLDivElement>
  * @property {THtmlTag} [as] The react html tag to represent.

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

@@ -3,14 +3,14 @@ import { IIconModifiable, IMarginModifiable } from '../@core';
 type TIconType = "fa-brands" | "fa-light" | "fa-regular" | "fa-solid";
 /**
  * Icon Wrapper component props.
+ * @interface IIconWrapProps
  * @extends IMarginModifiable
+ * @extends IIconModifiable
  * @property {boolean} [clickable] Defines the cursor to show on icon hover.
- * @property {string} [color] The icon color.
  * @property {string} [hoverColor] The icon color onn hover.
  * @property {Function} [onClick] Function handler for click event.
  * @property {boolean} [disabled] Show disabled icon state.
  * @property {number} [rotation] Rotation degrees to modify icon style.
- * @property {TSize} size The icon size.
  */
 interface IIconWrapProps extends IIconModifiable, IMarginModifiable {
     clickable?: boolean;
@@ -21,12 +21,12 @@ interface IIconWrapProps extends IIconModifiable, IMarginModifiable {
 }
 /**
  * Icon component props.
+ * @interface IIconProps
  * @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.
- * @property {IconName} icon The icon name coming from fontawesome.
- * @property {TIconType} iconType The icon type.
+ * @property {TIconType} [iconType] The icon type.
  */
 interface IIconProps extends IIconWrapProps {
     iconClass?: string;

package/dist/src/components/language-selector/types.d.ts

@@ -10,10 +10,11 @@ interface IItem {
 }
 /**
  * Item list for language selector props
+ * @interface IItemList
  * @property {boolean} [disabled] Show the item as disabled.
  * @property {TMode} [mode] The background theme: dark or light.
- * @property {Function} [onClick] Function handler for click event.
- * @property {string} [text] Item list text
+ * @property {Function} onClick Function handler for click event.
+ * @property {string} text Item list text
  */
 interface IItemList {
     disabled?: boolean;
@@ -23,6 +24,7 @@ interface IItemList {
 }
 /**
  * Language selector component props
+ * @interface ILangSelectorProps
  * @property {IItem} [items] The custom items to make selection.
  * @property {Function} handleClick Function handler for click event.
  * @property {TMode} [mode] The background theme: dark or light.

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

@@ -1,6 +1,7 @@
 type TLogoVariant = "company" | "footer" | "header" | "icon";
 /**
  * Logo component props.
+ * @interface ILogoProps
  * @property {string} publicId The publicId location in cloudinary.
  * @property {TLogoVariant} variant The different types of logo used.
  */

package/dist/src/components/logo-carousel/index.d.ts

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

package/dist/src/components/logo-carousel/styles.d.ts

@@ -0,0 +1,4 @@
+declare const ClientsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Rectangle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGProps<SVGRectElement>, never>> & string;
+declare const SlideShow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { ClientsContainer, Rectangle, SlideShow };

package/dist/src/components/logo-carousel/types.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Logo carousel component props.
+ * @interface ILogoCarouselProps
+ * @property {boolean} [fusion] Define the fusion style in carousel.
+ * @property {string[]} [logos] The list of image logos to show.
+ */
+interface ILogoCarouselProps {
+    fusion?: boolean;
+    logos?: string[];
+}
+export type { ILogoCarouselProps };

package/dist/src/components/logo-carousel/utils.d.ts

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

package/dist/src/components/message-banner/types.d.ts

@@ -4,13 +4,15 @@ import { MouseEventHandler } from 'react';
 type TVariant = "web" | "platform";
 /**
  * Message banner props.
+ * @interface IMessageBannerProps
  * @extends IMessageBannerProps
- * @property {JSX.Element | string} [message] Banner text.
+ * @property {JSX.Element | string} message Banner text.
  * @property {string} [buttonText] Text for action button.
  * @property {FontWeight} [buttonFontWeight] Weight for button text.
  * @property {IconName} [icon] Icon for action button.
  * @property {Function} [onClickButton] Action for action button.
  * @property {Function} [onClose] Extra action when banner close.
+ * @property {TVariant} [variant] Variant to use: platform or web.
  */
 interface IMessageBannerProps {
     message: JSX.Element | string;

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

@@ -2,6 +2,7 @@ import { IPositionModifiable } from '../@core';
 type TVariant = "error" | "warning";
 /**
  * Notification sign component props.
+ * @interface INotificationSignProps
  * @extends IPositionModifiable
  * @property {number} [numberIndicator] The number of notifications.
  * @property {boolean} [show] The visibility of notification sign.

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

@@ -1,6 +1,7 @@
 import { IDisplayModifiable } from '../@core';
 /**
  * Progress bar component props
+ * @interface IProgressBarProps
  * @property {number} [progressTime] Time to complete.
  * @property {Function} [onComplete] Action when progress complete.
  */

package/dist/src/components/radio-button/index.d.ts

@@ -0,0 +1,3 @@
+import { IRadioButtonProps } from './types';
+declare const RadioButton: ({ defaultChecked, disabled, label, name, onChange, onClick, value, variant, }: Readonly<IRadioButtonProps>) => JSX.Element;
+export { RadioButton };

package/dist/src/components/radio-button/styles.d.ts

@@ -0,0 +1,9 @@
+import { TVariant } from './types';
+declare const LabelContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
+    $disabled: boolean;
+    $variant: TVariant;
+}>> & string;
+declare const CheckMark: 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<HTMLSpanElement>, HTMLSpanElement>, Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import('react').RefObject<HTMLSpanElement> | null | undefined;
+}>, never>, never>> & string;
+export { CheckMark, LabelContainer };

package/dist/src/components/radio-button/types.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, HTMLProps } from 'react';
+type TVariant = "web" | "platform";
+/**
+ * Radio button props.
+ * @interface IRadioButtonProps
+ * @extends HTMLAttributes<HTMLInputElement>
+ * @extends HTMLProps<HTMLInputElement>
+ * @property {string} name Input name.
+ * @property {string} value Radio button value.
+ * @property {Function} [variant] Radio button variant type.
+ */
+interface IRadioButtonProps extends HTMLAttributes<HTMLInputElement>, HTMLProps<HTMLInputElement> {
+    name: string;
+    value: string;
+    variant?: TVariant;
+}
+export type { IRadioButtonProps, TVariant };

package/dist/src/components/search-bar/types.d.ts

@@ -2,6 +2,7 @@ import { IIconModifiable } from '../@core';
 type THit = Record<string, unknown>;
 /**
  * Item searching component props.
+ * @interface IItemSearchingProps
  * @property {THit} hit The matched item of the search query.
  * @property {IconName} [icon] Icon to show with item.
  * @property {boolean} [showIcon] True if the item includes an icon.
@@ -13,6 +14,7 @@ interface IItemSearchingProps {
 }
 /**
  * Search bar component props.
+ * @interface ISearchBarProps
  * @property {THit[]} items The matched items returned from Algolia.
  * @property {string} [placeholder] The search bar placeholder.
  * @property {Function} refine A function to set a new query and searches.

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

@@ -20,6 +20,7 @@ interface IFixedTabsProps {
 }
 /**
  * Tab component props.
+ * @interface ITabProps
  * @extends IFixedTabProps
  * @property {string} id The id related to the tab.
  * @property {string} link The link to redirect on tab click.
@@ -34,6 +35,7 @@ interface ITabProps extends IFixedTabProps {
 }
 /**
  * Tabs component props.
+ * @interface ITabsProps
  * @property {ITabProps[]} items The lists of tabs to display.
  * @property {boolean} [borders] Whether to add borders to set of tabs.
  * @property {boolean} [box] Whether to add box container to set of tabs.

package/dist/src/components/toggle-buttons/types.d.ts

@@ -1,5 +1,6 @@
 /**
  * Toggle button component props.
+ * @interface IToggleButtonProps
  * @property {string} [defaultSelection] The option selected by default.
  * @property {string[]} options The list options label.
  * @property {Function} handleClick The function to handle the click event.

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

@@ -4,6 +4,7 @@ type TPlace = "bottom" | "left" | "right" | "top";
 type TEffect = "float" | "solid";
 /**
  * Tooltip component props
+ * @interface ITooltipProps
  * @extends IIconModifiable
  * @extends IDisplayModifiable
  * @property {boolean} [disabled] If the tooltip icon is disabled.

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

@@ -2,6 +2,7 @@ import { Property } from 'csstype';
 import { IMarginModifiable, IPaddingModifiable, ISizeModifiable, ITextModifiable } from '../@core';
 /**
  * Typography component props.
+ * @interface ITypographyProps
  * @extends IMarginModifiable
  * @extends IPaddingModifiable
  * @extends ISizeModifiable

package/dist/src/hooks/use-cloudinary-image.d.ts

@@ -1,6 +1,7 @@
 import { CloudinaryImage } from '@cloudinary/url-gen';
 /**
  * Cloudinary image hook props.
+ * @interface IUseCloudinaryImageProps
  * @property {string} publicId The publicId location in cloudinary.
  * @property {string} [format] The image format desired (e.g., png, jpg).
  */

package/dist/src/index.d.ts

@@ -1,13 +1,18 @@
 export * from './components/@core';
 export * from './components/accordion';
 export * from './components/button';
+export * from './components/checkbox';
 export * from './components/cloud-image';
 export * from './components/colors';
 export * from './components/container';
 export * from './components/icon';
 export * from './components/language-selector';
 export * from './components/logo';
+export * from './components/logo-carousel';
+export * from './components/message-banner';
 export * from './components/notification-sign';
+export * from './components/progress-bar';
+export * from './components/radio-button';
 export * from './components/search-bar';
 export * from './components/tabs';
 export * from './components/toggle-buttons';

package/package.json

@@ -32,7 +32,7 @@
     "@types/react-dom": "18.2.0",
     "@vitejs/plugin-react-swc": "3.7.1",
     "autoprefixer": "10.4.20",
-    "eslint": "9.12.0",
+    "eslint": "9.13.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-typescript": "3.6.3",
     "eslint-plugin-functional": "7.0.2",
@@ -49,9 +49,9 @@
     "storybook": "8.3.6",
     "stylelint": "16.10.0",
     "stylelint-config-standard": "36.0.1",
-    "tailwindcss": "3.4.13",
+    "tailwindcss": "3.4.14",
     "typescript": "5.6.3",
-    "typescript-eslint": "8.11.0",
+    "typescript-eslint": "8.12.2",
     "vite": "5.4.10",
     "vite-plugin-css-injected-by-js": "3.5.2",
     "vite-plugin-dts": "4.3.0"
@@ -85,7 +85,7 @@
     "preview": "vite preview",
     "storybook": "storybook dev"
   },
-  "version": "1.2.22",
+  "version": "1.2.24",
   "eslintConfig": {
     "extends": [
       "plugin:storybook/recommended"