@lets-events/react 11.3.0 → 11.4.0

package/dist/index.mjs

@@ -1557,7 +1557,6 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var TextStyle = styled(TextRadix, {
   fontFamily: "$default",
   lineHeight: "$base",
-  color: "$grey950",
   variants: {
     typography: typographyValues,
     fontWeight: {
@@ -1574,7 +1573,7 @@ function Text(_a) {
     TextStyle,
     __spreadProps(__spreadValues({}, props), {
       css: __spreadValues({
-        color: color ? "$" + color : "$grey950"
+        color: color ? "$" + color : "$dark600"
       }, props.css)
     })
   );
@@ -2986,10 +2985,10 @@ import { CheckboxGroup as CheckboxGroupRadix } from "@radix-ui/themes";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
   fontFamily: "$default",
-  "svg": {
+  svg: {
     display: "none"
   },
-  "label": {
+  label: {
     display: "flex",
     alignItems: "center",
     gap: "$8",
@@ -3032,7 +3031,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
   variants: {
     color: {
       success: {
-        "label": {
+        label: {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(38, 167, 67, 0.50)"
           }
@@ -3047,7 +3046,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
       },
       blue: {},
       error: {
-        "label": {
+        label: {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(225, 86, 98, 0.50)"
           }
@@ -3063,7 +3062,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
     },
     disabled: {
       true: {
-        "label": {
+        label: {
           cursor: "not-allowed",
           opacity: 0.5,
           "&:focus button, &:hover button": {
@@ -3089,7 +3088,7 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
       color: "blue",
       disabled: false,
       css: {
-        "label": {
+        label: {
           "&:focus button, &:hover button": {
             boxShadow: "0px 0px 0px 4px rgba(56, 129, 255, 0.50)"
           }
@@ -3147,21 +3146,14 @@ var CheckboxGroupStyled = styled(CheckboxGroupRadix.Root, {
     disabled: false
   }
 });
+var StyledItem = styled(CheckboxGroupRadix.Item, {});
 function CheckboxGroup(_a) {
-  var _b = _a, {
-    children
-  } = _b, props = __objRest(_b, [
-    "children"
-  ]);
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
   return /* @__PURE__ */ jsx9(CheckboxGroupStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 function CheckboxItem(_a) {
-  var _b = _a, {
-    children
-  } = _b, props = __objRest(_b, [
-    "children"
-  ]);
-  return /* @__PURE__ */ jsx9(CheckboxGroupRadix.Item, __spreadProps(__spreadValues({}, props), { children }));
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx9(StyledItem, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Filter.tsx
@@ -3456,9 +3448,6 @@ var BadgeStyled = styled(BadgeRadix, {
   fontFamily: "$default",
   borderRadius: "$sm",
   verticalAlign: "middle",
-  "svg": {
-    marginRight: "10px"
-  },
   variants: {
     color: {
       primary: {
@@ -9166,9 +9155,178 @@ function Tooltip({
   ] }) });
 }
 
+// src/components/MultiSelect.tsx
+import { DropdownMenu as DropdownMenu3, Theme as Theme4 } from "@radix-ui/themes";
+import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
+import {
+  faChevronDown,
+  faChevronUp,
+  faX
+} from "@fortawesome/free-solid-svg-icons";
+import { useCallback as useCallback2, useMemo, useRef as useRef4, useState as useState6 } from "react";
+import React7 from "react";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+var StyledContent = styled(DropdownMenu3.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 = React7.forwardRef(
+  ({
+    placeholder,
+    value: selectedValues = [],
+    onValueChange,
+    options,
+    color,
+    width = "100%"
+  }, fowardedRef) => {
+    var _a;
+    const [isOpen, setIsOpen] = useState6(false);
+    const triggerRef = useRef4(null);
+    const labelByValue = useMemo(() => {
+      return options.reduce((prev, curr) => {
+        return __spreadProps(__spreadValues({}, prev), {
+          [curr.value]: curr.label
+        });
+      }, {});
+    }, [options]);
+    const handleRemove = useCallback2(
+      (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__ */ jsx26(Theme4, { children: /* @__PURE__ */ jsxs14(DropdownMenu3.Root, { open: isOpen, onOpenChange: () => setIsOpen(false), children: [
+      /* @__PURE__ */ jsx26(DropdownMenu3.Trigger, { onClick: () => setIsOpen(true), children: /* @__PURE__ */ jsxs14(
+        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__ */ jsx26(Text, { typography: "labelMedium", css: { flex: 1 }, children: placeholder != null ? placeholder : "Selecione" }) : /* @__PURE__ */ jsx26(BadgeWrapper, { children: selectedValues.map((value) => {
+              return /* @__PURE__ */ jsx26(Badge, { size: "sm", color: "dark", children: /* @__PURE__ */ jsxs14(Flex2, { justify: "between", align: "center", children: [
+                /* @__PURE__ */ jsx26(Text, { typography: "badgeSmall", color: "dark100", children: labelByValue[value] }),
+                /* @__PURE__ */ jsx26(
+                  BadgeCloseBtn,
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleRemove(value);
+                    },
+                    role: "button",
+                    children: /* @__PURE__ */ jsx26(FontAwesomeIcon2, { icon: faX, size: "xs" })
+                  }
+                )
+              ] }) }, value);
+            }) }),
+            /* @__PURE__ */ jsx26(
+              FontAwesomeIcon2,
+              {
+                icon: isOpen ? faChevronUp : faChevronDown,
+                size: "sm",
+                color: colors.dark600
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx26(
+        StyledContent,
+        {
+          css: {
+            width: menuWidth ? menuWidth + "px" : width
+          },
+          children: /* @__PURE__ */ jsx26(
+            CheckboxGroup,
+            {
+              value: selectedValues,
+              onValueChange: (v) => {
+                onValueChange == null ? void 0 : onValueChange(v);
+              },
+              children: /* @__PURE__ */ jsx26(Flex2, { direction: "column", gap: 8, children: options.map(({ value, label }, i) => /* @__PURE__ */ jsx26(CheckboxItem, { value, css: itemStyle, children: /* @__PURE__ */ jsx26(Text, { typography: "labelSmall", children: label }) }, i)) })
+            }
+          )
+        }
+      )
+    ] }) });
+  }
+);
+
 // src/components/Grid.tsx
 import { Grid as GridRadix } from "@radix-ui/themes";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var GridStyled = styled(GridRadix, {
   display: "grid",
   variants: {
@@ -9290,12 +9448,12 @@ var GridStyled = styled(GridRadix, {
 });
 function Grid(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx26(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx27(GridStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Container.tsx
 import { Container as ContainerRadix } from "@radix-ui/themes";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var ContainerStyled = styled(ContainerRadix, {
   variants: {
     size: {
@@ -9325,12 +9483,12 @@ var ContainerStyled = styled(ContainerRadix, {
 });
 function Container(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx27(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx28(ContainerStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/Section.tsx
 import { Section as SectionRadix } from "@radix-ui/themes";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var SectionStyled = styled(SectionRadix, {
   variants: {
     size: {
@@ -9354,26 +9512,26 @@ var SectionStyled = styled(SectionRadix, {
 });
 function Section(_a) {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ jsx28(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
+  return /* @__PURE__ */ jsx29(SectionStyled, __spreadProps(__spreadValues({}, props), { children }));
 }
 
 // src/components/FormFields/ErrorFormMessage.tsx
 import { faXmarkCircle } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as FontAwesomeIcon2 } from "@fortawesome/react-fontawesome";
-import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
+import { FontAwesomeIcon as FontAwesomeIcon3 } from "@fortawesome/react-fontawesome";
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
 var ErrorFormMessage = ({ message: message2 }) => {
   if (!message2) return null;
   if (typeof message2 !== "string") {
     return null;
   }
-  return /* @__PURE__ */ jsxs14(Flex2, { justify: "start", align: "center", gap: 6, children: [
-    /* @__PURE__ */ jsx29(FontAwesomeIcon2, { icon: faXmarkCircle, color: colors.error600, size: "1x" }),
-    /* @__PURE__ */ jsx29(Text, { typography: "bodyXS", fontWeight: "medium", color: "error600", children: message2 })
+  return /* @__PURE__ */ jsxs15(Flex2, { justify: "start", align: "center", gap: 6, children: [
+    /* @__PURE__ */ jsx30(FontAwesomeIcon3, { icon: faXmarkCircle, color: colors.error600, size: "1x" }),
+    /* @__PURE__ */ jsx30(Text, { typography: "bodyXS", fontWeight: "medium", color: "error600", children: message2 })
   ] });
 };
 
 // src/components/FormFields/FormLabel.tsx
-import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 var FormLabel = ({
   name,
   label,
@@ -9381,7 +9539,7 @@ var FormLabel = ({
   required
 }) => {
   if (!label) return null;
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     Text,
     {
       typography: "labelMedium",
@@ -9390,7 +9548,7 @@ var FormLabel = ({
       id: `${name}-label`,
       children: [
         label,
-        !required && /* @__PURE__ */ jsx30(Text, { color: "dark500", children: " (opcional)" })
+        !required && /* @__PURE__ */ jsx31(Text, { color: "dark500", children: " (opcional)" })
       ]
     }
   );
@@ -9398,7 +9556,7 @@ var FormLabel = ({
 
 // src/components/FormFields/TextAreaFormField.tsx
 import { useFormContext } from "react-hook-form";
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 var TextAreaFormField = ({
   name,
   label,
@@ -9412,8 +9570,8 @@ var TextAreaFormField = ({
   } = useFormContext();
   const haveError = !!errors[name];
   const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
-  return /* @__PURE__ */ jsxs16(Flex2, { direction: "column", children: [
-    /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsxs17(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ jsx32(
       FormLabel,
       {
         name,
@@ -9422,7 +9580,7 @@ var TextAreaFormField = ({
         haveError
       }
     ),
-    /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx32(
       TextareaField,
       __spreadProps(__spreadValues({}, register(name, { required })), {
         placeholder,
@@ -9430,13 +9588,13 @@ var TextAreaFormField = ({
         "aria-labelledby": `${name}-label`
       })
     ),
-    /* @__PURE__ */ jsx31(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx32(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
 // src/components/FormFields/TextFormField.tsx
 import { useFormContext as useFormContext2 } from "react-hook-form";
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 var TextFormField = ({
   name,
   label,
@@ -9450,8 +9608,8 @@ var TextFormField = ({
   } = useFormContext2();
   const haveError = !!errors[name];
   const errorMsg = (_a = errors[name]) == null ? void 0 : _a.message;
-  return /* @__PURE__ */ jsxs17(Flex2, { direction: "column", children: [
-    /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsxs18(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ jsx33(
       FormLabel,
       {
         name,
@@ -9460,7 +9618,7 @@ var TextFormField = ({
         haveError
       }
     ),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       TextField,
       __spreadProps(__spreadValues({}, register(name, { required })), {
         placeholder,
@@ -9468,7 +9626,7 @@ var TextFormField = ({
         "aria-labelledby": `${name}-label`
       })
     ),
-    /* @__PURE__ */ jsx32(ErrorFormMessage, { message: errorMsg })
+    /* @__PURE__ */ jsx33(ErrorFormMessage, { message: errorMsg })
   ] });
 };
 
@@ -9477,12 +9635,65 @@ import {
   FormProvider,
   useForm
 } from "react-hook-form";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Form = (_a) => {
   var _b = _a, { onSubmit, children } = _b, props = __objRest(_b, ["onSubmit", "children"]);
   const methods = useForm(props);
   const { handleSubmit } = methods;
-  return /* @__PURE__ */ jsx33(FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ jsx33("form", { onSubmit: handleSubmit(onSubmit), children }) }));
+  return /* @__PURE__ */ jsx34(FormProvider, __spreadProps(__spreadValues({}, methods), { children: /* @__PURE__ */ jsx34("form", { onSubmit: handleSubmit(onSubmit), children }) }));
+};
+
+// src/components/FormFields/MultiSelectFormField.tsx
+import { useController, useFormContext as useFormContext3 } from "react-hook-form";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+var MultiSelectFormField = (_a) => {
+  var _b = _a, {
+    name,
+    label,
+    required
+  } = _b, rest = __objRest(_b, [
+    "name",
+    "label",
+    "required"
+  ]);
+  var _a2;
+  const {
+    formState: { errors }
+  } = useFormContext3();
+  const { field } = 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__ */ jsxs19(Flex2, { direction: "column", children: [
+    /* @__PURE__ */ jsx35(
+      FormLabel,
+      {
+        name,
+        label,
+        required,
+        haveError
+      }
+    ),
+    /* @__PURE__ */ jsx35(
+      MultiSelect,
+      __spreadValues({
+        value,
+        onValueChange: handleChange,
+        ref,
+        color: haveError ? "error" : "default"
+      }, rest)
+    ),
+    /* @__PURE__ */ jsx35(ErrorFormMessage, { message: errorMsg })
+  ] });
 };
 export {
   Alert,
@@ -9527,6 +9738,8 @@ export {
   InputStyled,
   MenuDropdown,
   Modal,
+  MultiSelect,
+  MultiSelectFormField,
   RadioGroup,
   RadioGroupStyled,
   RadioItem,

package/package.json

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