@lets-events/react 12.9.3 → 12.9.4

package/package.json

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

package/src/components/Button/index.tsx

@@ -6,6 +6,18 @@ import Icon, { IconProps } from "../Icon";
 import { Flex } from "../Flex";
 
 type ButtonVariantProps = VariantProps<typeof ButtonStyled>;
+
+const getJustifyByTextAlign = (textAlign: ButtonVariantProps["textAlign"]) => {
+  switch (textAlign) {
+    case "left":
+      return "start";
+    case "right":
+      return "end";
+    default:
+      return "center";
+  }
+};
+
 export interface ButtonProps
   extends ComponentProps<typeof ButtonStyled>,
     ButtonVariantProps {
@@ -15,7 +27,7 @@ export interface ButtonProps
 
 export function Button({ asChild, children, loading, ...props }: ButtonProps) {
   const Component = asChild ? ButtonRadix : "button";
-  const { size, disabled } = props;
+  const { size, disabled, textAlign = "center" } = props;
 
   const spinnerSize = useMemo((): IconProps["size"] => {
     switch (size) {
@@ -36,7 +48,7 @@ export function Button({ asChild, children, loading, ...props }: ButtonProps) {
     <ButtonStyled as={Component} {...props} disabled={disabled || loading}>
       <div style={{ position: "relative" }}>
         <Flex
-          justify={"center"}
+          justify={getJustifyByTextAlign(textAlign)}
           align={"center"}
           css={{ visibility: loading ? "hidden" : undefined }}
         >

package/src/components/Button/styledComponents.ts

@@ -7,6 +7,7 @@ export const ButtonStyled = styled(ButtonRadix, {
   $$buttonBgColor: "$colors$grey50",
   $$buttonBorderColor: "inherit",
   $$buttonOutlinedColor: "inherit",
+  $$buttonToggleBgColor: "transparent",
   fontFamily: "$default",
   letterSpacing: 0,
   border: 0,
@@ -30,6 +31,7 @@ export const ButtonStyled = styled(ButtonRadix, {
         $$buttonColor: "$colors$brand500",
         $$buttonBorderColor: "$colors$brand600",
         $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(0, 78, 210, 0.2)",
         "&:hover": {
           $$buttonColor: "$colors$brand600",
           $$buttonBorderColor: "$colors$brand700",
@@ -49,6 +51,7 @@ export const ButtonStyled = styled(ButtonRadix, {
         $$buttonColor: "$colors$purple500",
         $$buttonBorderColor: "$colors$purple300",
         $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(137, 97, 216, 0.2)",
         "&:hover": {
           $$buttonColor: "$colors$purple600",
           $$buttonBorderColor: "$colors$purple700",
@@ -72,6 +75,7 @@ export const ButtonStyled = styled(ButtonRadix, {
         $$buttonColor: "$colors$error600",
         $$buttonBorderColor: "$colors$error500",
         $$buttonOutlinedColor: " $colors$error500",
+        $$buttonToggleBgColor: "rgba(219, 54, 68, 0.2)",
         "&:hover": {
           $$buttonColor: "$colors$error600",
           $$buttonBorderColor: "$colors$error700",
@@ -92,6 +96,7 @@ export const ButtonStyled = styled(ButtonRadix, {
         $$buttonColor: "$colors$info500",
         $$buttonBorderColor: "$colors$info600",
         $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(2, 120, 254, 0.2)",
         "&:hover": {
           $$buttonColor: "$colors$info600",
           $$buttonBorderColor: "$colors$info700",
@@ -112,6 +117,7 @@ export const ButtonStyled = styled(ButtonRadix, {
         $$buttonColor: "$colors$success500",
         $$buttonBorderColor: "$colors$success600",
         $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(38, 167, 67, 0.2)",
         "&:hover": {
           $$buttonColor: "$colors$success600",
           $$buttonBorderColor: "$colors$success700",
@@ -132,6 +138,7 @@ export const ButtonStyled = styled(ButtonRadix, {
         $$buttonColor: "$colors$warning500",
         $$buttonBorderColor: "$colors$warning600",
         $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(255, 193, 7, 0.2)",
         "&:hover": {
           $$buttonColor: "$colors$warning600",
           $$buttonBorderColor: "$colors$warning700",
@@ -152,6 +159,7 @@ export const ButtonStyled = styled(ButtonRadix, {
         $$buttonColor: "$colors$neutral600",
         $$buttonBorderColor: "$colors$neutral300",
         $$buttonOutlinedColor: "$$buttonColor",
+        $$buttonToggleBgColor: "rgba(76, 79, 84, 0.2)",
         "&:hover": {
           $$buttonColor: "$colors$neutral700",
           $$buttonBgColor: "$colors$neutral100",
@@ -172,6 +180,7 @@ export const ButtonStyled = styled(ButtonRadix, {
         $$buttonColor: "$colors$neutral50",
         $$buttonBorderColor: "$colors$neutral300",
         $$buttonOutlinedColor: "$colors$neutral50",
+        $$buttonToggleBgColor: "rgba(255, 255, 255, 0.2)",
         "&:hover": {
           $$buttonColor: "$colors$neutral100",
           $$buttonBorderColor: "$colors$neutral300",
@@ -224,6 +233,18 @@ export const ButtonStyled = styled(ButtonRadix, {
         height: "unset",
         color: "$$buttonColor",
       },
+      toggle: {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        padding: "$6 $12",
+        border: 0,
+        height: "2rem",
+        color: "$$buttonColor",
+        borderRadius: ".5rem",
+        "&:hover": {
+          backgroundColor: "$$buttonToggleBgColor",
+        },
+      },
       contained: {
         color: "$grey50",
         backgroundColor: "$$buttonColor",
@@ -249,7 +270,7 @@ export const ButtonStyled = styled(ButtonRadix, {
       menuDropdownItem: {
         backgroundColor: "transparent",
         boxShadow: "none",
-        padding: "0.25rem 0.5rem",
+        padding: "0.5rem 1rem",
         border: 0,
         height: "unset",
         color: "$$buttonColor",
@@ -260,6 +281,20 @@ export const ButtonStyled = styled(ButtonRadix, {
           backgroundColor: "$dark100",
         },
       },
+      menuDropdownItemDelete: {
+        backgroundColor: "transparent",
+        boxShadow: "none",
+        padding: "0.5rem 1rem",
+        border: 0,
+        height: "unset",
+        color: "$$buttonColor",
+        width: "100%",
+        borderRadius: 0,
+        whiteSpace: "nowrap",
+        "&:hover": {
+          backgroundColor: "$red100",
+        },
+      }
     },
     fontWeight: {
       regular: { fontWeight: "$regular" },
@@ -267,6 +302,11 @@ export const ButtonStyled = styled(ButtonRadix, {
       semibold: { fontWeight: "$semibold" },
       bold: { fontWeight: "$bold" },
     },
+    textAlign: {
+      center: { textAlign: "center", justifyContent: "center" },
+      left: { textAlign: "left", justifyContent: "flex-start" },
+      right: { textAlign: "right", justifyContent: "flex-end" },
+    },
     outlinedBgColor: {
       neutral: {},
       transparent: {
@@ -302,6 +342,7 @@ export const ButtonStyled = styled(ButtonRadix, {
     color: "brand",
     size: "medium",
     fontWeight: "medium",
+    textAlign: "center",
     outlinedBgColor: "transparent",
   },
 });

package/src/components/Drawer/index.tsx

@@ -69,7 +69,10 @@ export function Drawer({
         css={{
           zIndex: zIndex + 1,
           width: width ?? "34.25rem",
-          maxWidth: "100%"
+          maxWidth: "100%",
+          "@md": {
+            width: "100%",
+          }
         }}
         open={isOpen}
       >

package/src/components/MenuDropdown/styledComponents.ts

@@ -19,7 +19,7 @@ export const MenuItemsContainerStyled = styled("div", {
   top: "2.125rem",
   zIndex: "999",
   width: "fit-content",
-  minWidth: "5rem",
+  minWidth: "6rem",
   background: "#fff",
   maxWidth: "18.75rem",
   margin: "auto",

package/src/components/ToggleElement/index.tsx

@@ -0,0 +1,58 @@
+import { ReactNode, useState } from "react";
+import { Button, ButtonProps } from "../Button";
+import { Icon } from "../Icon";
+
+export interface ToggleElementProps {
+  children: ReactNode;
+  label: ReactNode;
+  openedLabel?: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  hideButtonWhenOpen?: boolean;
+  buttonProps?: Omit<ButtonProps, "children" | "onClick">;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function ToggleElement({
+  children,
+  label,
+  openedLabel,
+  defaultOpen = false,
+  open,
+  hideButtonWhenOpen = true,
+  buttonProps,
+  onOpenChange,
+}: ToggleElementProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : internalOpen;
+
+  const handleClick = () => {
+    const nextOpen = !isOpen;
+
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+
+    onOpenChange?.(nextOpen);
+  };
+
+  return (
+    <>
+      {(!isOpen || !hideButtonWhenOpen) && (
+        <Button
+          type="button"
+          variant="toggle"
+          color="brand"
+          size="small"
+          {...buttonProps}
+          onClick={handleClick}
+        >
+          {!isOpen && <Icon name="plus" size="md" />}
+          {isOpen ? openedLabel ?? label : label}
+        </Button>
+      )}
+      {isOpen && children}
+    </>
+  );
+}

package/src/index.tsx

@@ -29,7 +29,7 @@ export * from "./components/Toast";
 export * from "./components/Tooltip";
 export * from "./components/MultiSelect";
 export * from "./components/Divider";
-
+export * from "./components/ToggleElement";
 // Layouts
 export * from "./components/Flex";
 export * from "./components/Box";