@fluidattacks/design 3.0.0 → 3.1.0

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

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

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

@@ -14,11 +14,9 @@ interface IAccordionItemProps {
 /**
  * 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;
 }
 /**

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

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

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

@@ -1,5 +1,4 @@
 import type { HTMLAttributes } from "react";
-type TVariant = "web" | "platform";
 /**
  * Checkbox props.
  * @interface ICheckboxProps
@@ -8,13 +7,11 @@ type TVariant = "web" | "platform";
  * @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 };
+export type { ICheckboxProps };

package/dist/types/components/inputs/fields/combobox/index.d.ts

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

package/dist/types/components/inputs/fields/combobox/option/index.d.ts

@@ -0,0 +1,3 @@
+import { IOptionProps } from "../types";
+declare const Option: <T extends object>({ item, state, }: Readonly<IOptionProps<T>>) => JSX.Element;
+export { Option };

package/dist/types/components/inputs/fields/combobox/styles.d.ts

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

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

@@ -0,0 +1,40 @@
+import type { Key } from "react-aria";
+import type { ComboBoxState } from "react-stately";
+import type { IOutlineContainerProps } from "../../types";
+/**
+ * Props for the item component.
+ * @interface IItem
+ * @property { string } name - The name of the item.
+ * @property { string } value - The value of the item.
+ */
+interface IItem {
+    name: string;
+    value: string;
+}
+/**
+ * Props for the option component.
+ * @interface IOptionProps
+ * @property { IItem } item - The item to be rendered as an option.
+ * @property { ComboBoxState<T> } state - The state of the ComboBox.
+ */
+interface IOptionProps<T> {
+    item: IItem;
+    state: ComboBoxState<T>;
+}
+/**
+ * Props for the Select component.
+ * @interface IComboBoxProps
+ * @property { boolean } [disabled] - Whether the Select is disabled.
+ * @property { string } name - The name of the Select.
+ * @property { IItem[] } items - The items to be rendered as options.
+ * @property { Function } onChange - The callback function to be called when the value of the Select changes.
+ * @property { string } value - The value of the Select.
+ */
+interface IComboBoxProps extends Partial<Omit<IOutlineContainerProps, "maxLength" | "value">> {
+    disabled?: boolean;
+    name: string;
+    items: IItem[];
+    onChange: (key: Key | null) => void;
+    value: string;
+}
+export type { IItem, IOptionProps, IComboBoxProps };

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/index.d.ts

@@ -1,3 +1,4 @@
+import { ComboBox } from "./fields/combobox";
 import { InputDate } from "./fields/date";
 import { InputDateRange } from "./fields/date-range";
 import { InputDateTime } from "./fields/date-time";
@@ -10,4 +11,4 @@ import { InputNumberRange } from "./fields/number-range";
 import { PhoneInput } from "./fields/phone";
 import { TextArea } from "./fields/text-area";
 import { OutlineContainer } from "./outline-container";
-export { OutlineContainer, PhoneInput, Input, InputDate, InputDateRange, InputDateTime, InputFile, InputNumber, InputTags, InputNumberRange, TextArea, Editable, };
+export { OutlineContainer, PhoneInput, ComboBox, Input, InputDate, InputDateRange, InputDateTime, InputFile, InputNumber, InputTags, InputNumberRange, TextArea, Editable, };

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/popover/index.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from "react";
 import type { IPopoverProps } from "../types";
-declare const Popover: ({ children, isFilter, state, ...props }: Readonly<PropsWithChildren<IPopoverProps>>) => JSX.Element;
+declare const Popover: ({ className, children, isFilter, popoverRef, state, triggerRef, ...props }: Readonly<PropsWithChildren<IPopoverProps>>) => JSX.Element;
 export { Popover };

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.
@@ -23,11 +21,15 @@ interface IActionButtonProps extends Pick<IIconModifiable, "icon">, IBorderModif
  * Popover component props.
  * @interface IPopoverProps
  * @extends AriaPopoverProps
+ * @property {string} [className] - The class name of the popover.
  * @property {boolean} [isFilter] - Indicates if the popover is a filter.
  * @property {OverlayTriggerState} state - The state of the overlay trigger.
+ * @property {RefObject} [popoverRef] - The ref of the popover.
  */
 interface IPopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
+    className?: string;
     isFilter?: boolean;
+    popoverRef?: React.MutableRefObject<HTMLDivElement | null>;
     state: OverlayTriggerState;
 }
 /**
@@ -38,21 +40,15 @@ interface IPopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
  * @property {string} [error] - The error message.
  * @property {React.MutableRefObject<null>} datePickerRef - The ref of the date picker.
  * @property {boolean} [disabled] - Indicates if the date selector is disabled.
- * @property {Function} [handleOnChange] - The function to be called when the date is changed.
  * @property {React.Ref<HTMLInputElement>} inputRef - The ref of the input.
- * @property {boolean} isOpen - Indicates if the date selector is open.
  * @property {string} name - The name of the date selector.
- * @property {string} [variant] - The variant of the date selector.
  */
 interface IDateSelectorProps extends Pick<DatePickerAria, "buttonProps" | "fieldProps" | "groupProps">, Pick<AriaDatePickerProps<DateValue>, "granularity"> {
     error?: string;
     datePickerRef: React.MutableRefObject<null>;
     disabled?: boolean;
-    handleOnChange?: (value: DateValue) => void;
     inputRef: React.Ref<HTMLInputElement>;
-    isOpen: boolean;
     name: string;
-    variant?: "range";
 }
 /**
  * Date segment component props.

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

@@ -1,6 +1,4 @@
-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;
-}>> & string;
+declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & 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;

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

@@ -1,5 +1,5 @@
-import type { AriaSliderThumbOptions } from "@react-aria/slider";
-import type { SliderState, SliderStateOptions } from "@react-stately/slider";
+import type { AriaSliderThumbOptions } from "react-aria";
+import type { SliderState, SliderStateOptions } from "react-stately";
 /**
  * Slider thumb component props.
  * @interface  ISliderThumbProps

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",
@@ -47,8 +53,7 @@
     "tailwindcss": "3.4.16",
     "typescript": "5.7.2",
     "typescript-eslint": "8.18.0",
-    "vite": "6.0.3",
-    "vite-plugin-css-injected-by-js": "3.5.2"
+    "vite": "6.0.3"
   },
   "eslintConfig": {
     "extends": [
@@ -56,8 +61,16 @@
     ]
   },
   "exports": {
-    ".": "./dist/index.js",
-    "./button": "./dist/button.js"
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./button": {
+      "types": "./dist/types/components/button/types.d.ts",
+      "import": "./dist/button.mjs",
+      "require": "./dist/button.js"
+    }
   },
   "files": [
     "README.md",
@@ -70,36 +83,20 @@
     "fluidattacks"
   ],
   "license": "MPL-2.0",
-  "main": "dist/index.mjs",
-  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "name": "@fluidattacks/design",
   "peerDependencies": {
     "@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/focus": "3.19.0",
-    "@react-aria/i18n": "3.12.4",
-    "@react-aria/overlays": "3.24.0",
-    "@react-aria/slider": "3.7.14",
-    "@react-stately/calendar": "3.6.0",
-    "@react-stately/datepicker": "3.11.0",
-    "@react-stately/overlays": "3.6.12",
-    "@react-stately/slider": "3.6.0",
-    "@react-types/shared": "3.26.0",
     "dayjs": "1.11.13",
     "lottie-light-react": "2.4.0",
     "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"
   },
@@ -118,6 +115,6 @@
     "storybook": "storybook dev",
     "test-storybook": "test-storybook"
   },
-  "types": "dist/types/index.d.ts",
-  "version": "3.0.0"
+  "typings": "dist/types/index.d.ts",
+  "version": "3.1.0"
 }