@lets-events/react 10.0.0 → 10.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/.eslintrc.json +2 -2
- package/.turbo/turbo-build.log +20 -18
- package/CHANGELOG.md +12 -0
- package/dist/index.d.mts +426 -1
- package/dist/index.d.ts +426 -1
- package/dist/index.js +289 -10
- package/dist/index.mjs +280 -9
- package/package.json +3 -1
- package/src/components/Alert.tsx +303 -303
- package/src/components/Avatar.tsx +55 -55
- package/src/components/Badge.tsx +128 -128
- package/src/components/Box.tsx +3 -3
- package/src/components/Button/index.tsx +12 -12
- package/src/components/Button/styledComponents.ts +250 -250
- package/src/components/ButtonGroup.tsx +484 -484
- package/src/components/Calendar/index.tsx +136 -136
- package/src/components/Calendar/styledComponents.ts +208 -208
- package/src/components/Card.tsx +69 -69
- package/src/components/CheckboxGroup.tsx +214 -214
- package/src/components/Container.tsx +39 -39
- package/src/components/Dropdown.tsx +167 -167
- package/src/components/Filter.tsx +164 -164
- package/src/components/Flex.tsx +118 -118
- package/src/components/Grid.tsx +137 -137
- package/src/components/Icon.tsx +47 -47
- package/src/components/Modal.tsx +90 -88
- package/src/components/RadioGroup.tsx +210 -210
- package/src/components/Section.tsx +33 -33
- package/src/components/Step.tsx +164 -164
- package/src/components/Switch.tsx +108 -108
- package/src/components/Text.tsx +30 -30
- package/src/components/TextField.tsx +299 -299
- package/src/components/TextareaField.tsx +101 -101
- package/src/components/TimePicker.tsx +239 -239
- package/src/components/Toast/components/ToastItem.tsx +41 -0
- package/src/components/Toast/components/ToastProvider.tsx +63 -0
- package/src/components/Toast/hooks/useToast.ts +12 -0
- package/src/components/Toast/index.tsx +5 -0
- package/src/components/Toast/styles/index.ts +135 -0
- package/src/components/Toast/types/index.ts +46 -0
- package/src/components/Tooltip/index.tsx +67 -0
- package/src/components/Tooltip/styles.ts +78 -0
- package/src/hooks/useOnClickOutside.tsx +20 -20
- package/src/index.tsx +33 -31
- package/src/styles/index.ts +38 -38
- package/src/types/typographyValues.ts +178 -178
- package/tsconfig.json +3 -3
package/dist/index.js
CHANGED
|
@@ -1075,8 +1075,16 @@ __export(index_exports, {
|
|
|
1075
1075
|
TimePickerFooterStyled: () => TimePickerFooterStyled,
|
|
1076
1076
|
TimePickerStyled: () => TimePickerStyled,
|
|
1077
1077
|
TimerPickerContentStyled: () => TimerPickerContentStyled,
|
|
1078
|
+
ToastItem: () => ToastItem,
|
|
1079
|
+
ToastProvider: () => ToastProvider,
|
|
1080
|
+
Tooltip: () => Tooltip,
|
|
1081
|
+
TooltipContent: () => TooltipContent,
|
|
1082
|
+
TooltipProvider: () => TooltipProvider,
|
|
1083
|
+
TooltipRoot: () => TooltipRoot,
|
|
1084
|
+
TooltipTrigger: () => TooltipTrigger,
|
|
1078
1085
|
maskFormat: () => maskFormat,
|
|
1079
|
-
maskUnformat: () => maskUnformat
|
|
1086
|
+
maskUnformat: () => maskUnformat,
|
|
1087
|
+
useToast: () => useToast
|
|
1080
1088
|
});
|
|
1081
1089
|
module.exports = __toCommonJS(index_exports);
|
|
1082
1090
|
|
|
@@ -3622,13 +3630,15 @@ var ModalContentStyled = styled(import_radix_ui.Dialog.Content, {
|
|
|
3622
3630
|
top: "50%",
|
|
3623
3631
|
left: "50%",
|
|
3624
3632
|
transform: "translate(-50%, -50%)",
|
|
3625
|
-
backgroundColor: "$dark50"
|
|
3633
|
+
backgroundColor: "$dark50",
|
|
3634
|
+
zIndex: "10001"
|
|
3626
3635
|
});
|
|
3627
3636
|
var ModalOverlay = styled(import_radix_ui.Dialog.Overlay, {
|
|
3628
3637
|
position: "fixed",
|
|
3629
3638
|
inset: 0,
|
|
3630
3639
|
opacity: 1,
|
|
3631
|
-
backgroundColor: "rgba(0, 0, 0, .5)"
|
|
3640
|
+
backgroundColor: "rgba(0, 0, 0, .5)",
|
|
3641
|
+
zIndex: "10000"
|
|
3632
3642
|
});
|
|
3633
3643
|
var ModalHeaderStyled = styled("div", {
|
|
3634
3644
|
borderBottom: "1px solid $neutral300",
|
|
@@ -8749,9 +8759,270 @@ function TextareaField(_a) {
|
|
|
8749
8759
|
] });
|
|
8750
8760
|
}
|
|
8751
8761
|
|
|
8762
|
+
// src/components/Toast/components/ToastItem.tsx
|
|
8763
|
+
var import_react10 = require("react");
|
|
8764
|
+
|
|
8765
|
+
// src/components/Toast/styles/index.ts
|
|
8766
|
+
var import_react9 = require("@stitches/react");
|
|
8767
|
+
var ToastPrimitive = __toESM(require("@radix-ui/react-toast"));
|
|
8768
|
+
var slideIn = (0, import_react9.keyframes)({
|
|
8769
|
+
from: {
|
|
8770
|
+
transform: "translateX(calc(100% + 25px))",
|
|
8771
|
+
opacity: 0
|
|
8772
|
+
},
|
|
8773
|
+
to: {
|
|
8774
|
+
transform: "translateX(0)",
|
|
8775
|
+
opacity: 1
|
|
8776
|
+
}
|
|
8777
|
+
});
|
|
8778
|
+
var slideOut = (0, import_react9.keyframes)({
|
|
8779
|
+
from: {
|
|
8780
|
+
transform: "translateX(0)",
|
|
8781
|
+
opacity: 1
|
|
8782
|
+
},
|
|
8783
|
+
to: {
|
|
8784
|
+
transform: "translateX(calc(100% + 25px))",
|
|
8785
|
+
opacity: 0
|
|
8786
|
+
}
|
|
8787
|
+
});
|
|
8788
|
+
var swipeOut = (0, import_react9.keyframes)({
|
|
8789
|
+
from: {
|
|
8790
|
+
transform: "translateX(var(--radix-toast-swipe-end-x))",
|
|
8791
|
+
opacity: 1
|
|
8792
|
+
},
|
|
8793
|
+
to: {
|
|
8794
|
+
transform: "translateX(calc(100% + 25px))",
|
|
8795
|
+
opacity: 0
|
|
8796
|
+
}
|
|
8797
|
+
});
|
|
8798
|
+
var ToastViewport = styled(ToastPrimitive.Viewport, {
|
|
8799
|
+
position: "fixed",
|
|
8800
|
+
top: 0,
|
|
8801
|
+
right: 0,
|
|
8802
|
+
display: "flex",
|
|
8803
|
+
flexDirection: "column",
|
|
8804
|
+
padding: 25,
|
|
8805
|
+
gap: 10,
|
|
8806
|
+
width: 390,
|
|
8807
|
+
maxWidth: "100vw",
|
|
8808
|
+
margin: 0,
|
|
8809
|
+
listStyle: "none",
|
|
8810
|
+
zIndex: 2147483647,
|
|
8811
|
+
outline: "none"
|
|
8812
|
+
});
|
|
8813
|
+
var ToastRoot = styled(ToastPrimitive.Root, {
|
|
8814
|
+
backgroundColor: "$neutral50",
|
|
8815
|
+
borderRadius: "$sm",
|
|
8816
|
+
boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
|
|
8817
|
+
padding: "$16",
|
|
8818
|
+
gap: "$8",
|
|
8819
|
+
display: "flex",
|
|
8820
|
+
alignItems: "center",
|
|
8821
|
+
border: "1px solid",
|
|
8822
|
+
position: "relative",
|
|
8823
|
+
zIndex: 9999,
|
|
8824
|
+
'&[data-state="open"]': {
|
|
8825
|
+
animation: `${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
|
|
8826
|
+
},
|
|
8827
|
+
'&[data-state="closed"]': {
|
|
8828
|
+
animation: `${slideOut} 100ms ease-in`
|
|
8829
|
+
},
|
|
8830
|
+
'&[data-swipe="move"]': {
|
|
8831
|
+
transform: "translateX(var(--radix-toast-swipe-move-x))"
|
|
8832
|
+
},
|
|
8833
|
+
'&[data-swipe="cancel"]': {
|
|
8834
|
+
transform: "translateX(0)",
|
|
8835
|
+
transition: "transform 200ms ease-out"
|
|
8836
|
+
},
|
|
8837
|
+
'&[data-swipe="end"]': {
|
|
8838
|
+
animation: `${swipeOut} 100ms ease-out`
|
|
8839
|
+
},
|
|
8840
|
+
$$toastColor: "inherit",
|
|
8841
|
+
color: "$$toastColor",
|
|
8842
|
+
borderColor: "$$toastColor",
|
|
8843
|
+
variants: {
|
|
8844
|
+
type: {
|
|
8845
|
+
success: {
|
|
8846
|
+
$$toastColor: "$colors$success600",
|
|
8847
|
+
backgroundColor: "$success50"
|
|
8848
|
+
},
|
|
8849
|
+
error: {
|
|
8850
|
+
$$toastColor: "$colors$error600",
|
|
8851
|
+
backgroundColor: "$error50"
|
|
8852
|
+
},
|
|
8853
|
+
warning: {
|
|
8854
|
+
$$toastColor: "$colors$warning600",
|
|
8855
|
+
backgroundColor: "$warning50"
|
|
8856
|
+
},
|
|
8857
|
+
info: {
|
|
8858
|
+
$$toastColor: "$colors$info600",
|
|
8859
|
+
backgroundColor: "$info50"
|
|
8860
|
+
}
|
|
8861
|
+
}
|
|
8862
|
+
},
|
|
8863
|
+
defaultVariants: {
|
|
8864
|
+
type: "info"
|
|
8865
|
+
}
|
|
8866
|
+
});
|
|
8867
|
+
var ToastClose = styled(ToastPrimitive.Close, {
|
|
8868
|
+
border: "none",
|
|
8869
|
+
backgroundColor: "transparent",
|
|
8870
|
+
display: "flex",
|
|
8871
|
+
alignItems: "center",
|
|
8872
|
+
justifyContent: "center",
|
|
8873
|
+
color: "inherit",
|
|
8874
|
+
borderRadius: 4,
|
|
8875
|
+
padding: 4,
|
|
8876
|
+
cursor: "pointer",
|
|
8877
|
+
opacity: 0.7,
|
|
8878
|
+
"&:hover": {
|
|
8879
|
+
opacity: 1,
|
|
8880
|
+
backgroundColor: "rgba(0, 0, 0, 0.05)"
|
|
8881
|
+
},
|
|
8882
|
+
"&:focus": {
|
|
8883
|
+
boxShadow: "0 0 0 2px currentColor",
|
|
8884
|
+
opacity: 1
|
|
8885
|
+
}
|
|
8886
|
+
});
|
|
8887
|
+
|
|
8888
|
+
// src/components/Toast/components/ToastItem.tsx
|
|
8889
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
8890
|
+
function ToastItem({
|
|
8891
|
+
toast,
|
|
8892
|
+
onRemove
|
|
8893
|
+
}) {
|
|
8894
|
+
const [open, setOpen] = (0, import_react10.useState)(true);
|
|
8895
|
+
const handleOpenChange = (open2) => {
|
|
8896
|
+
setOpen(open2);
|
|
8897
|
+
if (!open2) {
|
|
8898
|
+
onRemove(toast.id);
|
|
8899
|
+
}
|
|
8900
|
+
};
|
|
8901
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
8902
|
+
ToastRoot,
|
|
8903
|
+
{
|
|
8904
|
+
type: toast.type,
|
|
8905
|
+
duration: toast.duration,
|
|
8906
|
+
open,
|
|
8907
|
+
onOpenChange: handleOpenChange,
|
|
8908
|
+
children: [
|
|
8909
|
+
(toast == null ? void 0 : toast.icon) && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: toast.icon, size: "xl" }),
|
|
8910
|
+
/* @__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 }) }),
|
|
8911
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToastClose, { "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: "xmark", size: "md" }) })
|
|
8912
|
+
]
|
|
8913
|
+
}
|
|
8914
|
+
);
|
|
8915
|
+
}
|
|
8916
|
+
|
|
8917
|
+
// src/components/Toast/components/ToastProvider.tsx
|
|
8918
|
+
var import_react11 = require("react");
|
|
8919
|
+
var ToastPrimitive2 = __toESM(require("@radix-ui/react-toast"));
|
|
8920
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
8921
|
+
var ToastContext = (0, import_react11.createContext)(null);
|
|
8922
|
+
function ToastProvider({
|
|
8923
|
+
children,
|
|
8924
|
+
defaultDuration = 5e3,
|
|
8925
|
+
maxToasts = 5,
|
|
8926
|
+
swipeDirection = "right"
|
|
8927
|
+
}) {
|
|
8928
|
+
const [toasts, setToasts] = (0, import_react11.useState)([]);
|
|
8929
|
+
const addToast = (toastData) => {
|
|
8930
|
+
const id = Math.random().toString(36).substr(2, 9);
|
|
8931
|
+
const newToast = __spreadProps(__spreadValues({
|
|
8932
|
+
id
|
|
8933
|
+
}, toastData), {
|
|
8934
|
+
type: (toastData == null ? void 0 : toastData.type) || "info",
|
|
8935
|
+
duration: (toastData == null ? void 0 : toastData.duration) || defaultDuration,
|
|
8936
|
+
createdAt: Date.now()
|
|
8937
|
+
});
|
|
8938
|
+
setToasts((prevToasts) => {
|
|
8939
|
+
const updatedToasts = [...prevToasts, newToast];
|
|
8940
|
+
return updatedToasts.slice(-maxToasts);
|
|
8941
|
+
});
|
|
8942
|
+
return id;
|
|
8943
|
+
};
|
|
8944
|
+
const removeToast = (id) => {
|
|
8945
|
+
setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
|
|
8946
|
+
};
|
|
8947
|
+
const removeAllToasts = () => {
|
|
8948
|
+
setToasts([]);
|
|
8949
|
+
};
|
|
8950
|
+
const contextValue = {
|
|
8951
|
+
toasts,
|
|
8952
|
+
addToast,
|
|
8953
|
+
removeToast,
|
|
8954
|
+
removeAllToasts
|
|
8955
|
+
};
|
|
8956
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToastContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(ToastPrimitive2.Provider, { swipeDirection, children: [
|
|
8957
|
+
children,
|
|
8958
|
+
toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToastItem, { toast, onRemove: removeToast }, toast.id)),
|
|
8959
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToastViewport, {})
|
|
8960
|
+
] }) });
|
|
8961
|
+
}
|
|
8962
|
+
|
|
8963
|
+
// src/components/Toast/hooks/useToast.ts
|
|
8964
|
+
var import_react12 = require("react");
|
|
8965
|
+
var useToast = () => {
|
|
8966
|
+
const context = (0, import_react12.useContext)(ToastContext);
|
|
8967
|
+
if (!context) {
|
|
8968
|
+
throw new Error("useToast deve ser usado dentro de um ToastProvider");
|
|
8969
|
+
}
|
|
8970
|
+
return context;
|
|
8971
|
+
};
|
|
8972
|
+
|
|
8973
|
+
// src/components/Tooltip/index.tsx
|
|
8974
|
+
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
|
|
8975
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
8976
|
+
var TooltipProvider = TooltipPrimitive.Provider;
|
|
8977
|
+
var TooltipRoot = TooltipPrimitive.Root;
|
|
8978
|
+
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
8979
|
+
var TooltipContent = styled(TooltipPrimitive.Content, {
|
|
8980
|
+
backgroundColor: "$dark800",
|
|
8981
|
+
color: "$neutral50",
|
|
8982
|
+
borderRadius: "4px",
|
|
8983
|
+
padding: "10px 15px",
|
|
8984
|
+
fontSize: "14px",
|
|
8985
|
+
lineHeight: 1,
|
|
8986
|
+
zIndex: 100,
|
|
8987
|
+
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
|
|
8988
|
+
userSelect: "none",
|
|
8989
|
+
animationDuration: "400ms",
|
|
8990
|
+
animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
8991
|
+
willChange: "transform, opacity",
|
|
8992
|
+
'&[data-state="delayed-open"][data-side="top"]': {
|
|
8993
|
+
animationName: "slideDownAndFade"
|
|
8994
|
+
},
|
|
8995
|
+
'&[data-state="delayed-open"][data-side="right"]': {
|
|
8996
|
+
animationName: "slideLeftAndFade"
|
|
8997
|
+
},
|
|
8998
|
+
'&[data-state="delayed-open"][data-side="bottom"]': {
|
|
8999
|
+
animationName: "slideUpAndFade"
|
|
9000
|
+
},
|
|
9001
|
+
'&[data-state="delayed-open"][data-side="left"]': {
|
|
9002
|
+
animationName: "slideRightAndFade"
|
|
9003
|
+
}
|
|
9004
|
+
});
|
|
9005
|
+
var TooltipArrow = styled(TooltipPrimitive.Arrow, {
|
|
9006
|
+
fill: "$dark800"
|
|
9007
|
+
});
|
|
9008
|
+
function Tooltip({
|
|
9009
|
+
children,
|
|
9010
|
+
content,
|
|
9011
|
+
delayDuration = 200,
|
|
9012
|
+
side = "top"
|
|
9013
|
+
}) {
|
|
9014
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(TooltipRoot, { delayDuration, children: [
|
|
9015
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipTrigger, { asChild: true, children }),
|
|
9016
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(TooltipContent, { side, sideOffset: 5, children: [
|
|
9017
|
+
typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { typography: "tooltip", children: content }) : content,
|
|
9018
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipArrow, {})
|
|
9019
|
+
] })
|
|
9020
|
+
] }) });
|
|
9021
|
+
}
|
|
9022
|
+
|
|
8752
9023
|
// src/components/Grid.tsx
|
|
8753
9024
|
var import_themes19 = require("@radix-ui/themes");
|
|
8754
|
-
var
|
|
9025
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
8755
9026
|
var GridStyled = styled(import_themes19.Grid, {
|
|
8756
9027
|
display: "grid",
|
|
8757
9028
|
variants: {
|
|
@@ -8873,12 +9144,12 @@ var GridStyled = styled(import_themes19.Grid, {
|
|
|
8873
9144
|
});
|
|
8874
9145
|
function Grid(_a) {
|
|
8875
9146
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
8876
|
-
return /* @__PURE__ */ (0,
|
|
9147
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
8877
9148
|
}
|
|
8878
9149
|
|
|
8879
9150
|
// src/components/Container.tsx
|
|
8880
9151
|
var import_themes20 = require("@radix-ui/themes");
|
|
8881
|
-
var
|
|
9152
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
8882
9153
|
var ContainerStyled = styled(import_themes20.Container, {
|
|
8883
9154
|
variants: {
|
|
8884
9155
|
size: {
|
|
@@ -8908,12 +9179,12 @@ var ContainerStyled = styled(import_themes20.Container, {
|
|
|
8908
9179
|
});
|
|
8909
9180
|
function Container(_a) {
|
|
8910
9181
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
8911
|
-
return /* @__PURE__ */ (0,
|
|
9182
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
8912
9183
|
}
|
|
8913
9184
|
|
|
8914
9185
|
// src/components/Section.tsx
|
|
8915
9186
|
var import_themes21 = require("@radix-ui/themes");
|
|
8916
|
-
var
|
|
9187
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
8917
9188
|
var SectionStyled = styled(import_themes21.Section, {
|
|
8918
9189
|
variants: {
|
|
8919
9190
|
size: {
|
|
@@ -8937,7 +9208,7 @@ var SectionStyled = styled(import_themes21.Section, {
|
|
|
8937
9208
|
});
|
|
8938
9209
|
function Section(_a) {
|
|
8939
9210
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
8940
|
-
return /* @__PURE__ */ (0,
|
|
9211
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
8941
9212
|
}
|
|
8942
9213
|
// Annotate the CommonJS export names for ESM import in node:
|
|
8943
9214
|
0 && (module.exports = {
|
|
@@ -9005,8 +9276,16 @@ function Section(_a) {
|
|
|
9005
9276
|
TimePickerFooterStyled,
|
|
9006
9277
|
TimePickerStyled,
|
|
9007
9278
|
TimerPickerContentStyled,
|
|
9279
|
+
ToastItem,
|
|
9280
|
+
ToastProvider,
|
|
9281
|
+
Tooltip,
|
|
9282
|
+
TooltipContent,
|
|
9283
|
+
TooltipProvider,
|
|
9284
|
+
TooltipRoot,
|
|
9285
|
+
TooltipTrigger,
|
|
9008
9286
|
maskFormat,
|
|
9009
|
-
maskUnformat
|
|
9287
|
+
maskUnformat,
|
|
9288
|
+
useToast
|
|
9010
9289
|
});
|
|
9011
9290
|
/*! Bundled license information:
|
|
9012
9291
|
|
package/dist/index.mjs
CHANGED
|
@@ -3544,13 +3544,15 @@ var ModalContentStyled = styled(ModalRadix.Content, {
|
|
|
3544
3544
|
top: "50%",
|
|
3545
3545
|
left: "50%",
|
|
3546
3546
|
transform: "translate(-50%, -50%)",
|
|
3547
|
-
backgroundColor: "$dark50"
|
|
3547
|
+
backgroundColor: "$dark50",
|
|
3548
|
+
zIndex: "10001"
|
|
3548
3549
|
});
|
|
3549
3550
|
var ModalOverlay = styled(ModalRadix.Overlay, {
|
|
3550
3551
|
position: "fixed",
|
|
3551
3552
|
inset: 0,
|
|
3552
3553
|
opacity: 1,
|
|
3553
|
-
backgroundColor: "rgba(0, 0, 0, .5)"
|
|
3554
|
+
backgroundColor: "rgba(0, 0, 0, .5)",
|
|
3555
|
+
zIndex: "10000"
|
|
3554
3556
|
});
|
|
3555
3557
|
var ModalHeaderStyled = styled("div", {
|
|
3556
3558
|
borderBottom: "1px solid $neutral300",
|
|
@@ -8671,9 +8673,270 @@ function TextareaField(_a) {
|
|
|
8671
8673
|
] });
|
|
8672
8674
|
}
|
|
8673
8675
|
|
|
8676
|
+
// src/components/Toast/components/ToastItem.tsx
|
|
8677
|
+
import { useState as useState3 } from "react";
|
|
8678
|
+
|
|
8679
|
+
// src/components/Toast/styles/index.ts
|
|
8680
|
+
import { keyframes as keyframes2 } from "@stitches/react";
|
|
8681
|
+
import * as ToastPrimitive from "@radix-ui/react-toast";
|
|
8682
|
+
var slideIn = keyframes2({
|
|
8683
|
+
from: {
|
|
8684
|
+
transform: "translateX(calc(100% + 25px))",
|
|
8685
|
+
opacity: 0
|
|
8686
|
+
},
|
|
8687
|
+
to: {
|
|
8688
|
+
transform: "translateX(0)",
|
|
8689
|
+
opacity: 1
|
|
8690
|
+
}
|
|
8691
|
+
});
|
|
8692
|
+
var slideOut = keyframes2({
|
|
8693
|
+
from: {
|
|
8694
|
+
transform: "translateX(0)",
|
|
8695
|
+
opacity: 1
|
|
8696
|
+
},
|
|
8697
|
+
to: {
|
|
8698
|
+
transform: "translateX(calc(100% + 25px))",
|
|
8699
|
+
opacity: 0
|
|
8700
|
+
}
|
|
8701
|
+
});
|
|
8702
|
+
var swipeOut = keyframes2({
|
|
8703
|
+
from: {
|
|
8704
|
+
transform: "translateX(var(--radix-toast-swipe-end-x))",
|
|
8705
|
+
opacity: 1
|
|
8706
|
+
},
|
|
8707
|
+
to: {
|
|
8708
|
+
transform: "translateX(calc(100% + 25px))",
|
|
8709
|
+
opacity: 0
|
|
8710
|
+
}
|
|
8711
|
+
});
|
|
8712
|
+
var ToastViewport = styled(ToastPrimitive.Viewport, {
|
|
8713
|
+
position: "fixed",
|
|
8714
|
+
top: 0,
|
|
8715
|
+
right: 0,
|
|
8716
|
+
display: "flex",
|
|
8717
|
+
flexDirection: "column",
|
|
8718
|
+
padding: 25,
|
|
8719
|
+
gap: 10,
|
|
8720
|
+
width: 390,
|
|
8721
|
+
maxWidth: "100vw",
|
|
8722
|
+
margin: 0,
|
|
8723
|
+
listStyle: "none",
|
|
8724
|
+
zIndex: 2147483647,
|
|
8725
|
+
outline: "none"
|
|
8726
|
+
});
|
|
8727
|
+
var ToastRoot = styled(ToastPrimitive.Root, {
|
|
8728
|
+
backgroundColor: "$neutral50",
|
|
8729
|
+
borderRadius: "$sm",
|
|
8730
|
+
boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
|
|
8731
|
+
padding: "$16",
|
|
8732
|
+
gap: "$8",
|
|
8733
|
+
display: "flex",
|
|
8734
|
+
alignItems: "center",
|
|
8735
|
+
border: "1px solid",
|
|
8736
|
+
position: "relative",
|
|
8737
|
+
zIndex: 9999,
|
|
8738
|
+
'&[data-state="open"]': {
|
|
8739
|
+
animation: `${slideIn} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
|
|
8740
|
+
},
|
|
8741
|
+
'&[data-state="closed"]': {
|
|
8742
|
+
animation: `${slideOut} 100ms ease-in`
|
|
8743
|
+
},
|
|
8744
|
+
'&[data-swipe="move"]': {
|
|
8745
|
+
transform: "translateX(var(--radix-toast-swipe-move-x))"
|
|
8746
|
+
},
|
|
8747
|
+
'&[data-swipe="cancel"]': {
|
|
8748
|
+
transform: "translateX(0)",
|
|
8749
|
+
transition: "transform 200ms ease-out"
|
|
8750
|
+
},
|
|
8751
|
+
'&[data-swipe="end"]': {
|
|
8752
|
+
animation: `${swipeOut} 100ms ease-out`
|
|
8753
|
+
},
|
|
8754
|
+
$$toastColor: "inherit",
|
|
8755
|
+
color: "$$toastColor",
|
|
8756
|
+
borderColor: "$$toastColor",
|
|
8757
|
+
variants: {
|
|
8758
|
+
type: {
|
|
8759
|
+
success: {
|
|
8760
|
+
$$toastColor: "$colors$success600",
|
|
8761
|
+
backgroundColor: "$success50"
|
|
8762
|
+
},
|
|
8763
|
+
error: {
|
|
8764
|
+
$$toastColor: "$colors$error600",
|
|
8765
|
+
backgroundColor: "$error50"
|
|
8766
|
+
},
|
|
8767
|
+
warning: {
|
|
8768
|
+
$$toastColor: "$colors$warning600",
|
|
8769
|
+
backgroundColor: "$warning50"
|
|
8770
|
+
},
|
|
8771
|
+
info: {
|
|
8772
|
+
$$toastColor: "$colors$info600",
|
|
8773
|
+
backgroundColor: "$info50"
|
|
8774
|
+
}
|
|
8775
|
+
}
|
|
8776
|
+
},
|
|
8777
|
+
defaultVariants: {
|
|
8778
|
+
type: "info"
|
|
8779
|
+
}
|
|
8780
|
+
});
|
|
8781
|
+
var ToastClose = styled(ToastPrimitive.Close, {
|
|
8782
|
+
border: "none",
|
|
8783
|
+
backgroundColor: "transparent",
|
|
8784
|
+
display: "flex",
|
|
8785
|
+
alignItems: "center",
|
|
8786
|
+
justifyContent: "center",
|
|
8787
|
+
color: "inherit",
|
|
8788
|
+
borderRadius: 4,
|
|
8789
|
+
padding: 4,
|
|
8790
|
+
cursor: "pointer",
|
|
8791
|
+
opacity: 0.7,
|
|
8792
|
+
"&:hover": {
|
|
8793
|
+
opacity: 1,
|
|
8794
|
+
backgroundColor: "rgba(0, 0, 0, 0.05)"
|
|
8795
|
+
},
|
|
8796
|
+
"&:focus": {
|
|
8797
|
+
boxShadow: "0 0 0 2px currentColor",
|
|
8798
|
+
opacity: 1
|
|
8799
|
+
}
|
|
8800
|
+
});
|
|
8801
|
+
|
|
8802
|
+
// src/components/Toast/components/ToastItem.tsx
|
|
8803
|
+
import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
8804
|
+
function ToastItem({
|
|
8805
|
+
toast,
|
|
8806
|
+
onRemove
|
|
8807
|
+
}) {
|
|
8808
|
+
const [open, setOpen] = useState3(true);
|
|
8809
|
+
const handleOpenChange = (open2) => {
|
|
8810
|
+
setOpen(open2);
|
|
8811
|
+
if (!open2) {
|
|
8812
|
+
onRemove(toast.id);
|
|
8813
|
+
}
|
|
8814
|
+
};
|
|
8815
|
+
return /* @__PURE__ */ jsxs9(
|
|
8816
|
+
ToastRoot,
|
|
8817
|
+
{
|
|
8818
|
+
type: toast.type,
|
|
8819
|
+
duration: toast.duration,
|
|
8820
|
+
open,
|
|
8821
|
+
onOpenChange: handleOpenChange,
|
|
8822
|
+
children: [
|
|
8823
|
+
(toast == null ? void 0 : toast.icon) && /* @__PURE__ */ jsx21(Icon_default, { name: toast.icon, size: "xl" }),
|
|
8824
|
+
/* @__PURE__ */ jsx21("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx21(Text, { typography: "bodyS", fontWeight: "medium", children: toast.message }) }),
|
|
8825
|
+
/* @__PURE__ */ jsx21(ToastClose, { "aria-label": "Close", children: /* @__PURE__ */ jsx21(Icon_default, { name: "xmark", size: "md" }) })
|
|
8826
|
+
]
|
|
8827
|
+
}
|
|
8828
|
+
);
|
|
8829
|
+
}
|
|
8830
|
+
|
|
8831
|
+
// src/components/Toast/components/ToastProvider.tsx
|
|
8832
|
+
import { createContext, useState as useState4 } from "react";
|
|
8833
|
+
import * as ToastPrimitive2 from "@radix-ui/react-toast";
|
|
8834
|
+
import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
8835
|
+
var ToastContext = createContext(null);
|
|
8836
|
+
function ToastProvider({
|
|
8837
|
+
children,
|
|
8838
|
+
defaultDuration = 5e3,
|
|
8839
|
+
maxToasts = 5,
|
|
8840
|
+
swipeDirection = "right"
|
|
8841
|
+
}) {
|
|
8842
|
+
const [toasts, setToasts] = useState4([]);
|
|
8843
|
+
const addToast = (toastData) => {
|
|
8844
|
+
const id = Math.random().toString(36).substr(2, 9);
|
|
8845
|
+
const newToast = __spreadProps(__spreadValues({
|
|
8846
|
+
id
|
|
8847
|
+
}, toastData), {
|
|
8848
|
+
type: (toastData == null ? void 0 : toastData.type) || "info",
|
|
8849
|
+
duration: (toastData == null ? void 0 : toastData.duration) || defaultDuration,
|
|
8850
|
+
createdAt: Date.now()
|
|
8851
|
+
});
|
|
8852
|
+
setToasts((prevToasts) => {
|
|
8853
|
+
const updatedToasts = [...prevToasts, newToast];
|
|
8854
|
+
return updatedToasts.slice(-maxToasts);
|
|
8855
|
+
});
|
|
8856
|
+
return id;
|
|
8857
|
+
};
|
|
8858
|
+
const removeToast = (id) => {
|
|
8859
|
+
setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
|
|
8860
|
+
};
|
|
8861
|
+
const removeAllToasts = () => {
|
|
8862
|
+
setToasts([]);
|
|
8863
|
+
};
|
|
8864
|
+
const contextValue = {
|
|
8865
|
+
toasts,
|
|
8866
|
+
addToast,
|
|
8867
|
+
removeToast,
|
|
8868
|
+
removeAllToasts
|
|
8869
|
+
};
|
|
8870
|
+
return /* @__PURE__ */ jsx22(ToastContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs10(ToastPrimitive2.Provider, { swipeDirection, children: [
|
|
8871
|
+
children,
|
|
8872
|
+
toasts.map((toast) => /* @__PURE__ */ jsx22(ToastItem, { toast, onRemove: removeToast }, toast.id)),
|
|
8873
|
+
/* @__PURE__ */ jsx22(ToastViewport, {})
|
|
8874
|
+
] }) });
|
|
8875
|
+
}
|
|
8876
|
+
|
|
8877
|
+
// src/components/Toast/hooks/useToast.ts
|
|
8878
|
+
import { useContext } from "react";
|
|
8879
|
+
var useToast = () => {
|
|
8880
|
+
const context = useContext(ToastContext);
|
|
8881
|
+
if (!context) {
|
|
8882
|
+
throw new Error("useToast deve ser usado dentro de um ToastProvider");
|
|
8883
|
+
}
|
|
8884
|
+
return context;
|
|
8885
|
+
};
|
|
8886
|
+
|
|
8887
|
+
// src/components/Tooltip/index.tsx
|
|
8888
|
+
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
8889
|
+
import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
8890
|
+
var TooltipProvider = TooltipPrimitive.Provider;
|
|
8891
|
+
var TooltipRoot = TooltipPrimitive.Root;
|
|
8892
|
+
var TooltipTrigger = TooltipPrimitive.Trigger;
|
|
8893
|
+
var TooltipContent = styled(TooltipPrimitive.Content, {
|
|
8894
|
+
backgroundColor: "$dark800",
|
|
8895
|
+
color: "$neutral50",
|
|
8896
|
+
borderRadius: "4px",
|
|
8897
|
+
padding: "10px 15px",
|
|
8898
|
+
fontSize: "14px",
|
|
8899
|
+
lineHeight: 1,
|
|
8900
|
+
zIndex: 100,
|
|
8901
|
+
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
|
|
8902
|
+
userSelect: "none",
|
|
8903
|
+
animationDuration: "400ms",
|
|
8904
|
+
animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
|
|
8905
|
+
willChange: "transform, opacity",
|
|
8906
|
+
'&[data-state="delayed-open"][data-side="top"]': {
|
|
8907
|
+
animationName: "slideDownAndFade"
|
|
8908
|
+
},
|
|
8909
|
+
'&[data-state="delayed-open"][data-side="right"]': {
|
|
8910
|
+
animationName: "slideLeftAndFade"
|
|
8911
|
+
},
|
|
8912
|
+
'&[data-state="delayed-open"][data-side="bottom"]': {
|
|
8913
|
+
animationName: "slideUpAndFade"
|
|
8914
|
+
},
|
|
8915
|
+
'&[data-state="delayed-open"][data-side="left"]': {
|
|
8916
|
+
animationName: "slideRightAndFade"
|
|
8917
|
+
}
|
|
8918
|
+
});
|
|
8919
|
+
var TooltipArrow = styled(TooltipPrimitive.Arrow, {
|
|
8920
|
+
fill: "$dark800"
|
|
8921
|
+
});
|
|
8922
|
+
function Tooltip({
|
|
8923
|
+
children,
|
|
8924
|
+
content,
|
|
8925
|
+
delayDuration = 200,
|
|
8926
|
+
side = "top"
|
|
8927
|
+
}) {
|
|
8928
|
+
return /* @__PURE__ */ jsx23(TooltipProvider, { children: /* @__PURE__ */ jsxs11(TooltipRoot, { delayDuration, children: [
|
|
8929
|
+
/* @__PURE__ */ jsx23(TooltipTrigger, { asChild: true, children }),
|
|
8930
|
+
/* @__PURE__ */ jsxs11(TooltipContent, { side, sideOffset: 5, children: [
|
|
8931
|
+
typeof content === "string" ? /* @__PURE__ */ jsx23(Text, { typography: "tooltip", children: content }) : content,
|
|
8932
|
+
/* @__PURE__ */ jsx23(TooltipArrow, {})
|
|
8933
|
+
] })
|
|
8934
|
+
] }) });
|
|
8935
|
+
}
|
|
8936
|
+
|
|
8674
8937
|
// src/components/Grid.tsx
|
|
8675
8938
|
import { Grid as GridRadix } from "@radix-ui/themes";
|
|
8676
|
-
import { jsx as
|
|
8939
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
8677
8940
|
var GridStyled = styled(GridRadix, {
|
|
8678
8941
|
display: "grid",
|
|
8679
8942
|
variants: {
|
|
@@ -8795,12 +9058,12 @@ var GridStyled = styled(GridRadix, {
|
|
|
8795
9058
|
});
|
|
8796
9059
|
function Grid(_a) {
|
|
8797
9060
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
8798
|
-
return /* @__PURE__ */
|
|
9061
|
+
return /* @__PURE__ */ jsx24(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
8799
9062
|
}
|
|
8800
9063
|
|
|
8801
9064
|
// src/components/Container.tsx
|
|
8802
9065
|
import { Container as ContainerRadix } from "@radix-ui/themes";
|
|
8803
|
-
import { jsx as
|
|
9066
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
8804
9067
|
var ContainerStyled = styled(ContainerRadix, {
|
|
8805
9068
|
variants: {
|
|
8806
9069
|
size: {
|
|
@@ -8830,12 +9093,12 @@ var ContainerStyled = styled(ContainerRadix, {
|
|
|
8830
9093
|
});
|
|
8831
9094
|
function Container(_a) {
|
|
8832
9095
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
8833
|
-
return /* @__PURE__ */
|
|
9096
|
+
return /* @__PURE__ */ jsx25(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
8834
9097
|
}
|
|
8835
9098
|
|
|
8836
9099
|
// src/components/Section.tsx
|
|
8837
9100
|
import { Section as SectionRadix } from "@radix-ui/themes";
|
|
8838
|
-
import { jsx as
|
|
9101
|
+
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
8839
9102
|
var SectionStyled = styled(SectionRadix, {
|
|
8840
9103
|
variants: {
|
|
8841
9104
|
size: {
|
|
@@ -8859,7 +9122,7 @@ var SectionStyled = styled(SectionRadix, {
|
|
|
8859
9122
|
});
|
|
8860
9123
|
function Section(_a) {
|
|
8861
9124
|
var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
|
|
8862
|
-
return /* @__PURE__ */
|
|
9125
|
+
return /* @__PURE__ */ jsx26(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
|
|
8863
9126
|
}
|
|
8864
9127
|
export {
|
|
8865
9128
|
Alert,
|
|
@@ -8926,8 +9189,16 @@ export {
|
|
|
8926
9189
|
TimePickerFooterStyled,
|
|
8927
9190
|
TimePickerStyled,
|
|
8928
9191
|
TimerPickerContentStyled,
|
|
9192
|
+
ToastItem,
|
|
9193
|
+
ToastProvider,
|
|
9194
|
+
Tooltip,
|
|
9195
|
+
TooltipContent,
|
|
9196
|
+
TooltipProvider,
|
|
9197
|
+
TooltipRoot,
|
|
9198
|
+
TooltipTrigger,
|
|
8929
9199
|
maskFormat,
|
|
8930
|
-
maskUnformat
|
|
9200
|
+
maskUnformat,
|
|
9201
|
+
useToast
|
|
8931
9202
|
};
|
|
8932
9203
|
/*! Bundled license information:
|
|
8933
9204
|
|