catchup-library-web 1.4.10 → 1.4.12

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 (7) hide show
  1. package/dist/index.js +34 -22
  2. package/dist/index.mjs +34 -22
  3. package/package.json +1 -1
  4. package/src/components/boxes/SelectionBox.tsx +1 -1
  5. package/src/components/boxes/SelectionCheckbox.tsx +11 -13
  6. package/src/components/groups/InputGroup.tsx +2 -2
  7. package/src/components/loading/BaseLoading.tsx +11 -3
package/dist/index.js CHANGED
@@ -247,37 +247,49 @@ var BaseLoading = ({
247
247
  }) => {
248
248
  let currentHeight;
249
249
  let currentWidth;
250
+ let currentMargin;
250
251
  if (size === "small") {
251
- currentHeight = 18;
252
- currentWidth = 18;
252
+ currentHeight = 16;
253
+ currentWidth = 16;
254
+ currentMargin = 4;
253
255
  } else if (size === "medium") {
254
256
  currentHeight = 48;
255
257
  currentWidth = 48;
258
+ currentMargin = 12;
256
259
  } else if (size === "large") {
257
260
  currentHeight = 72;
258
261
  currentWidth = 72;
262
+ currentMargin = 18;
259
263
  } else if (size === "xlarge") {
260
264
  currentHeight = 96;
261
265
  currentWidth = 96;
266
+ currentMargin = 24;
262
267
  } else {
263
268
  currentHeight = height;
264
269
  currentWidth = width;
265
270
  }
266
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
267
- import_react_loader_spinner.Oval,
268
- {
269
- height: currentHeight,
270
- width: currentWidth,
271
- wrapperStyle: {},
272
- wrapperClass: "",
273
- visible: true,
274
- ariaLabel: "oval-loading",
275
- color: primaryColor,
276
- secondaryColor,
277
- strokeWidth: 2,
278
- strokeWidthSecondary: 2
279
- }
280
- ) });
271
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
272
+ "div",
273
+ {
274
+ className: "flex justify-center items-center",
275
+ style: { marginTop: currentMargin, marginBottom: currentMargin },
276
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
277
+ import_react_loader_spinner.Oval,
278
+ {
279
+ height: currentHeight,
280
+ width: currentWidth,
281
+ wrapperStyle: {},
282
+ wrapperClass: "",
283
+ visible: true,
284
+ ariaLabel: "oval-loading",
285
+ color: primaryColor,
286
+ secondaryColor,
287
+ strokeWidth: 2,
288
+ strokeWidthSecondary: 2
289
+ }
290
+ )
291
+ }
292
+ );
281
293
  };
282
294
  var BaseLoading_default = BaseLoading;
283
295
 
