pixel-react 1.0.5 → 1.0.7

package/lib/StyleGuide/ColorPalette/types.d.ts

@@ -4,6 +4,7 @@ export interface ColorBoxProps {
     opacity?: number;
     dropShadow?: string;
     border?: string;
+    variable?: string;
 }
 export interface Color {
     name: string;
@@ -11,5 +12,6 @@ export interface Color {
     opacity?: number;
     dropShadow?: string;
     border?: string;
+    variable?: string;
 }
 export type ColorPaletteType = Color[];

package/lib/assets/utils/functionUtils.d.ts

@@ -1 +1,4 @@
 export declare const isFunction: (functionToCheck: any) => any;
+export declare const convertTo24Hour: (time12h: string) => string;
+export declare const convertTo12Hour: (time24: string) => string;
+export declare const isValid12HourTime: (timeString: string) => boolean;

package/lib/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './DatePicker.scss';
+import { DatePickerProps } from './types';
+declare const CustomDatePicker: React.FC<DatePickerProps>;
+export default CustomDatePicker;

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import CustomDatePicker from './DatePicker';
+declare const meta: Meta<typeof CustomDatePicker>;
+export default meta;
+type Story = StoryObj<typeof CustomDatePicker>;
+export declare const Default: Story;
+export declare const StartDateFilter: Story;
+export declare const EndDateInput: Story;
+export declare const ScheduleDateInput: Story;

package/lib/components/DatePicker/Timepicker.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimePickerProps } from './types';
+declare const TimePicker: React.FC<TimePickerProps>;
+export default TimePicker;

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

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

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

