@lets-events/react 11.6.1 → 11.6.2

package/src/components/Dropdown.tsx

@@ -1,192 +1,192 @@
-import { useState, ComponentProps, ElementType } from "react";
-import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
-import { Theme, DropdownMenu as DropdownMenuRadix } from "@radix-ui/themes";
-import { typographyLabelValues } from "../types/typographyValues";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { colors } from "@lets-events/tokens";
-import { styled } from "../styles";
-
-const DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
-  fontFamily: "$default",
-  color: "$dark600",
-  letterSpacing: "0px",
-  padding: "$8 $16",
-  "&:hover, &:focus": {
-    backgroundColor: "$dark100",
-    border: "none",
-    outline: "none",
-    cursor: "pointer",
-  },
-  variants: {
-    typography: typographyLabelValues,
-    fontWeight: {
-      regular: { fontWeight: "$regular" },
-      medium: { fontWeight: "$medium" },
-      semibold: { fontWeight: "$semibold" },
-      bold: { fontWeight: "$bold" },
-    },
-  },
-});
-
-const DropdownMenuStyled = styled("div", {
-  fontFamily: "$default",
-  color: "$dark600",
-  letterSpacing: "0px",
-  cursor: "pointer",
-  border: "1px solid $dark300",
-  borderRadius: "$xs",
-  padding: "$8 $12",
-  width: "calc(100% - 24px)",
-  display: "flex",
-  button: {
-    fontFamily: "$default",
-    color: "$dark600",
-    letterSpacing: "0px",
-    backgroundColor: "transparent",
-    border: "none",
-    width: "100%",
-    outline: "none",
-    display: "flex",
-    alignItems: "center",
-    gap: "$8",
-    cursor: "pointer",
-    svg: {
-      marginLeft: "auto",
-    },
-  },
-  variants: {
-    typography: {
-      labelLarge: {
-        button: {
-          fontSize: "$labelLarge",
-          lineHeight: "$labelLarge",
-        },
-      },
-      labelMedium: {
-        button: {
-          fontSize: "$labelMedium",
-          lineHeight: "$labelMedium",
-        },
-      },
-      labelSmall: {
-        button: {
-          fontSize: "$labelSmall",
-          lineHeight: "$labelSmall",
-        },
-      },
-      labelExtraSmall: {
-        button: {
-          fontSize: "$labelExtraSmall",
-          lineHeight: "$labelExtraSmall",
-        },
-      },
-    },
-    fontWeight: {
-      regular: { button: { fontWeight: "$regular" } },
-      medium: { button: { fontWeight: "$medium" } },
-      semibold: { button: { fontWeight: "$semibold" } },
-      bold: { button: { fontWeight: "$bold" } },
-    },
-    color: {
-      default: {
-        border: "1px solid $dark300",
-      },
-      error: {
-        border: "1px solid $error400",
-      },
-    },
-  },
-});
-
-const DropdownMenuContentStyled = styled(DropdownMenuRadix.Content, {
-  background: "white",
-  border: "1px solid $dark300",
-  borderRadius: "$xs",
-  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08)",
-  width: "calc(var(--radix-popper-anchor-width) + 24px);",
-  minWidth: "100%",
-  marginTop: "3px",
-  maxHeight: "400px",
-  height: "100%",
-  position: "relative",
-  overflow: "auto",
-});
-
-export type DropdownMenuProps = ComponentProps<
-  typeof DropdownMenuRadix.Root
-> & {
-  as?: ElementType;
-  placeholder?: string;
-  fontWeight: "regular" | "medium" | "semibold" | "bold";
-  typography: "labelExtraSmall" | "labelSmall" | "labelMedium" | "labelLarge";
-  children: React.ReactNode;
-  color?: "default" | "error";
-};
-
-export type DropdownMenuItemProps = ComponentProps<
-  typeof DropdownMenuItemStyled
-> & {
-  as?: ElementType;
-  value: string;
-  typography: DropdownMenuProps["typography"];
-  fontWeight: DropdownMenuProps["fontWeight"];
-};
-
-/* Componente principal */
-export function DropdownMenu({
-  children,
-  placeholder,
-  typography,
-  color,
-  fontWeight,
-  ...props
-}: DropdownMenuProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <Theme>
-      <DropdownMenuRadix.Root open={isOpen} onOpenChange={setIsOpen} {...props}>
-        <DropdownMenuStyled
-          typography={typography}
-          fontWeight={fontWeight}
-          color={color}
-        >
-          <DropdownMenuRadix.Trigger>
-            <button aria-label={placeholder || "Filtrar"}>
-              <span>{placeholder || "Filtrar"}</span>
-              <FontAwesomeIcon
-                icon={isOpen ? faChevronUp : faChevronDown}
-                size="sm"
-                color={colors.dark600}
-              />
-            </button>
-          </DropdownMenuRadix.Trigger>
-          <DropdownMenuContentStyled
-            avoidCollisions={false}
-            align="start"
-            alignOffset={-14}
-          >
-            <DropdownMenuRadix.Group>{children}</DropdownMenuRadix.Group>
-          </DropdownMenuContentStyled>
-        </DropdownMenuStyled>
-      </DropdownMenuRadix.Root>
-    </Theme>
-  );
-}
-
-/* Componente de item */
-export function DropdownMenuItem({
-  children,
-  typography,
-  fontWeight,
-  ...props
-}: DropdownMenuItemProps) {
-  return (
-    <DropdownMenuItemStyled
-      typography={typography}
-      fontWeight={fontWeight}
-      {...props}
-    >
-      {children}
-    </DropdownMenuItemStyled>
-  );
-}
+import { useState, ComponentProps, ElementType } from "react";
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
+import { Theme, DropdownMenu as DropdownMenuRadix } from "@radix-ui/themes";
+import { typographyLabelValues } from "../types/typographyValues";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { colors } from "@lets-events/tokens";
+import { styled } from "../styles";
+
+const DropdownMenuItemStyled = styled(DropdownMenuRadix.Item, {
+  fontFamily: "$default",
+  color: "$dark600",
+  letterSpacing: "0px",
+  padding: "$8 $16",
+  "&:hover, &:focus": {
+    backgroundColor: "$dark100",
+    border: "none",
+    outline: "none",
+    cursor: "pointer",
+  },
+  variants: {
+    typography: typographyLabelValues,
+    fontWeight: {
+      regular: { fontWeight: "$regular" },
+      medium: { fontWeight: "$medium" },
+      semibold: { fontWeight: "$semibold" },
+      bold: { fontWeight: "$bold" },
+    },
+  },
+});
+
+const DropdownMenuStyled = styled("div", {
+  fontFamily: "$default",
+  color: "$dark600",
+  letterSpacing: "0px",
+  cursor: "pointer",
+  border: "1px solid $dark300",
+  borderRadius: "$xs",
+  padding: "$8 $12",
+  width: "calc(100% - 24px)",
+  display: "flex",
+  button: {
+    fontFamily: "$default",
+    color: "$dark600",
+    letterSpacing: "0px",
+    backgroundColor: "transparent",
+    border: "none",
+    width: "100%",
+    outline: "none",
+    display: "flex",
+    alignItems: "center",
+    gap: "$8",
+    cursor: "pointer",
+    svg: {
+      marginLeft: "auto",
+    },
+  },
+  variants: {
+    typography: {
+      labelLarge: {
+        button: {
+          fontSize: "$labelLarge",
+          lineHeight: "$labelLarge",
+        },
+      },
+      labelMedium: {
+        button: {
+          fontSize: "$labelMedium",
+          lineHeight: "$labelMedium",
+        },
+      },
+      labelSmall: {
+        button: {
+          fontSize: "$labelSmall",
+          lineHeight: "$labelSmall",
+        },
+      },
+      labelExtraSmall: {
+        button: {
+          fontSize: "$labelExtraSmall",
+          lineHeight: "$labelExtraSmall",
+        },
+      },
+    },
+    fontWeight: {
+      regular: { button: { fontWeight: "$regular" } },
+      medium: { button: { fontWeight: "$medium" } },
+      semibold: { button: { fontWeight: "$semibold" } },
+      bold: { button: { fontWeight: "$bold" } },
+    },
+    color: {
+      default: {
+        border: "1px solid $dark300",
+      },
+      error: {
+        border: "1px solid $error400",
+      },
+    },
+  },
+});
+
+const DropdownMenuContentStyled = styled(DropdownMenuRadix.Content, {
+  background: "white",
+  border: "1px solid $dark300",
+  borderRadius: "$xs",
+  boxShadow: "0px 4px 4px 0px rgba(35, 53, 67, 0.08)",
+  width: "calc(var(--radix-popper-anchor-width) + 24px);",
+  minWidth: "100%",
+  marginTop: "3px",
+  maxHeight: "400px",
+  height: "100%",
+  position: "relative",
+  overflow: "auto",
+});
+
+export type DropdownMenuProps = ComponentProps<
+  typeof DropdownMenuRadix.Root
+> & {
+  as?: ElementType;
+  placeholder?: string;
+  fontWeight: "regular" | "medium" | "semibold" | "bold";
+  typography: "labelExtraSmall" | "labelSmall" | "labelMedium" | "labelLarge";
+  children: React.ReactNode;
+  color?: "default" | "error";
+};
+
+export type DropdownMenuItemProps = ComponentProps<
+  typeof DropdownMenuItemStyled
+> & {
+  as?: ElementType;
+  value: string;
+  typography: DropdownMenuProps["typography"];
+  fontWeight: DropdownMenuProps["fontWeight"];
+};
+
+/* Componente principal */
+export function DropdownMenu({
+  children,
+  placeholder,
+  typography,
+  color,
+  fontWeight,
+  ...props
+}: DropdownMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Theme>
+      <DropdownMenuRadix.Root open={isOpen} onOpenChange={setIsOpen} {...props}>
+        <DropdownMenuStyled
+          typography={typography}
+          fontWeight={fontWeight}
+          color={color}
+        >
+          <DropdownMenuRadix.Trigger>
+            <button aria-label={placeholder || "Filtrar"}>
+              <span>{placeholder || "Filtrar"}</span>
+              <FontAwesomeIcon
+                icon={isOpen ? faChevronUp : faChevronDown}
+                size="sm"
+                color={colors.dark600}
+              />
+            </button>
+          </DropdownMenuRadix.Trigger>
+          <DropdownMenuContentStyled
+            avoidCollisions={false}
+            align="start"
+            alignOffset={-14}
+          >
+            <DropdownMenuRadix.Group>{children}</DropdownMenuRadix.Group>
+          </DropdownMenuContentStyled>
+        </DropdownMenuStyled>
+      </DropdownMenuRadix.Root>
+    </Theme>
+  );
+}
+
+/* Componente de item */
+export function DropdownMenuItem({
+  children,
+  typography,
+  fontWeight,
+  ...props
+}: DropdownMenuItemProps) {
+  return (
+    <DropdownMenuItemStyled
+      typography={typography}
+      fontWeight={fontWeight}
+      {...props}
+    >
+      {children}
+    </DropdownMenuItemStyled>
+  );
+}