master-components-react-ts 1.0.4 → 1.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/Icons/IconCheck.d.ts +5 -0
- package/dist/assets/Icons/IconCircularLoading.d.ts +10 -0
- package/dist/assets/Icons/IconClose.d.ts +4 -0
- package/dist/assets/Icons/IconCloseBackground.d.ts +6 -0
- package/dist/assets/Icons/IconCloseCircle.d.ts +7 -0
- package/dist/assets/Icons/IconExclamation.d.ts +5 -0
- package/dist/assets/Icons/IconRadioChecked.d.ts +6 -0
- package/dist/assets/Icons/IconRadioCheckedDisabled.d.ts +6 -0
- package/dist/assets/Icons/IconRadioUnchecked.d.ts +6 -0
- package/dist/assets/Icons/IconRadioUncheckedDisabled.d.ts +6 -0
- package/dist/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/components/Checkbox/Checkbox.types.d.ts +1 -1
- package/dist/components/DatePicker/Calendar.d.ts +1 -1
- package/dist/components/DatePicker/Calendar.types.d.ts +1 -2
- package/dist/components/DatePicker/DatePicker.d.ts +1 -1
- package/dist/components/DatePicker/DatePicker.types.d.ts +3 -13
- package/dist/components/Dropdown/Dropdown.d.ts +3 -0
- package/dist/components/Dropdown/Dropdown.types.d.ts +34 -0
- package/dist/components/FormInput/FormInput.d.ts +1 -1
- package/dist/components/FormInput/FormInput.types.d.ts +30 -58
- package/dist/components/MainButton/MainButton.d.ts +1 -1
- package/dist/components/MainButton/MainButton.types.d.ts +15 -13
- package/dist/components/NotificationToast/NotificationContext.d.ts +9 -0
- package/dist/components/NotificationToast/NotificationToast.d.ts +3 -0
- package/dist/components/NotificationToast/NotificationToast.types.d.ts +16 -0
- package/dist/components/NotificationToast/createNotificationToast.d.ts +3 -0
- package/dist/components/Popup/Popup.d.ts +3 -0
- package/dist/components/Popup/Popup.types.d.ts +22 -0
- package/dist/components/Radio/Radio.d.ts +3 -0
- package/dist/components/Radio/Radio.types.d.ts +9 -0
- package/dist/components/Tabs/Tabs.d.ts +3 -0
- package/dist/components/Tabs/Tabs.types.d.ts +15 -0
- package/dist/components/Textarea/Textarea.d.ts +1 -1
- package/dist/components/Textarea/Textarea.types.d.ts +9 -9
- package/dist/components/TimePicker/TimePicker.d.ts +3 -0
- package/dist/components/TimePicker/TimePicker.types.d.ts +10 -0
- package/dist/components/Toggle/Textarea.types.d.ts +2 -9
- package/dist/components/Toggle/Toggle.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +3 -0
- package/dist/components/Tooltip/Tooltip.types.d.ts +25 -0
- package/dist/hooks/useRenderState.d.ts +1 -0
- package/dist/index.d.ts +7 -0
- package/dist/master-components-react-ts.cjs.js +27 -27
- package/dist/master-components-react-ts.es.js +2129 -1538
- package/dist/utils/Helpers.d.ts +2 -1
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
interface IconCircularLoadingProps {
|
|
2
|
+
size?: number;
|
|
3
|
+
strokeWidth?: number;
|
|
4
|
+
linecap?: 'round' | 'butt' | 'square' | 'inherit';
|
|
5
|
+
duration?: number;
|
|
6
|
+
stroke?: string;
|
|
7
|
+
withLoader?: boolean;
|
|
8
|
+
}
|
|
9
|
+
declare const IconCircularLoading: ({ size, strokeWidth, linecap, duration, stroke, ...rest }: IconCircularLoadingProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default IconCircularLoading;
|
|
@@ -12,4 +12,8 @@ interface IconCloseProps {
|
|
|
12
12
|
strokeLinejoin?: 'round' | 'inherit' | 'miter' | 'bevel';
|
|
13
13
|
}
|
|
14
14
|
export declare const IconClose: ({ width, height, color, xmlns, viewBox, fill, d, stroke, strokeWidth, strokeLinecap, strokeLinejoin, }: IconCloseProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
interface IconCloseBlackProps {
|
|
16
|
+
color?: string;
|
|
17
|
+
}
|
|
18
|
+
export declare const IconCloseBlack: ({ color }: IconCloseBlackProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
19
|
export {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { CheckboxProps } from './Checkbox.types';
|
|
2
|
-
declare const Checkbox: ({ checked, change, disabled, required, multipleChecked,
|
|
2
|
+
declare const Checkbox: ({ checked, change, type, disabled, required, multipleChecked, activeStyle, checkBoxStyle, theme, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Checkbox;
|
|
@@ -4,9 +4,9 @@ export interface CheckboxProps {
|
|
|
4
4
|
checked?: boolean;
|
|
5
5
|
change?: (e: boolean) => void;
|
|
6
6
|
disabled?: boolean;
|
|
7
|
+
type?: 'default' | 'error';
|
|
7
8
|
required?: boolean;
|
|
8
9
|
multipleChecked?: boolean;
|
|
9
|
-
size?: 'sm' | 'md';
|
|
10
10
|
activeStyle?: CSSProperties;
|
|
11
11
|
checkBoxStyle?: CSSProperties;
|
|
12
12
|
withActive?: boolean;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { CalendarProps } from './Calendar.types';
|
|
2
|
-
declare const Calendar: ({ valueFormat, quickPick, onChange, CurrentMonth, setCurrentMonth, SelectedDate, namespace, customYears, setSelectedDate, IsFocused, setIsFocused, mode, RangeSelection, setRangeSelection,
|
|
2
|
+
declare const Calendar: ({ valueFormat, quickPick, onChange, CurrentMonth, setCurrentMonth, SelectedDate, namespace, customYears, setSelectedDate, IsFocused, setIsFocused, mode, RangeSelection, setRangeSelection, pickerType, disabledDatesRange, disabledDatesTill, disabledDatesFrom, CalendarRef, defaultValue, selectedStyle, endDateStyle, startDateStyle, inRangeStyle, otherMonthStyle, todayStyle, weekDayStyle, quickPickStyle, monthStyle, }: CalendarProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Calendar;
|
|
@@ -17,7 +17,7 @@ export interface CalendarProps {
|
|
|
17
17
|
mode: 'single' | 'range';
|
|
18
18
|
RangeSelection: RangeValue;
|
|
19
19
|
setRangeSelection: React.Dispatch<React.SetStateAction<RangeValue>>;
|
|
20
|
-
|
|
20
|
+
pickerType: 'single' | 'dual';
|
|
21
21
|
disabledDatesRange: [SingleValue, SingleValue];
|
|
22
22
|
disabledDatesTill: SingleValue;
|
|
23
23
|
disabledDatesFrom: SingleValue;
|
|
@@ -35,5 +35,4 @@ export interface CalendarProps {
|
|
|
35
35
|
weekDayStyle: CSSProperties;
|
|
36
36
|
quickPickStyle: CSSProperties;
|
|
37
37
|
monthStyle: CSSProperties;
|
|
38
|
-
theme: 'light' | 'dark';
|
|
39
38
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { DatePickerProps } from './DatePicker.types';
|
|
2
|
-
declare const DatePicker: ({
|
|
2
|
+
declare const DatePicker: ({ defaultValue, valueFormat, onChange, onBlur, onFocus, customYears, fixedDropdown, disabledDatesFrom, disabledDatesTill, disabledDatesRange, datepickerStyle, datepickerLabelStyle, requiredStyle, datepickerHelperTextStyle, selectedStyle, endDateStyle, startDateStyle, inRangeStyle, otherMonthStyle, todayStyle, weekDayStyle, quickPickStyle, monthStyle, quickPick, mode, pickerType, disabled, ...rest }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default DatePicker;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
import { Dayjs } from 'dayjs';
|
|
3
|
+
import { FormInputProps } from '../FormInput/FormInput.types';
|
|
3
4
|
export type DateOrString = Dayjs | Date | string | null;
|
|
4
5
|
export type SingleValue = DateOrString;
|
|
5
6
|
export type RangeValue = {
|
|
@@ -8,17 +9,8 @@ export type RangeValue = {
|
|
|
8
9
|
};
|
|
9
10
|
export type PickerValue = SingleValue | RangeValue;
|
|
10
11
|
/**DatePicker Component Props */
|
|
11
|
-
export interface DatePickerProps {
|
|
12
|
-
label?: string;
|
|
13
|
-
required?: boolean;
|
|
14
|
-
msg?: {
|
|
15
|
-
error?: string;
|
|
16
|
-
visible?: boolean;
|
|
17
|
-
text?: string;
|
|
18
|
-
style?: CSSProperties;
|
|
19
|
-
};
|
|
12
|
+
export interface DatePickerProps extends FormInputProps {
|
|
20
13
|
defaultValue?: PickerValue;
|
|
21
|
-
size?: 'sm' | 'md';
|
|
22
14
|
valueFormat?: string;
|
|
23
15
|
onChange?: (value: PickerValue) => void;
|
|
24
16
|
onBlur?: () => void;
|
|
@@ -29,7 +21,6 @@ export interface DatePickerProps {
|
|
|
29
21
|
disabledDatesTill?: SingleValue;
|
|
30
22
|
disabledDatesRange?: [SingleValue, SingleValue];
|
|
31
23
|
datepickerStyle?: CSSProperties;
|
|
32
|
-
placeholder?: string;
|
|
33
24
|
datepickerLabelStyle?: CSSProperties;
|
|
34
25
|
requiredStyle?: CSSProperties;
|
|
35
26
|
datepickerHelperTextStyle?: CSSProperties;
|
|
@@ -44,7 +35,6 @@ export interface DatePickerProps {
|
|
|
44
35
|
monthStyle?: CSSProperties;
|
|
45
36
|
quickPick?: boolean;
|
|
46
37
|
mode?: 'single' | 'range';
|
|
47
|
-
|
|
48
|
-
theme?: 'light' | 'dark';
|
|
38
|
+
pickerType?: 'single' | 'dual';
|
|
49
39
|
disabled?: boolean;
|
|
50
40
|
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { DropdownProps } from './Dropdown.types';
|
|
2
|
+
declare const Dropdown: ({ data, withFilter, withClose, disableAll, withMultiselect, selectedOptionID, onSelect, onFocus, onBlur, customInputSlot, dropdownWrapperStyle, dropdownInputWrapperStyle, dropdownInputSlotStyle, dropdownInputSlotItemStyle, dropdownInputSlotItemLabelStyle, dropdownInputSlotItemCloseStyle, dropdownInputSlotItemMoreStyle, dropdownItemStyle, dropdownItemLabelStyle, itemCheckboxStyle, dropdownItemLabelTextStyle, dropdownListStyle, ...rest }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export default Dropdown;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { FormInputProps } from '../FormInput/FormInput.types';
|
|
2
|
+
interface DropdownItem {
|
|
3
|
+
id: string | number;
|
|
4
|
+
label: string;
|
|
5
|
+
customLabel?: React.ReactNode | ((item: any) => React.ReactNode);
|
|
6
|
+
selected?: boolean;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
[key: string]: any;
|
|
9
|
+
}
|
|
10
|
+
export interface DropdownProps extends FormInputProps {
|
|
11
|
+
data: DropdownItem[];
|
|
12
|
+
withFilter?: boolean;
|
|
13
|
+
withClose?: boolean;
|
|
14
|
+
disableAll?: boolean;
|
|
15
|
+
withMultiselect?: boolean;
|
|
16
|
+
selectedOptionID?: string | number;
|
|
17
|
+
customInputSlot?: React.ReactNode;
|
|
18
|
+
dropdownWrapperStyle?: React.CSSProperties;
|
|
19
|
+
dropdownInputWrapperStyle?: React.CSSProperties;
|
|
20
|
+
dropdownInputSlotStyle?: React.CSSProperties;
|
|
21
|
+
dropdownInputSlotItemStyle?: React.CSSProperties;
|
|
22
|
+
dropdownInputSlotItemLabelStyle?: React.CSSProperties;
|
|
23
|
+
dropdownInputSlotItemCloseStyle?: React.CSSProperties;
|
|
24
|
+
dropdownInputSlotItemMoreStyle?: React.CSSProperties;
|
|
25
|
+
dropdownItemStyle?: React.CSSProperties;
|
|
26
|
+
dropdownItemLabelStyle?: React.CSSProperties;
|
|
27
|
+
itemCheckboxStyle?: React.CSSProperties;
|
|
28
|
+
dropdownItemLabelTextStyle?: React.CSSProperties;
|
|
29
|
+
dropdownListStyle?: React.CSSProperties;
|
|
30
|
+
onSelect: (value: any) => void;
|
|
31
|
+
onFocus?: () => void;
|
|
32
|
+
onBlur?: () => void;
|
|
33
|
+
}
|
|
34
|
+
export {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { FormInputProps } from './FormInput.types';
|
|
2
|
-
declare const FormInput: ({ label, placeholder, required, disabled,
|
|
2
|
+
declare const FormInput: ({ label, placeholder, helperText, required, disabled, readOnly, withFocus, withActive, searchComponent, size, toggleFocus, rightSlot, leftSlot, helperSlot, type, value, maxLength, forDropdown, customFocus, inputState, inputSlot, onChange, onFocus, onBlur, onEnter, onFocusChange, formInputWrapperStyle, inputWrapperStyle, formInputStyle, helperTextStyle, labelStyle, inputSlotStyle, }: FormInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default FormInput;
|
|
@@ -1,68 +1,40 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
|
-
|
|
3
|
-
/**Button Component Props */
|
|
2
|
+
/**FormInput Component Props */
|
|
4
3
|
export interface FormInputProps {
|
|
5
4
|
label?: string | React.ReactNode;
|
|
6
5
|
placeholder?: string;
|
|
6
|
+
helperText?: string | React.ReactNode;
|
|
7
7
|
required?: boolean;
|
|
8
8
|
disabled?: boolean;
|
|
9
|
-
type?: string;
|
|
10
|
-
size?: string;
|
|
11
|
-
onChange?: (e: any) => void;
|
|
12
|
-
onFocus?: (e: any) => void;
|
|
13
|
-
onBlur?: (e: any) => void;
|
|
14
|
-
msg?: {
|
|
15
|
-
error?: string;
|
|
16
|
-
visible?: boolean;
|
|
17
|
-
text?: string;
|
|
18
|
-
style?: CSSProperties;
|
|
19
|
-
};
|
|
20
9
|
readOnly?: boolean;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
onRightIconIconMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
27
|
-
onRightIconIconMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
28
|
-
onLeftIconIconClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
29
|
-
onLeftIconIconMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
30
|
-
onLeftIconIconMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
|
|
31
|
-
onPressEnter?: (e: string) => void;
|
|
32
|
-
rightIcon?: React.ReactNode;
|
|
33
|
-
leftIcon?: React.ReactNode;
|
|
10
|
+
toggleFocus?: boolean;
|
|
11
|
+
withFocus?: boolean;
|
|
12
|
+
withActive?: boolean;
|
|
13
|
+
searchComponent?: boolean;
|
|
14
|
+
size?: 'sm' | 'md';
|
|
34
15
|
value?: string;
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
16
|
+
inputState?: {
|
|
17
|
+
error?: boolean;
|
|
18
|
+
success?: boolean;
|
|
19
|
+
loading?: boolean;
|
|
20
|
+
};
|
|
21
|
+
rightSlot?: React.ReactNode;
|
|
22
|
+
leftSlot?: React.ReactNode;
|
|
23
|
+
helperSlot?: React.ReactNode;
|
|
24
|
+
type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week';
|
|
25
|
+
maxLength?: number;
|
|
26
|
+
customFocus?: boolean | null;
|
|
27
|
+
forDropdown?: boolean;
|
|
28
|
+
inputSlot?: React.ReactNode;
|
|
29
|
+
onChange?: (value: string) => void;
|
|
30
|
+
onFocus?: () => void;
|
|
31
|
+
onBlur?: () => void;
|
|
32
|
+
onEnter?: () => void;
|
|
33
|
+
onFocusChange?: (state: boolean) => void;
|
|
34
|
+
formInputWrapperStyle?: CSSProperties;
|
|
53
35
|
inputWrapperStyle?: CSSProperties;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
customActionStyle?: CSSProperties;
|
|
59
|
-
inputDropDownStyle?: CSSProperties;
|
|
60
|
-
ulStyle?: CSSProperties;
|
|
61
|
-
liStyle?: CSSProperties;
|
|
62
|
-
httpStyle?: CSSProperties;
|
|
63
|
-
inputStyle?: CSSProperties;
|
|
64
|
-
rightIconStyle?: CSSProperties;
|
|
65
|
-
withCopyStyle?: CSSProperties;
|
|
66
|
-
inputHelperTextStyle?: CSSProperties;
|
|
67
|
-
theme?: 'light' | 'dark';
|
|
36
|
+
formInputStyle?: CSSProperties;
|
|
37
|
+
helperTextStyle?: CSSProperties;
|
|
38
|
+
labelStyle?: CSSProperties;
|
|
39
|
+
inputSlotStyle?: CSSProperties;
|
|
68
40
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ButtonProps } from './MainButton.types';
|
|
2
|
-
declare const MainButton: ({ label,
|
|
2
|
+
declare const MainButton: ({ label, size, leftSlot, rightSlot, buttonSlot, type, colorType, buttonType, withFocus, customFocus, disabled, loading, spaceBetween, buttonStyle, mainButtonContentStyle, mainButtonLabelStyle, leftSlotStyle, rightSlotStyle, onClick, }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default MainButton;
|
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
/**Button Component Props */
|
|
3
3
|
export interface ButtonProps {
|
|
4
|
-
label
|
|
5
|
-
type?: 'button' | 'reset' | 'submit';
|
|
6
|
-
buttonType?: 'default' | 'error' | 'border' | 'nonBorder' | 'borderWithColor';
|
|
7
|
-
onClick?: (e: any) => void;
|
|
4
|
+
label: string;
|
|
8
5
|
size?: 'md' | 'sm' | 'lg';
|
|
6
|
+
leftSlot?: React.ReactNode;
|
|
7
|
+
rightSlot?: React.ReactNode;
|
|
8
|
+
buttonSlot?: React.ReactNode;
|
|
9
|
+
type?: 'button' | 'reset' | 'submit';
|
|
10
|
+
colorType?: 'neutral' | 'positive' | 'negative';
|
|
11
|
+
buttonType?: 'primary' | 'secondary' | 'tertiary' | 'tertiaryV2' | 'tertiaryV3';
|
|
12
|
+
withFocus?: boolean;
|
|
13
|
+
customFocus?: boolean | null | undefined;
|
|
9
14
|
disabled?: boolean;
|
|
10
15
|
loading?: boolean;
|
|
11
|
-
|
|
12
|
-
iconOne?: React.ReactNode;
|
|
13
|
-
iconTwo?: React.ReactNode;
|
|
14
|
-
onlyIcon?: boolean;
|
|
16
|
+
spaceBetween?: boolean;
|
|
15
17
|
buttonStyle?: CSSProperties;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
mainButtonContentStyle?: CSSProperties;
|
|
19
|
+
mainButtonLabelStyle?: CSSProperties;
|
|
20
|
+
leftSlotStyle?: CSSProperties;
|
|
21
|
+
rightSlotStyle?: CSSProperties;
|
|
22
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
21
23
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { NotificationToastProps } from './NotificationToast.types';
|
|
3
|
+
export declare const ToastContext: import('react').Context<{
|
|
4
|
+
showToast: (props: NotificationToastProps) => void;
|
|
5
|
+
} | null>;
|
|
6
|
+
declare const ToastProvider: ({ children }: {
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export default ToastProvider;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { NotificationToastProps } from './NotificationToast.types';
|
|
2
|
+
declare const NotificationToast: ({ title, colorType, filled, withClose, withUndo, withInfoIcon, description, customAction, timeout, children, onUndo, onClose, }: NotificationToastProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export default NotificationToast;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export interface NotificationToastProps {
|
|
2
|
+
title?: string;
|
|
3
|
+
description?: string;
|
|
4
|
+
colorType?: 'neutral' | 'info' | 'error' | 'success';
|
|
5
|
+
filled?: boolean;
|
|
6
|
+
withClose?: boolean;
|
|
7
|
+
withUndo?: boolean;
|
|
8
|
+
timeout?: number;
|
|
9
|
+
withInfoIcon?: boolean;
|
|
10
|
+
position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
|
|
11
|
+
max?: number;
|
|
12
|
+
customAction?: React.ReactNode;
|
|
13
|
+
children?: React.ReactNode;
|
|
14
|
+
onClose?: () => void;
|
|
15
|
+
onUndo?: () => void;
|
|
16
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { PopupProps } from './Popup.types';
|
|
2
|
+
declare const Popup: ({ visible, template, options, children, onClickOutside, onClose, widthType, modalOverlayStyle, popupContainerStyle, templateWrapperStyle, popupHeaderStyle, popupTitleStyle, closeButtonStyle, }: PopupProps) => false | import("react/jsx-runtime").JSX.Element | undefined;
|
|
3
|
+
export default Popup;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
/**DatePicker Component Props */
|
|
3
|
+
export interface PopupProps {
|
|
4
|
+
visible?: boolean;
|
|
5
|
+
template?: React.ReactNode;
|
|
6
|
+
options?: {
|
|
7
|
+
title: string;
|
|
8
|
+
description: string;
|
|
9
|
+
type: 'success' | 'error' | 'unsaved' | 'info';
|
|
10
|
+
mode: 'drawer' | 'modal';
|
|
11
|
+
};
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
onClickOutside?: () => void;
|
|
14
|
+
onClose?: () => void;
|
|
15
|
+
widthType?: 'horizontal';
|
|
16
|
+
modalOverlayStyle?: CSSProperties;
|
|
17
|
+
popupContainerStyle?: CSSProperties;
|
|
18
|
+
templateWrapperStyle?: CSSProperties;
|
|
19
|
+
popupHeaderStyle?: CSSProperties;
|
|
20
|
+
popupTitleStyle?: CSSProperties;
|
|
21
|
+
closeButtonStyle?: CSSProperties;
|
|
22
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
export type TabsDataType = {
|
|
3
|
+
id: string;
|
|
4
|
+
label: string | React.ReactNode;
|
|
5
|
+
active?: boolean;
|
|
6
|
+
};
|
|
7
|
+
/**Tabs Component Props */
|
|
8
|
+
export interface TabsProps {
|
|
9
|
+
tabsData: TabsDataType[];
|
|
10
|
+
type?: 'underline' | 'button' | 'buttonBorder' | 'buttonMinimal';
|
|
11
|
+
vertical?: boolean;
|
|
12
|
+
onItemClick?: (tab: TabsDataType) => void;
|
|
13
|
+
tabContainerStyle?: CSSProperties;
|
|
14
|
+
singleTabStyle?: CSSProperties;
|
|
15
|
+
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { TextareaProps } from './Textarea.types';
|
|
2
|
-
declare const Textarea: ({ placeholder, label,
|
|
2
|
+
declare const Textarea: ({ placeholder, label, cols, rows, value, inputState, maxLength, withFocus, withActive, withResize, withClose, onChange, onFocus, onBlur, disabled, required, textareaContainerStyle, textareaLabelStyle, requiredStyle, labelSlot, textareaFooterStyle, }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Textarea;
|
|
@@ -2,19 +2,19 @@ import { CSSProperties } from 'react';
|
|
|
2
2
|
/**Textarea Component Props */
|
|
3
3
|
export interface TextareaProps {
|
|
4
4
|
placeholder?: string;
|
|
5
|
-
label?: string;
|
|
6
|
-
|
|
7
|
-
error?:
|
|
8
|
-
|
|
9
|
-
text?: string;
|
|
10
|
-
style?: CSSProperties;
|
|
5
|
+
label?: string | React.ReactNode;
|
|
6
|
+
inputState?: {
|
|
7
|
+
error?: boolean;
|
|
8
|
+
success?: boolean;
|
|
11
9
|
};
|
|
12
10
|
cols?: number;
|
|
13
11
|
rows?: number;
|
|
14
12
|
value?: string;
|
|
15
|
-
withEmoji?: boolean;
|
|
16
13
|
maxLength?: number;
|
|
17
14
|
withResize?: boolean;
|
|
15
|
+
withFocus?: boolean;
|
|
16
|
+
withActive?: boolean;
|
|
17
|
+
withClose?: boolean;
|
|
18
18
|
onChange?: (e: any) => void;
|
|
19
19
|
onFocus?: (e: any) => void;
|
|
20
20
|
onBlur?: (e: any) => void;
|
|
@@ -26,6 +26,6 @@ export interface TextareaProps {
|
|
|
26
26
|
textareaStyle?: CSSProperties;
|
|
27
27
|
focusStyle?: CSSProperties;
|
|
28
28
|
textareaHelperTextStyle?: CSSProperties;
|
|
29
|
-
|
|
30
|
-
|
|
29
|
+
labelSlot?: React.ReactNode;
|
|
30
|
+
textareaFooterStyle?: CSSProperties;
|
|
31
31
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FormInputProps } from '../FormInput/FormInput.types';
|
|
2
|
+
export interface TimePickerProps extends FormInputProps {
|
|
3
|
+
withConfirm?: boolean;
|
|
4
|
+
defaultTimeType?: '12' | '24';
|
|
5
|
+
defaultAmPm?: 'AM' | 'PM';
|
|
6
|
+
mode?: 'single' | 'range';
|
|
7
|
+
onChange?: (value: string) => void;
|
|
8
|
+
onFocus?: () => void;
|
|
9
|
+
onBlur?: () => void;
|
|
10
|
+
}
|
|
@@ -1,17 +1,10 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
1
|
/**Toggle Component Props */
|
|
3
2
|
export interface ToggleProps {
|
|
4
3
|
checked?: boolean;
|
|
5
4
|
change?: (e: boolean) => void;
|
|
6
5
|
disabled?: boolean;
|
|
7
6
|
required?: boolean;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
bgStyle?: CSSProperties;
|
|
11
|
-
checkedBgStyle?: CSSProperties;
|
|
12
|
-
disabledBgStyle?: CSSProperties;
|
|
13
|
-
circleStyle?: CSSProperties;
|
|
14
|
-
checkedCircleStyle?: CSSProperties;
|
|
15
|
-
disabledCircleStyle?: CSSProperties;
|
|
7
|
+
size?: 'sm' | 'md' | 'lg';
|
|
8
|
+
toggleType?: 'default' | 'error';
|
|
16
9
|
theme?: 'light' | 'dark';
|
|
17
10
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ToggleProps } from './Textarea.types';
|
|
2
|
-
declare const Toggle: ({ checked, change, disabled,
|
|
2
|
+
declare const Toggle: ({ checked, change, disabled, size, toggleType, required }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Toggle;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { TooltipProps } from './Tooltip.types';
|
|
2
|
+
declare const Tooltip: ({ children, tooltipSlot, delay, placement, trigger, title, text, customText, tooltipContentStyle, tooltipTitlestyle, tooltipTextStyle, tooltipContainerStyle, pointerPosition, withPointer, theme, topCustomOffset, bottomCustomOffset, leftCustomOffset, rightCustomOffset, forceClose, onClick, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export default Tooltip;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { CSSProperties } from 'react';
|
|
2
|
+
/**Tooltip Component Props */
|
|
3
|
+
export interface TooltipProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
tooltipSlot?: React.ReactNode;
|
|
6
|
+
delay?: number;
|
|
7
|
+
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
8
|
+
trigger?: 'hover' | 'click';
|
|
9
|
+
title?: string;
|
|
10
|
+
text?: string;
|
|
11
|
+
customText?: string;
|
|
12
|
+
tooltipContentStyle?: CSSProperties;
|
|
13
|
+
tooltipTitlestyle?: CSSProperties;
|
|
14
|
+
tooltipTextStyle?: CSSProperties;
|
|
15
|
+
tooltipContainerStyle?: CSSProperties;
|
|
16
|
+
pointerPosition?: '10%' | '20%' | '30%' | '40%' | '50%' | '60%' | '70%' | '80%' | '90%';
|
|
17
|
+
withPointer?: boolean;
|
|
18
|
+
theme?: 'light' | 'dark';
|
|
19
|
+
topCustomOffset?: number;
|
|
20
|
+
bottomCustomOffset?: number;
|
|
21
|
+
leftCustomOffset?: number;
|
|
22
|
+
rightCustomOffset?: number;
|
|
23
|
+
forceClose?: boolean;
|
|
24
|
+
onClick?: () => void;
|
|
25
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useIfElse: (condition: boolean) => (truthy: React.ReactNode, falsy?: React.ReactNode) => import('react').ReactNode;
|
package/dist/index.d.ts
CHANGED
|
@@ -3,4 +3,11 @@ export { default as FormInput } from './components/FormInput/FormInput';
|
|
|
3
3
|
export { default as Textarea } from './components/Textarea/Textarea';
|
|
4
4
|
export { default as Toggle } from './components/Toggle/Toggle';
|
|
5
5
|
export { default as Checkbox } from './components/Checkbox/Checkbox';
|
|
6
|
+
export { default as Dropdown } from './components/Dropdown/Dropdown';
|
|
7
|
+
export { default as Radio } from './components/Radio/Radio';
|
|
8
|
+
export { default as Tooltip } from './components/Tooltip/Tooltip';
|
|
9
|
+
export { default as Popup } from './components/Popup/Popup';
|
|
10
|
+
export { default as createNotificationToast } from './components/NotificationToast/createNotificationToast';
|
|
11
|
+
export { default as ToastProvider } from './components/NotificationToast/NotificationContext';
|
|
12
|
+
export { default as TimePicker } from './components/TimePicker/TimePicker';
|
|
6
13
|
export { default as DatePicker } from './components/DatePicker/DatePicker';
|