pixel-react 1.1.1 → 1.1.3

package/lib/index.css

@@ -0,0 +1,404 @@
+.button {
+  background-color: #71347b;
+}
+.ff-icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.ff-icon-click {
+  cursor: pointer;
+  padding: 5px;
+  box-sizing: content-box;
+}
+.ff-icon-click:hover {
+  border-radius: 50%;
+  background-color: #ffffff;
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2509803922);
+}
+.ff-icon-click:hover > svg {
+  color: #71347b;
+}
+
+.ff-icon-disabled {
+  cursor: no-drop;
+}
+.ff-icon-disabled > svg {
+  color: #cfd1e2;
+}
+.ff-icon-disabled:hover {
+  box-shadow: none;
+}
+.ff-icon-disabled:hover > svg {
+  color: #cfd1e2;
+}
+@font-face {
+  font-family: "Montserrat-Medium", sans-serif;
+  src: local("Montserrat-Medium"), url(../../fonts/Montserrat/Montserrat-Medium.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Montserrat-SemiBold", sans-serif;
+  src: local("Montserrat-SemiBold"), url(../../fonts/Montserrat/Montserrat-SemiBold.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-Regular";
+  src: local("Poppins-Regular"), url(../../fonts/Poppins/Poppins-Regular.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-Medium";
+  src: local("Poppins-Medium"), url(../../fonts/Poppins/Poppins-Medium.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-SemiBold";
+  src: local("Poppins-SemiBold"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format("truetype");
+}
+@font-face {
+  font-family: "Poppins-Bold";
+  src: local("Poppins-Bold"), url(../../fonts/Poppins/Poppins-Bold.ttf) format("truetype");
+}
+.fontPoppinsRegularXLg {
+  font-family: Poppins-Regular !important;
+  font-size: 18px !important;
+}
+
+.fontPoppinsRegularLg {
+  font-family: Poppins-Regular !important;
+  font-size: 16px !important;
+}
+
+.fontPoppinsRegularMd {
+  font-family: Poppins-Regular !important;
+  font-size: 14px !important;
+}
+
+.fontPoppinsRegularSm {
+  font-family: Poppins-Regular !important;
+  font-size: 12px !important;
+}
+
+.fontPoppinsRegularXs {
+  font-family: Poppins-Regular !important;
+  font-size: 10px !important;
+}
+
+.fontPoppinsRegularXs8px {
+  font-family: Poppins-Regular !important;
+  font-size: 8px !important;
+}
+
+.fontPoppinsRegularXs9px {
+  font-family: Poppins-Regular !important;
+  font-size: 9px !important;
+}
+
+.fontPoppinsMediumPageSubHeader {
+  font-family: Poppins-Medium !important;
+  font-size: 26px !important;
+}
+
+.fontPoppinsMediumXX2 {
+  font-family: Poppins-Medium !important;
+  font-size: 22px !important;
+}
+
+.fontPoppinsMediumXXlg {
+  font-family: Poppins-Medium !important;
+  font-size: 20px !important;
+}
+
+.fontPoppinsMediumXXlg {
+  font-family: Poppins-Medium !important;
+  font-size: 20px !important;
+}
+
+.fontPoppinsMediumLg {
+  font-family: Poppins-Medium !important;
+  font-size: 16px !important;
+}
+
+.fontPoppinsMediumMd {
+  font-family: Poppins-Medium !important;
+  font-size: 14px !important;
+}
+
+.fontPoppinsMediumSm {
+  font-family: Poppins-Medium !important;
+  font-size: 12px !important;
+}
+
+.fontPoppinsMediumSm11 {
+  font-family: Poppins-Medium !important;
+  font-size: 11px !important;
+}
+
+.fontPoppinsMediumXs {
+  font-family: Poppins-Medium !important;
+  font-size: 10px !important;
+}
+
+.fontPoppinsMediumXs8px {
+  font-family: Poppins-Medium !important;
+  font-size: 8px !important;
+}
+
+.fontPoppinsMediumXs8px {
+  font-family: Poppins-Medium !important;
+  font-size: 8px !important;
+}
+
+.fontPoppinsSemibold-size-50 {
+  font-family: Poppins-SemiBold !important;
+  font-size: 50px !important;
+}
+
+.fontPoppinsSemibold-size-42 {
+  font-family: Poppins-SemiBold !important;
+  font-size: 42px !important;
+}
+
+.fontPoppinsSemiboldPageHeader {
+  font-family: Poppins-SemiBold !important;
+  font-size: 36px !important;
+}
+
+.fontPoppinsSemiboldAlertHeader {
+  font-family: Poppins-SemiBold !important;
+  font-size: 32px !important;
+}
+
+.fontPoppinsSemibold-size-28 {
+  font-family: Poppins-SemiBold !important;
+  font-size: 28px !important;
+}
+
+.fontPoppinsSemibold-size-26 {
+  font-family: Poppins-SemiBold !important;
+  font-size: 26px !important;
+}
+
+.fontPoppinsSemiboldPageSubHeader {
+  font-family: Poppins-SemiBold !important;
+  font-size: 24px !important;
+}
+
+.fontPoppinsSemiboldXX2 {
+  font-family: Poppins-SemiBold !important;
+  font-size: 22px !important;
+}
+
+.fontPoppinsSemiboldXXlg {
+  font-family: Poppins-SemiBold !important;
+  font-size: 20px !important;
+}
+
+.fontPoppinsSemiboldXlg {
+  font-family: Poppins-SemiBold !important;
+  font-size: 18px !important;
+}
+
+.fontPoppinsSemiboldLg {
+  font-family: Poppins-SemiBold !important;
+  font-size: 16px !important;
+}
+
+.fontPoppinsSemiboldMd {
+  font-family: Poppins-SemiBold !important;
+  font-size: 14px !important;
+}
+
+.fontPoppinsSemiboldSm {
+  font-family: Poppins-SemiBold !important;
+  font-size: 12px !important;
+}
+
+.fontPoppinsSemiboldSm11 {
+  font-family: Poppins-SemiBold !important;
+  font-size: 11px !important;
+}
+
+.fontPoppinsSemiboldXs {
+  font-family: Poppins-SemiBold !important;
+  font-size: 10px !important;
+}
+
+.fontPoppinsSemiboldXs9px {
+  font-family: Poppins-SemiBold !important;
+  font-size: 9px !important;
+}
+
+.fontPoppinsSemiboldXs8px {
+  font-family: Poppins-Medium !important;
+  font-size: 8px !important;
+}
+
+.fontPoppinsSemiboldXXs {
+  font-family: Poppins-SemiBold !important;
+  font-size: 8px !important;
+}
+
+.fontMontserratMediumXs {
+  font-family: Montserrat-Medium, sans-serif !important;
+  font-size: 10px !important;
+}
+
+.fontMontserratMediumSm {
+  font-family: Montserrat-Medium, sans-serif !important;
+  font-size: 12px !important;
+}
+
+.fontMontserratMediumMd {
+  font-family: Montserrat-Medium, sans-serif !important;
+  font-size: 14px !important;
+}
+
+.fontMontserratSemiboldXs {
+  font-family: Montserrat-SemiBold, sans-serif !important;
+  font-size: 10px !important;
+}
+
+.fontMontserratSemiboldSm {
+  font-family: Montserrat-SemiBold, sans-serif !important;
+  font-size: 12px !important;
+}
+
+.fontMontserratSemiboldMd {
+  font-family: Montserrat-SemiBold, sans-serif !important;
+  font-size: 14px !important;
+}
+
+.fontMontserratSemiboldLg {
+  font-family: Montserrat-SemiBold, sans-serif !important;
+  font-size: 16px !important;
+}
+
+.ff--switch-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.ff--switch-container:disabled {
+  opacity: 0.7;
+  cursor: no-drop;
+}
+.ff--switch-container .ff--switch-checkbox {
+  height: 0;
+  width: 0;
+  display: none;
+}
+.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {
+  left: calc(100% - 19px);
+  right: -1px;
+  border: 1px solid #71347b;
+  background: #ffffff;
+  transition: all 0.3s;
+  box-shadow: 0px 0px 2px 0px #141a60;
+}
+.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-check-symbol {
+  height: 6px;
+  width: 3px;
+  border-bottom: 2px solid #71347b;
+  border-right: 2px solid #71347b;
+  transform: rotate(45deg);
+  border-bottom-right-radius: 2px;
+  animation: checkmark 0.2s forwards;
+  transition: all 0.1s;
+}
+.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {
+  background: #71347b;
+  transition: all 0.3s;
+}
+.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {
+  cursor: default;
+  color: rgba(113, 52, 123, 0.5019607843);
+  background: rgba(113, 52, 123, 0.5019607843);
+}
+.ff--switch-container .ff--switch-checkbox:disabled {
+  cursor: no-drop;
+}
+.ff--switch-container .ff--switch-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  border-radius: 8px;
+  position: relative;
+  background: #cfd1e2;
+  transition: all 0.3s;
+}
+.ff--switch-container .ff--switch-label--disabled {
+  opacity: 0.5;
+  cursor: no-drop;
+}
+.ff--switch-container .ff--switch-label .ff--switch-button {
+  position: absolute;
+  left: 0;
+  width: 20px;
+  height: 20px;
+  border: 1px solid #cfd1e2;
+  display: flex;
+  background: #ffffff;
+  border-radius: 50%;
+  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2509803922);
+  transition: all 0.3s;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol {
+  width: 8px;
+  height: 8px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol .ff-cross-line {
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background-color: #aeb0c0;
+  transition: all 0.3s;
+  animation: crossmark 0.2s forwards;
+}
+.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol .ff-cross-line:first-child {
+  transform: rotate(45deg);
+}
+.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol .ff-cross-line:last-child {
+  transform: rotate(-45deg);
+}
+.ff--switch-container .default {
+  width: 32px;
+  height: 14px;
+}
+@keyframes checkmark {
+  0% {
+    height: 0;
+    width: 0;
+    opacity: 0;
+  }
+  50% {
+    height: 3px;
+    width: 3px;
+    opacity: 1;
+  }
+  100% {
+    height: 6px;
+    width: 3px;
+    opacity: 1;
+  }
+}
+@keyframes crossmark {
+  0% {
+    width: 0;
+    opacity: 0;
+  }
+  50% {
+    width: 50%;
+    opacity: 1;
+  }
+  100% {
+    width: 100%;
+    opacity: 1;
+  }
+}

package/lib/index.d.ts

@@ -204,20 +204,20 @@ interface AccordionProps {
  */
 declare const Accordion: ({ headerTitle, color, minHeight, accordionContent, disable, disableInfoMessage, }: AccordionProps) => react_jsx_runtime.JSX.Element;
 
-interface Option$2 {
+interface Option$3 {
     label?: string;
     value?: string;
     accessor?: string;
     isChecked?: boolean;
 }
 interface MultiSelectProps {
-    options: Option$2[];
+    options: Option$3[];
     type?: 'email' | 'text';
     label: string;
-    selectedOptions?: Option$2[];
+    selectedOptions?: Option$3[];
     disabled?: boolean;
-    onSearch?: (searchedKeyword: string) => void;
-    onChange?: (selectedOptions: Option$2[]) => void;
+    onSearch?: (searchedKeyword: string, resultsLength: number) => void;
+    onChange?: (selectedOptions: Option$3[]) => void;
     acceptNewOption?: boolean;
     zIndex?: number;
     required?: boolean;
@@ -227,7 +227,7 @@ interface MultiSelectProps {
     displayCount?: boolean;
 }
 
-declare const MultiSelect: ({ options, type, selectedOptions, onChange, acceptNewOption, zIndex, label, onSearch, required, disabled, errorMessage, withSelectButton, onSelect, displayCount }: MultiSelectProps) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: ({ options, type, selectedOptions, onChange, acceptNewOption, zIndex, label, onSearch, required, disabled, errorMessage, withSelectButton, onSelect, displayCount, }: MultiSelectProps) => react_jsx_runtime.JSX.Element;
 
 interface ToasterProps {
     /**Boolean value to handle state of toaster. */
@@ -561,12 +561,12 @@ interface ExpandableMenuProps {
 
 declare const ExpandableMenu: React.FC<ExpandableMenuProps>;
 
-interface SelectProps {
+interface SelectProps$1 {
     label?: string;
     showLabel?: boolean;
-    optionsList: Option$1[];
-    selectedOption?: Option$1;
-    onChange: (option: Option$1) => void;
+    optionsList: Option$2[];
+    selectedOption?: Option$2;
+    onChange: (option: Option$2) => void;
     errorMsg?: string;
     className?: string;
     optionZIndex?: number;
@@ -579,13 +579,13 @@ interface SelectProps {
      */
     optionsRequired?: boolean;
 }
-interface Option$1 {
+interface Option$2 {
     label: string | ReactNode;
     value: string;
     disabled?: boolean;
 }
 
-declare const Select: ({ label, showLabel, optionsList, selectedOption, onChange, errorMsg, className, optionZIndex, disabled, borderRadius, showBorder, required, optionsRequired, }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const Select: ({ label, showLabel, optionsList, selectedOption, onChange, errorMsg, className, optionZIndex, disabled, borderRadius, showBorder, required, optionsRequired, }: SelectProps$1) => react_jsx_runtime.JSX.Element;
 
 interface TextareaProps {
     /**
@@ -880,7 +880,7 @@ interface TableProps {
     className?: string;
 }
 
-declare const Table: ({ data, columns, headerType, withFixedHeader, borderWithRadius, height, className, }: TableProps) => react_jsx_runtime.JSX.Element | null;
+declare const Table: ({ data, columns, headerType, withCheckbox, onSelect, allSelected, partialSelected, withFixedHeader, borderWithRadius, headerCheckboxDisabled, height, className, }: TableProps) => react_jsx_runtime.JSX.Element | null;
 
 /**
  * Props for the Add Resource Button component.
@@ -1060,7 +1060,7 @@ interface FormProps<T extends FieldValues> extends UseFormProps<T> {
 }
 declare const Form: <T extends FieldValues>({ onSubmit, children, ...rest }: FormProps<T>) => react_jsx_runtime.JSX.Element;
 
-interface Option {
+interface Option$1 {
     label: string | ReactNode;
     value: string;
 }
@@ -1108,11 +1108,11 @@ interface InputWithDropdownProps {
     /**
      * Options for the select dropdown
      */
-    optionsList: Option[];
+    optionsList: Option$1[];
     /**
      * Selected option for the select dropdown
      */
-    selectedOption?: Option;
+    selectedOption?: Option$1;
     /**
      * onChange handler for input changes
      */
@@ -1120,7 +1120,7 @@ interface InputWithDropdownProps {
     /**
      * onChange handler for dropdown changes
      */
-    onDropdownChangeHandler?: (option: Option) => void;
+    onDropdownChangeHandler?: (option: Option$1) => void;
     /**
      * onInputBlurHandler action for input field
      */
@@ -1462,8 +1462,76 @@ declare const DragAndDrop: {
     DNDUtilities: typeof DNDUtilities;
 };
 
+interface VariableInputProps {
+    /**
+     * Name | name of the input field
+     */
+    name: string;
+    /**
+     * Label | field label to be displayed
+     */
+    label: string;
+    /**
+     * value | input field value
+     */
+    value: string | null;
+    /**
+     * type to set color/style of the input field
+     */
+    type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+    /**
+     * error | If true, error message will be displayed
+     */
+    error?: boolean;
+    /**
+     * to disable the input field
+     */
+    disabled?: boolean;
+    /**
+     * if true, input field will be mandatory
+     */
+    required?: boolean;
+    /**
+     * placeholder for the input field
+     */
+    placeholder?: string;
+    /**
+     * classnames to style the input field
+     */
+    className?: string;
+    /**
+     * onChange, onKeyDown, onBlur, onFocus actions
+     */
+    onChange?: (value: string) => void | undefined;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * id to select the input field uniquely
+     */
+    id?: string;
+    /**
+     * list of variables
+     */
+    list?: string[];
+}
+
+declare const VariableInput: ({ type, name, label, disabled, required, placeholder, value, error, className, onChange, onKeyDown, onBlur, onFocus, list, ...props }: VariableInputProps) => react_jsx_runtime.JSX.Element;
+
 declare const AllProjectsDropdown: () => react_jsx_runtime.JSX.Element;
 
+interface PieChartProps {
+    radius: number;
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    colors: string[];
+    chartBorder: boolean;
+}
+
+declare const PieChart: React__default.FC<PieChartProps>;
+
 interface AppHeaderProps {
     logoIconName: string;
     rightContent: ReactNode;
@@ -1492,6 +1560,43 @@ interface appHeaderQuickMenuItemProps {
 
 declare const AppHeader: React.FC<AppHeaderProps>;
 
+interface PaperProps {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    className?: string;
+    /**
+     * If `true`, rounded corners are Enabled.
+     * @default false
+     */
+    rounded?: boolean;
+}
+
+declare const Paper: ({ children, className, rounded }: PaperProps) => react_jsx_runtime.JSX.Element;
+
+type ChartItem = {
+    key: string;
+    value: number;
+    color?: string;
+};
+type LegendType = 'numberLegend' | 'pillLegend' | 'memoryLegend' | 'tableLegend';
+type DashboardDonutChartProps = {
+    radius: number;
+    lineWidth: number;
+    statusValues: ChartItem[];
+    legendDetailsType: string;
+    isLegendDetails: boolean;
+    gapAngle?: number;
+    legendType: LegendType;
+    showOnlyLabel: boolean;
+};
+
+declare const DashboardDonutChart: React__default.FC<DashboardDonutChartProps>;
+
 interface RecaptchaProps extends Omit<ComponentProps<typeof ReCAPTCHA>, 'onChange'> {
     /**
      * Callback function that receives the verification token
@@ -1513,6 +1618,30 @@ interface RecaptchaProps extends Omit<ComponentProps<typeof ReCAPTCHA>, 'onChang
 
 declare const Recaptcha: React$1.ForwardRefExoticComponent<RecaptchaProps & React$1.RefAttributes<ReCAPTCHA>>;
 
+interface SelectProps {
+    label?: string;
+    showLabel?: boolean;
+    optionsList: any[];
+    selectedOption?: Option;
+    onChange: (option: Option) => void;
+    errorMsg?: string;
+    className?: string;
+    optionZIndex?: number;
+    disabled?: boolean;
+    borderRadius?: boolean;
+    showBorder?: boolean;
+    required?: boolean;
+}
+interface Option {
+    displayName: string | ReactNode;
+    projectId: string;
+    nlpType: string;
+    platform: string;
+    disabled?: boolean;
+}
+
+declare const NlpInput: ({ label, showLabel, optionsList, selectedOption, onChange, errorMsg, className, optionZIndex, disabled, borderRadius, showBorder, required, }: SelectProps) => react_jsx_runtime.JSX.Element;
+
 type valueType$1 = any;
 declare const checkEmpty: (value: valueType$1) => boolean;
 
@@ -1520,4 +1649,44 @@ type valueType = File | string;
 declare const getExtension: (value: valueType) => string | undefined;
 declare const getExtensionWithPeriod: (value: valueType) => string;
 
-export { Accordion, AddButton as AddResourceButton, AllProjectsDropdown, AppHeader, Button, Checkbox, Chip, Col, Container, CustomDatePicker as DatePicker, DonutChart, DragAndDrop, Drawer, ExpandableMenu, FileDropzone, Form, HighlightText, Icon, IconButton, Input, InputWithDropdown, MenuOption, MiniModal, Modal, MultiSelect, RadialChart, RadioButton, RadioGroup, Recaptcha, Row, Search, Select, StateDropdown, StatusButton, Table, TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toggle, Tooltip, Typography, checkEmpty, getExtension, getExtensionWithPeriod, useTheme };
+type AnyObject$1 = {
+    id: number;
+    [key: string]: any;
+};
+declare function findAndInsert<T extends AnyObject$1>(data: T[], key: keyof T, targetId: number, newEntry: T, insertPosition: 'above' | 'below' | 'replace', childrenKey?: string): {
+    updatedArray: T[];
+} | null;
+
+declare const ffid: () => string;
+
+type Callback$1 = (...args: any[]) => void;
+interface DebouncedFunction extends Function {
+    cancel: () => void;
+}
+declare const debounce: (func: Callback$1, delay: number) => DebouncedFunction;
+
+/**
+ * Compare two arrays for equality.
+ * This function checks if both arrays contain the same elements in the same order,
+ * including nested structures.
+ *
+ * @param arr1 - The first array to compare.
+ * @param arr2 - The second array to compare.
+ * @returns - A boolean indicating if the arrays are equal.
+ */
+declare const compareArrays: (arr1: unknown[], arr2: unknown[]) => boolean;
+
+type AnyObject = Record<string, unknown>;
+declare const compareObjects: (obj1: AnyObject | null, obj2: AnyObject | null) => boolean;
+
+declare const getEncryptedData: (data: string, publicKey: string) => string | false;
+
+type Callback = (...args: any[]) => void;
+interface ThrottledFunction extends Function {
+    cancel: () => void;
+}
+declare const throttle: (func: Callback, limit: number) => ThrottledFunction;
+
+declare const truncateText: (text: string, maxLength: number) => string;
+
+export { Accordion, AddButton as AddResourceButton, AllProjectsDropdown, AppHeader, Button, Checkbox, Chip, Col, Container, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DragAndDrop, Drawer, ExpandableMenu, FileDropzone, Form, HighlightText, Icon, IconButton, Input, InputWithDropdown, MenuOption, MiniModal, Modal, MultiSelect, NlpInput as NLPInput, Paper, PieChart, RadialChart, RadioButton, RadioGroup, Recaptcha, Row, Search, Select, StateDropdown, StatusButton, Table, TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toggle, Tooltip, Typography, VariableInput, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, throttle, truncateText, useTheme };