@fluidattacks/design 1.3.0 → 1.5.0

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

@@ -1,3 +1,3 @@
-import { IAccordionContentProps } from './types';
-declare const AccordionContent: ({ isSelectedAndOpen, item, variant, render, }: Readonly<IAccordionContentProps>) => JSX.Element | null;
+import { IAccordionContentProps } from '../types';
+declare const AccordionContent: ({ isSelectedAndOpen, item, }: Readonly<IAccordionContentProps>) => JSX.Element;
 export { AccordionContent };

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

@@ -1,4 +1,3 @@
-type TVariant = "progress" | "simple" | "platform";
 type TAligned = "end" | "start";
 /**
  * Accordion item properties.
@@ -12,6 +11,16 @@ interface IAccordionItemProps {
     description?: string;
     extraElement?: JSX.Element;
 }
+/**
+ * Accordion Content props
+ * @interface IAccordionContentProps
+ * @property {boolean} isSelectedAndOpen If item in accordion is selected and open.
+ * @property {IAccordionItemProps} item Accordion item.
+ */
+interface IAccordionContentProps {
+    isSelectedAndOpen: boolean;
+    item: IAccordionItemProps;
+}
 /**
  * Pass more than 1 item to activate the progress variant.
  *
@@ -19,15 +28,11 @@ interface IAccordionItemProps {
  * @interface IAccordionProps
  * @property {TAligned} [aligned] - Alignment of the accordion title.
  * @property {IAccordionItemProps[]} items - A list of accordion items.
- * @property {number} [progressTime] - Time remaining until the next item (in seconds).
  * @property {string} [bgColor] - Background color of the accordion.
- * @property {TVariant} [variant] - Type of accordion variant.
  */
 interface IAccordionProps {
     aligned?: TAligned;
     items: IAccordionItemProps[];
-    progressTime?: number;
     bgColor?: string;
-    variant?: TVariant;
 }
-export type { IAccordionProps, IAccordionItemProps, TVariant, TAligned };
+export type { IAccordionProps, IAccordionItemProps, IAccordionContentProps, TAligned, };

package/dist/src/components/code-snippet/index.d.ts

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

package/dist/src/components/code-snippet/location-code/index.d.ts

@@ -0,0 +1,3 @@
+import { ICodeSnippetProps } from '../types';
+declare const Code: ({ noCodeMessage, snippet, specific, }: Readonly<ICodeSnippetProps>) => JSX.Element;
+export { Code };

package/dist/src/components/code-snippet/styles.d.ts

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

package/dist/src/components/code-snippet/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Snippet props.
+ * @interface ISnippet
+ * @property {string} content - The code snippet content.
+ * @property {number} offset - The offset of the code snippet in the source code.
+ */
+interface ISnippet {
+    content: string;
+    offset: number;
+}
+/**
+ * Code snippet component props.
+ * @property {string} [noCodeMessage] - Message to display when no code snippet is provided.
+ * @property {ISnippet | string} snippet - The code snippet object.
+ * @property {string} [specific] - Additional information related to the code snippet.
+ */
+interface ICodeSnippetProps {
+    noCodeMessage?: string;
+    snippet: ISnippet | string;
+    specific?: string;
+}
+export type { ICodeSnippetProps };

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

@@ -0,0 +1,3 @@
+import { IDividerProps } from './types';
+declare const Divider: import('react').ForwardRefExoticComponent<Readonly<IDividerProps> & import('react').RefAttributes<HTMLHRElement>>;
+export { Divider };

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

@@ -0,0 +1,11 @@
+import { IMarginModifiable } from '../@core/types';
+/**
+ * Divider component props.
+ * @interface IDividerProps
+ * @extends IMarginModifiable
+ * @property {string} [color] - The divider color.
+ */
+interface IDividerProps extends IMarginModifiable {
+    color?: string;
+}
+export type { IDividerProps };

package/dist/src/components/list-item/index.d.ts

@@ -0,0 +1,4 @@
+import { ListItemsWrapper } from './styles';
+import { IListItemProps } from './types';
+declare const ListItem: ({ children, disabled, icon, iconType, href, onClick, onKeyDown, selected, value, ...props }: Readonly<IListItemProps>) => JSX.Element;
+export { ListItem, ListItemsWrapper };

package/dist/src/components/list-item/styles.d.ts

@@ -0,0 +1,3 @@
+declare const Li: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+declare const ListItemsWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
+export { Li, ListItemsWrapper };