@@ -3723,7 +3735,7 @@ var InputGroup = ({
3723
3735
  {
3724
3736
  ref: textAreaRef,
3725
3737
  disabled,
3726
- className: `w-full h-[44px] ${useMinHeight ? "min-h-[250px]" : ""} resize-none overflow-hidden py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : null} focus:shadow-input`,
3738
+ className: `w-full h-[44px] ${useMinHeight ? "min-h-[250px]" : ""} resize-none overflow-hidden py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
3727
3739
  placeholder: errorText ? errorText : placeholder,
3728
3740
  value,
3729
3741
  onLoad: (e) => {
@@ -3743,7 +3755,7 @@ var InputGroup = ({
3743
3755
  "input",
3744
3756
  {
3745
3757
  disabled,
3746
- className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : null} focus:shadow-input`,
3758
+ className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
3747
3759
  type,
3748
3760
  defaultValue,
3749
3761
  placeholder: errorText ? errorText : placeholder,
@@ -6302,7 +6314,7 @@ var SelectionBox = ({
6302
6314
  {
6303
6315
  className: `flex flex-row items-center gap-x-1 ${option.id === selectedId ? "opacity-100" : "opacity-50"}`,
6304
6316
  children: [
6305
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: option.icon }),
6317
+ option.icon,
6306
6318
  /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex-1 flex flex-col items-center", children: [
6307
6319
  /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: option.text }),
6308
6320
  option.subText ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-md", children: [
@@ -6696,7 +6708,7 @@ var SelectionCheckbox = ({
6696
6708
  (selectedId) => selectedId === option.id
6697
6709
  ) > -1 ? "opacity-100" : "opacity-50"}`,
6698
6710
  children: [
6699
- /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
6711
+ /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
6700
6712
  BaseImage_default,
6701
6713
  {
6702
6714
  src: selectedIdList.findIndex(
@@ -6705,7 +6717,7 @@ var SelectionCheckbox = ({
6705
6717
  alt: "checkbox",
6706
6718
  size: "small"
6707
6719
  }
6708
- ) }),
6720
+ ),
6709
6721
  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { children: option.text }) })
6710
6722
  ]
6711
6723
  }
package/dist/index.mjs CHANGED
@@ -56,37 +56,49 @@ var BaseLoading = ({
56
56
  }) => {
57
57
  let currentHeight;
58
58
  let currentWidth;
59
+ let currentMargin;
59
60
  if (size === "small") {
60
- currentHeight = 18;
61
- currentWidth = 18;
61
+ currentHeight = 16;
62
+ currentWidth = 16;
63
+ currentMargin = 4;
62
64
  } else if (size === "medium") {
63
65
  currentHeight = 48;
64
66
  currentWidth = 48;
67
+ currentMargin = 12;
65
68
  } else if (size === "large") {
66
69
  currentHeight = 72;
67
70
  currentWidth = 72;
71
+ currentMargin = 18;
68
72
  } else if (size === "xlarge") {
69
73
  currentHeight = 96;
70
74
  currentWidth = 96;
75
+ currentMargin = 24;
71
76
  } else {
72
77
  currentHeight = height;
73
78
  currentWidth = width;
74
79
  }
75
- return /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx(
76
- Oval,
77
- {
78
- height: currentHeight,
79
- width: currentWidth,
80
- wrapperStyle: {},
81
- wrapperClass: "",
82
- visible: true,
83
- ariaLabel: "oval-loading",
84
- color: primaryColor,
85
- secondaryColor,
86
- strokeWidth: 2,
87
- strokeWidthSecondary: 2
88
- }
89
- ) });
80
+ return /* @__PURE__ */ jsx(
81
+ "div",
82
+ {
83
+ className: "flex justify-center items-center",
84
+ style: { marginTop: currentMargin, marginBottom: currentMargin },
85
+ children: /* @__PURE__ */ jsx(
86
+ Oval,
87
+ {
88
+ height: currentHeight,
89
+ width: currentWidth,
90
+ wrapperStyle: {},
91
+ wrapperClass: "",
92
+ visible: true,
93
+ ariaLabel: "oval-loading",
94
+ color: primaryColor,
95
+ secondaryColor,
96
+ strokeWidth: 2,
97
+ strokeWidthSecondary: 2
98
+ }
99
+ )
100
+ }
101
+ );
90
102
  };
91
103
  var BaseLoading_default = BaseLoading;
92
104
 
@@ -3532,7 +3544,7 @@ var InputGroup = ({
3532
3544
  {
3533
3545
  ref: textAreaRef,
3534
3546
  disabled,
3535
- className: `w-full h-[44px] ${useMinHeight ? "min-h-[250px]" : ""} resize-none overflow-hidden py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : null} focus:shadow-input`,
3547
+ className: `w-full h-[44px] ${useMinHeight ? "min-h-[250px]" : ""} resize-none overflow-hidden py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
3536
3548
  placeholder: errorText ? errorText : placeholder,
3537
3549
  value,
3538
3550
  onLoad: (e) => {
@@ -3552,7 +3564,7 @@ var InputGroup = ({
3552
3564
  "input",
3553
3565
  {
3554
3566
  disabled,
3555
- className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : null} focus:shadow-input`,
3567
+ className: `w-full py-2 px-4 border ${errorText ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80" : "border-catchup-gray-100"} rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${disabled ? "bg-catchup-lighter-gray" : ""} focus:shadow-input`,
3556
3568
  type,
3557
3569
  defaultValue,
3558
3570
  placeholder: errorText ? errorText : placeholder,
@@ -6111,7 +6123,7 @@ var SelectionBox = ({
6111
6123
  {
6112
6124
  className: `flex flex-row items-center gap-x-1 ${option.id === selectedId ? "opacity-100" : "opacity-50"}`,
6113
6125
  children: [
6114
- /* @__PURE__ */ jsx40("div", { children: option.icon }),
6126
+ option.icon,
6115
6127
  /* @__PURE__ */ jsxs31("div", { className: "flex-1 flex flex-col items-center", children: [
6116
6128
  /* @__PURE__ */ jsx40("p", { children: option.text }),
6117
6129
  option.subText ? /* @__PURE__ */ jsxs31("p", { className: "text-md", children: [
@@ -6505,7 +6517,7 @@ var SelectionCheckbox = ({
6505
6517
  (selectedId) => selectedId === option.id
6506
6518
  ) > -1 ? "opacity-100" : "opacity-50"}`,
6507
6519
  children: [
6508
- /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45(
6520
+ /* @__PURE__ */ jsx45(
6509
6521
  BaseImage_default,
6510
6522
  {
6511
6523
  src: selectedIdList.findIndex(
@@ -6514,7 +6526,7 @@ var SelectionCheckbox = ({
6514
6526
  alt: "checkbox",
6515
6527
  size: "small"
6516
6528
  }
6517
- ) }),
6529
+ ),
6518
6530
  /* @__PURE__ */ jsx45("div", { className: "flex-1", children: /* @__PURE__ */ jsx45("p", { children: option.text }) })
6519
6531
  ]
6520
6532
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "catchup-library-web",
3
- "version": "1.4.10",
3
+ "version": "1.4.12",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {
package/src/components/boxes/SelectionBox.tsx CHANGED
@@ -24,7 +24,7 @@ const SelectionBox = ({
24
24
  option.id === selectedId ? "opacity-100" : "opacity-50"
25
25
  }`}
26
26
  >
27
- <div>{option.icon}</div>
27
+ {option.icon}
28
28
  <div className="flex-1 flex flex-col items-center">
29
29
  <p>{option.text}</p>
30
30
  {option.subText ? (
package/src/components/boxes/SelectionCheckbox.tsx CHANGED
@@ -40,19 +40,17 @@ const SelectionCheckbox = ({
40
40
  : "opacity-50"
41
41
  }`}
42
42
  >
43
- <div>
44
- <BaseImage
45
- src={
46
- selectedIdList.findIndex(
47
- (selectedId: any) => selectedId === option.id
48
- ) > -1
49
- ? "/icons/checkbox.webp"
50
- : "/icons/checkbox-empty.webp"
51
- }
52
- alt="checkbox"
53
- size="small"
54
- />
55
- </div>
43
+ <BaseImage
44
+ src={
45
+ selectedIdList.findIndex(
46
+ (selectedId: any) => selectedId === option.id
47
+ ) > -1
48
+ ? "/icons/checkbox.webp"
49
+ : "/icons/checkbox-empty.webp"
50
+ }
51
+ alt="checkbox"
52
+ size="small"
53
+ />
56
54
  <div className="flex-1">
57
55
  <p>{option.text}</p>
58
56
  </div>
package/src/components/groups/InputGroup.tsx CHANGED
@@ -247,7 +247,7 @@ const InputGroup = ({
247
247
  ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80"
248
248
  : "border-catchup-gray-100"
249
249
  } placeholder-catchup-gray-200 rounded-catchup-large focus:outline-none focus:border-catchup-blue-400 ${
250
- disabled ? "bg-catchup-lighter-gray" : null
250
+ disabled ? "bg-catchup-lighter-gray" : ""
251
251
  } focus:shadow-input`}
252
252
  placeholder={errorText ? errorText : placeholder}
253
253
  value={value}
@@ -284,7 +284,7 @@ const InputGroup = ({
284
284
  ? "border-catchup-red shadow-error placeholder:text-catchup-red placeholder:opacity-80"
285
285
  : "border-catchup-gray-100"
286
286
  } rounded-catchup-large focus:outline-none placeholder-catchup-gray-200 focus:border-catchup-blue-400 ${
287
- disabled ? "bg-catchup-lighter-gray" : null
287
+ disabled ? "bg-catchup-lighter-gray" : ""
288
288
  } focus:shadow-input`}
289
289
  type={type}
290
290
  defaultValue={defaultValue}
package/src/components/loading/BaseLoading.tsx CHANGED
@@ -10,19 +10,24 @@ const BaseLoading = ({
10
10
  }: IBaseLoadingProps) => {
11
11
  let currentHeight;
12
12
  let currentWidth;
13
+ let currentMargin;
13
14
 
14
15
  if (size === "small") {
15
- currentHeight = 18;
16
- currentWidth = 18;
16
+ currentHeight = 16;
17
+ currentWidth = 16;
18
+ currentMargin = 4;
17
19
  } else if (size === "medium") {
18
20
  currentHeight = 48;
19
21
  currentWidth = 48;
22
+ currentMargin = 12;
20
23
  } else if (size === "large") {
21
24
  currentHeight = 72;
22
25
  currentWidth = 72;
26
+ currentMargin = 18;
23
27
  } else if (size === "xlarge") {
24
28
  currentHeight = 96;
25
29
  currentWidth = 96;
30
+ currentMargin = 24;
26
31
  } else {
27
32
  currentHeight = height;
28
33
  currentWidth = width;
@@ -30,7 +35,10 @@ const BaseLoading = ({
30
35
 
31
36
  // px-4 py-2
32
37
  return (
33
- <div className="flex justify-center items-center">
38
+ <div
39
+ className="flex justify-center items-center"
40
+ style={{ marginTop: currentMargin, marginBottom: currentMargin }}
41
+ >
34
42
  <Oval
35
43
  height={currentHeight}
36
44
  width={currentWidth}