react-restyle-components 0.3.76 → 0.3.80

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.
Files changed (95) hide show
  1. package/lib/src/core-components/index.d.ts +0 -10
  2. package/lib/src/core-components/index.d.ts.map +1 -1
  3. package/lib/src/core-components/index.js +0 -10
  4. package/lib/src/core-components/src/components/Badge/Badge.d.ts +5 -5
  5. package/lib/src/core-components/src/components/FormField/FormField.d.ts +38 -3
  6. package/lib/src/core-components/src/components/FormField/FormField.d.ts.map +1 -1
  7. package/lib/src/core-components/src/components/FormField/FormField.js +77 -4
  8. package/lib/src/core-components/src/components/FormField/components/CheckboxGroupInput.d.ts +20 -0
  9. package/lib/src/core-components/src/components/FormField/components/CheckboxGroupInput.d.ts.map +1 -0
  10. package/lib/src/core-components/src/components/FormField/components/CheckboxGroupInput.js +37 -0
  11. package/lib/src/core-components/src/components/FormField/components/CheckboxInput.d.ts +17 -0
  12. package/lib/src/core-components/src/components/FormField/components/CheckboxInput.d.ts.map +1 -0
  13. package/lib/src/core-components/src/components/FormField/components/CheckboxInput.js +8 -0
  14. package/lib/src/core-components/src/components/FormField/components/CssMultilineInput.d.ts +19 -0
  15. package/lib/src/core-components/src/components/FormField/components/CssMultilineInput.d.ts.map +1 -0
  16. package/lib/src/core-components/src/components/FormField/components/CssMultilineInput.js +114 -0
  17. package/lib/src/core-components/src/components/FormField/components/DatePickerInput.d.ts +18 -0
  18. package/lib/src/core-components/src/components/FormField/components/DatePickerInput.d.ts.map +1 -0
  19. package/lib/src/core-components/src/components/FormField/components/DatePickerInput.js +29 -0
  20. package/lib/src/core-components/src/components/FormField/components/DropdownInput.d.ts +18 -0
  21. package/lib/src/core-components/src/components/FormField/components/DropdownInput.d.ts.map +1 -0
  22. package/lib/src/core-components/src/components/FormField/components/DropdownInput.js +70 -0
  23. package/lib/src/core-components/src/components/FormField/components/OtpInput.d.ts +18 -0
  24. package/lib/src/core-components/src/components/FormField/components/OtpInput.d.ts.map +1 -0
  25. package/lib/src/core-components/src/components/FormField/components/OtpInput.js +81 -0
  26. package/lib/src/core-components/src/components/FormField/components/PasswordInput.d.ts +17 -0
  27. package/lib/src/core-components/src/components/FormField/components/PasswordInput.d.ts.map +1 -0
  28. package/lib/src/core-components/src/components/FormField/components/PasswordInput.js +18 -0
  29. package/lib/src/core-components/src/components/FormField/components/PinInput.d.ts +18 -0
  30. package/lib/src/core-components/src/components/FormField/components/PinInput.d.ts.map +1 -0
  31. package/lib/src/core-components/src/components/FormField/components/PinInput.js +75 -0
  32. package/lib/src/core-components/src/components/FormField/components/RadioInput.d.ts +23 -0
  33. package/lib/src/core-components/src/components/FormField/components/RadioInput.d.ts.map +1 -0
  34. package/lib/src/core-components/src/components/FormField/components/RadioInput.js +54 -0
  35. package/lib/src/core-components/src/components/FormField/components/TextDropdownInput.d.ts +20 -0
  36. package/lib/src/core-components/src/components/FormField/components/TextDropdownInput.d.ts.map +1 -0
  37. package/lib/src/core-components/src/components/FormField/components/TextDropdownInput.js +94 -0
  38. package/lib/src/core-components/src/components/FormField/components/ToggleInput.d.ts +17 -0
  39. package/lib/src/core-components/src/components/FormField/components/ToggleInput.d.ts.map +1 -0
  40. package/lib/src/core-components/src/components/FormField/components/ToggleInput.js +36 -0
  41. package/lib/src/core-components/src/components/FormField/components/index.d.ts +12 -0
  42. package/lib/src/core-components/src/components/FormField/components/index.d.ts.map +1 -0
  43. package/lib/src/core-components/src/components/FormField/components/index.js +11 -0
  44. package/lib/src/core-components/src/components/{Input/CSSMultilineInput → FormField}/css-properties.d.ts.map +1 -1
  45. package/lib/src/core-components/src/components/{Form → FormField}/toggle.css +1 -0
  46. package/lib/src/core-components/src/components/index.d.ts +1 -2
  47. package/lib/src/core-components/src/components/index.d.ts.map +1 -1
  48. package/lib/src/core-components/src/components/index.js +1 -2
  49. package/lib/src/core-components/src/core-components/CoreButton/CoreButton.d.ts +2 -2
  50. package/lib/src/core-components/src/core-components/atoms/Input/Input.d.ts.map +1 -1
  51. package/lib/src/core-components/src/core-components/atoms/Input/Input.js +4 -1
  52. package/lib/src/core-components/src/core-components/atoms/Label/Label.d.ts +2 -0
  53. package/lib/src/core-components/src/core-components/atoms/Label/Label.d.ts.map +1 -1
  54. package/lib/src/core-components/src/core-components/atoms/Label/Label.js +16 -3
  55. package/lib/src/core-components/src/core-components/atoms/Textarea/Textarea.js +1 -1
  56. package/lib/src/core-components/src/tc.global.css +10 -2
  57. package/lib/src/core-components/src/tc.module.css +1 -1
  58. package/lib/src/core-components/src/utils/utility.util.d.ts +1 -0
  59. package/lib/src/core-components/src/utils/utility.util.d.ts.map +1 -1
  60. package/lib/src/core-components/src/utils/utility.util.js +9 -0
  61. package/package.json +1 -1
  62. package/lib/src/core-components/src/components/Form/form.component.d.ts +0 -106
  63. package/lib/src/core-components/src/components/Form/form.component.d.ts.map +0 -1
  64. package/lib/src/core-components/src/components/Form/form.component.js +0 -88
  65. package/lib/src/core-components/src/components/Input/CSSMultilineInput/css-multiline-input.component.d.ts +0 -13
  66. package/lib/src/core-components/src/components/Input/CSSMultilineInput/css-multiline-input.component.d.ts.map +0 -1
  67. package/lib/src/core-components/src/components/Input/CSSMultilineInput/css-multiline-input.component.js +0 -103
  68. package/lib/src/core-components/src/components/Input/InputDropdown/input-dropdown.component.d.ts +0 -10
  69. package/lib/src/core-components/src/components/Input/InputDropdown/input-dropdown.component.d.ts.map +0 -1
  70. package/lib/src/core-components/src/components/Input/InputDropdown/input-dropdown.component.js +0 -44
  71. package/lib/src/core-components/src/components/Input/InputOTP/input-otp.component.d.ts +0 -14
  72. package/lib/src/core-components/src/components/Input/InputOTP/input-otp.component.d.ts.map +0 -1
  73. package/lib/src/core-components/src/components/Input/InputOTP/input-otp.component.js +0 -62
  74. package/lib/src/core-components/src/components/Input/InputOTP/input-otp.styles.css +0 -35
  75. package/lib/src/core-components/src/components/Input/InputPin/input-pin.component.d.ts +0 -16
  76. package/lib/src/core-components/src/components/Input/InputPin/input-pin.component.d.ts.map +0 -1
  77. package/lib/src/core-components/src/components/Input/InputPin/input-pin.component.js +0 -76
  78. package/lib/src/core-components/src/components/Input/InputPin/input.styles.css +0 -35
  79. package/lib/src/core-components/src/components/check-box/checkBox.component.d.ts +0 -12
  80. package/lib/src/core-components/src/components/check-box/checkBox.component.d.ts.map +0 -1
  81. package/lib/src/core-components/src/components/check-box/checkBox.component.js +0 -20
  82. package/lib/src/core-components/src/components/date-picker/date-picker.component.d.ts +0 -12
  83. package/lib/src/core-components/src/components/date-picker/date-picker.component.d.ts.map +0 -1
  84. package/lib/src/core-components/src/components/date-picker/date-picker.component.js +0 -20
  85. package/lib/src/core-components/src/components/input-dropdown/input-dropdown.component.d.ts +0 -10
  86. package/lib/src/core-components/src/components/input-dropdown/input-dropdown.component.d.ts.map +0 -1
  87. package/lib/src/core-components/src/components/input-dropdown/input-dropdown.component.js +0 -44
  88. package/lib/src/core-components/src/components/radio/radio.component.d.ts +0 -9
  89. package/lib/src/core-components/src/components/radio/radio.component.d.ts.map +0 -1
  90. package/lib/src/core-components/src/components/radio/radio.component.js +0 -20
  91. package/lib/src/core-components/src/components/text-input-dropdown/text-input-dropdown.component.d.ts +0 -16
  92. package/lib/src/core-components/src/components/text-input-dropdown/text-input-dropdown.component.d.ts.map +0 -1
  93. package/lib/src/core-components/src/components/text-input-dropdown/text-input-dropdown.component.js +0 -91
  94. /package/lib/src/core-components/src/components/{Input/CSSMultilineInput → FormField}/css-properties.d.ts +0 -0
  95. /package/lib/src/core-components/src/components/{Input/CSSMultilineInput → FormField}/css-properties.js +0 -0
