@lets-events/react 11.3.0 → 11.4.0

package/dist/index.js

@@ -1053,6 +1053,8 @@ __export(index_exports, {
   InputStyled: () => InputStyled,
   MenuDropdown: () => MenuDropdown,
   Modal: () => Modal,
+  MultiSelect: () => MultiSelect,
+  MultiSelectFormField: () => MultiSelectFormField,
   RadioGroup: () => RadioGroup,
   RadioGroupStyled: () => RadioGroupStyled,
   RadioItem: () => RadioItem,
@@ -1650,7 +1652,6 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var TextStyle = styled(import_themes.Text, {
   fontFamily: "$default",
   lineHeight: "$base",
-  color: "$grey950",
   variants: {
     typography: typographyValues,
     fontWeight: {
@@ -1667,7 +1668,7 @@ function Text(_a) {
     TextStyle,
     __spreadProps(__spreadValues({}, props), {
       css: __spreadValues({
-        color: color ? "$" + color : "$grey950"
+        color: color ? "$" + color : "$dark600"
       }, props.css)
     })
   );
@@ -3079,10 +3080,10 @@ var import_themes9 = require("@radix-ui/themes");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
   fontFamily: "$default",
-  "svg": {
+  svg: {
     display: "none"
   },
-  "label": {
+  label: {
     display: "flex",
     alignItems: "center",
     gap: "$8",
@@ -3125,7 +3126,7 @@ var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
   variants: {
     color: {
       success: {
-        "label": {
+        label: {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(38, 167, 67, 0.50)"
           }
@@ -3140,7 +3141,7 @@ var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
       },
       blue: {},
       error: {
-        "label": {
+        label: {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(225, 86, 98, 0.50)"
           }
@@ -3156,7 +3157,7 @@ var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
     },
     disabled: {
       true: {
-        "label": {
+        label: {
           cursor: "not-allowed",
           opacity: 0.5,
           "&:focus button, &:hover button": {
@@ -3182,7 +3183,7 @@ var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
       color: "blue",
       disabled: false,
       css: {
-        "label": {
+        label: {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(56, 129, 255, 0.50)"
           }
@@ -3240,21 +3241,14 @@ var CheckboxGroupStyled = styled(import_themes9.CheckboxGroup.Root, {
     disabled: false
   }
 });
+var StyledItem = styled(import_themes9.CheckboxGroup.Item, {});
 function CheckboxGroup(_a) {
-  var _b = _a, {
-    children
-  } = _b, props = __objRest(_b, [
-    "children"
-  ]);
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 function CheckboxItem(_a) {
-  var _b = _a, {
-    children
-  } = _b, props = __objRest(_b, [
-    "children"
-  ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_themes9.CheckboxGroup.Item, __spreadProps(__spreadValues({}, props), { children }));
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledItem, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Filter.tsx
@@ -3549,9 +3543,6 @@ var BadgeStyled = styled(import_themes12.Badge, {
   fontFamily: "$default",
   borderRadius: "$sm",
   verticalAlign: "middle",
-  "svg": {
-    marginRight: "10px"
-  },
   variants: {
     color: {
       primary: {
@@ -9259,10 +9250,175 @@ function Tooltip({
   ] }) });
 }
 
-// src/components/Grid.tsx
+// src/components/MultiSelect.tsx
 var import_themes19 = require("@radix-ui/themes");
+var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
+var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
+var import_react14 = require("react");
+var import_react15 = __toESM(require("react"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var GridStyled = styled(import_themes19.Grid, {
+var StyledContent = styled(import_themes19.DropdownMenu.Content, {
+  backgroundColor: "$dark50",
+  borderRadius: "$sm",
+  padding: "$8 0",
+  boxShadow: "0px 2px 4px 0px #23354329, 0px 4px 4px 0px #23354314",
+  boxSizing: "border-box",
+  border: "1px solid $dark300"
+});
+var StyledTrigger = styled("div", {
+  minHeight: "40px",
+  borderRadius: "$sm",
+  cursor: "pointer",
+  display: "flex",
+  justifyContent: "start",
+  alignItems: "center",
+  padding: "$6 $14",
+  boxSizing: "border-box",
+  gap: "4px",
+  variants: {
+    color: {
+      default: {
+        border: "1px solid $dark300"
+      },
+      error: {
+        border: "1px solid $error400"
+      }
+    }
+  },
+  defaultVariants: {
+    color: "default"
+  }
+});
+var itemStyle = {
+  padding: "$4 $16",
+  minHeight: "$32",
+  height: "32px",
+  boxSizing: "border-box",
+  backgroundColor: "$dark50",
+  display: "block",
+  "&:hover": {
+    backgroundColor: "$dark100"
+  }
+};
+var BadgeWrapper = styled("div", {
+  flex: "1",
+  display: "flex",
+  justifyContent: "start",
+  flexWrap: "wrap",
+  gap: "4px"
+});
+var BadgeCloseBtn = styled("div", {
+  borderRadius: "100%",
+  width: "16px",
+  height: "16px",
+  minWidth: "16px",
+  minHeight: "16px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  "&:hover": {
+    backgroundColor: "$dark600"
+  }
+});
+var MultiSelect = import_react15.default.forwardRef(
+  ({
+    placeholder,
+    value: selectedValues = [],
+    onValueChange,
+    options,
+    color,
+    width = "100%"
+  }, fowardedRef) => {
+    var _a;
+    const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
+    const triggerRef = (0, import_react14.useRef)(null);
+    const labelByValue = (0, import_react14.useMemo)(() => {
+      return options.reduce((prev, curr) => {
+        return __spreadProps(__spreadValues({}, prev), {
+          [curr.value]: curr.label
+        });
+      }, {});
+    }, [options]);
+    const handleRemove = (0, import_react14.useCallback)(
+      (value) => {
+        const newValue = selectedValues.filter((v) => v !== value);
+        onValueChange == null ? void 0 : onValueChange(newValue);
+      },
+      [selectedValues, onValueChange]
+    );
+    const menuWidth = (_a = triggerRef.current) == null ? void 0 : _a.offsetWidth;
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes19.Theme, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_themes19.DropdownMenu.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_themes19.DropdownMenu.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        StyledTrigger,
+        {
+          css: {
+            width
+          },
+          ref: (r) => {
+            if (!r) return;
+            triggerRef.current = r;
+            if (fowardedRef) {
+              if (typeof fowardedRef === "function") fowardedRef(r);
+              else {
+                fowardedRef.current = r;
+              }
+            }
+          },
+          color,
+          children: [
+            selectedValues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelMedium", css: { flex: 1 }, children: placeholder != null ? placeholder : "Selecione" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BadgeWrapper, { children: selectedValues.map((value) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Badge, { size: "sm", color: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Flex2, { justify: "between", align: "center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "badgeSmall", color: "dark100", children: labelByValue[value] }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                  BadgeCloseBtn,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleRemove(value);
+                    },
+                    role: "button",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_fontawesome2.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faX, size: "xs" })
+                  }
+                )
+              ] }) }, value);
+            }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              import_react_fontawesome2.FontAwesomeIcon,
+              {
+                icon: isOpen ? import_free_solid_svg_icons2.faChevronUp : import_free_solid_svg_icons2.faChevronDown,
+                size: "sm",
+                color: colors.dark600
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        StyledContent,
+        {
+          css: {
+            width: menuWidth ? menuWidth + "px" : width
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            CheckboxGroup,
+            {
+              value: selectedValues,
+              onValueChange: (v) => {
+                onValueChange == null ? void 0 : onValueChange(v);
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Flex2, { direction: "column", gap: 8, children: options.map(({ value, label }, i) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Text, { typography: "labelSmall", children: label }) }, i)) })
+            }
+          )
+        }
+      )
+    ] }) });
+  }
+);
+
+// src/components/Grid.tsx
+var import_themes20 = require("@radix-ui/themes");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var GridStyled = styled(import_themes20.Grid, {
   display: "grid",
   variants: {
     display: {
@@ -9383,13 +9539,13 @@ var GridStyled = styled(import_themes19.Grid, {
 });
 function Grid(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Container.tsx
-var import_themes20 = require("@radix-ui/themes");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var ContainerStyled = styled(import_themes20.Container, {
+var import_themes21 = require("@radix-ui/themes");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var ContainerStyled = styled(import_themes21.Container, {
   variants: {
     size: {
       xs: { maxWidth: "576px" },
@@ -9418,13 +9574,13 @@ var ContainerStyled = styled(import_themes20.Container, {
 });
 function Container(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Section.tsx
-var import_themes21 = require("@radix-ui/themes");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var SectionStyled = styled(import_themes21.Section, {
+var import_themes22 = require("@radix-ui/themes");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var SectionStyled = styled(import_themes22.Section, {
   variants: {
     size: {
       xs: { maxWidth: "576px" },
@@ -9447,26 +9603,26 @@ var SectionStyled = styled(import_themes21.Section, {
 });
 function Section(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/FormFields/ErrorFormMessage.tsx
-var import_free_solid_svg_icons2 = require("@fortawesome/free-solid-svg-icons");
-var import_react_fontawesome2 = require("@fortawesome/react-fontawesome");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_free_solid_svg_icons3 = require("@fortawesome/free-solid-svg-icons");
+var import_react_fontawesome3 = require("@fortawesome/react-fontawesome");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var ErrorFormMessage = ({ message: message2 }) => {
   if (!message2) return null;
   if (typeof message2 !== "string") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Flex2, { justify: "start", align: "center", gap: 6, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_fontawesome2.FontAwesomeIcon, { icon: import_free_solid_svg_icons2.faXmarkCircle, color: colors.error600, size: "1x" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Text, { typography: "bodyXS", fontWeight: "medium", color: "error600", children: message2 })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Flex2, { justify: "start", align: "center", gap: 6, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_fontawesome3.FontAwesomeIcon, { icon: import_free_solid_svg_icons3.faXmarkCircle, color: colors.error600, size: "1x" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { typography: "bodyXS", fontWeight: "medium", color: "error600", children: message2 })
   ] });
 };
 
 // src/components/FormFields/FormLabel.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var FormLabel = ({
   name,
   label,
@@ -9474,7 +9630,7 @@ var FormLabel = ({
   required
 }) => {
   if (!label) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     Text,
     {
       typography: "labelMedium",
@@ -9483,7 +9639,7 @@ var FormLabel = ({
       id: `${name}-label`,
       children: [
         label,
-        !required && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Text, { color: "dark500", children: " (opcional)" })
+        !required && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Text, { color: "dark500", children: " (opcional)" })
       ]
     }
   );
@@ -9491,7 +9647,7 @@ var FormLabel = ({
 
 // src/components/FormFields/TextAreaFormField.tsx
 var import_react_hook_form = require("react-hook-form");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var TextAreaFormField = ({
   name,
   label,
@@ -9505,8 +9661,8 @@ var TextAreaFormField = ({
   } = (0, import_react_hook_form.useFormContext)();
   const haveError = !!errors[name];
   const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Flex2, { direction: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       FormLabel,
       {
         name,
@@ -9515,7 +9671,7 @@ var TextAreaFormField = ({
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       TextareaField,
       __spreadProps(__spreadValues({}, register(name, { required })), {
         placeholder,
@@ -9523,13 +9679,13 @@ var TextAreaFormField = ({
         "aria-labelledby": `${name}-label`
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/TextFormField.tsx
 var import_react_hook_form2 = require("react-hook-form");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var TextFormField = ({
   name,
   label,
@@ -9543,8 +9699,8 @@ var TextFormField = ({
   } = (0, import_react_hook_form2.useFormContext)();
   const haveError = !!errors[name];
   const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Flex2, { direction: "column", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       FormLabel,
       {
         name,
@@ -9553,7 +9709,7 @@ var TextFormField = ({
         haveError
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       TextField,
       __spreadProps(__spreadValues({}, register(name, { required })), {
         placeholder,
@@ -9561,18 +9717,71 @@ var TextFormField = ({
         "aria-labelledby": `${name}-label`
       })
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/Form.tsx
 var import_react_hook_form3 = require("react-hook-form");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Form = (_a) => {
   var _b = _a, { onSubmit, children } = _b, props = __objRest(_b, ["onSubmit", "children"]);
   const methods = (0, import_react_hook_form3.useForm)(props);
   const { handleSubmit } = methods;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("form", { onSubmit: handleSubmit(onSubmit), children }) }));
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("form", { onSubmit: handleSubmit(onSubmit), children }) }));
+};
+
+// src/components/FormFields/MultiSelectFormField.tsx
+var import_react_hook_form4 = require("react-hook-form");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var MultiSelectFormField = (_a) => {
+  var _b = _a, {
+    name,
+    label,
+    required
+  } = _b, rest = __objRest(_b, [
+    "name",
+    "label",
+    "required"
+  ]);
+  var _a2;
+  const {
+    formState: { errors }
+  } = (0, import_react_hook_form4.useFormContext)();
+  const { field } = (0, import_react_hook_form4.useController)({
+    name,
+    rules: {
+      required
+    },
+    defaultValue: []
+  });
+  const { value, onChange, ref, onBlur, disabled } = field;
+  const haveError = !!errors[name];
+  const errorMsg = (_a2 = errors[name]) == null ? void 0 : _a2.message;
+  const handleChange = (v) => {
+    onChange(v);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      FormLabel,
+      {
+        name,
+        label,
+        required,
+        haveError
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      MultiSelect,
+      __spreadValues({
+        value,
+        onValueChange: handleChange,
+        ref,
+        color: haveError ? "error" : "default"
+      }, rest)
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ErrorFormMessage, { message: errorMsg })
+  ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -9618,6 +9827,8 @@ var Form = (_a) => {
   InputStyled,
   MenuDropdown,
   Modal,
+  MultiSelect,
+  MultiSelectFormField,
   RadioGroup,
   RadioGroupStyled,
   RadioItem,