catchup-library-web 1.12.1 → 1.12.2
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/index.js +85 -10
- package/dist/index.mjs +85 -10
- package/package.json +1 -1
- package/src/components/groups/InputGroup.tsx +83 -11
package/dist/index.js
CHANGED
|
@@ -3703,7 +3703,34 @@ var InputGroup = ({
|
|
|
3703
3703
|
const MathModeOverlay = () => {
|
|
3704
3704
|
if (!showMathOverlay) return null;
|
|
3705
3705
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "math-overlay bg-white rounded-lg p-6 shadow-xl max-w-sm w-full mx-4", children: [
|
|
3706
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.
|
|
3706
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex justify-between items-center mb-4", children: [
|
|
3707
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-lg font-semibold text-catchup-gray-400", children: i18n_default.t("select_input_mode") }),
|
|
3708
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3709
|
+
"button",
|
|
3710
|
+
{
|
|
3711
|
+
className: "text-catchup-gray-300 hover:text-catchup-gray-400 transition-colors",
|
|
3712
|
+
onClick: () => setShowMathOverlay(false),
|
|
3713
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3714
|
+
"svg",
|
|
3715
|
+
{
|
|
3716
|
+
className: "w-6 h-6",
|
|
3717
|
+
fill: "none",
|
|
3718
|
+
stroke: "currentColor",
|
|
3719
|
+
viewBox: "0 0 24 24",
|
|
3720
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3721
|
+
"path",
|
|
3722
|
+
{
|
|
3723
|
+
strokeLinecap: "round",
|
|
3724
|
+
strokeLinejoin: "round",
|
|
3725
|
+
strokeWidth: 2,
|
|
3726
|
+
d: "M6 18L18 6M6 6l12 12"
|
|
3727
|
+
}
|
|
3728
|
+
)
|
|
3729
|
+
}
|
|
3730
|
+
)
|
|
3731
|
+
}
|
|
3732
|
+
)
|
|
3733
|
+
] }),
|
|
3707
3734
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-3", children: [
|
|
3708
3735
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3709
3736
|
"button",
|
|
@@ -3733,15 +3760,7 @@ var InputGroup = ({
|
|
|
3733
3760
|
] })
|
|
3734
3761
|
}
|
|
3735
3762
|
)
|
|
3736
|
-
] })
|
|
3737
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3738
|
-
"button",
|
|
3739
|
-
{
|
|
3740
|
-
className: "px-4 py-2 text-catchup-gray-300 hover:text-catchup-gray-400 transition-colors",
|
|
3741
|
-
onClick: () => setShowMathOverlay(false),
|
|
3742
|
-
children: i18n_default.t("cancel")
|
|
3743
|
-
}
|
|
3744
|
-
) })
|
|
3763
|
+
] })
|
|
3745
3764
|
] }) });
|
|
3746
3765
|
};
|
|
3747
3766
|
const CheckboxInputGroup = () => {
|
|
@@ -3892,6 +3911,62 @@ var InputGroup = ({
|
|
|
3892
3911
|
onFocus,
|
|
3893
3912
|
onKeyDown
|
|
3894
3913
|
}
|
|
3914
|
+
),
|
|
3915
|
+
useMath && isMathMode && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute inset-0 bg-white border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3916
|
+
"math-field",
|
|
3917
|
+
{
|
|
3918
|
+
ref: mathFieldRef,
|
|
3919
|
+
value: value || "",
|
|
3920
|
+
onInput: handleMathFieldChange,
|
|
3921
|
+
onFocus: handleMathFieldFocus,
|
|
3922
|
+
placeholder: errorText ? errorText : placeholder,
|
|
3923
|
+
disabled,
|
|
3924
|
+
"virtual-keyboard-mode": "off",
|
|
3925
|
+
"smart-fence": true,
|
|
3926
|
+
"smart-mode": true,
|
|
3927
|
+
"smart-superscript": true,
|
|
3928
|
+
style: {
|
|
3929
|
+
fontSize: "16px",
|
|
3930
|
+
padding: "8px 16px",
|
|
3931
|
+
border: "none",
|
|
3932
|
+
outline: "none",
|
|
3933
|
+
width: "100%",
|
|
3934
|
+
height: "100%",
|
|
3935
|
+
backgroundColor: "transparent",
|
|
3936
|
+
borderRadius: "16px",
|
|
3937
|
+
fontFamily: "inherit",
|
|
3938
|
+
color: disabled ? "#9ca3af" : "#000000"
|
|
3939
|
+
}
|
|
3940
|
+
}
|
|
3941
|
+
) }),
|
|
3942
|
+
useMath && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3943
|
+
"button",
|
|
3944
|
+
{
|
|
3945
|
+
className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-white border border-catchup-gray-100 rounded-md px-3 py-1 shadow-sm hover:shadow-md transition-shadow duration-200 z-10",
|
|
3946
|
+
onClick: () => setShowMathOverlay(true),
|
|
3947
|
+
type: "button",
|
|
3948
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-x-1", children: [
|
|
3949
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm font-medium text-catchup-gray-400", children: isMathMode ? "\u{1D453}(x)" : "Aa" }),
|
|
3950
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3951
|
+
"svg",
|
|
3952
|
+
{
|
|
3953
|
+
className: "w-3 h-3 text-catchup-gray-300",
|
|
3954
|
+
fill: "none",
|
|
3955
|
+
stroke: "currentColor",
|
|
3956
|
+
viewBox: "0 0 24 24",
|
|
3957
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
3958
|
+
"path",
|
|
3959
|
+
{
|
|
3960
|
+
strokeLinecap: "round",
|
|
3961
|
+
strokeLinejoin: "round",
|
|
3962
|
+
strokeWidth: 2,
|
|
3963
|
+
d: "M19 9l-7 7-7-7"
|
|
3964
|
+
}
|
|
3965
|
+
)
|
|
3966
|
+
}
|
|
3967
|
+
)
|
|
3968
|
+
] })
|
|
3969
|
+
}
|
|
3895
3970
|
)
|
|
3896
3971
|
] });
|
|
3897
3972
|
};
|
package/dist/index.mjs
CHANGED
|
@@ -3503,7 +3503,34 @@ var InputGroup = ({
|
|
|
3503
3503
|
const MathModeOverlay = () => {
|
|
3504
3504
|
if (!showMathOverlay) return null;
|
|
3505
3505
|
return /* @__PURE__ */ jsx16("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: /* @__PURE__ */ jsxs9("div", { className: "math-overlay bg-white rounded-lg p-6 shadow-xl max-w-sm w-full mx-4", children: [
|
|
3506
|
-
/* @__PURE__ */
|
|
3506
|
+
/* @__PURE__ */ jsxs9("div", { className: "flex justify-between items-center mb-4", children: [
|
|
3507
|
+
/* @__PURE__ */ jsx16("h3", { className: "text-lg font-semibold text-catchup-gray-400", children: i18n_default.t("select_input_mode") }),
|
|
3508
|
+
/* @__PURE__ */ jsx16(
|
|
3509
|
+
"button",
|
|
3510
|
+
{
|
|
3511
|
+
className: "text-catchup-gray-300 hover:text-catchup-gray-400 transition-colors",
|
|
3512
|
+
onClick: () => setShowMathOverlay(false),
|
|
3513
|
+
children: /* @__PURE__ */ jsx16(
|
|
3514
|
+
"svg",
|
|
3515
|
+
{
|
|
3516
|
+
className: "w-6 h-6",
|
|
3517
|
+
fill: "none",
|
|
3518
|
+
stroke: "currentColor",
|
|
3519
|
+
viewBox: "0 0 24 24",
|
|
3520
|
+
children: /* @__PURE__ */ jsx16(
|
|
3521
|
+
"path",
|
|
3522
|
+
{
|
|
3523
|
+
strokeLinecap: "round",
|
|
3524
|
+
strokeLinejoin: "round",
|
|
3525
|
+
strokeWidth: 2,
|
|
3526
|
+
d: "M6 18L18 6M6 6l12 12"
|
|
3527
|
+
}
|
|
3528
|
+
)
|
|
3529
|
+
}
|
|
3530
|
+
)
|
|
3531
|
+
}
|
|
3532
|
+
)
|
|
3533
|
+
] }),
|
|
3507
3534
|
/* @__PURE__ */ jsxs9("div", { className: "space-y-3", children: [
|
|
3508
3535
|
/* @__PURE__ */ jsx16(
|
|
3509
3536
|
"button",
|
|
@@ -3533,15 +3560,7 @@ var InputGroup = ({
|
|
|
3533
3560
|
] })
|
|
3534
3561
|
}
|
|
3535
3562
|
)
|
|
3536
|
-
] })
|
|
3537
|
-
/* @__PURE__ */ jsx16("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx16(
|
|
3538
|
-
"button",
|
|
3539
|
-
{
|
|
3540
|
-
className: "px-4 py-2 text-catchup-gray-300 hover:text-catchup-gray-400 transition-colors",
|
|
3541
|
-
onClick: () => setShowMathOverlay(false),
|
|
3542
|
-
children: i18n_default.t("cancel")
|
|
3543
|
-
}
|
|
3544
|
-
) })
|
|
3563
|
+
] })
|
|
3545
3564
|
] }) });
|
|
3546
3565
|
};
|
|
3547
3566
|
const CheckboxInputGroup = () => {
|
|
@@ -3692,6 +3711,62 @@ var InputGroup = ({
|
|
|
3692
3711
|
onFocus,
|
|
3693
3712
|
onKeyDown
|
|
3694
3713
|
}
|
|
3714
|
+
),
|
|
3715
|
+
useMath && isMathMode && /* @__PURE__ */ jsx16("div", { className: "absolute inset-0 bg-white border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input", children: /* @__PURE__ */ jsx16(
|
|
3716
|
+
"math-field",
|
|
3717
|
+
{
|
|
3718
|
+
ref: mathFieldRef,
|
|
3719
|
+
value: value || "",
|
|
3720
|
+
onInput: handleMathFieldChange,
|
|
3721
|
+
onFocus: handleMathFieldFocus,
|
|
3722
|
+
placeholder: errorText ? errorText : placeholder,
|
|
3723
|
+
disabled,
|
|
3724
|
+
"virtual-keyboard-mode": "off",
|
|
3725
|
+
"smart-fence": true,
|
|
3726
|
+
"smart-mode": true,
|
|
3727
|
+
"smart-superscript": true,
|
|
3728
|
+
style: {
|
|
3729
|
+
fontSize: "16px",
|
|
3730
|
+
padding: "8px 16px",
|
|
3731
|
+
border: "none",
|
|
3732
|
+
outline: "none",
|
|
3733
|
+
width: "100%",
|
|
3734
|
+
height: "100%",
|
|
3735
|
+
backgroundColor: "transparent",
|
|
3736
|
+
borderRadius: "16px",
|
|
3737
|
+
fontFamily: "inherit",
|
|
3738
|
+
color: disabled ? "#9ca3af" : "#000000"
|
|
3739
|
+
}
|
|
3740
|
+
}
|
|
3741
|
+
) }),
|
|
3742
|
+
useMath && /* @__PURE__ */ jsx16(
|
|
3743
|
+
"button",
|
|
3744
|
+
{
|
|
3745
|
+
className: "absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-white border border-catchup-gray-100 rounded-md px-3 py-1 shadow-sm hover:shadow-md transition-shadow duration-200 z-10",
|
|
3746
|
+
onClick: () => setShowMathOverlay(true),
|
|
3747
|
+
type: "button",
|
|
3748
|
+
children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-x-1", children: [
|
|
3749
|
+
/* @__PURE__ */ jsx16("span", { className: "text-sm font-medium text-catchup-gray-400", children: isMathMode ? "\u{1D453}(x)" : "Aa" }),
|
|
3750
|
+
/* @__PURE__ */ jsx16(
|
|
3751
|
+
"svg",
|
|
3752
|
+
{
|
|
3753
|
+
className: "w-3 h-3 text-catchup-gray-300",
|
|
3754
|
+
fill: "none",
|
|
3755
|
+
stroke: "currentColor",
|
|
3756
|
+
viewBox: "0 0 24 24",
|
|
3757
|
+
children: /* @__PURE__ */ jsx16(
|
|
3758
|
+
"path",
|
|
3759
|
+
{
|
|
3760
|
+
strokeLinecap: "round",
|
|
3761
|
+
strokeLinejoin: "round",
|
|
3762
|
+
strokeWidth: 2,
|
|
3763
|
+
d: "M19 9l-7 7-7-7"
|
|
3764
|
+
}
|
|
3765
|
+
)
|
|
3766
|
+
}
|
|
3767
|
+
)
|
|
3768
|
+
] })
|
|
3769
|
+
}
|
|
3695
3770
|
)
|
|
3696
3771
|
] });
|
|
3697
3772
|
};
|
package/package.json
CHANGED
|
@@ -163,9 +163,29 @@ const InputGroup = ({
|
|
|
163
163
|
return (
|
|
164
164
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
165
165
|
<div className="math-overlay bg-white rounded-lg p-6 shadow-xl max-w-sm w-full mx-4">
|
|
166
|
-
<
|
|
167
|
-
|
|
168
|
-
|
|
166
|
+
<div className="flex justify-between items-center mb-4">
|
|
167
|
+
<h3 className="text-lg font-semibold text-catchup-gray-400">
|
|
168
|
+
{i18n.t("select_input_mode")}
|
|
169
|
+
</h3>
|
|
170
|
+
<button
|
|
171
|
+
className="text-catchup-gray-300 hover:text-catchup-gray-400 transition-colors"
|
|
172
|
+
onClick={() => setShowMathOverlay(false)}
|
|
173
|
+
>
|
|
174
|
+
<svg
|
|
175
|
+
className="w-6 h-6"
|
|
176
|
+
fill="none"
|
|
177
|
+
stroke="currentColor"
|
|
178
|
+
viewBox="0 0 24 24"
|
|
179
|
+
>
|
|
180
|
+
<path
|
|
181
|
+
strokeLinecap="round"
|
|
182
|
+
strokeLinejoin="round"
|
|
183
|
+
strokeWidth={2}
|
|
184
|
+
d="M6 18L18 6M6 6l12 12"
|
|
185
|
+
/>
|
|
186
|
+
</svg>
|
|
187
|
+
</button>
|
|
188
|
+
</div>
|
|
169
189
|
<div className="space-y-3">
|
|
170
190
|
<button
|
|
171
191
|
className={`w-full p-3 rounded-lg border-2 transition-all duration-200 ${
|
|
@@ -216,14 +236,6 @@ const InputGroup = ({
|
|
|
216
236
|
</div>
|
|
217
237
|
</button>
|
|
218
238
|
</div>
|
|
219
|
-
<div className="mt-6 flex justify-end">
|
|
220
|
-
<button
|
|
221
|
-
className="px-4 py-2 text-catchup-gray-300 hover:text-catchup-gray-400 transition-colors"
|
|
222
|
-
onClick={() => setShowMathOverlay(false)}
|
|
223
|
-
>
|
|
224
|
-
{i18n.t("cancel")}
|
|
225
|
-
</button>
|
|
226
|
-
</div>
|
|
227
239
|
</div>
|
|
228
240
|
</div>
|
|
229
241
|
);
|
|
@@ -400,6 +412,8 @@ const InputGroup = ({
|
|
|
400
412
|
) : null}
|
|
401
413
|
</div>
|
|
402
414
|
</div>
|
|
415
|
+
|
|
416
|
+
{/* Always show textarea - math mode overlay appears on top */}
|
|
403
417
|
<textarea
|
|
404
418
|
ref={textAreaRef}
|
|
405
419
|
disabled={disabled}
|
|
@@ -421,6 +435,64 @@ const InputGroup = ({
|
|
|
421
435
|
onFocus={onFocus}
|
|
422
436
|
onKeyDown={onKeyDown}
|
|
423
437
|
/>
|
|
438
|
+
|
|
439
|
+
{/* Math mode overlay appears on top of textarea when enabled */}
|
|
440
|
+
{useMath && isMathMode && (
|
|
441
|
+
<div className="absolute inset-0 bg-white border border-catchup-gray-100 rounded-catchup-large focus-within:border-catchup-blue-400 focus-within:shadow-input">
|
|
442
|
+
<math-field
|
|
443
|
+
ref={mathFieldRef}
|
|
444
|
+
value={value || ""}
|
|
445
|
+
onInput={handleMathFieldChange}
|
|
446
|
+
onFocus={handleMathFieldFocus}
|
|
447
|
+
placeholder={errorText ? errorText : placeholder}
|
|
448
|
+
disabled={disabled}
|
|
449
|
+
virtual-keyboard-mode="off"
|
|
450
|
+
smart-fence={true}
|
|
451
|
+
smart-mode={true}
|
|
452
|
+
smart-superscript={true}
|
|
453
|
+
style={{
|
|
454
|
+
fontSize: "16px",
|
|
455
|
+
padding: "8px 16px",
|
|
456
|
+
border: "none",
|
|
457
|
+
outline: "none",
|
|
458
|
+
width: "100%",
|
|
459
|
+
height: "100%",
|
|
460
|
+
backgroundColor: "transparent",
|
|
461
|
+
borderRadius: "16px",
|
|
462
|
+
fontFamily: "inherit",
|
|
463
|
+
color: disabled ? "#9ca3af" : "#000000",
|
|
464
|
+
}}
|
|
465
|
+
/>
|
|
466
|
+
</div>
|
|
467
|
+
)}
|
|
468
|
+
|
|
469
|
+
{/* Math mode toggle button */}
|
|
470
|
+
{useMath && (
|
|
471
|
+
<button
|
|
472
|
+
className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-catchup-white border border-catchup-gray-100 rounded-md px-3 py-1 shadow-sm hover:shadow-md transition-shadow duration-200 z-10"
|
|
473
|
+
onClick={() => setShowMathOverlay(true)}
|
|
474
|
+
type="button"
|
|
475
|
+
>
|
|
476
|
+
<div className="flex items-center gap-x-1">
|
|
477
|
+
<span className="text-sm font-medium text-catchup-gray-400">
|
|
478
|
+
{isMathMode ? "𝑓(x)" : "Aa"}
|
|
479
|
+
</span>
|
|
480
|
+
<svg
|
|
481
|
+
className="w-3 h-3 text-catchup-gray-300"
|
|
482
|
+
fill="none"
|
|
483
|
+
stroke="currentColor"
|
|
484
|
+
viewBox="0 0 24 24"
|
|
485
|
+
>
|
|
486
|
+
<path
|
|
487
|
+
strokeLinecap="round"
|
|
488
|
+
strokeLinejoin="round"
|
|
489
|
+
strokeWidth={2}
|
|
490
|
+
d="M19 9l-7 7-7-7"
|
|
491
|
+
/>
|
|
492
|
+
</svg>
|
|
493
|
+
</div>
|
|
494
|
+
</button>
|
|
495
|
+
)}
|
|
424
496
|
</div>
|
|
425
497
|
);
|
|
426
498
|
};
|