pixel-react 1.1.2 → 1.1.3

package/lib/components/Paper/Paper.d.ts

@@ -0,0 +1,4 @@
+import './Paper.scss';
+import { PaperProps } from './types';
+declare const Paper: ({ children, className, rounded }: PaperProps) => import("react/jsx-runtime").JSX.Element;
+export default Paper;

package/lib/components/Paper/Paper.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Paper from './Paper';
+import './Paper.scss';
+declare const meta: Meta<typeof Paper>;
+type Story = StoryObj<typeof Paper>;
+export declare const Default: Story;
+export declare const PrimaryPaper: Story;
+export declare const PaperWithLowShadow: Story;
+export declare const PaperWithHighShadow: Story;
+export declare const PaperWithRounded: Story;
+export default meta;

package/lib/components/Paper/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Paper';

package/lib/components/Paper/types.d.ts

@@ -0,0 +1,15 @@
+export 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;
+}

package/lib/components/VariableInput/VariableInput.d.ts

@@ -0,0 +1,4 @@
+import './VariableInput.scss';
+import { VariableInputProps } from './types';
+declare const VariableInput: ({ type, name, label, disabled, required, placeholder, value, error, className, onChange, onKeyDown, onBlur, onFocus, list, ...props }: VariableInputProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableInput;

package/lib/components/VariableInput/VariableInput.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import VariableInput from './VariableInput';
+declare const meta: Meta<typeof VariableInput>;
+type Story = StoryObj<typeof VariableInput>;
+export declare const Default: Story;
+export default meta;

package/lib/components/VariableInput/index.d.ts

@@ -0,0 +1 @@
+export { default } from './VariableInput';

package/lib/components/VariableInput/types.d.ts

@@ -0,0 +1,53 @@
+export 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[];
+}

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

@@ -1462,6 +1462,62 @@ 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 {
@@ -1504,6 +1560,24 @@ 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;
@@ -1575,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, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DragAndDrop, Drawer, ExpandableMenu, FileDropzone, Form, HighlightText, Icon, IconButton, Input, InputWithDropdown, MenuOption, MiniModal, Modal, MultiSelect, NlpInput as NLPInput, PieChart, 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 };