package/dist/src/components/list-item/types.d.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes, HTMLProps } from 'react';
+import { IIconModifiable } from '../@core';
+/**
+ * Label component props.
+ * @interface ILabelProps
+ * @property { string } color - The color for the label.
+ * @property { string } [href] - The URL for the label.
+ */
+interface ILabelProps {
+    color: string;
+    href?: string;
+}
+/**
+ * List item component props.
+ * @interface IListItemProps
+ * @extends IIconModifiable
+ * @extends HTMLAttributes<HTMLLIElement>
+ * @property { string } [header] - The header text for the list item.
+ * @property { string } [href] - The URL for the list item.
+ * @property { boolean } [selected] - Whether the list item is selected.
+ * @property { string } [value] - The value for the list item.
+ */
+interface IListItemProps extends Partial<Pick<IIconModifiable, "icon" | "iconType">>, HTMLAttributes<HTMLLIElement>, HTMLProps<HTMLLIElement> {
+    href?: string;
+    selected?: boolean;
+    value?: string;
+}
+export type { IListItemProps, ILabelProps };

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

@@ -1,7 +1,5 @@
-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;

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

@@ -1,5 +1,4 @@
 import { HTMLAttributes, HTMLProps } from 'react';
-type TVariant = "web" | "platform";
 /**
  * Radio button props.
  * @interface IRadioButtonProps
@@ -7,11 +6,9 @@ type TVariant = "web" | "platform";
  * @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 };
+export type { IRadioButtonProps };

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

@@ -0,0 +1,3 @@
+import { ITableButtonProps } from './types';
+declare const TableButton: ({ disabled, icon, id, label, name, onClick, type, variant, }: Readonly<ITableButtonProps>) => JSX.Element;
+export { TableButton };

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

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

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

@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes } from 'react';
+import { IIconModifiable } from '../@core';
+type TVariant = "add" | "approve" | "disabled" | "reject" | "submit" | "success";
+/**
+ * Table button component props.
+ * @interface ITableButtonProps
+ * @extends IIconModifiable
+ * @extends ButtonHTMLAttributes<HTMLButtonElement>
+ * @property { string } [label] - Button label.
+ * @property { TVariant } variant - Button variant.
+ */
+interface ITableButtonProps extends Partial<Pick<IIconModifiable, "icon">>, ButtonHTMLAttributes<HTMLButtonElement> {
+    label?: string;
+    variant: TVariant;
+}
+export type { ITableButtonProps, TVariant };

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

@@ -0,0 +1,4 @@
+import { ITagProps, TTagVariant } from './types';
+declare const Tag: ({ children, disabled, icon, iconColor, id, fontSize, onClose, variant, }: Readonly<ITagProps>) => JSX.Element;
+export type { ITagProps, TTagVariant };
+export { Tag };

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

@@ -0,0 +1,7 @@
+import { TTagVariant } from './types';
+interface IStyledTag {
+    $fontSize?: string;
+    $variant: TTagVariant;
+}
+declare const StyledTag: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IStyledTag>> & string;
+export { StyledTag };

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

@@ -0,0 +1,20 @@
+import { IIconModifiable } from '../@core';
+type TTagVariant = "default" | "error" | "inactive" | "new" | "reachable" | "remediation" | "review" | "role" | "success" | "technique" | "warning";
+/**
+ * Tag component props.
+ * @interface ITagProps
+ * @extends IIconModifiable
+ * @extends HTMLAttributes<HTMLSpanElement>
+ * @property { boolean } [disabled] - Whether the tag is disabled.
+ * @property { string } [fontSize] - The font size for the tag.
+ * @property { Function } [onClose] - Function handler for close button click.
+ * @property { TTagType } [type] - The type of the tag.
+ * @property { TTagVariant } [variant] - The variant of the tag.
+ */
+interface ITagProps extends Partial<Pick<IIconModifiable, "icon" | "iconColor">>, React.HTMLAttributes<HTMLSpanElement> {
+    disabled?: boolean;
+    fontSize?: string;
+    onClose?: () => void;
+    variant?: TTagVariant;
+}
+export type { ITagProps, TTagVariant };

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

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

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

@@ -0,0 +1,4 @@
+declare const Slider: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Ball: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const ToggleContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
+export { Slider, ToggleContainer, Ball };

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

@@ -0,0 +1,28 @@
+import { Property } from 'csstype';
+import { InputHTMLAttributes } from 'react';
+/**
+ * Toggle component props.
+ * @interface ILabel
+ * @property { string } on - The label for the on state.
+ * @property { string } off - The label for the off state.
+ */
+interface ILabel {
+    on: string;
+    off: string;
+}
+/**
+ * Toggle component props.
+ * @interface IToggleProps
+ * @extends InputHTMLAttributes<HTMLInputElement>
+ * @property { Property.JustifyContent } [justify] - The justification of the toggle and its labels.
+ * @property { ILabel | string } [leftDescription] - The label or description for the left side of the toggle.
+ * @property { string } name - The name of the input field.
+ * @property { string } [rightDescription] - The label or description for the right side of the toggle.
+ */
+interface IToggleProps extends InputHTMLAttributes<HTMLInputElement> {
+    justify?: Property.JustifyContent;
+    leftDescription?: ILabel | string;
+    name: string;
+    rightDescription?: string;
+}
+export type { IToggleProps };