@@ -1,13 +0,0 @@
1
- interface CSSMultilineProps {
2
- label?: string;
3
- defaultValue?: string;
4
- placeholder?: string;
5
- className?: string;
6
- style?: any;
7
- onChange?(item: any): void;
8
- onReset?(item: any): void;
9
- onMoreInfo?(): void;
10
- }
11
- export declare const CSSMultiline: ({ label, defaultValue, className, style, placeholder, onChange, onReset, onMoreInfo, }: CSSMultilineProps) => import("react/jsx-runtime").JSX.Element;
12
- export {};
13
- //# sourceMappingURL=css-multiline-input.component.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"css-multiline-input.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Input/CSSMultilineInput/css-multiline-input.component.tsx"],"names":[],"mappings":"AAQA,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;IACrB,UAAU,CAAC,IAAI,IAAI,CAAC;CACrB;AAWD,eAAO,MAAM,YAAY,2FAStB,iBAAiB,4CAoJnB,CAAC"}
@@ -1,103 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useEffect, useState, useRef } from 'react';
3
- import * as Form from '../../Form/form.component';
4
- import { properties as propertiesObj } from './css-properties';
5
- import s from '../../../tc.module.css';
6
- import { cn } from '../../../utils';
7
- import { Icon } from '../../';
8
- const mapToArray = (arr) => {
9
- const res = [];
10
- arr.forEach(function (obj, index) {
11
- const key = Object.keys(obj)[0];
12
- const value = key;
13
- res.push([value, obj[key]]);
14
- });
15
- return res;
16
- };
17
- const data = mapToArray(propertiesObj);
18
- export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "fontSize: 12,backgroundColor:'#000000'", onChange, onReset, onMoreInfo, }) => {
19
- const value = useRef(defaultValue || '');
20
- const [properties, setProperties] = useState([]);
21
- const [isListOpen, setIsListOpen] = useState(false);
22
- useEffect(() => {
23
- value.current = defaultValue;
24
- setProperties(data);
25
- }, [defaultValue]);
26
- const useOutsideAlerter = (ref) => {
27
- useEffect(() => {
28
- function handleClickOutside(event) {
29
- if (ref.current && !ref.current.contains(event.target)) {
30
- setIsListOpen(false);
31
- onChange && onChange(value.current);
32
- }
33
- }
34
- document.addEventListener('mousedown', handleClickOutside);
35
- return () => {
36
- document.removeEventListener('mousedown', handleClickOutside);
37
- };
38
- }, [ref]);
39
- };
40
- const wrapperRef = useRef(null);
41
- useOutsideAlerter(wrapperRef);
42
- const list = [];
43
- const filter = (css) => {
44
- let matchString = css?.split(/,\s*/);
45
- matchString = matchString[matchString?.length - 1];
46
- matchString = matchString?.split(':')[0];
47
- matchString = matchString?.split("'")[0];
48
- if (css?.length == 0)
49
- return setProperties(data);
50
- else {
51
- data?.map((item) => {
52
- const innerItem = [];
53
- const isItems = item[0]?.startsWith(matchString);
54
- if (isItems)
55
- innerItem.push(item[0]);
56
- if (innerItem?.length > 0)
57
- list.push([item[0], item[1]]);
58
- });
59
- setProperties(list);
60
- }
61
- };
62
- const onKeyUp = (e) => {
63
- setIsListOpen(true);
64
- };
65
- return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['relative']), ref: wrapperRef, children: [_jsxs("div", { className: cn(s.flex, s.absolute, s['gap-2'], s['right-2']), children: [onReset && (_jsx(Icon, { nameIcon: "MdLockReset", propsIcon: { color: '#000000', size: 24 }, onClick: () => {
66
- // Remove the last CSS property (full key:value pair) from value.current
67
- const styles = value.current.split(',').filter(Boolean);
68
- if (styles.length > 0) {
69
- styles.pop();
70
- value.current = styles.join(',') + (styles.length ? ',' : '');
71
- }
72
- else {
73
- value.current = '';
74
- }
75
- onReset && onReset(value.current);
76
- }, tooltip: "Reset CSS" })), onMoreInfo && (_jsx(Icon, { nameIcon: "MdInfoOutline", propsIcon: { color: '#000000', size: 24 }, onClick: onMoreInfo, tooltip: "More Info" }))] }), _jsx(Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: cn(className), onKeyUp: onKeyUp, onChange: (css) => {
77
- value.current = css;
78
- filter(css);
79
- } }), isListOpen && (_jsx("div", { children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['bg-black'], s['text-white'], s['overflow-y-scroll'], s['w-full']), style: { maxHeight: 'calc(100vh - 20vh)' }, children: properties?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], s['gap-4'], s['p-2']), children: [_jsx("span", { className: cn(s['underline']), children: item[0] }), item[1]?.map((prop) => (_jsxs("li", { className: cn(s['flex'], s['bg-slate-800'], s['rounded-md'], s['items-center'], s['cursor-pointer']), onClick: () => {
80
- let existsString = value.current?.split(',');
81
- if (value.current.includes(',')) {
82
- existsString = existsString.map((item) => {
83
- if (item?.includes(':'))
84
- return item;
85
- });
86
- if (prop != 'number')
87
- existsString.push(`${item[0]}:'${prop}',`);
88
- else
89
- existsString.push(`${item[0]}:1,`);
90
- value.current = existsString
91
- .join(',')
92
- .replaceAll(',,', ',');
93
- }
94
- else {
95
- if (prop != 'number')
96
- value.current = `${item[0]}:'${prop}',`;
97
- else {
98
- value.current = `${item[0]}:1,`;
99
- }
100
- }
101
- filter(existsString.join(''));
102
- }, children: [' ', prop, ' '] })))] }, index))) }) }))] }));
103
- };
@@ -1,10 +0,0 @@
1
- interface InputDropdownProps {
2
- title: string;
3
- items: Array<string>;
4
- hasError?: boolean;
5
- className?: string;
6
- onChange?: (item: string) => void;
7
- }
8
- export declare const InputDropdown: ({ items, className, hasError, title, onChange, }: InputDropdownProps) => import("react/jsx-runtime").JSX.Element;
9
- export {};
10
- //# sourceMappingURL=input-dropdown.component.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Input/InputDropdown/input-dropdown.component.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,aAAa,qDAMvB,kBAAkB,4CAsIpB,CAAC"}
@@ -1,44 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState, useEffect, useRef } from 'react';
3
- import s from '../../../tc.module.css';
4
- import { cn } from '../../../utils';
5
- import { Icon } from '../../';
6
- export const InputDropdown = ({ items, className, hasError, title, onChange, }) => {
7
- const [isOpen, setIsOpen] = useState(false);
8
- const [value, setValue] = useState('');
9
- const [filteredItems, setFilteredItems] = useState(items);
10
- const useOutsideAlerter = (ref) => {
11
- useEffect(() => {
12
- function handleClickOutside(event) {
13
- if (ref.current &&
14
- !ref.current.contains(event.target) &&
15
- isOpen &&
16
- isOpen)
17
- setIsOpen(!isOpen);
18
- }
19
- document.addEventListener('mousedown', handleClickOutside);
20
- return () => {
21
- document.removeEventListener('mousedown', handleClickOutside);
22
- };
23
- }, [ref]);
24
- };
25
- const handleInputChange = (event) => {
26
- const inputValue = event.target.value;
27
- setValue(inputValue);
28
- const filtered = items.filter((item) => item.toLowerCase().includes(inputValue.toLowerCase()));
29
- setFilteredItems(filtered);
30
- onChange && onChange(inputValue);
31
- };
32
- const wrapperRef = useRef(null);
33
- useOutsideAlerter(wrapperRef);
34
- return (_jsxs("div", { className: cn(className, s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['flex-row'], s['items-center']), children: [_jsx("input", { type: "text", name: "name", placeholder: title, value: value, className: cn(s['pt-3'], s['pb-2'], s['w-full'], s['px-0'], s['mt-0'], s['bg-transparent'], s['border-gray-secondary'], s['border-0'], s['border-b'], s['appearance-none'], s['focus:outline-none'], s['focus:ring-0'], s['font-arimaRegular'], s['text-md']), onClick: () => {
35
- setIsOpen(!isOpen);
36
- }, onChange: handleInputChange }), !isOpen && (_jsx(_Fragment, { children: _jsx(Icon, { nameIcon: "MdKeyboardArrowDown", propsIcon: { size: '24', color: '#000000' }, onClick: () => {
37
- setIsOpen(!isOpen);
38
- } }) })), isOpen && (_jsx(Icon, { nameIcon: "MdKeyboardArrowUp", propsIcon: { size: '24', color: '#000000' }, onClick: () => {
39
- setIsOpen(!isOpen);
40
- } }))] }), isOpen && (_jsx("div", { className: cn(s['z-10'], s['w-full'], s['absolute'], s['text-base'], s['list-none'], s['bg-white'], s['rounded'], s['divide-y'], s['divide-gray-100'], s['shadow'], s['dark:bg-gray-700']), ref: wrapperRef, children: _jsx("ul", { className: s['py-1'], children: filteredItems?.map((item, index) => (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-600'], s['dark:text-gray-200'], s['font-arimaRegular']), onClick: () => {
41
- setValue(item);
42
- setIsOpen(!isOpen);
43
- }, children: item }, index))) }) })), hasError && (_jsx("span", { className: cn(s['text-red'], s['text-4xs']), id: "error", children: `${title} is required` }))] }));
44
- };
@@ -1,14 +0,0 @@
1
- import React from 'react';
2
- interface PinInputGridProps {
3
- title?: string;
4
- hasError?: boolean;
5
- className?: string;
6
- disable?: boolean;
7
- blur?: any;
8
- name?: string;
9
- pin: Array<number | undefined>;
10
- onPinChanged: (pinEntry: number | undefined, index: number) => void;
11
- }
12
- export declare const InputOtp: React.FC<PinInputGridProps>;
13
- export {};
14
- //# sourceMappingURL=input-otp.component.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input-otp.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Input/InputOTP/input-otp.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAI/C,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IAE/B,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkGhD,CAAC"}
@@ -1,62 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- /* eslint-disable no-console */
3
- import { useEffect, useRef } from 'react';
4
- import s from '../../../tc.module.css';
5
- import { cn } from '../../../utils';
6
- export const InputOtp = ({ className, pin, onPinChanged, }) => {
7
- const pinLength = 6;
8
- const Pin_Min_Value = 0;
9
- const Pin_Max_Value = 9;
10
- const BACKSPACE_Key = 'Backspace';
11
- const inputRefs = useRef([]);
12
- useEffect(() => {
13
- const ref = inputRefs.current[0];
14
- if (ref) {
15
- ref.focus();
16
- }
17
- }, []);
18
- const changePinFocus = (pinIndex) => {
19
- const ref = inputRefs.current[pinIndex];
20
- if (ref) {
21
- ref.focus();
22
- }
23
- };
24
- const onChange = (event, index) => {
25
- const value = event.target.value;
26
- const pinNumber = Number(value.trim());
27
- if (isNaN(pinNumber) || value.length === 0) {
28
- return;
29
- }
30
- if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
31
- onPinChanged(pinNumber, index);
32
- if (index < pinLength - 1) {
33
- changePinFocus(index + 1);
34
- }
35
- }
36
- };
37
- const onKeyDown = (event, index) => {
38
- const keyboardKeyCode = event.nativeEvent.code;
39
- if (keyboardKeyCode != BACKSPACE_Key)
40
- return;
41
- if (pin[index] === undefined) {
42
- changePinFocus(index - 1);
43
- }
44
- else {
45
- onPinChanged(undefined, index);
46
- }
47
- };
48
- return (_jsx("div", { className: cn(s['relative'], className), children: _jsx("div", { className: cn(s['flex'], s['gap-2'], s['p-2'], s['text-center']), children: Array.from({ length: pinLength }, (_, index) => (_jsx("input", { className: cn(s['text-md'], s['font-extrabold'], s['bg-transparent'], s['text-center'], s['z-20'], s['border'], s['border-gray-secondary'], s['rounded-full'] // Added for full border radius
49
- ), style: { width: '30px', height: '30px' }, onKeyDown: (event) => onKeyDown(event, index), onMouseUp: () => {
50
- if (pin.join('').length <= 0) {
51
- changePinFocus(0);
52
- }
53
- }, onClick: () => {
54
- if (pin.join('').length <= 0) {
55
- onPinChanged(undefined, 0);
56
- }
57
- }, ref: (el) => {
58
- if (el) {
59
- inputRefs.current[index] = el;
60
- }
61
- }, onChange: (event) => onChange(event, index), value: pin[index] || '' }, index))) }) }));
62
- };
@@ -1,35 +0,0 @@
1
- .-z-1 {
2
- z-index: -1;
3
- }
4
-
5
- .origin-0 {
6
- transform-origin: 0%;
7
- }
8
-
9
- input:focus ~ label,
10
- input:not(:placeholder-shown) ~ label,
11
- textarea:focus ~ label,
12
- textarea:not(:placeholder-shown) ~ label,
13
- select:focus ~ label,
14
- select:not([value=""]):valid ~ label {
15
- /* @apply transform; scale-75; -translate-y-6; */
16
- --tw-translate-x: 0;
17
- --tw-translate-y: 0;
18
- --tw-rotate: 0;
19
- --tw-skew-x: 0;
20
- --tw-skew-y: 0;
21
- transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
22
- rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
23
- scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
24
- --tw-scale-x: 0.75;
25
- --tw-scale-y: 0.75;
26
- --tw-translate-y: -1.5rem;
27
- }
28
-
29
- input:focus ~ label,
30
- select:focus ~ label {
31
- /* @apply text-black; left-0; */
32
- --tw-text-opacity: 1;
33
- color: "#696969";
34
- left: 0px;
35
- }
@@ -1,16 +0,0 @@
1
- import React from 'react';
2
- import './input.styles.css';
3
- interface PinInputGridProps {
4
- title: string;
5
- hasError?: any;
6
- errorMsg?: string;
7
- defaultMsg?: string;
8
- className?: string;
9
- disable?: boolean;
10
- name?: string;
11
- defaultPin: Array<number | undefined>;
12
- onPinChanged: (item: any, index: number) => void;
13
- }
14
- export declare const InputPin: React.FC<PinInputGridProps>;
15
- export {};
16
- //# sourceMappingURL=input-pin.component.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input-pin.component.d.ts","sourceRoot":"","sources":["../../../../../../../src/core-components/src/components/Input/InputPin/input-pin.component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAI5B,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0KhD,CAAC"}
@@ -1,76 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- /* eslint-disable */
3
- import { useRef, useState } from 'react';
4
- import './input.styles.css';
5
- import s from '../../../tc.module.css';
6
- import { cn } from '../../../utils';
7
- export const InputPin = ({ title, className, defaultPin, errorMsg, defaultMsg, hasError, onPinChanged, }) => {
8
- const pin = useRef([]);
9
- const [reload, setReload] = useState(false);
10
- const pinLength = 12;
11
- const Pin_Min_Value = 0;
12
- const Pin_Max_Value = 9;
13
- const BACKSPACE_Key = 'Backspace';
14
- const inputRefs = useRef([]);
15
- const removeValuesFromArray = (valuesArray, value) => {
16
- const valueIndex = valuesArray.findIndex((entry) => entry === value);
17
- if (valueIndex === -1) {
18
- return;
19
- }
20
- valuesArray.splice(valueIndex, 1);
21
- };
22
- const changePinFocus = (pinIndex) => {
23
- const ref = inputRefs.current[pinIndex];
24
- if (ref) {
25
- ref.focus();
26
- }
27
- };
28
- const onChange = (event, index) => {
29
- const previousValue = event.target.defaultValue;
30
- const valueArray = event.target.value.split('');
31
- const output = removeValuesFromArray(valueArray, previousValue);
32
- const value = valueArray.pop();
33
- if (!value) {
34
- return;
35
- }
36
- const pinNumber = Number(value);
37
- if (isNaN(pinNumber) || value.length === 0) {
38
- return;
39
- }
40
- pin.current[pin.current?.length] = value;
41
- setReload(!reload);
42
- if (pinNumber >= Pin_Min_Value && pinNumber <= Pin_Max_Value) {
43
- onPinChanged(pin.current, index);
44
- if (index < pinLength - 1) {
45
- changePinFocus(index + 1);
46
- }
47
- }
48
- };
49
- const onKeyDown = (event, index) => {
50
- const keyboardKeyCode = event.nativeEvent.code;
51
- if (keyboardKeyCode != BACKSPACE_Key)
52
- return;
53
- if (pin.current[index] !== undefined && keyboardKeyCode === BACKSPACE_Key) {
54
- changePinFocus(index - 1);
55
- }
56
- if (pin.current[index] === undefined) {
57
- changePinFocus(index - 1);
58
- }
59
- else {
60
- onPinChanged(undefined, index);
61
- }
62
- };
63
- return (_jsxs("div", { className: cn(className, s.relative), children: [_jsx("label", { className: cn(s['duration-300'], s['-z-1'], s['origin-0'], s['text-gray-dark-secondary'], s['font-arimaRegular'], s['text-md']), children: title }), _jsx("div", { className: cn(s.flex, s['space-x-1']), children: Array.from({ length: pinLength }, (_, index) => (_jsxs("div", { className: cn(s.flex, s['space-x-1'], s['max-w-full'], s['items-stretch']), children: [_jsx("input", { "data-testid": "inputElementPin", type: "tel", className: cn(s['pb-2'], s.block, s['w-4'], s['px-0'], s['mt-0'], s['bg-transparent'], s['text-center'], s['border-0'], s['border-b'], s['z-20'], s['appearance-none'], s['rounded-none'], s['focus:outline-none'], s['focus:ring-0'], s['focus:border-gray-secondary'], s['border-gray-secondary'], s['font-arimaRegular']), onKeyUp: (event) => onKeyDown(event, index), onMouseUp: () => {
64
- if (pin.current.join('').length <= 0) {
65
- changePinFocus(0);
66
- }
67
- }, onClick: () => {
68
- if (pin.current.join('').length <= 0) {
69
- onPinChanged(undefined, 0);
70
- }
71
- }, ref: (el) => {
72
- if (el) {
73
- inputRefs.current[index] = el;
74
- }
75
- }, onChange: (event) => onChange(event, index), value: pin.current[index]?.toString() || '' }, index), _jsx("div", { className: s.invisible, children: (index + 1) % 4 === 0 ? 'ss' : null })] }, index))) }), hasError && hasError?.type !== 'required' && (_jsx("span", { className: cn(s['text-sm'], s['text-red'], s['text-4xs'], s['font-arimaRegular']), id: "error", children: `${errorMsg || ''}` })), (!hasError || hasError?.type === 'required') && (_jsx("span", { className: cn(s['text-sm'], s['text-4xs'], s['font-arimaRegular']), id: "error", children: `${defaultMsg || ''}` }))] }));
76
- };
@@ -1,35 +0,0 @@
1
- .-z-1 {
2
- z-index: -1;
3
- }
4
-
5
- .origin-0 {
6
- transform-origin: 0%;
7
- }
8
-
9
- input:focus ~ label,
10
- input:not(:placeholder-shown) ~ label,
11
- textarea:focus ~ label,
12
- textarea:not(:placeholder-shown) ~ label,
13
- select:focus ~ label,
14
- select:not([value='']):valid ~ label {
15
- /* @apply transform; scale-75; -translate-y-6; */
16
- --tw-translate-x: 0;
17
- --tw-translate-y: 0;
18
- --tw-rotate: 0;
19
- --tw-skew-x: 0;
20
- --tw-skew-y: 0;
21
- transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
22
- rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
23
- scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
24
- --tw-scale-x: 0.75;
25
- --tw-scale-y: 0.75;
26
- --tw-translate-y: -1.5rem;
27
- }
28
-
29
- input:focus ~ label,
30
- select:focus ~ label {
31
- /* @apply text-black; left-0; */
32
- --tw-text-opacity: 1;
33
- color: '#696969';
34
- left: 0px;
35
- }
@@ -1,12 +0,0 @@
1
- interface CheckBoxProps {
2
- title: string;
3
- data: Array<any>;
4
- className?: string;
5
- disable?: boolean;
6
- fill?: string;
7
- stroke?: string;
8
- onChange: (items: any) => void;
9
- }
10
- export declare const CheckBox: ({ title, data, className, fill, stroke, onChange, }: CheckBoxProps) => import("react/jsx-runtime").JSX.Element;
11
- export {};
12
- //# sourceMappingURL=checkBox.component.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkBox.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/check-box/checkBox.component.tsx"],"names":[],"mappings":"AAMA,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,QAAQ,wDAOlB,aAAa,4CAoCf,CAAC"}
@@ -1,20 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState } from 'react';
3
- import s from '../../tc.module.css';
4
- import { cn } from '../../utils';
5
- import { InputWrapper } from '../Form/form.component';
6
- import { Icon } from '..';
7
- export const CheckBox = ({ title = 'Banks', data = [{ title: 'SBI Bank', checked: false }], className, fill = '#E7503D', stroke = '#E7503D', onChange, }) => {
8
- const [list, setList] = useState(data);
9
- const width = 20;
10
- return (_jsx(InputWrapper, { label: title, children: list?.map((item, index) => (_jsxs("div", { className: `${cn(s.flex, s['flex-row'], s['items-center'])} ${className}`, onClick: () => {
11
- const result = list?.map((e, i) => {
12
- if (i === index)
13
- return { ...e, checked: !item.checked };
14
- else
15
- return { ...e };
16
- });
17
- setList(result);
18
- onChange(result?.filter((item) => item.checked));
19
- }, children: [_jsx("div", { className: cn(s.flex, s['gap-2']), children: item.checked ? (_jsx(Icon, { nameIcon: "ImCheckboxChecked" })) : (_jsx(Icon, { nameIcon: "ImCheckboxUnchecked" })) }), _jsx("span", { className: cn(s['text-sm'], s['font-medium'], s['ml-2']), children: item?.title })] }, index))) }));
20
- };
@@ -1,12 +0,0 @@
1
- import 'react-datepicker/dist/react-datepicker.css';
2
- interface DatePickerProps {
3
- title: string;
4
- value?: string;
5
- className?: string;
6
- disable?: boolean;
7
- showFormat?: string;
8
- placeholder?: string;
9
- }
10
- export declare const DatePickerComp: ({ title, className, disable, value, showFormat, placeholder, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
11
- export {};
12
- //# sourceMappingURL=date-picker.component.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/date-picker/date-picker.component.tsx"],"names":[],"mappings":"AAEA,OAAO,4CAA4C,CAAC;AAOpD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,mEAOxB,eAAe,4CAkDjB,CAAC"}
@@ -1,20 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState, forwardRef } from 'react';
3
- import DatePicker from 'react-datepicker';
4
- import 'react-datepicker/dist/react-datepicker.css';
5
- import { Icon } from '..';
6
- import dayjs from 'dayjs';
7
- import { InputWrapper } from '../Form/form.component';
8
- import s from '../../tc.module.css';
9
- import { cn } from '../../utils';
10
- export const DatePickerComp = ({ title = 'Title', className, disable, value, showFormat = 'yyyy-MM-dd', placeholder = 'Select Date', }) => {
11
- const [pickedDate, setPickedDate] = useState(value && dayjs(value).toDate());
12
- const CustomInput = forwardRef((props, ref) => {
13
- return (_jsxs("div", { onClick: !disable && props.onClick, ref: ref, className: cn(s['border-gray-light'], s['place-items-center'], s['border'], s['rounded-md'], s['px-2'], s.flex), children: [_jsx("label", { className: cn(s['mr-3'], s['font-arimaRegular'], s['text-primaryCharcoal'], s['text-lg']), children: props.value || props.placeholder }), _jsx(Icon, { nameIcon: "ImCalendar" })] }));
14
- });
15
- CustomInput.displayName = 'CustomInput';
16
- const handleChanges = (date) => {
17
- setPickedDate(date);
18
- };
19
- return (_jsx(InputWrapper, { label: title, children: _jsx("div", { className: cn(s.flex, s['zIndex-999'], className), children: _jsx(DatePicker, { selected: pickedDate || new Date(), dateFormat: showFormat, placeholder: placeholder, onChange: handleChanges, customInput: _jsx(CustomInput, {}) }) }) }));
20
- };
@@ -1,10 +0,0 @@
1
- interface InputDropdownProps {
2
- title: string;
3
- items: Array<string>;
4
- hasError?: boolean;
5
- className?: string;
6
- onChange?: (item: string) => void;
7
- }
8
- export declare const InputDropdown: ({ items, className, hasError, title, onChange, }: InputDropdownProps) => import("react/jsx-runtime").JSX.Element;
9
- export {};
10
- //# sourceMappingURL=input-dropdown.component.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input-dropdown.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/input-dropdown/input-dropdown.component.tsx"],"names":[],"mappings":"AAIA,UAAU,kBAAkB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,aAAa,qDAMvB,kBAAkB,4CAsIpB,CAAC"}
@@ -1,44 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useState, useEffect, useRef } from 'react';
3
- import s from '../../tc.module.css';
4
- import { cn } from '../../utils';
5
- import { Icon } from '../';
6
- export const InputDropdown = ({ items, className, hasError, title, onChange, }) => {
7
- const [isOpen, setIsOpen] = useState(false);
8
- const [value, setValue] = useState('');
9
- const [filteredItems, setFilteredItems] = useState(items);
10
- const useOutsideAlerter = (ref) => {
11
- useEffect(() => {
12
- function handleClickOutside(event) {
13
- if (ref.current &&
14
- !ref.current.contains(event.target) &&
15
- isOpen &&
16
- isOpen)
17
- setIsOpen(!isOpen);
18
- }
19
- document.addEventListener('mousedown', handleClickOutside);
20
- return () => {
21
- document.removeEventListener('mousedown', handleClickOutside);
22
- };
23
- }, [ref]);
24
- };
25
- const handleInputChange = (event) => {
26
- const inputValue = event.target.value;
27
- setValue(inputValue);
28
- const filtered = items.filter((item) => item.toLowerCase().includes(inputValue.toLowerCase()));
29
- setFilteredItems(filtered);
30
- onChange && onChange(inputValue);
31
- };
32
- const wrapperRef = useRef(null);
33
- useOutsideAlerter(wrapperRef);
34
- return (_jsxs("div", { className: cn(className, s['relative']), children: [_jsxs("div", { className: cn(s['flex'], s['flex-row'], s['items-center']), children: [_jsx("input", { type: "text", name: "name", placeholder: title, value: value, className: cn(s['pt-3'], s['pb-2'], s['w-full'], s['px-0'], s['mt-0'], s['bg-transparent'], s['border-gray-secondary'], s['border-0'], s['border-b'], s['appearance-none'], s['focus:outline-none'], s['focus:ring-0'], s['font-arimaRegular'], s['text-md']), onClick: () => {
35
- setIsOpen(!isOpen);
36
- }, onChange: handleInputChange }), !isOpen && (_jsx(_Fragment, { children: _jsx(Icon, { nameIcon: "MdKeyboardArrowDown", propsIcon: { size: '24', color: '#000000' }, onClick: () => {
37
- setIsOpen(!isOpen);
38
- } }) })), isOpen && (_jsx(Icon, { nameIcon: "MdKeyboardArrowUp", propsIcon: { size: '24', color: '#000000' }, onClick: () => {
39
- setIsOpen(!isOpen);
40
- } }))] }), isOpen && (_jsx("div", { className: cn(s['z-10'], s['w-full'], s['absolute'], s['text-base'], s['list-none'], s['bg-white'], s['rounded'], s['divide-y'], s['divide-gray-100'], s['shadow'], s['dark:bg-gray-700']), ref: wrapperRef, children: _jsx("ul", { className: s['py-1'], children: filteredItems?.map((item, index) => (_jsx("li", { className: cn(s['block'], s['py-2'], s['px-4'], s['text-md'], s['hover:bg-gray-100'], s['dark:hover:bg-gray-600'], s['dark:text-gray-200'], s['font-arimaRegular']), onClick: () => {
41
- setValue(item);
42
- setIsOpen(!isOpen);
43
- }, children: item }, index))) }) })), hasError && (_jsx("span", { className: cn(s['text-red'], s['text-4xs']), id: "error", children: `${title} is required` }))] }));
44
- };
@@ -1,9 +0,0 @@
1
- interface RadioProps {
2
- title: string;
3
- data: Array<any>;
4
- className?: string;
5
- onChange: (item: any) => void;
6
- }
7
- export declare const Radio: ({ title, data, className, onChange, }: RadioProps) => import("react/jsx-runtime").JSX.Element;
8
- export {};
9
- //# sourceMappingURL=radio.component.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"radio.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/components/radio/radio.component.tsx"],"names":[],"mappings":"AAMA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,KAAK,0CAKf,UAAU,4CAuCZ,CAAC"}
@@ -1,20 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { useState } from 'react';
3
- import { Icon } from '..';
4
- import { InputWrapper } from '../Form/form.component';
5
- import s from '../../tc.module.css';
6
- import { cn } from '../../utils';
7
- export const Radio = ({ title = 'Source', data = [], className, onChange, }) => {
8
- const [list, setList] = useState(data);
9
- const width = 20;
10
- return (_jsx(_Fragment, { children: _jsx(InputWrapper, { label: title, children: list?.map((item, index) => (_jsx("div", { className: cn(className, s['flex'], s['items-center'], s['mb-1']), onClick: () => {
11
- const result = list?.map((e, i) => {
12
- if (i == index)
13
- return { ...e, checked: true };
14
- else
15
- return { ...e, checked: false };
16
- });
17
- setList(result);
18
- onChange(result?.find((item) => item.checked));
19
- }, children: _jsxs("div", { className: cn(s['flex'], s['flex-row'], s['gap-1'], s['items-center']), children: [item.checked ? (_jsx(Icon, { nameIcon: "ImRadioChecked" })) : (_jsx(Icon, { nameIcon: "ImRadioUnchecked" })), _jsx("span", { className: cn(s['text-4xs']), children: item?.title })] }) }, index))) }) }));
20
- };
@@ -1,16 +0,0 @@
1
- import React from 'react';
2
- interface TextInputDropdownProps {
3
- placeholder?: string;
4
- items: Array<string>;
5
- hasError?: boolean;
6
- className?: string;
7
- value?: string;
8
- defaultValue?: string;
9
- onChange?: (item: string) => void;
10
- onBlur?: (event: React.FocusEvent<HTMLInputElement> | null, value?: string) => void;
11
- disabled?: boolean;
12
- allowCustomInput?: boolean;
13
- }
14
- export declare const TextInputDropdown: ({ items, className, hasError, placeholder, value: controlledValue, defaultValue, onChange, onBlur, disabled, allowCustomInput, }: TextInputDropdownProps) => import("react/jsx-runtime").JSX.Element;
15
- export {};
16
- //# sourceMappingURL=text-input-dropdown.component.d.ts.map