@lets-events/react 10.0.1 → 10.1.1

package/dist/index.mjs

@@ -7888,8 +7888,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,
@@ -7897,25 +7910,21 @@ function TimePicker({
 }) {
   const [hours, setHours] = useState2("00");
   const [minutes, setMinutes] = useState2("00");
+  const [rawHours, setRawHours] = useState2("00");
+  const [rawMinutes, setRawMinutes] = 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]
-  );
   const handleIncrement = 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]
@@ -7925,9 +7934,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]
@@ -7998,10 +8009,39 @@ function TimePicker({
                   /* @__PURE__ */ jsx15(
                     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__ */ jsx15(
@@ -8050,7 +8090,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"
@@ -8673,9 +8716,270 @@ function TextareaField(_a) {
   ] });
 }
 
+// src/components/Toast/components/ToastItem.tsx
+import { useState as useState3 } from "react";
+
+// src/components/Toast/styles/index.ts
+import { keyframes as keyframes2 } from "@stitches/react";
+import * as ToastPrimitive from "@radix-ui/react-toast";
+var slideIn = keyframes2({
+  from: {
+    transform: "translateX(calc(100% + 25px))",
+    opacity: 0
+  },
+  to: {
+    transform: "translateX(0)",
+    opacity: 1
+  }
+});
+var slideOut = keyframes2({
+  from: {
+    transform: "translateX(0)",
+    opacity: 1
+  },
+  to: {
+    transform: "translateX(calc(100% + 25px))",
+    opacity: 0
+  }
+});
+var swipeOut = keyframes2({
+  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
+import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+function ToastItem({
+  toast,
+  onRemove
+}) {
+  const [open, setOpen] = useState3(true);
+  const handleOpenChange = (open2) => {
+    setOpen(open2);
+    if (!open2) {
+      onRemove(toast.id);
+    }
+  };
+  return /* @__PURE__ */ jsxs9(
+    ToastRoot,
+    {
+      type: toast.type,
+      duration: toast.duration,
+      open,
+      onOpenChange: handleOpenChange,
+      children: [
+        (toast == null ? void 0 : toast.icon) && /* @__PURE__ */ jsx21(Icon_default, { name: toast.icon, size: "xl" }),
+        /* @__PURE__ */ jsx21("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx21(Text, { typography: "bodyS", fontWeight: "medium", children: toast.message }) }),
+        /* @__PURE__ */ jsx21(ToastClose, { "aria-label": "Close", children: /* @__PURE__ */ jsx21(Icon_default, { name: "xmark", size: "md" }) })
+      ]
+    }
+  );
+}
+
+// src/components/Toast/components/ToastProvider.tsx
+import { createContext, useState as useState4 } from "react";
+import * as ToastPrimitive2 from "@radix-ui/react-toast";
+import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+var ToastContext = createContext(null);
+function ToastProvider({
+  children,
+  defaultDuration = 5e3,
+  maxToasts = 5,
+  swipeDirection = "right"
+}) {
+  const [toasts, setToasts] = useState4([]);
+  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__ */ jsx22(ToastContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs10(ToastPrimitive2.Provider, { swipeDirection, children: [
+    children,
+    toasts.map((toast) => /* @__PURE__ */ jsx22(ToastItem, { toast, onRemove: removeToast }, toast.id)),
+    /* @__PURE__ */ jsx22(ToastViewport, {})
+  ] }) });
+}
+
+// src/components/Toast/hooks/useToast.ts
+import { useContext } from "react";
+var useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast deve ser usado dentro de um ToastProvider");
+  }
+  return context;
+};
+
+// src/components/Tooltip/index.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx23, jsxs as jsxs11 } from "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__ */ jsx23(TooltipProvider, { children: /* @__PURE__ */ jsxs11(TooltipRoot, { delayDuration, children: [
+    /* @__PURE__ */ jsx23(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs11(TooltipContent, { side, sideOffset: 5, children: [
+      typeof content === "string" ? /* @__PURE__ */ jsx23(Text, { typography: "tooltip", children: content }) : content,
+      /* @__PURE__ */ jsx23(TooltipArrow, {})
+    ] })
+  ] }) });
+}
+
 // src/components/Grid.tsx
 import { Grid as GridRadix } from "@radix-ui/themes";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var GridStyled = styled(GridRadix, {
   display: "grid",
   variants: {
@@ -8797,12 +9101,12 @@ var GridStyled = styled(GridRadix, {
 });
 function Grid(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx21(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx24(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Container.tsx
 import { Container as ContainerRadix } from "@radix-ui/themes";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var ContainerStyled = styled(ContainerRadix, {
   variants: {
     size: {
@@ -8832,12 +9136,12 @@ var ContainerStyled = styled(ContainerRadix, {
 });
 function Container(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx22(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx25(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Section.tsx
 import { Section as SectionRadix } from "@radix-ui/themes";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var SectionStyled = styled(SectionRadix, {
   variants: {
     size: {
@@ -8861,7 +9165,7 @@ var SectionStyled = styled(SectionRadix, {
 });
 function Section(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx23(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx26(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 export {
   Alert,
@@ -8928,8 +9232,16 @@ export {
   TimePickerFooterStyled,
   TimePickerStyled,
   TimerPickerContentStyled,
+  ToastItem,
+  ToastProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipRoot,
+  TooltipTrigger,
   maskFormat,
-  maskUnformat
+  maskUnformat,
+  useToast
 };
 /*! Bundled license information:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "10.0.1",
+  "version": "10.1.1",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -31,6 +31,8 @@
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "@radix-ui/themes": "^3.2.1",
     "@react-input/mask": "^2.0.4",
     "@stitches/react": "^1.2.8",