@kwantis-id3/frontend-library 0.20.1-rc.0 → 0.20.2

package/dist/esm/types/components/Accordion/Accordion.d.ts

@@ -4,19 +4,35 @@ import React from "react";
 import { Theme } from "@emotion/react";
 import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
 export type AccordionProps = {
+    /** Text of the accordion trigger */
     title: string;
+    /** Content of the accordion */
     children: React.ReactNode;
+    /** Custom trigger component */
     customTrigger?: React.ReactNode;
+    /** Works only if uncontrolled (isOpen props is not present) */
+    defaultOpen?: boolean;
+    /** Color of the accordion */
     color?: ThemeColorsExtended;
+    /** Color of the icon */
     iconColor?: ThemeColorsExtended;
+    /** Color of the divider */
     dividerColor?: ThemeColorsExtended;
+    /** Hide the icon */
     hideIcon?: boolean;
+    /** Hide the divider */
     hideDivider?: boolean;
+    /** Pass your state value here if the Accordion needs to be Controlled */
     isOpen?: boolean;
+    /** Lazy render the content of the accordion */
     isLazy?: boolean;
+    /** onClick handler */
     onClick?: () => void;
+    /** onOpen handler */
     onOpen?: () => void;
+    /** onClose handler */
     onClose?: () => void;
+    /** Custom styles */
     sx?: Interpolation<Theme>;
 };
 export declare const Accordion: (props: AccordionProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/esm/types/components/Button/Button.d.ts

@@ -5,14 +5,22 @@ import { Interpolation } from "@emotion/styled";
 import { Theme } from "@emotion/react";
 export type ButtonVariants = "contained" | "outlined" | "text";
 export type ButtonProps = {
+    /** Color of the button */
     color?: ThemeColorsExtended;
+    /** Type of the button */
     type?: "button" | "submit" | "reset";
+    /** Custom styles */
     sx?: Interpolation<Theme>;
+    /** Variant of the button, either `contained`, `outlined` or `text` */
     variant?: ButtonVariants;
+    /** onClick handler */
     onClick?: () => void;
     className?: string;
+    /** HTML id */
     htmlId?: string;
+    /** Disabled state */
     disabled?: boolean;
+    /** Elements to render as children */
     children?: React.ReactNode;
 };
 export declare const Button: (props: ButtonProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/esm/types/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,12 @@
 import React from "react";
 import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
+/**
+ * @property {string} value - The value displayed in the dropdown item
+ * @property {ThemeColorsExtended} color - The color of the dropdown item
+ * @property {string} textColor - The text color of the dropdown item
+ * @property {DropdownItem[]} children - The children of the dropdown item
+ * @property {() => void} onClick - The onClick handler of the dropdown item
+ */
 export type DropdownItem = {
     value: string;
     color?: ThemeColorsExtended;
@@ -8,11 +15,17 @@ export type DropdownItem = {
     onClick?: () => void;
 };
 export type DropdownProps = {
+    /** The content of the dropdown */
     content: DropdownItem[];
+    /** The trigger element of the dropdown. Clicking on this item will open the dropdown */
     trigger: React.ReactNode;
+    /** The color of the dropdown */
     color?: ThemeColorsExtended;
+    /** The hover color of the dropdown */
     hoverColor?: ThemeColorsExtended;
+    /** Controls wether the dropdown should extend towards the left or the right */
     direction?: "left" | "right";
+    /** The mobile breakpoint, by default it's 768px */
     mobileBreakpoint?: number;
 };
 export declare const DropdownDesktop: (props: DropdownProps) => JSX.Element;

package/dist/esm/types/components/InputField/InputField.d.ts

@@ -2,20 +2,30 @@
 import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
 export type TInputType = "text" | "number" | "password" | "email" | "image" | "search" | "tel" | "url" | "date" | "datetime-local" | "month" | "week" | "time" | "color";
 interface TextFieldProps {
+    /** The value of the input */
     value?: string | number;
+    /** The name of the input */
     name?: string;
+    /** The onChange handler of the input */
     onChange?: (value: string) => void;
+    /** The placeholder of the input */
     placeholder?: string;
+    /** The HTML id of the input */
     htmlId?: string;
+    /** Classname given to the container div */
     containerClassName?: string;
+    /** Classname of the input element */
     className?: string;
+    /** Disables the input */
     isDisabled?: boolean;
+    /** The color of the input */
     color?: ThemeColorsExtended;
     required?: boolean;
     pattern?: string;
     readonly?: boolean;
     autoFocus?: boolean;
     list?: string;
+    /** The type of the input (only string or number based inputs are currently supported) */
     type?: TInputType;
 }
 export declare const InputField: (props: TextFieldProps) => JSX.Element;

package/dist/esm/types/components/Modal/Modal.d.ts

@@ -1,8 +1,12 @@
 import React from "react";
 interface ModalProps {
+    /** The content of the modal */
     children: React.ReactNode;
+    /** The state of the modal */
     isOpen: boolean;
+    /** The handler to change the state of the modal */
     setIsOpen: (isOpen: boolean) => void;
+    /** The handler to be called when the modal is closed */
     onClose?: () => void;
 }
 declare const Modal: React.FC<ModalProps>;

package/dist/esm/types/components/SelectFilter/MultiSelect.d.ts

@@ -4,21 +4,41 @@ export interface MultiSelectProps<Option = {
     label: string;
     value: string;
 }> {
+    /** The options of the select, an array of objects `{ label: string; value: string }` */
     options: Option[];
+    /** The onChange handler of the select */
     onChange?: (option: Option[] | null) => void;
+    /** The value of the select */
     value?: readonly Option[] | null;
+    /** The name of the select */
     name?: string;
+    /** The placeholder of the select */
     placeholder?: string;
+    /** Disables the select */
     isDisabled?: boolean;
+    /** Wether the select should be clearable */
     isClearable?: boolean;
+    /** Wether the select should be searchable */
     isSearchable?: boolean;
+    /**
+     * A function that returns a boolean indicating wether the option should be disabled
+     * @param option - The option to check
+     * @returns boolean - true if the option should be disabled, false otherwise
+     */
     isOptionDisabled?: (option: Option) => boolean;
+    /** Wether the select is loading */
     isLoading?: boolean;
+    /** The color of the select */
     color?: ThemeColorsExtended;
+    /** The HTML id of the container */
     containerId?: string;
+    /** The HTML id of the select */
     htmlId?: string;
+    /** The class name of the select */
     className?: string;
+    /** The position of the menu */
     menuPosition?: "fixed" | "absolute";
+    /** Wether the select is required */
     required?: boolean;
 }
 export declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => JSX.Element;

package/dist/esm/types/components/SelectFilter/SingleSelect.d.ts

@@ -4,22 +4,43 @@ export interface SingleSelectProps<Option = {
     label: string;
     value: string;
 }> {
+    /** The options of the select, an array of objects `{ label: string; value: string }` */
     options: Option[];
+    /** The onChange handler of the select */
     onChange?: (option: Option | null) => void;
+    /** The value of the select */
     value?: Option | null;
+    /** The name of the select */
     name?: string;
+    /** The placeholder of the select */
     placeholder?: string;
+    /** Disables the select */
     isDisabled?: boolean;
+    /** Wether the select should be clearable */
     isClearable?: boolean;
+    /** Wether the select should be searchable */
     isSearchable?: boolean;
+    /**
+     * A function that returns a boolean indicating wether the option should be disabled
+     * @param option - The option to check
+     * @returns boolean - true if the option should be disabled, false otherwise
+     */
     isOptionDisabled?: (option: Option) => boolean;
+    /** Wether the select is loading */
     isLoading?: boolean;
+    /** The color of the select */
     color?: ThemeColorsExtended;
+    /** The HTML id of the container */
     containerId?: string;
+    /** The HTML id of the select */
     htmlId?: string;
+    /** The class name of the select */
     className?: string;
+    /** The class name of the input */
     inputClassName?: string;
+    /** The position of the menu */
     menuPosition?: "fixed" | "absolute";
+    /** Wether the select is required */
     required?: boolean;
 }
 export declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => JSX.Element;

package/dist/esm/types/components/Slider/Slider.d.ts

@@ -1,20 +1,35 @@
 /// <reference types="react" />
 import { ThemeColorsExtended } from "../ThemeContext/ThemeContext";
 export type SliderProps = {
+    /** The values of the slider. */
     values: number[];
+    /** The minimum value of the slider. */
     min?: number;
+    /** The maximum value of the slider. */
     max?: number;
+    /** The onChange handler of the slider (called each time the thumb moves of one position) */
     onChange: (values: number[]) => void;
+    /** The onFinalChange handler of the slider. (called only when the thumb is released) */
     onFinalChange?: (values: number[]) => void;
+    /** The color of the slider */
     color?: ThemeColorsExtended;
+    /** The color of the section not included in the range */
     unselectedColor?: ThemeColorsExtended;
+    /** The color of the thumb */
     thumbColor?: ThemeColorsExtended;
+    /** The HTML id of the slider */
     htmlId?: string;
+    /** The class name of the slider */
     className?: string;
+    /** Wether the thumb value should be displayed */
     showThumbValue?: boolean;
+    /** Wether the min and max values should be calculated automatically based on the values */
     autoCalculateMinMax?: boolean;
+    /** The step of the slider. Defaults to 1 */
     step?: number;
+    /** Disables the slider */
     disabled?: boolean;
+    /** Wether the thumbs can overlap */
     allowOverlap?: boolean;
 };
 export declare const Slider: (props: SliderProps) => JSX.Element;

package/dist/index.d.ts

@@ -42,52 +42,86 @@ declare const useThemeContext: () => ThemeProperties;
 
 type ButtonVariants = "contained" | "outlined" | "text";
 type ButtonProps = {
+    /** Color of the button */
     color?: ThemeColorsExtended;
+    /** Type of the button */
     type?: "button" | "submit" | "reset";
+    /** Custom styles */
     sx?: Interpolation<Theme>;
+    /** Variant of the button, either `contained`, `outlined` or `text` */
     variant?: ButtonVariants;
+    /** onClick handler */
     onClick?: () => void;
     className?: string;
+    /** HTML id */
     htmlId?: string;
+    /** Disabled state */
     disabled?: boolean;
+    /** Elements to render as children */
     children?: React$1.ReactNode;
 };
 declare const Button: (props: ButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type AccordionProps = {
+    /** Text of the accordion trigger */
     title: string;
+    /** Content of the accordion */
     children: React__default.ReactNode;
+    /** Custom trigger component */
     customTrigger?: React__default.ReactNode;
+    /** Works only if uncontrolled (isOpen props is not present) */
+    defaultOpen?: boolean;
+    /** Color of the accordion */
     color?: ThemeColorsExtended;
+    /** Color of the icon */
     iconColor?: ThemeColorsExtended;
+    /** Color of the divider */
     dividerColor?: ThemeColorsExtended;
+    /** Hide the icon */
     hideIcon?: boolean;
+    /** Hide the divider */
     hideDivider?: boolean;
+    /** Pass your state value here if the Accordion needs to be Controlled */
     isOpen?: boolean;
+    /** Lazy render the content of the accordion */
     isLazy?: boolean;
+    /** onClick handler */
     onClick?: () => void;
+    /** onOpen handler */
     onOpen?: () => void;
+    /** onClose handler */
     onClose?: () => void;
+    /** Custom styles */
     sx?: Interpolation<Theme>;
 };
 declare const Accordion: (props: AccordionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 type TInputType = "text" | "number" | "password" | "email" | "image" | "search" | "tel" | "url" | "date" | "datetime-local" | "month" | "week" | "time" | "color";
 interface TextFieldProps {
+    /** The value of the input */
     value?: string | number;
+    /** The name of the input */
     name?: string;
+    /** The onChange handler of the input */
     onChange?: (value: string) => void;
+    /** The placeholder of the input */
     placeholder?: string;
+    /** The HTML id of the input */
     htmlId?: string;
+    /** Classname given to the container div */
     containerClassName?: string;
+    /** Classname of the input element */
     className?: string;
+    /** Disables the input */
     isDisabled?: boolean;
+    /** The color of the input */
     color?: ThemeColorsExtended;
     required?: boolean;
     pattern?: string;
     readonly?: boolean;
     autoFocus?: boolean;
     list?: string;
+    /** The type of the input (only string or number based inputs are currently supported) */
     type?: TInputType;
 }
 declare const InputField: (props: TextFieldProps) => JSX.Element;
@@ -96,22 +130,43 @@ interface SingleSelectProps<Option = {
     label: string;
     value: string;
 }> {
+    /** The options of the select, an array of objects `{ label: string; value: string }` */
     options: Option[];
+    /** The onChange handler of the select */
     onChange?: (option: Option | null) => void;
+    /** The value of the select */
     value?: Option | null;
+    /** The name of the select */
     name?: string;
+    /** The placeholder of the select */
     placeholder?: string;
+    /** Disables the select */
     isDisabled?: boolean;
+    /** Wether the select should be clearable */
     isClearable?: boolean;
+    /** Wether the select should be searchable */
     isSearchable?: boolean;
+    /**
+     * A function that returns a boolean indicating wether the option should be disabled
+     * @param option - The option to check
+     * @returns boolean - true if the option should be disabled, false otherwise
+     */
     isOptionDisabled?: (option: Option) => boolean;
+    /** Wether the select is loading */
     isLoading?: boolean;
+    /** The color of the select */
     color?: ThemeColorsExtended;
+    /** The HTML id of the container */
     containerId?: string;
+    /** The HTML id of the select */
     htmlId?: string;
+    /** The class name of the select */
     className?: string;
+    /** The class name of the input */
     inputClassName?: string;
+    /** The position of the menu */
     menuPosition?: "fixed" | "absolute";
+    /** Wether the select is required */
     required?: boolean;
 }
 declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => JSX.Element;
@@ -120,44 +175,86 @@ interface MultiSelectProps<Option = {
     label: string;
     value: string;
 }> {
+    /** The options of the select, an array of objects `{ label: string; value: string }` */
     options: Option[];
+    /** The onChange handler of the select */
     onChange?: (option: Option[] | null) => void;
+    /** The value of the select */
     value?: readonly Option[] | null;
+    /** The name of the select */
     name?: string;
+    /** The placeholder of the select */
     placeholder?: string;
+    /** Disables the select */
     isDisabled?: boolean;
+    /** Wether the select should be clearable */
     isClearable?: boolean;
+    /** Wether the select should be searchable */
     isSearchable?: boolean;
+    /**
+     * A function that returns a boolean indicating wether the option should be disabled
+     * @param option - The option to check
+     * @returns boolean - true if the option should be disabled, false otherwise
+     */
     isOptionDisabled?: (option: Option) => boolean;
+    /** Wether the select is loading */
     isLoading?: boolean;
+    /** The color of the select */
     color?: ThemeColorsExtended;
+    /** The HTML id of the container */
     containerId?: string;
+    /** The HTML id of the select */
     htmlId?: string;
+    /** The class name of the select */
     className?: string;
+    /** The position of the menu */
     menuPosition?: "fixed" | "absolute";
+    /** Wether the select is required */
     required?: boolean;
 }
 declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => JSX.Element;
 
 type SliderProps = {
+    /** The values of the slider. */
     values: number[];
+    /** The minimum value of the slider. */
     min?: number;
+    /** The maximum value of the slider. */
     max?: number;
+    /** The onChange handler of the slider (called each time the thumb moves of one position) */
     onChange: (values: number[]) => void;
+    /** The onFinalChange handler of the slider. (called only when the thumb is released) */
     onFinalChange?: (values: number[]) => void;
+    /** The color of the slider */
     color?: ThemeColorsExtended;
+    /** The color of the section not included in the range */
     unselectedColor?: ThemeColorsExtended;
+    /** The color of the thumb */
     thumbColor?: ThemeColorsExtended;
+    /** The HTML id of the slider */
     htmlId?: string;
+    /** The class name of the slider */
     className?: string;
+    /** Wether the thumb value should be displayed */
     showThumbValue?: boolean;
+    /** Wether the min and max values should be calculated automatically based on the values */
     autoCalculateMinMax?: boolean;
+    /** The step of the slider. Defaults to 1 */
     step?: number;
+    /** Disables the slider */
     disabled?: boolean;
+    /** Wether the thumbs can overlap */
     allowOverlap?: boolean;
 };
 declare const Slider: (props: SliderProps) => JSX.Element;
 
+/**
+ * @property {string} value - The value displayed in the dropdown item
+ * @property {ThemeColorsExtended} color - The color of the dropdown item
+ * @property {string} textColor - The text color of the dropdown item
+ * @property {DropdownItem[]} children - The children of the dropdown item
+ * @property {() => void} onClick - The onClick handler of the dropdown item
+ */
 type DropdownItem = {
     value: string;
     color?: ThemeColorsExtended;
@@ -166,19 +263,29 @@ type DropdownItem = {
     onClick?: () => void;
 };
 type DropdownProps = {
+    /** The content of the dropdown */
     content: DropdownItem[];
+    /** The trigger element of the dropdown. Clicking on this item will open the dropdown */
     trigger: React__default.ReactNode;
+    /** The color of the dropdown */
     color?: ThemeColorsExtended;
+    /** The hover color of the dropdown */
     hoverColor?: ThemeColorsExtended;
+    /** Controls wether the dropdown should extend towards the left or the right */
     direction?: "left" | "right";
+    /** The mobile breakpoint, by default it's 768px */
     mobileBreakpoint?: number;
 };
 declare const Dropdown: (props: DropdownProps) => JSX.Element;
 
 interface ModalProps {
+    /** The content of the modal */
     children: React__default.ReactNode;
+    /** The state of the modal */
     isOpen: boolean;
+    /** The handler to change the state of the modal */
     setIsOpen: (isOpen: boolean) => void;
+    /** The handler to be called when the modal is closed */
     onClose?: () => void;
 }
 declare const Modal: React__default.FC<ModalProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwantis-id3/frontend-library",
-  "version": "0.20.1-rc.0",
+  "version": "0.20.2",
   "description": "Kwantis frontend components collection",
   "scriptsComments": {
     "storybook": "Starts storybook in development mode",