@fluidattacks/design 2.7.0 → 3.0.1

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

@@ -16,6 +16,7 @@ interface DefaultTheme {
     spacing: {
         0: "0rem";
         0.125: "0.125rem";
+        0.188: "0.188rem";
         0.25: "0.25rem";
         0.5: "0.5rem";
         0.625: "0.625rem";
@@ -84,7 +85,7 @@ 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-light" | "fa-regular" | "fa-solid";
+type TIconType = "fa-brands" | "fa-kit" | "fa-light" | "fa-regular" | "fa-solid";
 type TMode = "dark" | "light";
 interface IPaddingModifiable {
     padding?: [TSpacing, TSpacing, TSpacing, TSpacing];
@@ -122,7 +123,7 @@ interface IBorderModifiable {
     borderRadius?: string;
 }
 interface IIconModifiable {
-    icon: IconName;
+    icon: IconName | "priority-bars-high" | "priority-bars-low" | "priority-bars-medium";
     iconColor?: string;
     iconSize: TIconSize;
     iconType?: TIconType;

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

@@ -1,11 +1,11 @@
-import type { IMarginModifiable } from "components/@core/types";
+import type { IDisplayModifiable, IMarginModifiable } from "components/@core/types";
 /**
  * Divider component props.
  * @interface IDividerProps
  * @extends IMarginModifiable
  * @property {string} [color] - The divider color.
  */
-interface IDividerProps extends IMarginModifiable {
+interface IDividerProps extends Pick<IDisplayModifiable, "height" | "width">, IMarginModifiable {
     color?: string;
 }
 export type { IDividerProps };

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

@@ -6,6 +6,7 @@ interface IStyledIconWrapProps {
     $disabled?: IIconWrapProps["disabled"];
     $rotation?: IIconWrapProps["rotation"];
     $size: IIconWrapProps["iconSize"];
+    $secondaryColor: IIconWrapProps["secondaryColor"];
 }
 declare const IconWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 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: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;

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

@@ -17,6 +17,7 @@ interface IIconWrapProps extends IIconModifiable, IMarginModifiable {
     onClick?: MouseEventHandler<HTMLSpanElement>;
     disabled?: boolean;
     rotation?: number;
+    secondaryColor?: string;
 }
 /**
  * Icon component props.
@@ -24,9 +25,11 @@ 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} [spanClass] - The icon span class.
  */
 interface IIconProps extends IIconWrapProps {
     iconClass?: string;
     iconMask?: string;
+    spanClass?: string;
 }
 export type { IIconProps, IIconWrapProps };

package/dist/types/components/info-sidebar/index.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from "react";
+import { IInfoSidebarProps } from "./types";
+declare const InfoSidebar: ({ actions, children, header, title, tabs, footer, }: Readonly<PropsWithChildren<IInfoSidebarProps>>) => JSX.Element;
+export { InfoSidebar };

package/dist/types/components/info-sidebar/types.d.ts

@@ -0,0 +1,32 @@
+import { IIconModifiable } from "components/@core";
+import { ITabProps } from "components/tabs/types";
+/**
+ * Button empty state props.
+ * @interface IButtonProps
+ * @extends IIconModifiable
+ * @property { string } [id] - Button id.
+ * @property { string } [text] - Button text.
+ * @property { Function } [onClick] - Button click handler.
+ */
+interface IButtonProps extends Partial<IIconModifiable> {
+    id?: string;
+    onClick?: () => void;
+    text?: string;
+}
+/**
+ * Info sidebar component props.
+ * @interface IInfoSidebarProps
+ * @property { IButtonProps[] } [actions] - Sidebar actions.
+ * @property { React.ReactNode } [header] - Sidebar header.
+ * @property { string } title - Sidebar title.
+ * @property { ITabProps[] } tabs - Sidebar tabs.
+ * @property { IButtonProps[] } [footer] - Sidebar footer.
+ */
+interface IInfoSidebarProps {
+    actions?: IButtonProps[];
+    header?: React.ReactNode;
+    title: string;
+    tabs: ITabProps[];
+    footer?: IButtonProps[];
+}
+export type { IInfoSidebarProps };

package/dist/types/components/inputs/fields/date/calendar/index.d.ts

@@ -1,4 +1,4 @@
-import type { CalendarStateOptions } from "@react-stately/calendar";
+import type { CalendarStateOptions } from "react-stately";
 declare const Calendar: ({ onClose, props, }: Readonly<{
     onClose: () => void;
     props: Omit<CalendarStateOptions, "createCalendar" | "locale">;

package/dist/types/components/inputs/fields/date/types.d.ts

@@ -1,8 +1,6 @@
-import type { AriaCalendarCellProps, AriaCalendarGridProps, CalendarAria } from "@react-aria/calendar";
-import type { DateValue } from "@react-aria/datepicker";
-import type { CalendarState, RangeCalendarState } from "@react-stately/calendar";
-import type { DatePickerStateOptions, DateRangePickerStateOptions } from "@react-stately/datepicker";
 import { InputHTMLAttributes } from "react";
+import type { AriaCalendarCellProps, AriaCalendarGridProps, CalendarAria, DateValue } from "react-aria";
+import type { CalendarState, DatePickerStateOptions, DateRangePickerStateOptions, RangeCalendarState } from "react-stately";
 /**
  * Calendar state props.
  * @interface ICalendarState

package/dist/types/components/inputs/fields/date-range/calendar/index.d.ts

@@ -1,4 +1,4 @@
-import type { RangeCalendarStateOptions } from "@react-stately/calendar";
+import type { RangeCalendarStateOptions } from "react-stately";
 declare const Calendar: ({ onClose, props, }: Readonly<{
     onClose: () => void;
     props: Omit<RangeCalendarStateOptions, "createCalendar" | "locale">;

package/dist/types/components/inputs/fields/date-time/calendar/index.d.ts

@@ -1,6 +1,5 @@
-import type { TimeValue } from "@react-aria/datepicker";
-import type { CalendarStateOptions } from "@react-stately/calendar";
-import type { DatePickerState } from "@react-stately/datepicker";
+import type { TimeValue } from "react-aria";
+import type { CalendarStateOptions, DatePickerState } from "react-stately";
 declare const Calendar: ({ handleTimeChange, onClose, props, timeState, }: Readonly<{
     handleTimeChange: (selectedValue: TimeValue | null) => void;
     onClose: () => void;

package/dist/types/components/inputs/utils/calendar-button/index.d.ts

@@ -1,5 +1,5 @@
 import type { IconName } from "@fortawesome/free-solid-svg-icons";
-import type { AriaButtonOptions } from "@react-aria/button";
+import type { AriaButtonOptions } from "react-aria";
 declare const Button: ({ disabled, icon, props, }: Readonly<{
     disabled?: boolean;
     icon: IconName;

package/dist/types/components/inputs/utils/dialog/index.d.ts

@@ -1,4 +1,4 @@
-import type { AriaDialogProps } from "@react-aria/dialog";
 import { PropsWithChildren } from "react";
+import type { AriaDialogProps } from "react-aria";
 declare const Dialog: ({ children, ...props }: Readonly<PropsWithChildren<AriaDialogProps>>) => JSX.Element;
 export { Dialog };

package/dist/types/components/inputs/utils/types.d.ts

@@ -1,8 +1,6 @@
-import type { AriaDatePickerProps, DatePickerAria, DateValue } from "@react-aria/datepicker";
-import type { AriaPopoverProps } from "@react-aria/overlays";
-import type { DateFieldState, DateFieldStateOptions, DateSegment, TimeFieldStateOptions } from "@react-stately/datepicker";
-import type { OverlayTriggerState } from "@react-stately/overlays";
 import type { Property } from "csstype";
+import type { AriaDatePickerProps, AriaPopoverProps, DatePickerAria, DateValue } from "react-aria";
+import type { DateFieldState, DateFieldStateOptions, DateSegment, OverlayTriggerState, TimeFieldStateOptions } from "react-stately";
 import { IBorderModifiable, IIconModifiable, IPaddingModifiable } from "components/@core";
 /**
  * Action button component props.

package/dist/types/components/priority-score/index.d.ts

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

package/dist/types/components/priority-score/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Priority score component props.
+ * @interface IPriorityScoreProps
+ * @property { number } score - The priority score.
+ */
+interface IPriorityScoreProps {
+    score: number;
+}
+export type { IPriorityScoreProps };

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

@@ -14,12 +14,12 @@ interface IVariant {
 /**
  * Severity badge component props.
  * @interface ISeverityBadgeProps
- * @property { string } textL - Left text of the badge.
+ * @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;
+    textL?: string;
     textR: string;
     variant: TSeverityBadgeVariant;
 }

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

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

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

@@ -0,0 +1,7 @@
+declare const StyledSlider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $min: number;
+    $value: number;
+}>> & string;
+declare const LimitValues: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Output: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OutputHTMLAttributes<HTMLOutputElement>, HTMLOutputElement>, never>> & string;
+export { StyledSlider, LimitValues, Output };

package/dist/types/components/slider/thumb/index.d.ts

@@ -0,0 +1,3 @@
+import { ISliderThumbProps } from "../types";
+declare const Thumb: ({ state, trackRef, index, }: Readonly<ISliderThumbProps>) => JSX.Element;
+export { Thumb };

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

@@ -0,0 +1,13 @@
+import type { AriaSliderThumbOptions } from "react-aria";
+import type { SliderState, SliderStateOptions } from "react-stately";
+/**
+ * Slider thumb component props.
+ * @interface  ISliderThumbProps
+ * @extends AriaSliderThumbOptions
+ * @property { SliderState } state - The slider state.
+ */
+interface ISliderThumbProps extends Omit<AriaSliderThumbOptions, "inputRef"> {
+    state: SliderState;
+}
+type TSliderProps = SliderStateOptions<number>;
+export type { ISliderThumbProps, TSliderProps };

package/dist/types/components/slider/utils.d.ts

@@ -0,0 +1,2 @@
+declare const normalizeValue: (min: number, max: number, value: number) => number;
+export { normalizeValue };

package/dist/types/index.d.ts

@@ -22,6 +22,7 @@ export * from "components/group-selector";
 export * from "components/icon";
 export * from "components/icon-button";
 export * from "components/indicator-card";
+export * from "components/info-sidebar";
 export * from "components/inputs";
 export * from "components/interactive-card";
 export * from "components/language-selector";
@@ -40,6 +41,7 @@ export * from "components/notification-sign";
 export * from "components/number-input";
 export * from "components/oauth-selector";
 export * from "components/premium-feature";
+export * from "components/priority-score";
 export * from "components/progress";
 export * from "components/pop-up";
 export * from "components/radio-button";
@@ -50,6 +52,7 @@ export * from "components/severity-badge";
 export * from "components/severity-overview";
 export * from "components/show-on-hover";
 export * from "components/slide-out-menu";
+export * from "components/slider";
 export * from "components/step-lapse";
 export * from "components/table-button";
 export * from "components/tabs";

package/package.json

@@ -4,8 +4,14 @@
     "url": "https://gitlab.com/fluidattacks/universe/issues"
   },
   "dependencies": {
+    "@internationalized/date": "3.6.0",
+    "@react-types/shared": "3.26.0",
     "react": "18.2.0",
+    "react-aria": "3.36.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "7.53.2",
+    "react-router-dom": "6.28.0",
+    "react-stately": "3.34.0",
     "styled-components": "6.1.13"
   },
   "description": "Fluidattacks core components library",
@@ -42,7 +48,7 @@
     "remark-gfm": "4.0.0",
     "rollup-plugin-visualizer": "5.12.0",
     "storybook": "8.4.7",
-    "stylelint": "16.11.0",
+    "stylelint": "16.12.0",
     "stylelint-config-standard": "36.0.1",
     "tailwindcss": "3.4.16",
     "typescript": "5.7.2",
@@ -55,6 +61,10 @@
       "plugin:storybook/recommended"
     ]
   },
+  "exports": {
+    ".": "./dist/index.js",
+    "./button": "./dist/button.js"
+  },
   "files": [
     "README.md",
     "dist"
@@ -73,26 +83,13 @@
     "@cloudinary/react": "1.13.1",
     "@cloudinary/url-gen": "1.21.0",
     "@floating-ui/react-dom": "2.1.2",
-    "@fortawesome/free-solid-svg-icons": "6.7.1",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@internationalized/date": "3.6.0",
-    "@react-aria/button": "3.11.0",
-    "@react-aria/calendar": "3.6.0",
-    "@react-aria/datepicker": "3.12.0",
-    "@react-aria/dialog": "3.5.20",
-    "@react-aria/i18n": "3.12.4",
-    "@react-aria/overlays": "3.24.0",
-    "@react-stately/calendar": "3.6.0",
-    "@react-stately/datepicker": "3.11.0",
-    "@react-stately/overlays": "3.6.12",
-    "@react-types/shared": "3.26.0",
     "dayjs": "1.11.13",
     "lottie-light-react": "2.4.0",
-    "motion": "11.13.5",
+    "motion": "11.15.0",
     "prismjs": "1.29.0",
-    "react-hook-form": "7.53.2",
     "react-international-phone": "4.3.0",
-    "react-router-dom": "6.28.0",
     "react-joyride": "2.9.3",
     "react-tooltip": "5.28.0"
   },
@@ -112,5 +109,5 @@
     "test-storybook": "test-storybook"
   },
   "types": "dist/types/index.d.ts",
-  "version": "2.7.0"
+  "version": "3.0.1"
 }