@lets-events/react 7.0.1 → 7.1.0

package/dist/index.mjs

@@ -2629,13 +2629,16 @@ var InputAddon = styled(TextStyle, {
   boxSizing: "border-box",
   border: "1px solid $dark300",
   height: "$40",
-  padding: "0",
+  padding: "0 $12",
   color: "$dark600",
   borderRadius: "$sm 0px 0px $sm",
   borderRightWidth: "0px",
   margin: "auto 0",
   display: "flex",
-  alignItems: "center"
+  flexWrap: "nowrap",
+  alignItems: "center",
+  whiteSpace: "nowrap",
+  lineHeight: 1
 });
 function TextField(_a) {
   var _b = _a, {
@@ -3589,7 +3592,28 @@ function Modal(_a) {
 }
 
 // src/components/Calendar/index.tsx
-import { useEffect, useState } from "react";
+import { useRef, useEffect as useEffect2, useState } from "react";
+
+// src/hooks/useOnClickOutside.tsx
+import { useEffect } from "react";
+function useOnClickOutside(ref, handler) {
+  useEffect(() => {
+    const listener = (event) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      handler();
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+}
+
+// src/components/Calendar/index.tsx
 import { DayPicker } from "react-day-picker";
 
 // ../../node_modules/date-fns/locale/_lib/buildFormatLongFn.js
@@ -4596,9 +4620,6 @@ var ptBR = {
   }
 };
 
-// src/components/Calendar/index.tsx
-import { Dialog as Calendaradix2 } from "@radix-ui/themes";
-
 // ../../node_modules/date-fns/addDays.js
 function addDays(date, amount, options) {
   const _date = toDate(date, options == null ? void 0 : options.in);
@@ -7484,18 +7505,26 @@ function cleanEscapedString2(input) {
 }
 
 // src/components/Calendar/styledComponents.ts
-import { Dialog as Calendaradix } from "@radix-ui/themes";
 var CalendarStyled = styled("div", {
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$14",
-  maxWidth: "200px",
-  borderRadius: "$sm"
+  borderRadius: "$sm",
+  position: "relative"
 });
-var CalendarTitleStyled = styled(Calendaradix.Title, {
-  display: "none"
+var CalendarButtonStyled = styled("button", {
+  backgroundColor: "transparent",
+  border: "none",
+  maxWidth: "200px",
+  padding: "0",
+  "> div > div": {
+    paddingLeft: "1rem",
+    "input": {
+      textAlign: "right"
+    }
+  }
 });
-var CalendarContentStyled = styled(Calendaradix.Content, {
+var CalendarContentStyled = styled("div", {
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$14",
@@ -7503,7 +7532,11 @@ var CalendarContentStyled = styled(Calendaradix.Content, {
   maxWidth: "fit-content",
   border: "1px solid $neutral300",
   borderRadius: "$sm",
-  boxShadow: "0px 2px 8px 0px $shadow50"
+  boxShadow: "0px 2px 8px 0px $shadow50",
+  position: "absolute",
+  left: "0",
+  backgroundColor: "$neutral50",
+  zIndex: "999999"
 });
 var CalendarFooterStyled = styled("div", {
   borderTop: "2px solid $neutral100",
@@ -7691,20 +7724,25 @@ function Calendar(_a) {
     calendarLayout,
     selected,
     setSelected,
-    onAction
+    position = "bottom"
   } = _b, props = __objRest(_b, [
     "action",
     "actionText",
     "calendarLayout",
     "selected",
     "setSelected",
-    "onAction"
+    "position"
   ]);
   const [inputValue, setInputValue] = useState("");
+  const [showContainer, setShowCalendar] = useState(false);
+  const dropdownRef = useRef(null);
+  useOnClickOutside(dropdownRef, () => {
+    console.warn("Clicked outside");
+    setShowCalendar(false);
+  });
   const today = /* @__PURE__ */ new Date();
   const maxDate = addYears(today, 20);
-  useEffect(() => {
-    console.log("selected", selected);
+  useEffect2(() => {
     if (selected) {
       setInputValue(format(selected, "dd/MM/yyyy"));
     } else {
@@ -7721,8 +7759,8 @@ function Calendar(_a) {
       console.warn("Data inv\xE1lida inserida no input:", masked);
     }
   };
-  return /* @__PURE__ */ jsx14(Calendaradix2.Root, { children: /* @__PURE__ */ jsxs5(CalendarStyled, __spreadProps(__spreadValues({}, props), { children: [
-    /* @__PURE__ */ jsx14(Calendaradix2.Trigger, { children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx14("div", { children: /* @__PURE__ */ jsxs5(CalendarStyled, __spreadProps(__spreadValues({}, props), { ref: dropdownRef, children: [
+    /* @__PURE__ */ jsx14(CalendarButtonStyled, { onClick: () => setShowCalendar((prev) => !prev), children: /* @__PURE__ */ jsx14(
       TextField,
       {
         placeholder: "00/00/0000",
@@ -7730,57 +7768,72 @@ function Calendar(_a) {
         value: inputValue,
         onChange: handleInputChange,
         inputMode: "numeric",
+        textAlign: "right",
         children: /* @__PURE__ */ jsx14(TextFieldSlot, { children: /* @__PURE__ */ jsx14(Icon_default, { name: "calendar", size: "xl" }) })
       }
     ) }),
-    /* @__PURE__ */ jsxs5(CalendarContentStyled, { children: [
-      /* @__PURE__ */ jsx14(CalendarTitleStyled, { children: "Calend\xE1rio" }),
-      /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(DayPickerWrapperStyled, { children: /* @__PURE__ */ jsx14(
-        DayPicker,
-        {
-          mode: "single",
-          captionLayout: calendarLayout,
-          selected,
-          onSelect: setSelected,
-          required: true,
-          locale: ptBR,
-          disabled: { before: today },
-          startMonth: today,
-          endMonth: maxDate
-        }
-      ) }) }),
-      action && onAction && /* @__PURE__ */ jsx14(CalendarFooterStyled, { children: /* @__PURE__ */ jsx14(Calendaradix2.Close, { children: /* @__PURE__ */ jsx14(
-        Button,
-        {
-          variant: "text",
-          color: "brand",
-          onClick: onAction,
-          typography: "buttonMedium",
-          fontWeight: "medium",
-          children: actionText != null ? actionText : "Aplicar"
-        }
-      ) }) })
-    ] })
+    showContainer && /* @__PURE__ */ jsxs5(
+      CalendarContentStyled,
+      {
+        style: position === "top" ? { bottom: "110%" } : { top: "110%" },
+        children: [
+          /* @__PURE__ */ jsx14(Box, { children: /* @__PURE__ */ jsx14(DayPickerWrapperStyled, { children: /* @__PURE__ */ jsx14(
+            DayPicker,
+            {
+              mode: "single",
+              captionLayout: calendarLayout,
+              selected,
+              onSelect: setSelected,
+              required: true,
+              locale: ptBR,
+              disabled: { before: today },
+              startMonth: today,
+              endMonth: maxDate
+            }
+          ) }) }),
+          action && /* @__PURE__ */ jsx14(CalendarFooterStyled, { children: /* @__PURE__ */ jsx14(
+            Button,
+            {
+              variant: "text",
+              color: "brand",
+              onClick: () => {
+                setShowCalendar(false);
+              },
+              typography: "buttonMedium",
+              fontWeight: "medium",
+              children: actionText != null ? actionText : "Aplicar"
+            }
+          ) })
+        ]
+      }
+    )
   ] })) });
 }
 
 // src/components/TimePicker.tsx
-import { useCallback, useState as useState2 } from "react";
-import { Dialog as TimePickerRadix } from "@radix-ui/themes";
+import { useCallback, useRef as useRef2, useState as useState2 } from "react";
 import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var TimePickerStyled = styled("div", {
+  position: "relative",
   fontFamily: "$default",
   lineHeight: "$base",
   fontSize: "$14",
   maxWidth: "200px",
-  borderRadius: "$sm"
-});
-var TimePickerTitleStyled = styled(TimePickerRadix.Title, {
-  display: "none"
+  borderRadius: "$sm",
+  "> div > div": {
+    paddingLeft: "1rem",
+    input: {
+      textAlign: "right"
+    }
+  }
 });
-var TimePickerDialogStyled = styled(TimePickerRadix.Content, {
+var TimePickerDropdownStyled = styled("div", {
+  position: "absolute",
+  left: 0,
+  zIndex: 10,
   width: "100%",
   maxWidth: "8.875rem",
+  backgroundColor: "$neutral50",
   border: "1px solid $neutral300",
   borderRadius: "$sm",
   boxShadow: "0px 2px 8px 0px $shadow50"
@@ -7800,15 +7853,27 @@ var TimerPickerContentStyled = styled("div", {
   padding: "$16 $16 $8 ",
   "& > div:nth-child(2)": {
     order: 2
+  },
+  input: {
+    padding: "0",
+    textAlign: "center!important"
   }
 });
-function TimePicker({ selected, setSelected }) {
+function TimePicker({
+  selected,
+  setSelected,
+  position = "bottom"
+}) {
   const [hours, setHours] = useState2("00");
   const [minutes, setMinutes] = useState2("00");
+  const [isOpen, setIsOpen] = useState2(false);
+  const dropdownRef = useRef2(null);
+  useOnClickOutside(dropdownRef, () => setIsOpen(false));
   const pad = (num) => String(num).padStart(2, "0");
   const handleInputValue = useCallback(
     (time) => {
       setSelected(time);
+      setIsOpen(false);
     },
     [setSelected]
   );
@@ -7836,8 +7901,8 @@ function TimePicker({ selected, setSelected }) {
     },
     [hours, minutes]
   );
-  return /* @__PURE__ */ jsx15(TimePickerRadix.Root, { children: /* @__PURE__ */ jsxs6(TimePickerStyled, { children: [
-    /* @__PURE__ */ jsx15(TimePickerRadix.Trigger, { children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs6(TimePickerStyled, { ref: dropdownRef, children: [
+    /* @__PURE__ */ jsx15(
       TextField,
       {
         value: selected,
@@ -7846,119 +7911,124 @@ function TimePicker({ selected, setSelected }) {
         placeholder: "00:00",
         typography: "labelSmall",
         fontWeight: "regular",
+        onClick: () => setIsOpen((prev) => !prev),
         children: /* @__PURE__ */ jsx15(TextFieldSlot, { children: /* @__PURE__ */ jsx15(Icon_default, { name: "clock", size: "xl" }) })
       }
-    ) }),
-    /* @__PURE__ */ jsxs6(TimePickerDialogStyled, { children: [
-      /* @__PURE__ */ jsx15(TimePickerTitleStyled, { children: "Hor\xE1rio" }),
-      /* @__PURE__ */ jsxs6(TimerPickerContentStyled, { children: [
-        ["hours", "minutes"].map((unit) => /* @__PURE__ */ jsxs6(
-          Box,
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              flexDirection: "column"
-            },
-            children: [
-              /* @__PURE__ */ jsx15(
-                Button,
-                {
-                  variant: "text",
-                  onClick: () => handleIncrement(unit),
-                  children: /* @__PURE__ */ jsxs6(
-                    "svg",
+    ),
+    isOpen && /* @__PURE__ */ jsxs6(
+      TimePickerDropdownStyled,
+      {
+        style: position === "top" ? { bottom: "110%" } : { top: "110%" },
+        children: [
+          /* @__PURE__ */ jsxs6(TimerPickerContentStyled, { children: [
+            ["hours", "minutes"].map((unit) => /* @__PURE__ */ jsxs6(
+              Box,
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  flexDirection: "column"
+                },
+                children: [
+                  /* @__PURE__ */ jsx15(
+                    Button,
                     {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "32",
-                      height: "32",
-                      viewBox: "0 0 32 32",
-                      fill: "none",
-                      children: [
-                        /* @__PURE__ */ jsx15(
-                          "path",
-                          {
-                            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",
-                            fill: "white"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx15(
-                          "path",
-                          {
-                            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",
-                            fill: "#808289"
-                          }
-                        )
-                      ]
+                      variant: "text",
+                      onClick: () => handleIncrement(unit),
+                      children: /* @__PURE__ */ jsxs6(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          width: "32",
+                          height: "32",
+                          viewBox: "0 0 32 32",
+                          fill: "none",
+                          children: [
+                            /* @__PURE__ */ jsx15(
+                              "path",
+                              {
+                                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",
+                                fill: "white"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx15(
+                              "path",
+                              {
+                                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",
+                                fill: "#808289"
+                              }
+                            )
+                          ]
+                        }
+                      )
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx15(
-                TextField,
-                {
-                  value: unit === "hours" ? hours : minutes,
-                  onChange: (e) => handleInputValue(e.target.value),
-                  type: "text",
-                  placeholder: "00",
-                  typography: "labelSmall",
-                  fontWeight: "regular",
-                  textAlign: "center",
-                  style: { padding: "4px" }
-                }
-              ),
-              /* @__PURE__ */ jsx15(
-                Button,
-                {
-                  variant: "text",
-                  onClick: () => handleDecrement(unit),
-                  children: /* @__PURE__ */ jsxs6(
-                    "svg",
+                  ),
+                  /* @__PURE__ */ jsx15(
+                    TextField,
+                    {
+                      value: unit === "hours" ? hours : minutes,
+                      onChange: (e) => handleInputValue(e.target.value),
+                      type: "text",
+                      placeholder: "00",
+                      typography: "labelSmall",
+                      fontWeight: "regular",
+                      textAlign: "center"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx15(
+                    Button,
                     {
-                      xmlns: "http://www.w3.org/2000/svg",
-                      width: "32",
-                      height: "32",
-                      viewBox: "0 0 32 32",
-                      fill: "none",
-                      children: [
-                        /* @__PURE__ */ jsx15(
-                          "path",
-                          {
-                            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",
-                            fill: "white"
-                          }
-                        ),
-                        /* @__PURE__ */ jsx15(
-                          "path",
-                          {
-                            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",
-                            fill: "#808289"
-                          }
-                        )
-                      ]
+                      variant: "text",
+                      onClick: () => handleDecrement(unit),
+                      children: /* @__PURE__ */ jsxs6(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          width: "32",
+                          height: "32",
+                          viewBox: "0 0 32 32",
+                          fill: "none",
+                          children: [
+                            /* @__PURE__ */ jsx15(
+                              "path",
+                              {
+                                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",
+                                fill: "white"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx15(
+                              "path",
+                              {
+                                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",
+                                fill: "#808289"
+                              }
+                            )
+                          ]
+                        }
+                      )
                     }
                   )
-                }
-              )
-            ]
-          },
-          unit
-        )),
-        /* @__PURE__ */ jsx15(Text, { children: ":" })
-      ] }),
-      /* @__PURE__ */ jsx15(TimePickerFooterStyled, { children: /* @__PURE__ */ jsx15(TimePickerRadix.Close, { children: /* @__PURE__ */ jsx15(
-        Button,
-        {
-          variant: "text",
-          color: "brand",
-          onClick: () => handleInputValue(`${hours}:${minutes}`),
-          typography: "buttonMedium",
-          fontWeight: "medium",
-          children: "Aplicar"
-        }
-      ) }) })
-    ] })
-  ] }) });
+                ]
+              },
+              unit
+            )),
+            /* @__PURE__ */ jsx15(Text, { children: ":" })
+          ] }),
+          /* @__PURE__ */ jsx15(TimePickerFooterStyled, { children: /* @__PURE__ */ jsx15(
+            Button,
+            {
+              variant: "text",
+              color: "brand",
+              onClick: () => handleInputValue(`${hours}:${minutes}`),
+              typography: "buttonMedium",
+              fontWeight: "medium",
+              children: "Aplicar"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
 }
 
 // src/components/Alert.tsx
@@ -8573,10 +8643,9 @@ export {
   TextFieldStyled,
   TextStyle,
   TimePicker,
-  TimePickerDialogStyled,
+  TimePickerDropdownStyled,
   TimePickerFooterStyled,
   TimePickerStyled,
-  TimePickerTitleStyled,
   TimerPickerContentStyled
 };
 /*! Bundled license information:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",