@@ -0,0 +1,81 @@
+export interface DatePickerProps {
+    /**
+     * The minimum selectable date.
+     */
+    minDate?: DateValue;
+    /**
+     * The maximum selectable date.
+     */
+    maxDate?: DateValue;
+    /**
+     * Selected date value.
+     */
+    value?: DateValue;
+    /**
+     * Function to handle date selection.
+     */
+    onChange: (value: DateValue) => void;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Disables the date picker.
+     */
+    disabled?: boolean;
+    /**
+     * Format for displaying the selected date. Default is 'EEEE, dd MMM yyyy'.
+     */
+    dateFormat?: string;
+    /**
+     * Format for displaying the selected time. Default is 'hh:mm a'.
+     */
+    timeFormat?: string;
+    /**
+     * Timezone for the date picker.
+     */
+    timezone?: string;
+    /**
+     * Custom width for the calendar. This will override the default width of the calendar.
+     */
+    calendarWidth?: number;
+    /**
+     * When true, displays the input field error.
+     */
+    error?: boolean;
+    /**
+     * Helper text to display below the input field, used for error messages or instructions.
+     */
+    helperText?: string | undefined;
+}
+export type DateValue = Date | undefined;
+export interface CustomCaptionProps {
+    children?: React.ReactNode;
+}
+export interface CustomCalenderButtonProps {
+    className?: string;
+    disabled?: boolean | undefined;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
+export interface TimePickerProps {
+    /**
+     * The current time value, in string format (e.g., '14:30').
+     */
+    value: string;
+    /**
+     * Function to handle time selection changes, receiving the selected time as a string.
+     */
+    onChange: (time: string) => void;
+    /**
+     * The minimum selectable time, used to restrict the earliest selectable time.
+     */
+    minTime?: string;
+    /**
+     * The maximum selectable time, used to restrict the latest selectable time.
+     */
+    maxTime?: string;
+    /**
+     * Function to handle error state changes, receiving a boolean indicating the presence of an error.
+     */
+    onErrorChange: (error: boolean) => void;
+}

package/lib/components/DragAndDrop/DragAndDrop.d.ts

@@ -0,0 +1,9 @@
+import * as DNDCore from '@dnd-kit/core';
+import * as DNDSortable from '@dnd-kit/sortable';
+import * as DNDUtilities from '@dnd-kit/utilities';
+declare const DragAndDrop: {
+    DNDCore: typeof DNDCore;
+    DNDSortable: typeof DNDSortable;
+    DNDUtilities: typeof DNDUtilities;
+};
+export default DragAndDrop;

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

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

package/lib/components/DragAndDrop/DragAndDropList.d.ts

@@ -0,0 +1,20 @@
+import './DragAndDropList.scss';
+interface TaskProps {
+    id: number;
+    title: string;
+}
+export declare const Task: ({ id, title }: TaskProps) => import("react/jsx-runtime").JSX.Element;
+interface ColumnProps {
+    id: string;
+    tasks: {
+        id: number;
+        title: string;
+    }[];
+}
+export declare const Column: React.FC<ColumnProps>;
+interface InputProps {
+    onSubmit: (input: string) => void;
+}
+export declare const Input: React.FC<InputProps>;
+declare const DragAndDropList: () => import("react/jsx-runtime").JSX.Element;
+export default DragAndDropList;

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

@@ -0,0 +1 @@
+export * from './DragAndDrop';

package/lib/components/Drawer/Drawer.d.ts

@@ -1,4 +1,5 @@
 import { DrawerProps } from './Types.js';
 import './Drawer.scss';
-declare const Drawer: ({ isOpen, children, onClose, title, primaryButtonProps, secondaryButtonProps, leftPrimaryButtonProps, leftSecondaryButtonProps, showEditButton, onEdit, overlay, isFooterRequired, footerContent, size, _isExpanded, isBackButtonVisible, _isCloseModalButtonVisible, }: DrawerProps) => import("react").ReactPortal;
+import { FC } from 'react';
+declare const Drawer: FC<DrawerProps>;
 export default Drawer;

package/lib/components/IconButton/IconButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './IconButton.scss';
+import { IconButtonProps } from './types';
+declare const IconButton: React.FC<IconButtonProps>;
+export default IconButton;

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

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

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

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

package/lib/components/{AddButton → IconButton}/types.d.ts

@@ -1,4 +1,5 @@
-export interface AddButtonProps {
-    name: string;
+export interface IconButtonProps {
+    label: string;
+    iconName: string;
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }

package/lib/components/InputWithDropdown/InputWithDropdown.d.ts

@@ -1,4 +1,4 @@
 import './InputWithDropdown.scss';
 import { InputWithDropdownProps } from './types';
-declare const InputWithDropdown: ({ name, label, value, type, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, optionsRequired, }: InputWithDropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const InputWithDropdown: ({ name, label, value, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, onInputBlurHandler, optionsRequired, }: InputWithDropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default InputWithDropdown;

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

@@ -15,15 +15,11 @@ export interface InputWithDropdownProps {
     /**
      * value | input field value
      */
-    value: string | number;
+    value?: number;
     /**
      * variants to set color/style of the input field
      */
     variant?: 'default' | 'primary';
-    /**
-     * type to set the input field type
-     */
-    type: 'text' | 'password' | 'number' | 'time';
     /**
      * error | If true, error message will be displayed
      */
@@ -65,9 +61,9 @@ export interface InputWithDropdownProps {
      */
     onDropdownChangeHandler?: (option: Option) => void;
     /**
-     * onFocus action for input field
+     * onInputBlurHandler action for input field
      */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onInputBlurHandler?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /**
      * id to select the input field uniquely
      */

package/lib/components/Modal/Modal.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './modal.scss';
+import { ModalProps } from './types';
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /*** label value for aria-label  */
+    contentLabel?: string;
+    /*** default header will be provided with title and close icon. */
+    isHeaderDisplayed: boolean;
+    /*** Title to be displayed in the header when defaultHeader is true*/
+    headerTitle?: string;
+    /*** Custom class names for the modal content */
+    contentClassName?: string;
+    /*** Custom class name for the overlay */
+    overlayClassName?: string;
+    /*** Whether the modal should close when the 'Escape' key is pressed */
+    shouldCloseOnEsc?: boolean;
+    /*** Whether to hide the app from screen readers when the modal is open */
+    ariaHideApp?: boolean;
+    /*** Whether the modal should close when clicking outside of it (on the overlay) */
+    shouldCloseOnOverlayClick?: boolean;
+    headerContent?: string | ReactNode;
+    footerContent?: ReactNode;
+    /***Content to be displayed inside the modal */
+    children: ReactNode;
+    isFooterDisplayed: boolean;
+}

package/lib/components/TableTree/TableTree.d.ts

@@ -1,5 +1,5 @@
-import './TableTree.scss';
 import React, { ReactNode } from 'react';
+import './TableTree.scss';
 interface ColumnDataProps {
     name: string;
     accessor: string;
@@ -17,5 +17,5 @@ interface TableTreeProps {
     treeData: Array<ObjectProps>;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: any) => void;
 }
-declare const TableTree: ({ columnsData, treeData, onClick, }: TableTreeProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableTree: ({ columnsData, treeData, withCheckBox, onClick, }: TableTreeProps) => import("react/jsx-runtime").JSX.Element;
 export default TableTree;

package/lib/components/ThemeProvider/CustomThemeProvider.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { ThemeContextType } from './types';
+declare const ThemeContext: React.Context<ThemeContextType | undefined>;
+declare const CustomThemeProvider: React.FC<{
+    children: ReactNode;
+}>;
+export { ThemeContext };
+export default CustomThemeProvider;

package/lib/hooks/useCustomThemeProvider.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+interface ThemeContextType {
+    currentTheme: string;
+    setCurrentTheme: React.Dispatch<React.SetStateAction<string>>;
+    applyTheme: (newTheme: string) => void;
+}
+export declare const useCustomThemeProvider: React.FC<{
+    children: ReactNode;
+}>;
+export declare const useTheme: () => ThemeContextType;
+export {};

package/lib/index.d.ts

@@ -1,9 +1,12 @@
 import * as LazyLoad from 'react-window';
 export { LazyLoad };
 import * as React$1 from 'react';
-import React__default, { ReactNode, RefObject } from 'react';
+import React__default, { ReactNode, FC, RefObject } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldValues, UseFormProps, SubmitHandler, FieldPath, FieldErrors } from 'react-hook-form';
+import * as DNDCore from '@dnd-kit/core';
+import * as DNDSortable from '@dnd-kit/sortable';
+import * as DNDUtilities from '@dnd-kit/utilities';
 
 interface ButtonProps$1 {
     /**
@@ -153,7 +156,7 @@ interface DrawerProps {
     footerContent?: ReactNode;
 }
 
-declare const Drawer: ({ isOpen, children, onClose, title, primaryButtonProps, secondaryButtonProps, leftPrimaryButtonProps, leftSecondaryButtonProps, showEditButton, onEdit, overlay, isFooterRequired, footerContent, size, _isExpanded, isBackButtonVisible, _isCloseModalButtonVisible, }: DrawerProps) => React$1.ReactPortal;
+declare const Drawer: FC<DrawerProps>;
 
 interface IconProps {
     name: string;
@@ -884,7 +887,7 @@ interface AddResourceButtonProps {
     zIndex?: number;
 }
 
-declare const AddButton$1: ({ id, variant, directionalArrow, zIndex, }: AddResourceButtonProps) => react_jsx_runtime.JSX.Element;
+declare const AddButton: ({ id, variant, directionalArrow, zIndex, }: AddResourceButtonProps) => react_jsx_runtime.JSX.Element;
 
 type Status = 'passed' | 'failed' | 'warning' | 'skipped' | 'Passed' | 'Failed' | 'Skipped' | 'Warning';
 type StatusValue = {
@@ -1052,15 +1055,11 @@ interface InputWithDropdownProps {
     /**
      * value | input field value
      */
-    value: string | number;
+    value?: number;
     /**
      * variants to set color/style of the input field
      */
     variant?: 'default' | 'primary';
-    /**
-     * type to set the input field type
-     */
-    type: 'text' | 'password' | 'number' | 'time';
     /**
      * error | If true, error message will be displayed
      */
@@ -1102,9 +1101,9 @@ interface InputWithDropdownProps {
      */
     onDropdownChangeHandler?: (option: Option) => void;
     /**
-     * onFocus action for input field
+     * onInputBlurHandler action for input field
      */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onInputBlurHandler?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /**
      * id to select the input field uniquely
      */
@@ -1128,7 +1127,7 @@ interface InputWithDropdownProps {
     optionsRequired?: boolean;
 }
 
-declare const InputWithDropdown: ({ name, label, value, type, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, optionsRequired, }: InputWithDropdownProps) => react_jsx_runtime.JSX.Element;
+declare const InputWithDropdown: ({ name, label, value, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, onInputBlurHandler, optionsRequired, }: InputWithDropdownProps) => react_jsx_runtime.JSX.Element;
 
 declare const RadioButton: React__default.FC<RadioButtonProps>;
 
@@ -1241,7 +1240,7 @@ interface TableTreeProps {
     treeData: Array<ObjectProps>;
     onClick?: (event: React__default.MouseEvent<HTMLDivElement, MouseEvent>, data: any) => void;
 }
-declare const TableTree: ({ columnsData, treeData, onClick, }: TableTreeProps) => react_jsx_runtime.JSX.Element;
+declare const TableTree: ({ columnsData, treeData, withCheckBox, onClick, }: TableTreeProps) => react_jsx_runtime.JSX.Element;
 
 interface TabsProps {
     /**
@@ -1330,6 +1329,60 @@ interface SearchProps {
 
 declare const Search: ({ placeholder, onSearch, disabled, width, }: SearchProps) => react_jsx_runtime.JSX.Element;
 
+interface DatePickerProps {
+    /**
+     * The minimum selectable date.
+     */
+    minDate?: DateValue;
+    /**
+     * The maximum selectable date.
+     */
+    maxDate?: DateValue;
+    /**
+     * Selected date value.
+     */
+    value?: DateValue;
+    /**
+     * Function to handle date selection.
+     */
+    onChange: (value: DateValue) => void;
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Disables the date picker.
+     */
+    disabled?: boolean;
+    /**
+     * Format for displaying the selected date. Default is 'EEEE, dd MMM yyyy'.
+     */
+    dateFormat?: string;
+    /**
+     * Format for displaying the selected time. Default is 'hh:mm a'.
+     */
+    timeFormat?: string;
+    /**
+     * Timezone for the date picker.
+     */
+    timezone?: string;
+    /**
+     * Custom width for the calendar. This will override the default width of the calendar.
+     */
+    calendarWidth?: number;
+    /**
+     * When true, displays the input field error.
+     */
+    error?: boolean;
+    /**
+     * Helper text to display below the input field, used for error messages or instructions.
+     */
+    helperText?: string | undefined;
+}
+type DateValue = Date | undefined;
+
+declare const CustomDatePicker: React__default.FC<DatePickerProps>;
+
 interface StateDropdownProps {
     value: string;
     nodeObj: {};
@@ -1344,12 +1397,19 @@ interface StateDropdownProps {
 
 declare const StateDropdown: ({ value, nodeObj, isReviewer, isApprovePage, handleStateValueClick, handleDropdownOptionsClick, disabled, isOnlyReviewer, userHasOnlyViewAccess, }: StateDropdownProps) => react_jsx_runtime.JSX.Element;
 
-interface AddButtonProps {
-    name: string;
+interface IconButtonProps {
+    label: string;
+    iconName: string;
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
 
-declare const AddButton: React__default.FC<AddButtonProps>;
+declare const IconButton: React__default.FC<IconButtonProps>;
+
+declare const DragAndDrop: {
+    DNDCore: typeof DNDCore;
+    DNDSortable: typeof DNDSortable;
+    DNDUtilities: typeof DNDUtilities;
+};
 
 type valueType$1 = any;
 declare const checkEmpty: (value: valueType$1) => boolean;
@@ -1358,4 +1418,4 @@ type valueType = File | string;
 declare const getExtension: (value: valueType) => string | undefined;
 declare const getExtensionWithPeriod: (value: valueType) => string;
 
-export { Accordion, AddButton, AddButton$1 as AddResourceButton, Button, Checkbox, Chip, Col, Container, DonutChart, Drawer, ExpandableMenu, FileDropzone, Form, HighlightText, Icon, Input, InputWithDropdown, MenuOption, MiniModal, MultiSelect, RadialChart, RadioButton, RadioGroup, Row, Search, Select, StateDropdown, StatusButton, Table, TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toggle, Tooltip, Typography, checkEmpty, getExtension, getExtensionWithPeriod, useTheme };
+export { Accordion, AddButton as AddResourceButton, Button, Checkbox, Chip, Col, Container, CustomDatePicker as DatePicker, DonutChart, DragAndDrop, Drawer, ExpandableMenu, FileDropzone, Form, HighlightText, Icon, IconButton, Input, InputWithDropdown, MenuOption, MiniModal, MultiSelect, RadialChart, RadioButton, RadioGroup, Row, Search, Select, StateDropdown, StatusButton, Table, TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toggle, Tooltip, Typography, checkEmpty, getExtension, getExtensionWithPeriod, useTheme };