@lets-events/react 10.0.1 → 10.1.1

package/dist/index.js

@@ -1075,8 +1075,16 @@ __export(index_exports, {
   TimePickerFooterStyled: () => TimePickerFooterStyled,
   TimePickerStyled: () => TimePickerStyled,
   TimerPickerContentStyled: () => TimerPickerContentStyled,
+  ToastItem: () => ToastItem,
+  ToastProvider: () => ToastProvider,
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipProvider: () => TooltipProvider,
+  TooltipRoot: () => TooltipRoot,
+  TooltipTrigger: () => TooltipTrigger,
   maskFormat: () => maskFormat,
-  maskUnformat: () => maskUnformat
+  maskUnformat: () => maskUnformat,
+  useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -7966,8 +7974,21 @@ var InputStyled = styled("input", {
     color: "$dark400",
     border: "1px solid $dark200",
     cursor: "not-allowed"
+  },
+  inputMode: "numeric",
+  "&::-webkit-inner-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "&::-webkit-outer-spin-button": {
+    WebkitAppearance: "none",
+    margin: 0
+  },
+  "&[type='number']": {
+    MozAppearance: "textfield"
   }
 });
+var pad = (num) => String(num).padStart(2, "0");
 function TimePicker({
   selected,
   setSelected,
@@ -7975,25 +7996,21 @@ function TimePicker({
 }) {
   const [hours, setHours] = (0, import_react5.useState)("00");
   const [minutes, setMinutes] = (0, import_react5.useState)("00");
+  const [rawHours, setRawHours] = (0, import_react5.useState)("00");
+  const [rawMinutes, setRawMinutes] = (0, import_react5.useState)("00");
   const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
   const dropdownRef = (0, import_react5.useRef)(null);
   useOnClickOutside(dropdownRef, () => setIsOpen(false));
-  const pad = (num) => String(num).padStart(2, "0");
-  const handleInputValue = (0, import_react5.useCallback)(
-    (time) => {
-      setSelected(time);
-      setIsOpen(false);
-    },
-    [setSelected]
-  );
   const handleIncrement = (0, import_react5.useCallback)(
     (type) => {
       if (type === "hours") {
         const next = (parseInt(hours) + 1) % 24;
         setHours(pad(next));
+        setRawHours(pad(next));
       } else {
         const next = (parseInt(minutes) + 1) % 60;
         setMinutes(pad(next));
+        setRawMinutes(pad(next));
       }
     },
     [hours, minutes]
@@ -8003,9 +8020,11 @@ function TimePicker({
       if (type === "hours") {
         const prev = (parseInt(hours) - 1 + 24) % 24;
         setHours(pad(prev));
+        setRawHours(pad(prev));
       } else {
         const prev = (parseInt(minutes) - 1 + 60) % 60;
         setMinutes(pad(prev));
+        setRawMinutes(pad(prev));
       }
     },
     [hours, minutes]
@@ -8076,10 +8095,39 @@ function TimePicker({
                   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     InputStyled,
                     {
-                      value: unit === "hours" ? hours : minutes,
-                      onChange: (e) => handleInputValue(e.target.value),
+                      inputMode: "numeric",
+                      pattern: "[0-9]*",
                       type: "text",
-                      placeholder: "00"
+                      placeholder: "00",
+                      value: unit === "hours" ? rawHours : rawMinutes,
+                      onChange: (e) => {
+                        const rawValue = e.target.value.replace(/\D/g, "");
+                        if (unit === "hours") {
+                          setRawHours(rawValue);
+                        } else {
+                          setRawMinutes(rawValue);
+                        }
+                      },
+                      onBlur: () => {
+                        let num = 0;
+                        if (unit === "hours") {
+                          num = Math.min(parseInt(rawHours || "0", 10), 23);
+                          const padded = pad(num);
+                          setHours(padded);
+                          setRawHours(padded);
+                        } else {
+                          num = Math.min(parseInt(rawMinutes || "0", 10), 59);
+                          const padded = pad(num);
+                          setMinutes(padded);
+                          setRawMinutes(padded);
+                        }
+                      },
+                      onPaste: (e) => {
+                        const paste = e.clipboardData.getData("Text");
+                        if (!/^\d{1,2}$/.test(paste)) {
+                          e.preventDefault();
+                        }
+                      }
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
@@ -8128,7 +8176,10 @@ function TimePicker({
               type: "button",
               variant: "text",
               color: "brand",
-              onClick: () => handleInputValue(`${hours}:${minutes}`),
+              onClick: () => {
+                setSelected(`${hours}:${minutes}`);
+                setIsOpen(false);
+              },
               typography: "buttonMedium",
               fontWeight: "medium",
               children: "Aplicar"
@@ -8751,9 +8802,270 @@ function TextareaField(_a) {
   ] });
 }
 
+// src/components/Toast/components/ToastItem.tsx
+var import_react10 = require("react");
+
+// src/components/Toast/styles/index.ts
+var import_react9 = require("@stitches/react");
+var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
+var slideIn = (0, import_react9.keyframes)({
+  from: {
+    transform: "translateX(calc(100% + 25px))",
+    opacity: 0
+  },
+  to: {
+    transform: "translateX(0)",
+    opacity: 1
+  }
+});
+var slideOut = (0, import_react9.keyframes)({
+  from: {
+    transform: "translateX(0)",
+    opacity: 1
+  },
+  to: {
+    transform: "translateX(calc(100% + 25px))",
+    opacity: 0
+  }
+});
+var swipeOut = (0, import_react9.keyframes)({
+  from: {
+    transform: "translateX(var(--radix-toast-swipe-end-x))",
+    opacity: 1
+  },
+  to: {
+    transform: "translateX(calc(100% + 25px))",
+    opacity: 0
+  }
+});
+var ToastViewport = styled(ToastPrimitive.Viewport, {
+  position: "fixed",
+  top: 0,
+  right: 0,
+  display: "flex",
+  flexDirection: "column",
+  padding: 25,
+  gap: 10,
+  width: 390,
+  maxWidth: "100vw",
+  margin: 0,
+  listStyle: "none",
+  zIndex: 2147483647,
+  outline: "none"
+});
+var ToastRoot = styled(ToastPrimitive.Root, {
+  backgroundColor: "$neutral50",
+  borderRadius: "$sm",
+  boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  padding: "$16",
+  gap: "$8",
+  display: "flex",
+  alignItems: "center",
+  border: "1px solid",
+  position: "relative",
+  zIndex: 9999,
+  '&[data-state="open"]': {
+    animation: `${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
+  },
+  '&[data-state="closed"]': {
+    animation: `${slideOut} 100ms ease-in`
+  },
+  '&[data-swipe="move"]': {
+    transform: "translateX(var(--radix-toast-swipe-move-x))"
+  },
+  '&[data-swipe="cancel"]': {
+    transform: "translateX(0)",
+    transition: "transform 200ms ease-out"
+  },
+  '&[data-swipe="end"]': {
+    animation: `${swipeOut} 100ms ease-out`
+  },
+  $$toastColor: "inherit",
+  color: "$$toastColor",
+  borderColor: "$$toastColor",
+  variants: {
+    type: {
+      success: {
+        $$toastColor: "$colors$success600",
+        backgroundColor: "$success50"
+      },
+      error: {
+        $$toastColor: "$colors$error600",
+        backgroundColor: "$error50"
+      },
+      warning: {
+        $$toastColor: "$colors$warning600",
+        backgroundColor: "$warning50"
+      },
+      info: {
+        $$toastColor: "$colors$info600",
+        backgroundColor: "$info50"
+      }
+    }
+  },
+  defaultVariants: {
+    type: "info"
+  }
+});
+var ToastClose = styled(ToastPrimitive.Close, {
+  border: "none",
+  backgroundColor: "transparent",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "inherit",
+  borderRadius: 4,
+  padding: 4,
+  cursor: "pointer",
+  opacity: 0.7,
+  "&:hover": {
+    opacity: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.05)"
+  },
+  "&:focus": {
+    boxShadow: "0 0 0 2px currentColor",
+    opacity: 1
+  }
+});
+
+// src/components/Toast/components/ToastItem.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function ToastItem({
+  toast,
+  onRemove
+}) {
+  const [open, setOpen] = (0, import_react10.useState)(true);
+  const handleOpenChange = (open2) => {
+    setOpen(open2);
+    if (!open2) {
+      onRemove(toast.id);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    ToastRoot,
+    {
+      type: toast.type,
+      duration: toast.duration,
+      open,
+      onOpenChange: handleOpenChange,
+      children: [
+        (toast == null ? void 0 : toast.icon) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: toast.icon, size: "xl" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text, { typography: "bodyS", fontWeight: "medium", children: toast.message }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToastClose, { "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: "xmark", size: "md" }) })
+      ]
+    }
+  );
+}
+
+// src/components/Toast/components/ToastProvider.tsx
+var import_react11 = require("react");
+var ToastPrimitive2 = __toESM(require("@radix-ui/react-toast"));
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ToastContext = (0, import_react11.createContext)(null);
+function ToastProvider({
+  children,
+  defaultDuration = 5e3,
+  maxToasts = 5,
+  swipeDirection = "right"
+}) {
+  const [toasts, setToasts] = (0, import_react11.useState)([]);
+  const addToast = (toastData) => {
+    const id = Math.random().toString(36).substr(2, 9);
+    const newToast = __spreadProps(__spreadValues({
+      id
+    }, toastData), {
+      type: (toastData == null ? void 0 : toastData.type) || "info",
+      duration: (toastData == null ? void 0 : toastData.duration) || defaultDuration,
+      createdAt: Date.now()
+    });
+    setToasts((prevToasts) => {
+      const updatedToasts = [...prevToasts, newToast];
+      return updatedToasts.slice(-maxToasts);
+    });
+    return id;
+  };
+  const removeToast = (id) => {
+    setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+  };
+  const removeAllToasts = () => {
+    setToasts([]);
+  };
+  const contextValue = {
+    toasts,
+    addToast,
+    removeToast,
+    removeAllToasts
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToastContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ToastPrimitive2.Provider, { swipeDirection, children: [
+    children,
+    toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToastItem, { toast, onRemove: removeToast }, toast.id)),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToastViewport, {})
+  ] }) });
+}
+
+// src/components/Toast/hooks/useToast.ts
+var import_react12 = require("react");
+var useToast = () => {
+  const context = (0, import_react12.useContext)(ToastContext);
+  if (!context) {
+    throw new Error("useToast deve ser usado dentro de um ToastProvider");
+  }
+  return context;
+};
+
+// src/components/Tooltip/index.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var TooltipProvider = TooltipPrimitive.Provider;
+var TooltipRoot = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = styled(TooltipPrimitive.Content, {
+  backgroundColor: "$dark800",
+  color: "$neutral50",
+  borderRadius: "4px",
+  padding: "10px 15px",
+  fontSize: "14px",
+  lineHeight: 1,
+  zIndex: 100,
+  boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+  userSelect: "none",
+  animationDuration: "400ms",
+  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+  willChange: "transform, opacity",
+  '&[data-state="delayed-open"][data-side="top"]': {
+    animationName: "slideDownAndFade"
+  },
+  '&[data-state="delayed-open"][data-side="right"]': {
+    animationName: "slideLeftAndFade"
+  },
+  '&[data-state="delayed-open"][data-side="bottom"]': {
+    animationName: "slideUpAndFade"
+  },
+  '&[data-state="delayed-open"][data-side="left"]': {
+    animationName: "slideRightAndFade"
+  }
+});
+var TooltipArrow = styled(TooltipPrimitive.Arrow, {
+  fill: "$dark800"
+});
+function Tooltip({
+  children,
+  content,
+  delayDuration = 200,
+  side = "top"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(TooltipRoot, { delayDuration, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(TooltipContent, { side, sideOffset: 5, children: [
+      typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { typography: "tooltip", children: content }) : content,
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipArrow, {})
+    ] })
+  ] }) });
+}
+
 // src/components/Grid.tsx
 var import_themes19 = require("@radix-ui/themes");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var GridStyled = styled(import_themes19.Grid, {
   display: "grid",
   variants: {
@@ -8875,12 +9187,12 @@ var GridStyled = styled(import_themes19.Grid, {
 });
 function Grid(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Container.tsx
 var import_themes20 = require("@radix-ui/themes");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var ContainerStyled = styled(import_themes20.Container, {
   variants: {
     size: {
@@ -8910,12 +9222,12 @@ var ContainerStyled = styled(import_themes20.Container, {
 });
 function Container(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Section.tsx
 var import_themes21 = require("@radix-ui/themes");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var SectionStyled = styled(import_themes21.Section, {
   variants: {
     size: {
@@ -8939,7 +9251,7 @@ var SectionStyled = styled(import_themes21.Section, {
 });
 function Section(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -9007,8 +9319,16 @@ function Section(_a) {
   TimePickerFooterStyled,
   TimePickerStyled,
   TimerPickerContentStyled,
+  ToastItem,
+  ToastProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
   maskFormat,
-  maskUnformat
+  maskUnformat,
+  useToast
 });
 /*! Bundled license information: