@lets-events/react 7.0.1 → 7.1.0
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/.turbo/turbo-build.log +8 -8
- package/CHANGELOG.md +6 -0
- package/dist/index.d.mts +6 -375
- package/dist/index.d.ts +6 -375
- package/dist/index.js +270 -202
- package/dist/index.mjs +234 -165
- package/package.json +1 -1
- package/src/components/Calendar/index.tsx +46 -37
- package/src/components/Calendar/styledComponents.ts +17 -6
- package/src/components/TextField.tsx +16 -13
- package/src/components/TimePicker.tsx +64 -42
- package/src/hooks/useOnClickOutside.tsx +20 -0
package/dist/index.js
CHANGED
|
@@ -1068,10 +1068,9 @@ __export(index_exports, {
|
|
|
1068
1068
|
TextFieldStyled: () => TextFieldStyled,
|
|
1069
1069
|
TextStyle: () => TextStyle,
|
|
1070
1070
|
TimePicker: () => TimePicker,
|
|
1071
|
-
|
|
1071
|
+
TimePickerDropdownStyled: () => TimePickerDropdownStyled,
|
|
1072
1072
|
TimePickerFooterStyled: () => TimePickerFooterStyled,
|
|
1073
1073
|
TimePickerStyled: () => TimePickerStyled,
|
|
1074
|
-
TimePickerTitleStyled: () => TimePickerTitleStyled,
|
|
1075
1074
|
TimerPickerContentStyled: () => TimerPickerContentStyled
|
|
1076
1075
|
});
|
|
1077
1076
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -2703,13 +2702,16 @@ var InputAddon = styled(TextStyle, {
|
|
|
2703
2702
|
boxSizing: "border-box",
|
|
2704
2703
|
border: "1px solid $dark300",
|
|
2705
2704
|
height: "$40",
|
|
2706
|
-
padding: "0",
|
|
2705
|
+
padding: "0 $12",
|
|
2707
2706
|
color: "$dark600",
|
|
2708
2707
|
borderRadius: "$sm 0px 0px $sm",
|
|
2709
2708
|
borderRightWidth: "0px",
|
|
2710
2709
|
margin: "auto 0",
|
|
2711
2710
|
display: "flex",
|
|
2712
|
-
|
|
2711
|
+
flexWrap: "nowrap",
|
|
2712
|
+
alignItems: "center",
|
|
2713
|
+
whiteSpace: "nowrap",
|
|
2714
|
+
lineHeight: 1
|
|
2713
2715
|
});
|
|
2714
2716
|
function TextField(_a) {
|
|
2715
2717
|
var _b = _a, {
|
|
@@ -3663,7 +3665,28 @@ function Modal(_a) {
|
|
|
3663
3665
|
}
|
|
3664
3666
|
|
|
3665
3667
|
// src/components/Calendar/index.tsx
|
|
3668
|
+
var import_react4 = require("react");
|
|
3669
|
+
|
|
3670
|
+
// src/hooks/useOnClickOutside.tsx
|
|
3666
3671
|
var import_react3 = require("react");
|
|
3672
|
+
function useOnClickOutside(ref, handler) {
|
|
3673
|
+
(0, import_react3.useEffect)(() => {
|
|
3674
|
+
const listener = (event) => {
|
|
3675
|
+
if (!ref.current || ref.current.contains(event.target)) {
|
|
3676
|
+
return;
|
|
3677
|
+
}
|
|
3678
|
+
handler();
|
|
3679
|
+
};
|
|
3680
|
+
document.addEventListener("mousedown", listener);
|
|
3681
|
+
document.addEventListener("touchstart", listener);
|
|
3682
|
+
return () => {
|
|
3683
|
+
document.removeEventListener("mousedown", listener);
|
|
3684
|
+
document.removeEventListener("touchstart", listener);
|
|
3685
|
+
};
|
|
3686
|
+
}, [ref, handler]);
|
|
3687
|
+
}
|
|
3688
|
+
|
|
3689
|
+
// src/components/Calendar/index.tsx
|
|
3667
3690
|
var import_react_day_picker = require("react-day-picker");
|
|
3668
3691
|
|
|
3669
3692
|
// ../../node_modules/date-fns/locale/_lib/buildFormatLongFn.js
|
|
@@ -4670,9 +4693,6 @@ var ptBR = {
|
|
|
4670
4693
|
}
|
|
4671
4694
|
};
|
|
4672
4695
|
|
|
4673
|
-
// src/components/Calendar/index.tsx
|
|
4674
|
-
var import_themes16 = require("@radix-ui/themes");
|
|
4675
|
-
|
|
4676
4696
|
// ../../node_modules/date-fns/addDays.js
|
|
4677
4697
|
function addDays(date, amount, options) {
|
|
4678
4698
|
const _date = toDate(date, options == null ? void 0 : options.in);
|
|
@@ -7558,18 +7578,26 @@ function cleanEscapedString2(input) {
|
|
|
7558
7578
|
}
|
|
7559
7579
|
|
|
7560
7580
|
// src/components/Calendar/styledComponents.ts
|
|
7561
|
-
var import_themes15 = require("@radix-ui/themes");
|
|
7562
7581
|
var CalendarStyled = styled("div", {
|
|
7563
7582
|
fontFamily: "$default",
|
|
7564
7583
|
lineHeight: "$base",
|
|
7565
7584
|
fontSize: "$14",
|
|
7566
|
-
|
|
7567
|
-
|
|
7585
|
+
borderRadius: "$sm",
|
|
7586
|
+
position: "relative"
|
|
7568
7587
|
});
|
|
7569
|
-
var
|
|
7570
|
-
|
|
7588
|
+
var CalendarButtonStyled = styled("button", {
|
|
7589
|
+
backgroundColor: "transparent",
|
|
7590
|
+
border: "none",
|
|
7591
|
+
maxWidth: "200px",
|
|
7592
|
+
padding: "0",
|
|
7593
|
+
"> div > div": {
|
|
7594
|
+
paddingLeft: "1rem",
|
|
7595
|
+
"input": {
|
|
7596
|
+
textAlign: "right"
|
|
7597
|
+
}
|
|
7598
|
+
}
|
|
7571
7599
|
});
|
|
7572
|
-
var CalendarContentStyled = styled(
|
|
7600
|
+
var CalendarContentStyled = styled("div", {
|
|
7573
7601
|
fontFamily: "$default",
|
|
7574
7602
|
lineHeight: "$base",
|
|
7575
7603
|
fontSize: "$14",
|
|
@@ -7577,7 +7605,11 @@ var CalendarContentStyled = styled(import_themes15.Dialog.Content, {
|
|
|
7577
7605
|
maxWidth: "fit-content",
|
|
7578
7606
|
border: "1px solid $neutral300",
|
|
7579
7607
|
borderRadius: "$sm",
|
|
7580
|
-
boxShadow: "0px 2px 8px 0px $shadow50"
|
|
7608
|
+
boxShadow: "0px 2px 8px 0px $shadow50",
|
|
7609
|
+
position: "absolute",
|
|
7610
|
+
left: "0",
|
|
7611
|
+
backgroundColor: "$neutral50",
|
|
7612
|
+
zIndex: "999999"
|
|
7581
7613
|
});
|
|
7582
7614
|
var CalendarFooterStyled = styled("div", {
|
|
7583
7615
|
borderTop: "2px solid $neutral100",
|
|
@@ -7765,20 +7797,25 @@ function Calendar(_a) {
|
|
|
7765
7797
|
calendarLayout,
|
|
7766
7798
|
selected,
|
|
7767
7799
|
setSelected,
|
|
7768
|
-
|
|
7800
|
+
position = "bottom"
|
|
7769
7801
|
} = _b, props = __objRest(_b, [
|
|
7770
7802
|
"action",
|
|
7771
7803
|
"actionText",
|
|
7772
7804
|
"calendarLayout",
|
|
7773
7805
|
"selected",
|
|
7774
7806
|
"setSelected",
|
|
7775
|
-
"
|
|
7807
|
+
"position"
|
|
7776
7808
|
]);
|
|
7777
|
-
const [inputValue, setInputValue] = (0,
|
|
7809
|
+
const [inputValue, setInputValue] = (0, import_react4.useState)("");
|
|
7810
|
+
const [showContainer, setShowCalendar] = (0, import_react4.useState)(false);
|
|
7811
|
+
const dropdownRef = (0, import_react4.useRef)(null);
|
|
7812
|
+
useOnClickOutside(dropdownRef, () => {
|
|
7813
|
+
console.warn("Clicked outside");
|
|
7814
|
+
setShowCalendar(false);
|
|
7815
|
+
});
|
|
7778
7816
|
const today = /* @__PURE__ */ new Date();
|
|
7779
7817
|
const maxDate = addYears(today, 20);
|
|
7780
|
-
(0,
|
|
7781
|
-
console.log("selected", selected);
|
|
7818
|
+
(0, import_react4.useEffect)(() => {
|
|
7782
7819
|
if (selected) {
|
|
7783
7820
|
setInputValue(format(selected, "dd/MM/yyyy"));
|
|
7784
7821
|
} else {
|
|
@@ -7795,8 +7832,8 @@ function Calendar(_a) {
|
|
|
7795
7832
|
console.warn("Data inv\xE1lida inserida no input:", masked);
|
|
7796
7833
|
}
|
|
7797
7834
|
};
|
|
7798
|
-
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
7799
|
-
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
7835
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(CalendarStyled, __spreadProps(__spreadValues({}, props), { ref: dropdownRef, children: [
|
|
7836
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CalendarButtonStyled, { onClick: () => setShowCalendar((prev) => !prev), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
7800
7837
|
TextField,
|
|
7801
7838
|
{
|
|
7802
7839
|
placeholder: "00/00/0000",
|
|
@@ -7804,57 +7841,72 @@ function Calendar(_a) {
|
|
|
7804
7841
|
value: inputValue,
|
|
7805
7842
|
onChange: handleInputChange,
|
|
7806
7843
|
inputMode: "numeric",
|
|
7844
|
+
textAlign: "right",
|
|
7807
7845
|
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon_default, { name: "calendar", size: "xl" }) })
|
|
7808
7846
|
}
|
|
7809
7847
|
) }),
|
|
7810
|
-
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
7811
|
-
|
|
7812
|
-
|
|
7813
|
-
|
|
7814
|
-
|
|
7815
|
-
|
|
7816
|
-
|
|
7817
|
-
|
|
7818
|
-
|
|
7819
|
-
|
|
7820
|
-
|
|
7821
|
-
|
|
7822
|
-
|
|
7823
|
-
|
|
7824
|
-
|
|
7825
|
-
|
|
7826
|
-
|
|
7827
|
-
|
|
7828
|
-
|
|
7829
|
-
|
|
7830
|
-
|
|
7831
|
-
|
|
7832
|
-
|
|
7833
|
-
|
|
7834
|
-
|
|
7835
|
-
|
|
7836
|
-
|
|
7837
|
-
|
|
7848
|
+
showContainer && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
7849
|
+
CalendarContentStyled,
|
|
7850
|
+
{
|
|
7851
|
+
style: position === "top" ? { bottom: "110%" } : { top: "110%" },
|
|
7852
|
+
children: [
|
|
7853
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Box, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DayPickerWrapperStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
7854
|
+
import_react_day_picker.DayPicker,
|
|
7855
|
+
{
|
|
7856
|
+
mode: "single",
|
|
7857
|
+
captionLayout: calendarLayout,
|
|
7858
|
+
selected,
|
|
7859
|
+
onSelect: setSelected,
|
|
7860
|
+
required: true,
|
|
7861
|
+
locale: ptBR,
|
|
7862
|
+
disabled: { before: today },
|
|
7863
|
+
startMonth: today,
|
|
7864
|
+
endMonth: maxDate
|
|
7865
|
+
}
|
|
7866
|
+
) }) }),
|
|
7867
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CalendarFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
7868
|
+
Button,
|
|
7869
|
+
{
|
|
7870
|
+
variant: "text",
|
|
7871
|
+
color: "brand",
|
|
7872
|
+
onClick: () => {
|
|
7873
|
+
setShowCalendar(false);
|
|
7874
|
+
},
|
|
7875
|
+
typography: "buttonMedium",
|
|
7876
|
+
fontWeight: "medium",
|
|
7877
|
+
children: actionText != null ? actionText : "Aplicar"
|
|
7878
|
+
}
|
|
7879
|
+
) })
|
|
7880
|
+
]
|
|
7881
|
+
}
|
|
7882
|
+
)
|
|
7838
7883
|
] })) });
|
|
7839
7884
|
}
|
|
7840
7885
|
|
|
7841
7886
|
// src/components/TimePicker.tsx
|
|
7842
|
-
var
|
|
7843
|
-
var import_themes17 = require("@radix-ui/themes");
|
|
7887
|
+
var import_react5 = require("react");
|
|
7844
7888
|
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
7845
7889
|
var TimePickerStyled = styled("div", {
|
|
7890
|
+
position: "relative",
|
|
7846
7891
|
fontFamily: "$default",
|
|
7847
7892
|
lineHeight: "$base",
|
|
7848
7893
|
fontSize: "$14",
|
|
7849
7894
|
maxWidth: "200px",
|
|
7850
|
-
borderRadius: "$sm"
|
|
7851
|
-
|
|
7852
|
-
|
|
7853
|
-
|
|
7895
|
+
borderRadius: "$sm",
|
|
7896
|
+
"> div > div": {
|
|
7897
|
+
paddingLeft: "1rem",
|
|
7898
|
+
input: {
|
|
7899
|
+
textAlign: "right"
|
|
7900
|
+
}
|
|
7901
|
+
}
|
|
7854
7902
|
});
|
|
7855
|
-
var
|
|
7903
|
+
var TimePickerDropdownStyled = styled("div", {
|
|
7904
|
+
position: "absolute",
|
|
7905
|
+
left: 0,
|
|
7906
|
+
zIndex: 10,
|
|
7856
7907
|
width: "100%",
|
|
7857
7908
|
maxWidth: "8.875rem",
|
|
7909
|
+
backgroundColor: "$neutral50",
|
|
7858
7910
|
border: "1px solid $neutral300",
|
|
7859
7911
|
borderRadius: "$sm",
|
|
7860
7912
|
boxShadow: "0px 2px 8px 0px $shadow50"
|
|
@@ -7874,19 +7926,31 @@ var TimerPickerContentStyled = styled("div", {
|
|
|
7874
7926
|
padding: "$16 $16 $8 ",
|
|
7875
7927
|
"& > div:nth-child(2)": {
|
|
7876
7928
|
order: 2
|
|
7929
|
+
},
|
|
7930
|
+
input: {
|
|
7931
|
+
padding: "0",
|
|
7932
|
+
textAlign: "center!important"
|
|
7877
7933
|
}
|
|
7878
7934
|
});
|
|
7879
|
-
function TimePicker({
|
|
7880
|
-
|
|
7881
|
-
|
|
7935
|
+
function TimePicker({
|
|
7936
|
+
selected,
|
|
7937
|
+
setSelected,
|
|
7938
|
+
position = "bottom"
|
|
7939
|
+
}) {
|
|
7940
|
+
const [hours, setHours] = (0, import_react5.useState)("00");
|
|
7941
|
+
const [minutes, setMinutes] = (0, import_react5.useState)("00");
|
|
7942
|
+
const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
|
|
7943
|
+
const dropdownRef = (0, import_react5.useRef)(null);
|
|
7944
|
+
useOnClickOutside(dropdownRef, () => setIsOpen(false));
|
|
7882
7945
|
const pad = (num) => String(num).padStart(2, "0");
|
|
7883
|
-
const handleInputValue = (0,
|
|
7946
|
+
const handleInputValue = (0, import_react5.useCallback)(
|
|
7884
7947
|
(time) => {
|
|
7885
7948
|
setSelected(time);
|
|
7949
|
+
setIsOpen(false);
|
|
7886
7950
|
},
|
|
7887
7951
|
[setSelected]
|
|
7888
7952
|
);
|
|
7889
|
-
const handleIncrement = (0,
|
|
7953
|
+
const handleIncrement = (0, import_react5.useCallback)(
|
|
7890
7954
|
(type) => {
|
|
7891
7955
|
if (type === "hours") {
|
|
7892
7956
|
const next = (parseInt(hours) + 1) % 24;
|
|
@@ -7898,7 +7962,7 @@ function TimePicker({ selected, setSelected }) {
|
|
|
7898
7962
|
},
|
|
7899
7963
|
[hours, minutes]
|
|
7900
7964
|
);
|
|
7901
|
-
const handleDecrement = (0,
|
|
7965
|
+
const handleDecrement = (0, import_react5.useCallback)(
|
|
7902
7966
|
(type) => {
|
|
7903
7967
|
if (type === "hours") {
|
|
7904
7968
|
const prev = (parseInt(hours) - 1 + 24) % 24;
|
|
@@ -7910,8 +7974,8 @@ function TimePicker({ selected, setSelected }) {
|
|
|
7910
7974
|
},
|
|
7911
7975
|
[hours, minutes]
|
|
7912
7976
|
);
|
|
7913
|
-
return /* @__PURE__ */ (0, import_jsx_runtime15.
|
|
7914
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
7977
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(TimePickerStyled, { ref: dropdownRef, children: [
|
|
7978
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
7915
7979
|
TextField,
|
|
7916
7980
|
{
|
|
7917
7981
|
value: selected,
|
|
@@ -7920,125 +7984,130 @@ function TimePicker({ selected, setSelected }) {
|
|
|
7920
7984
|
placeholder: "00:00",
|
|
7921
7985
|
typography: "labelSmall",
|
|
7922
7986
|
fontWeight: "regular",
|
|
7987
|
+
onClick: () => setIsOpen((prev) => !prev),
|
|
7923
7988
|
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TextFieldSlot, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon_default, { name: "clock", size: "xl" }) })
|
|
7924
7989
|
}
|
|
7925
|
-
)
|
|
7926
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
7927
|
-
|
|
7928
|
-
|
|
7929
|
-
|
|
7930
|
-
|
|
7931
|
-
{
|
|
7932
|
-
|
|
7933
|
-
|
|
7934
|
-
|
|
7935
|
-
|
|
7936
|
-
|
|
7937
|
-
|
|
7938
|
-
|
|
7939
|
-
|
|
7940
|
-
|
|
7941
|
-
|
|
7942
|
-
|
|
7943
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
7944
|
-
"svg",
|
|
7990
|
+
),
|
|
7991
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
7992
|
+
TimePickerDropdownStyled,
|
|
7993
|
+
{
|
|
7994
|
+
style: position === "top" ? { bottom: "110%" } : { top: "110%" },
|
|
7995
|
+
children: [
|
|
7996
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(TimerPickerContentStyled, { children: [
|
|
7997
|
+
["hours", "minutes"].map((unit) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
7998
|
+
Box,
|
|
7999
|
+
{
|
|
8000
|
+
style: {
|
|
8001
|
+
display: "flex",
|
|
8002
|
+
alignItems: "center",
|
|
8003
|
+
flexDirection: "column"
|
|
8004
|
+
},
|
|
8005
|
+
children: [
|
|
8006
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
8007
|
+
Button,
|
|
7945
8008
|
{
|
|
7946
|
-
|
|
7947
|
-
|
|
7948
|
-
|
|
7949
|
-
|
|
7950
|
-
|
|
7951
|
-
|
|
7952
|
-
|
|
7953
|
-
"
|
|
7954
|
-
|
|
7955
|
-
|
|
7956
|
-
|
|
7957
|
-
|
|
7958
|
-
|
|
7959
|
-
|
|
7960
|
-
|
|
7961
|
-
|
|
7962
|
-
|
|
7963
|
-
|
|
7964
|
-
|
|
7965
|
-
|
|
7966
|
-
|
|
8009
|
+
variant: "text",
|
|
8010
|
+
onClick: () => handleIncrement(unit),
|
|
8011
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
8012
|
+
"svg",
|
|
8013
|
+
{
|
|
8014
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
8015
|
+
width: "32",
|
|
8016
|
+
height: "32",
|
|
8017
|
+
viewBox: "0 0 32 32",
|
|
8018
|
+
fill: "none",
|
|
8019
|
+
children: [
|
|
8020
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
8021
|
+
"path",
|
|
8022
|
+
{
|
|
8023
|
+
d: "M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z",
|
|
8024
|
+
fill: "white"
|
|
8025
|
+
}
|
|
8026
|
+
),
|
|
8027
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
8028
|
+
"path",
|
|
8029
|
+
{
|
|
8030
|
+
d: "M16.7063 12.2937C16.3157 11.9031 15.6813 11.9031 15.2907 12.2937L10.2907 17.2937C9.9001 17.6843 9.9001 18.3187 10.2907 18.7093C10.6813 19.1 11.3157 19.1 11.7063 18.7093L16.0001 14.4156L20.2938 18.7062C20.6845 19.0968 21.3188 19.0968 21.7095 18.7062C22.1001 18.3156 22.1001 17.6812 21.7095 17.2906L16.7095 12.2906L16.7063 12.2937Z",
|
|
8031
|
+
fill: "#808289"
|
|
8032
|
+
}
|
|
8033
|
+
)
|
|
8034
|
+
]
|
|
8035
|
+
}
|
|
8036
|
+
)
|
|
7967
8037
|
}
|
|
7968
|
-
)
|
|
7969
|
-
|
|
7970
|
-
|
|
7971
|
-
|
|
7972
|
-
|
|
7973
|
-
|
|
7974
|
-
|
|
7975
|
-
|
|
7976
|
-
|
|
7977
|
-
|
|
7978
|
-
|
|
7979
|
-
|
|
7980
|
-
|
|
7981
|
-
|
|
7982
|
-
|
|
7983
|
-
),
|
|
7984
|
-
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
7985
|
-
Button,
|
|
7986
|
-
{
|
|
7987
|
-
variant: "text",
|
|
7988
|
-
onClick: () => handleDecrement(unit),
|
|
7989
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
7990
|
-
"svg",
|
|
8038
|
+
),
|
|
8039
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
8040
|
+
TextField,
|
|
8041
|
+
{
|
|
8042
|
+
value: unit === "hours" ? hours : minutes,
|
|
8043
|
+
onChange: (e) => handleInputValue(e.target.value),
|
|
8044
|
+
type: "text",
|
|
8045
|
+
placeholder: "00",
|
|
8046
|
+
typography: "labelSmall",
|
|
8047
|
+
fontWeight: "regular",
|
|
8048
|
+
textAlign: "center"
|
|
8049
|
+
}
|
|
8050
|
+
),
|
|
8051
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
8052
|
+
Button,
|
|
7991
8053
|
{
|
|
7992
|
-
|
|
7993
|
-
|
|
7994
|
-
|
|
7995
|
-
|
|
7996
|
-
|
|
7997
|
-
|
|
7998
|
-
|
|
7999
|
-
"
|
|
8000
|
-
|
|
8001
|
-
|
|
8002
|
-
|
|
8003
|
-
|
|
8004
|
-
|
|
8005
|
-
|
|
8006
|
-
|
|
8007
|
-
|
|
8008
|
-
|
|
8009
|
-
|
|
8010
|
-
|
|
8011
|
-
|
|
8012
|
-
|
|
8054
|
+
variant: "text",
|
|
8055
|
+
onClick: () => handleDecrement(unit),
|
|
8056
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
8057
|
+
"svg",
|
|
8058
|
+
{
|
|
8059
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
8060
|
+
width: "32",
|
|
8061
|
+
height: "32",
|
|
8062
|
+
viewBox: "0 0 32 32",
|
|
8063
|
+
fill: "none",
|
|
8064
|
+
children: [
|
|
8065
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
8066
|
+
"path",
|
|
8067
|
+
{
|
|
8068
|
+
d: "M0 8C0 3.58172 3.58172 0 8 0H24C28.4183 0 32 3.58172 32 8V24C32 28.4183 28.4183 32 24 32H8C3.58172 32 0 28.4183 0 24V8Z",
|
|
8069
|
+
fill: "white"
|
|
8070
|
+
}
|
|
8071
|
+
),
|
|
8072
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
8073
|
+
"path",
|
|
8074
|
+
{
|
|
8075
|
+
d: "M15.2937 19.7063C15.6843 20.0969 16.3187 20.0969 16.7093 19.7063L21.7093 14.7063C22.0999 14.3157 22.0999 13.6813 21.7093 13.2907C21.3187 12.9 20.6843 12.9 20.2937 13.2907L15.9999 17.5844L11.7062 13.2938C11.3155 12.9032 10.6812 12.9032 10.2905 13.2938C9.8999 13.6844 9.8999 14.3188 10.2905 14.7094L15.2905 19.7094L15.2937 19.7063Z",
|
|
8076
|
+
fill: "#808289"
|
|
8077
|
+
}
|
|
8078
|
+
)
|
|
8079
|
+
]
|
|
8080
|
+
}
|
|
8081
|
+
)
|
|
8013
8082
|
}
|
|
8014
8083
|
)
|
|
8015
|
-
|
|
8016
|
-
|
|
8017
|
-
|
|
8018
|
-
|
|
8019
|
-
|
|
8020
|
-
|
|
8021
|
-
|
|
8022
|
-
|
|
8023
|
-
|
|
8024
|
-
|
|
8025
|
-
|
|
8026
|
-
|
|
8027
|
-
|
|
8028
|
-
|
|
8029
|
-
|
|
8030
|
-
|
|
8031
|
-
|
|
8032
|
-
|
|
8033
|
-
|
|
8034
|
-
|
|
8035
|
-
] })
|
|
8084
|
+
]
|
|
8085
|
+
},
|
|
8086
|
+
unit
|
|
8087
|
+
)),
|
|
8088
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Text, { children: ":" })
|
|
8089
|
+
] }),
|
|
8090
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TimePickerFooterStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
8091
|
+
Button,
|
|
8092
|
+
{
|
|
8093
|
+
variant: "text",
|
|
8094
|
+
color: "brand",
|
|
8095
|
+
onClick: () => handleInputValue(`${hours}:${minutes}`),
|
|
8096
|
+
typography: "buttonMedium",
|
|
8097
|
+
fontWeight: "medium",
|
|
8098
|
+
children: "Aplicar"
|
|
8099
|
+
}
|
|
8100
|
+
) })
|
|
8101
|
+
]
|
|
8102
|
+
}
|
|
8103
|
+
)
|
|
8104
|
+
] });
|
|
8036
8105
|
}
|
|
8037
8106
|
|
|
8038
8107
|
// src/components/Alert.tsx
|
|
8039
|
-
var
|
|
8108
|
+
var import_themes15 = require("@radix-ui/themes");
|
|
8040
8109
|
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
8041
|
-
var AlertDialogSimpleStyled = styled(
|
|
8110
|
+
var AlertDialogSimpleStyled = styled(import_themes15.AlertDialog.Content, {
|
|
8042
8111
|
fontFamily: "$default",
|
|
8043
8112
|
lineHeight: "$base",
|
|
8044
8113
|
fontSize: "$13",
|
|
@@ -8089,7 +8158,7 @@ var AlertDialogSimpleStyled = styled(import_themes18.AlertDialog.Content, {
|
|
|
8089
8158
|
color: "success"
|
|
8090
8159
|
}
|
|
8091
8160
|
});
|
|
8092
|
-
var AlertDialogCompleteStyled = styled(
|
|
8161
|
+
var AlertDialogCompleteStyled = styled(import_themes15.AlertDialog.Content, {
|
|
8093
8162
|
fontFamily: "$default",
|
|
8094
8163
|
lineHeight: "$base",
|
|
8095
8164
|
fontSize: "$13",
|
|
@@ -8112,11 +8181,11 @@ var AlertDialogCompleteStyled = styled(import_themes18.AlertDialog.Content, {
|
|
|
8112
8181
|
color: {}
|
|
8113
8182
|
}
|
|
8114
8183
|
});
|
|
8115
|
-
var AlertDialogDescriptionStyled = styled(
|
|
8184
|
+
var AlertDialogDescriptionStyled = styled(import_themes15.AlertDialog.Description, {
|
|
8116
8185
|
padding: 0,
|
|
8117
8186
|
margin: 0
|
|
8118
8187
|
});
|
|
8119
|
-
var AlertDialogTitleStyled = styled(
|
|
8188
|
+
var AlertDialogTitleStyled = styled(import_themes15.AlertDialog.Title, {
|
|
8120
8189
|
fontFamily: "$default",
|
|
8121
8190
|
lineHeight: "$base",
|
|
8122
8191
|
fontSize: "$20",
|
|
@@ -8153,15 +8222,15 @@ function Alert(_a) {
|
|
|
8153
8222
|
]);
|
|
8154
8223
|
console.log("completAlert", completAlert, " simpleAlert", simpleAlert);
|
|
8155
8224
|
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
8156
|
-
simpleAlert && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
8157
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
8225
|
+
simpleAlert && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes15.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes15.AlertDialog.Root, { children: [
|
|
8226
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes15.AlertDialog.Trigger, { children: trigger }),
|
|
8158
8227
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AlertDialogSimpleStyled, __spreadProps(__spreadValues({}, props), { children: [
|
|
8159
8228
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertDialogDescriptionStyled, { children: simpleAlert.description }),
|
|
8160
|
-
simpleAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
8229
|
+
simpleAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes15.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "text", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon_default, { name: "close" }) }) })
|
|
8161
8230
|
] })) })
|
|
8162
8231
|
] }) }),
|
|
8163
|
-
completAlert && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
8164
|
-
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
8232
|
+
completAlert && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes15.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_themes15.AlertDialog.Root, { children: [
|
|
8233
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes15.AlertDialog.Trigger, { children: trigger }),
|
|
8165
8234
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AlertDialogCompleteStyled, { children: [
|
|
8166
8235
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(AlertDialogRowStyled, { className: "le-alert-dialog-row", children: [
|
|
8167
8236
|
color === "success" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { width: "56", height: "56", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
@@ -8190,8 +8259,8 @@ function Alert(_a) {
|
|
|
8190
8259
|
] }),
|
|
8191
8260
|
completAlert.onAction || completAlert.cancel ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertDialoghrStyled, {}) : null,
|
|
8192
8261
|
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(AlertDialogRowStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Flex2, { gap: "10", justify: "end", width: "100%", children: [
|
|
8193
|
-
completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
8194
|
-
completAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
8262
|
+
completAlert.onAction && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes15.AlertDialog.Action, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "contained", onClick: completAlert.onAction, children: completAlert.actionText || "Salvar" }) }),
|
|
8263
|
+
completAlert.cancel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes15.AlertDialog.Cancel, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { variant: "outlined", color: "neutral", children: completAlert.cancelText || "Cancelar" }) })
|
|
8195
8264
|
] }) })
|
|
8196
8265
|
] })
|
|
8197
8266
|
] }) })
|
|
@@ -8199,9 +8268,9 @@ function Alert(_a) {
|
|
|
8199
8268
|
}
|
|
8200
8269
|
|
|
8201
8270
|
// src/components/Switch.tsx
|
|
8202
|
-
var
|
|
8271
|
+
var import_themes16 = require("@radix-ui/themes");
|
|
8203
8272
|
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
8204
|
-
var SwitchStyled = styled(
|
|
8273
|
+
var SwitchStyled = styled(import_themes16.Switch, {
|
|
8205
8274
|
all: "unset",
|
|
8206
8275
|
borderRadius: "$full",
|
|
8207
8276
|
position: "relative",
|
|
@@ -8298,15 +8367,15 @@ function Switch(props) {
|
|
|
8298
8367
|
}
|
|
8299
8368
|
|
|
8300
8369
|
// src/components/Step.tsx
|
|
8301
|
-
var
|
|
8302
|
-
var
|
|
8370
|
+
var import_react6 = __toESM(require("react"));
|
|
8371
|
+
var import_themes17 = require("@radix-ui/themes");
|
|
8303
8372
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
8304
8373
|
var StepStyled = styled("div", {
|
|
8305
8374
|
fontFamily: "$default",
|
|
8306
8375
|
color: "$gray100",
|
|
8307
8376
|
letterSpacing: "0px"
|
|
8308
8377
|
});
|
|
8309
|
-
var StepTriggerStyled = styled(
|
|
8378
|
+
var StepTriggerStyled = styled(import_themes17.Tabs.Trigger, {
|
|
8310
8379
|
all: "unset",
|
|
8311
8380
|
position: "relative",
|
|
8312
8381
|
display: "flex",
|
|
@@ -8365,7 +8434,7 @@ var StepTriggerStyled = styled(import_themes20.Tabs.Trigger, {
|
|
|
8365
8434
|
backgroundColor: "$blue500"
|
|
8366
8435
|
}
|
|
8367
8436
|
});
|
|
8368
|
-
var StepListStyled = styled(
|
|
8437
|
+
var StepListStyled = styled(import_themes17.Tabs.List, {
|
|
8369
8438
|
display: "flex",
|
|
8370
8439
|
alignItems: "center",
|
|
8371
8440
|
justifyContent: "flex-start",
|
|
@@ -8373,7 +8442,7 @@ var StepListStyled = styled(import_themes20.Tabs.List, {
|
|
|
8373
8442
|
});
|
|
8374
8443
|
function Step(_a) {
|
|
8375
8444
|
var _b = _a, { children, defaultValue } = _b, props = __objRest(_b, ["children", "defaultValue"]);
|
|
8376
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8445
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes17.Tabs.Root, { defaultValue: String(defaultValue), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StepStyled, __spreadProps(__spreadValues({}, props), { children })) });
|
|
8377
8446
|
}
|
|
8378
8447
|
function StepTrigger(_a) {
|
|
8379
8448
|
var _b = _a, { value, children, currentStep } = _b, props = __objRest(_b, ["value", "children", "currentStep"]);
|
|
@@ -8383,26 +8452,26 @@ function StepTrigger(_a) {
|
|
|
8383
8452
|
}
|
|
8384
8453
|
function StepContent(_a) {
|
|
8385
8454
|
var _b = _a, { value, children } = _b, props = __objRest(_b, ["value", "children"]);
|
|
8386
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes17.Tabs.Content, __spreadProps(__spreadValues({ value: String(value) }, props), { children }));
|
|
8387
8456
|
}
|
|
8388
8457
|
function StepList(_a) {
|
|
8389
8458
|
var _b = _a, { children, currentStep } = _b, props = __objRest(_b, ["children", "currentStep"]);
|
|
8390
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StepListStyled, __spreadProps(__spreadValues({}, props), { children:
|
|
8391
|
-
if (
|
|
8392
|
-
return
|
|
8459
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StepListStyled, __spreadProps(__spreadValues({}, props), { children: import_react6.default.Children.map(children, (child) => {
|
|
8460
|
+
if (import_react6.default.isValidElement(child) && child.type === StepTrigger) {
|
|
8461
|
+
return import_react6.default.cloneElement(child, { currentStep });
|
|
8393
8462
|
}
|
|
8394
8463
|
return child;
|
|
8395
8464
|
}) }));
|
|
8396
8465
|
}
|
|
8397
8466
|
function StepWrapper(_a) {
|
|
8398
8467
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
8399
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
8468
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_themes17.Box, __spreadProps(__spreadValues({}, props), { children }));
|
|
8400
8469
|
}
|
|
8401
8470
|
|
|
8402
8471
|
// src/components/Grid.tsx
|
|
8403
|
-
var
|
|
8472
|
+
var import_themes18 = require("@radix-ui/themes");
|
|
8404
8473
|
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
8405
|
-
var GridStyled = styled(
|
|
8474
|
+
var GridStyled = styled(import_themes18.Grid, {
|
|
8406
8475
|
display: "grid",
|
|
8407
8476
|
variants: {
|
|
8408
8477
|
display: {
|
|
@@ -8527,9 +8596,9 @@ function Grid(_a) {
|
|
|
8527
8596
|
}
|
|
8528
8597
|
|
|
8529
8598
|
// src/components/Container.tsx
|
|
8530
|
-
var
|
|
8599
|
+
var import_themes19 = require("@radix-ui/themes");
|
|
8531
8600
|
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
8532
|
-
var ContainerStyled = styled(
|
|
8601
|
+
var ContainerStyled = styled(import_themes19.Container, {
|
|
8533
8602
|
variants: {
|
|
8534
8603
|
size: {
|
|
8535
8604
|
xs: { maxWidth: "576px" },
|
|
@@ -8562,9 +8631,9 @@ function Container(_a) {
|
|
|
8562
8631
|
}
|
|
8563
8632
|
|
|
8564
8633
|
// src/components/Section.tsx
|
|
8565
|
-
var
|
|
8634
|
+
var import_themes20 = require("@radix-ui/themes");
|
|
8566
8635
|
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
8567
|
-
var SectionStyled = styled(
|
|
8636
|
+
var SectionStyled = styled(import_themes20.Section, {
|
|
8568
8637
|
variants: {
|
|
8569
8638
|
size: {
|
|
8570
8639
|
xs: { maxWidth: "576px" },
|
|
@@ -8648,10 +8717,9 @@ function Section(_a) {
|
|
|
8648
8717
|
TextFieldStyled,
|
|
8649
8718
|
TextStyle,
|
|
8650
8719
|
TimePicker,
|
|
8651
|
-
|
|
8720
|
+
TimePickerDropdownStyled,
|
|
8652
8721
|
TimePickerFooterStyled,
|
|
8653
8722
|
TimePickerStyled,
|
|
8654
|
-
TimePickerTitleStyled,
|
|
8655
8723
|
TimerPickerContentStyled
|
|
8656
8724
|
});
|
|
8657
8725
|
/*! Bundled license information:
|