package/dist/src/index.d.ts

@@ -5,10 +5,12 @@ export * from './components/button';
 export * from './components/carousel';
 export * from './components/checkbox';
 export * from './components/cloud-image';
+export * from './components/code-snippet';
 export * from './components/colors';
 export * from './components/container';
 export * from './components/content-card';
 export * from './components/content-card-carousel';
+export * from './components/divider';
 export * from './components/file-preview';
 export * from './components/form';
 export * from './components/icon';
@@ -17,6 +19,7 @@ export * from './components/inputs';
 export * from './components/interactive-card';
 export * from './components/language-selector';
 export * from './components/link';
+export * from './components/list-item';
 export * from './components/logo';
 export * from './components/logo-carousel';
 export * from './components/message-banner';
@@ -24,7 +27,10 @@ export * from './components/notification-sign';
 export * from './components/progress-bar';
 export * from './components/radio-button';
 export * from './components/search-bar';
+export * from './components/table-button';
 export * from './components/tabs';
+export * from './components/tag';
+export * from './components/toggle';
 export * from './components/toggle-buttons';
 export * from './components/tooltip';
 export * from './components/typography';

package/package.json

@@ -8,6 +8,7 @@
     "@cloudinary/url-gen": "1.21.0",
     "@fortawesome/free-solid-svg-icons": "6.7.1",
     "@fortawesome/react-fontawesome": "0.2.2",
+    "prismjs": "1.29.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-international-phone": "4.3.0",
@@ -26,6 +27,7 @@
     "@storybook/react-vite": "8.4.6",
     "@storybook/test": "8.4.6",
     "@storybook/test-runner": "0.20.1",
+    "@types/prismjs": "1.26.5",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
     "@vitejs/plugin-react-swc": "3.7.1",
@@ -94,5 +96,5 @@
     "test-storybook": "test-storybook"
   },
   "types": "dist/src/index.d.ts",
-  "version": "1.3.0"
+  "version": "1.5.0"
 }

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

@@ -1,16 +0,0 @@
-import { IAccordionItemProps, TVariant } from '../types';
-/**
- * Accordion Content props
- * @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;
-    item: IAccordionItemProps;
-    variant: TVariant;
-    render: boolean;
-}
-export type { IAccordionContentProps };

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

@@ -1,20 +0,0 @@
-import { IconName } from '@fortawesome/free-solid-svg-icons';
-import { Property } from 'csstype';
-import { SetStateAction } from 'react';
-import { TAligned, TVariant } from './types';
-import { TSize, TSpacing } from '../@core';
-declare const getItemBorderBottom: (index: number, isSelectedAndOpen: boolean, totalItems: number, variant: TVariant) => string | undefined;
-declare const getItemBorderTop: (isSelectedAndOpen: boolean, variant: TVariant) => string | undefined;
-declare const getIcon: (isSelectedAndOpen: boolean, variant: TVariant) => IconName;
-declare const getContentDisplay: (isSelectedAndOpen: boolean) => Property.Display;
-declare const handleContentVisibility: (index: number, currentItem: number, setIsOpen: (value: SetStateAction<boolean>) => void) => void;
-declare const getTitlePadding: (variant: TVariant) => [TSpacing, TSpacing, TSpacing, TSpacing];
-declare const getContentPadding: (variant: TVariant) => [TSpacing, TSpacing, TSpacing, TSpacing] | undefined;
-declare const getHoverBgColor: (variant: TVariant) => string | undefined;
-declare const getBorderColor: (variant: TVariant) => string;
-declare const getIconColor: (variant: TVariant) => string;
-declare const getFlexDirection: (aligned: TAligned) => Property.FlexDirection;
-declare const getFontSize: (variant: TVariant) => TSize;
-declare const getDelay: (progressTime: number) => number;
-declare const sleep: (seconds: number) => Promise<PromiseConstructor>;
-export { getItemBorderBottom, getItemBorderTop, getBorderColor, getContentDisplay, getDelay, getFlexDirection, getFontSize, getHoverBgColor, getIconColor, getTitlePadding, getContentPadding, getIcon, handleContentVisibility, sleep, };